/* Rats Game — « le tapis » : la page est une table de jeu vue de dessus, chaque contenu est une carte posée dessus. */
:root {
  --table: #0a1d17;      /* tapis (fond) */
  --table-2: #102c23;    /* tapis relevé */
  --table-3: #163a2f;
  --line: rgba(236, 229, 212, .11);
  --line-2: rgba(236, 229, 212, .2);
  --chalk: #ece5d4;      /* texte sur le tapis */
  --chalk-2: rgba(236, 229, 212, .66);
  --chalk-3: rgba(236, 229, 212, .42);
  --paper: #f3ecdc;      /* carton des cartes */
  --paper-2: #e6dcc6;
  --ink: #1a1611;        /* encre sur carton */
  --ink-2: #5d5546;
  --brass: #d6b066;      /* accent laiton */
  --brass-2: #b48d45;
  --mint: #3de0a6;       /* signature Rats Game : en ligne / validé */
  --danger: #ff6a55;
  --u-red: #e5403a; --u-yellow: #f4bf3d; --u-green: #2bb069; --u-blue: #2d78e3; --u-black: #15130f;

  --display: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --body: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.7, 0, .84, 0);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
  --r: 18px;
  --wrap: 1180px;
  --nav-h: 68px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
body {
  margin: 0; min-height: 100%; background: var(--table); color: var(--chalk);
  font: 400 16px/1.55 var(--body); letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--table); }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--brass); color: var(--ink); }
[hidden] { display: none !important; }

/* ---------- ambiance du tapis ---------- */
.felt { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.felt .spot {
  position: absolute; left: 0; top: 0; width: 1400px; height: 1400px; margin: -700px 0 0 -700px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(40, 104, 82, .55), rgba(22, 64, 50, .22) 55%, transparent);
  will-change: transform; transform: translate3d(50vw, 20vh, 0);
}
.felt .grain {
  position: absolute; inset: -50%; opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .6  0 0 0 0 .55  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.felt .vig { position: absolute; inset: 0; box-shadow: inset 0 0 220px 40px rgba(0, 0, 0, .55); }
.felt .seam { position: absolute; inset: 14px; border: 1px dashed rgba(214, 176, 102, .09); border-radius: 28px; }

/* ---------- mise en page ---------- */
.app { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
main { flex: 1; padding-top: calc(var(--nav-h) + 28px); }
.page { padding-bottom: 96px; }

/* ---------- typo ---------- */
.d { font-family: var(--display); font-variation-settings: "wdth" 78, "opsz" 96; font-weight: 800; letter-spacing: -.025em; line-height: .92; text-wrap: balance; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
.h-xl { font-size: clamp(50px, 8.2vw, 118px); }
.h-l { font-size: clamp(38px, 5.4vw, 74px); }
.h-m { font-size: clamp(28px, 3.2vw, 42px); }
.h-s { font-size: 24px; }
.eyebrow { font: 500 11.5px/1.2 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--brass); display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 18px; height: 1px; background: currentColor; }
.lead { font-size: clamp(16px, 1.4vw, 18px); line-height: 1.55; color: var(--chalk-2); max-width: 56ch; margin: 0; text-wrap: pretty; }
.muted { color: var(--chalk-2); }
.dim { color: var(--chalk-3); }
.mono { font-family: var(--mono); }
.num { font-variant-numeric: tabular-nums; }
.brass { color: var(--brass); }

/* ---------- boutons ---------- */
.btn {
  --bg: var(--paper); --fg: var(--ink);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 24px; border-radius: 14px; background: var(--bg); color: var(--fg);
  font: 600 15px/1 var(--body); letter-spacing: -.01em; white-space: nowrap;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 -2px 0 rgba(0, 0, 0, .12) inset, 0 4px 0 var(--brass-2), 0 14px 30px -12px rgba(0, 0, 0, .7);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), background .2s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 -2px 0 rgba(0, 0, 0, .12) inset, 0 6px 0 var(--brass-2), 0 20px 34px -12px rgba(0, 0, 0, .75); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 1px 0 var(--brass-2), 0 6px 14px -8px rgba(0, 0, 0, .7); transition-duration: .08s; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn.ghost { --bg: transparent; --fg: var(--chalk); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1px var(--brass); background: rgba(214, 176, 102, .06); }
.btn.ghost:active { box-shadow: inset 0 0 0 1px var(--brass); }
.btn.danger { --bg: var(--danger); --fg: #2a0b05; box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 0 4px 0 #b8402f, 0 14px 30px -12px rgba(0, 0, 0, .7); }
.btn.sm { height: 40px; padding: 0 16px; font-size: 14px; border-radius: 11px; }
.btn.xs { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 9px; box-shadow: inset 0 0 0 1px var(--line-2); --bg: transparent; --fg: var(--chalk); }
.btn.xs:hover { box-shadow: inset 0 0 0 1px var(--brass); transform: none; }
.btn.xs.danger { --fg: var(--danger); box-shadow: inset 0 0 0 1px rgba(255, 106, 85, .35); }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btn .spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }
.link { color: var(--brass); border-bottom: 1px solid rgba(214, 176, 102, .35); transition: border-color .2s; }
.link:hover { border-color: var(--brass); }

/* ---------- navigation ---------- */
.nav { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 50; padding-top: 12px; pointer-events: none; }
.nav-in {
  pointer-events: auto; display: flex; align-items: center; gap: 18px; height: var(--nav-h);
  max-width: calc(var(--wrap) + 24px); margin: 0 auto; padding: 0 12px 0 18px; border-radius: 20px;
  background: rgba(9, 26, 20, .72); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: inset 0 0 0 1px var(--line), 0 20px 50px -24px rgba(0, 0, 0, .8);
  margin-left: max(12px, env(safe-area-inset-left, 0px)); margin-right: max(12px, env(safe-area-inset-right, 0px));
}
@media (min-width: 1205px) { .nav-in { margin-left: auto; margin-right: auto; } }
.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.brand svg { width: 38px; height: 38px; overflow: visible; }
.brand svg .c1, .brand svg .c2 { transition: transform .5s var(--ease-out); transform-origin: 50% 90%; transform-box: fill-box; }
.brand:hover svg .c1 { transform: rotate(-14deg) translateX(-2px); }
.brand:hover svg .c2 { transform: rotate(12deg) translateX(2px); }
.brand b { font: 800 19px/1 var(--display); font-variation-settings: "wdth" 80; letter-spacing: -.02em; }
.brand b span { color: var(--brass); }
.links { position: relative; display: flex; align-items: center; gap: 2px; margin: 0 auto; }
.links a { position: relative; z-index: 1; padding: 10px 14px; border-radius: 11px; font-size: 14.5px; font-weight: 500; color: var(--chalk-2); transition: color .25s; }
.links a:hover, .links a.on { color: var(--chalk); }
.links .ind { position: absolute; z-index: 0; top: 0; left: 0; height: 100%; border-radius: 11px; background: rgba(236, 229, 212, .07); box-shadow: inset 0 0 0 1px var(--line); transition: transform .55s var(--ease-out), width .55s var(--ease-out), opacity .3s; opacity: 0; }
.links .ind::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--brass); }
.nav-r { display: flex; align-items: center; gap: 8px; flex: none; }
.ic-btn { position: relative; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: var(--chalk-2); transition: background .2s, color .2s; }
.ic-btn:hover, .ic-btn.on { background: rgba(236, 229, 212, .07); color: var(--chalk); }
.ic-btn svg { width: 21px; height: 21px; }
.badge { position: absolute; top: 5px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--brass); color: var(--ink); font: 700 11px/18px var(--body); text-align: center; box-shadow: 0 0 0 3px #0c231b; }
.badge.pop { animation: pop .6s var(--ease-out); }
@keyframes pop { 0% { transform: scale(0); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } }
.me-chip { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px 0 4px; border-radius: 13px; transition: background .2s; }
.me-chip:hover, .me-chip[aria-expanded="true"] { background: rgba(236, 229, 212, .07); }
.me-chip .nm { font-size: 14px; font-weight: 600; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-chip svg { width: 14px; height: 14px; color: var(--chalk-3); transition: transform .3s var(--ease-out); }
.me-chip[aria-expanded="true"] svg { transform: rotate(180deg); }
.burger { display: none; width: 44px; height: 44px; border-radius: 12px; place-items: center; }
.burger i { display: block; width: 20px; height: 2px; background: var(--chalk); border-radius: 2px; position: relative; transition: background .2s; }
.burger i::before, .burger i::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--chalk); border-radius: 2px; transition: transform .4s var(--ease-out); }
.burger i::before { transform: translateY(-6px); } .burger i::after { transform: translateY(6px); }
.menu-open .burger i { background: transparent; }
.menu-open .burger i::before { transform: rotate(45deg); } .menu-open .burger i::after { transform: rotate(-45deg); }

.drop {
  position: fixed; z-index: 55; width: 240px; padding: 8px; border-radius: 16px; background: var(--paper); color: var(--ink);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(0, 0, 0, .08); transform-origin: top right;
}
.drop .who { display: flex; gap: 12px; align-items: center; padding: 10px 10px 14px; border-bottom: 1px dashed rgba(26, 22, 17, .18); margin-bottom: 6px; }
.drop .who b { display: block; font-size: 15px; }
.drop .who small { color: var(--ink-2); font: 500 11px/1.4 var(--mono); letter-spacing: .06em; }
.drop a, .drop button { display: flex; width: 100%; align-items: center; gap: 12px; padding: 11px 10px; border-radius: 10px; font-size: 14.5px; font-weight: 500; text-align: left; }
.drop a:hover, .drop button:hover { background: rgba(26, 22, 17, .07); }
.drop svg { width: 18px; height: 18px; color: var(--ink-2); }
.drop .out { color: #b4311f; } .drop .out svg { color: #b4311f; }

.mmenu { position: fixed; inset: 0; z-index: 45; background: rgba(8, 22, 17, .97); padding: calc(var(--nav-h) + 40px + env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px)) 40px max(24px, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; gap: 4px; }
.mmenu a { font: 800 44px/1.12 var(--display); font-variation-settings: "wdth" 78; letter-spacing: -.02em; color: var(--chalk-2); display: flex; align-items: baseline; gap: 14px; }
.mmenu a.on { color: var(--chalk); }
.mmenu a.on::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--brass); }
.mmenu .foot { margin-top: auto; display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 1100px) {
  .links { display: none; }
  .burger { display: grid; }
  .nav-r { margin-left: auto; }
  .me-chip .nm, .me-chip svg { display: none; }
  .me-chip { padding: 0 4px; }
}
@media (max-width: 420px) { .brand b { font-size: 17px; } .brand svg { width: 32px; height: 32px; } .nav-in { gap: 6px; } }

/* ---------- avatars & badges ---------- */
.av { --s: 36px; width: var(--s); height: var(--s); flex: none; border-radius: 30%; overflow: hidden; display: grid; place-items: center; background: var(--c, var(--table-3)); color: var(--paper); font: 800 calc(var(--s) * .42)/1 var(--display); font-variation-settings: "wdth" 85; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); position: relative; }
.av img { width: 100%; height: 100%; object-fit: cover; }
.av-wrap { position: relative; flex: none; }
.av-wrap .dot { position: absolute; right: -2px; bottom: -2px; width: 12px; height: 12px; border-radius: 50%; background: var(--chalk-3); box-shadow: 0 0 0 3px var(--table-2); }
.av-wrap .dot.on { background: var(--mint); }
.av-wrap .dot.on::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--mint); animation: ping 2s var(--ease-out) infinite; }
@keyframes ping { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(2.6); opacity: 0; } }
.role { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 6px; font: 600 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.role.admin { background: var(--brass); color: var(--ink); }
.role.gerant { box-shadow: inset 0 0 0 1px var(--mint); color: var(--mint); }
.role.demo { box-shadow: inset 0 0 0 1px var(--line-2); color: var(--chalk-3); }

/* ---------- surfaces ---------- */
.sheet { background: linear-gradient(180deg, rgba(22, 58, 47, .72), rgba(16, 44, 35, .72)); border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -40px rgba(0, 0, 0, .9); padding: 26px; min-width: 0; }
.paper { background: var(--paper); color: var(--ink); border-radius: var(--r); padding: 28px; box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .95), 0 8px 18px -10px rgba(0, 0, 0, .5); position: relative; min-width: 0; }
.paper .muted { color: var(--ink-2); }
.paper .eyebrow { color: var(--brass-2); }
.sec { margin-top: clamp(64px, 8vw, 88px); }
.sec-h { display: flex; align-items: end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 24px; }
.sec-h > div { display: grid; gap: 12px; }
.phead { display: grid; gap: 16px; padding: 28px 0 32px; }
.phead .row { display: flex; align-items: flex-end; justify-content: flex-start; gap: 18px clamp(28px, 5vw, 64px); flex-wrap: wrap; }
.phead .row > .lead { padding-bottom: .4em; max-width: 42ch !important; flex: 1 1 300px; }
.phead .row > div { padding-bottom: .3em; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.grid-side { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 900px) { .grid2, .grid-side { grid-template-columns: minmax(0, 1fr); } }
.stack { display: grid; gap: 12px; }
.row-c { display: flex; align-items: center; gap: 12px; min-width: 0; }
.spacer { flex: 1; }
.empty { display: grid; justify-items: center; text-align: center; gap: 12px; padding: 48px 20px; color: var(--chalk-2); border-radius: var(--r); border: 1px dashed var(--line-2); }
.empty .ill { width: 84px; height: 84px; position: relative; margin-bottom: 6px; }
.empty b { color: var(--chalk); font: 800 22px/1.1 var(--display); font-variation-settings: "wdth" 80; }

/* ---------- champs ---------- */
.field { display: grid; gap: 8px; }
.field label, .lbl { font: 500 11.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--chalk-3); }
.paper .field label, .paper .lbl { color: var(--ink-2); }
.inp {
  width: 100%; height: 52px; padding: 0 16px; border-radius: 13px; border: 0; outline: 0;
  background: rgba(0, 0, 0, .22); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--chalk); font-size: 16px; transition: box-shadow .2s, background .2s;
}
textarea.inp { height: auto; min-height: 110px; padding: 14px 16px; resize: vertical; line-height: 1.5; }
.inp::placeholder { color: var(--chalk-3); }
.inp:focus { box-shadow: inset 0 0 0 2px var(--brass); background: rgba(0, 0, 0, .3); }
.paper .inp { background: rgba(26, 22, 17, .05); box-shadow: inset 0 0 0 1px rgba(26, 22, 17, .16); color: var(--ink); }
.paper .inp::placeholder { color: rgba(26, 22, 17, .4); }
.paper .inp:focus { box-shadow: inset 0 0 0 2px var(--ink); background: #fff8ea; }
.inp.code { font-family: var(--mono); letter-spacing: .2em; text-transform: uppercase; font-size: 18px; }
.pw { position: relative; }
.pw .inp { padding-right: 52px; }
.pw button { position: absolute; right: 6px; top: 6px; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; color: inherit; opacity: .55; }
.pw button:hover { opacity: 1; }
.pw svg { width: 19px; height: 19px; }
.err { color: #b4311f; font-size: 14px; font-weight: 500; min-height: 20px; }
.sheet .err { color: var(--danger); }
.err.shake { animation: shake .45s var(--ease-out); }
@keyframes shake { 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }
.count { font: 500 11px/1 var(--mono); color: var(--chalk-3); text-align: right; }
.seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; gap: 4px; border-radius: 13px; background: rgba(0, 0, 0, .22); box-shadow: inset 0 0 0 1px var(--line); position: relative; }
.seg button { position: relative; z-index: 1; height: 40px; padding: 0 16px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--chalk-2); transition: color .3s; white-space: nowrap; }
.seg button.on { color: var(--ink); }
.seg .ind { position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; border-radius: 10px; background: var(--paper); transition: transform .5s var(--ease-out), width .5s var(--ease-out); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .6); }
.paper .seg { background: rgba(26, 22, 17, .07); box-shadow: none; }
.paper .seg button { color: var(--ink-2); }
.paper .seg button.on { color: var(--paper); }
.paper .seg .ind { background: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { height: 38px; padding: 0 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 14px; font-weight: 500; color: var(--chalk-2); transition: all .3s var(--ease-out); display: inline-flex; align-items: center; gap: 8px; }
.chip:hover { color: var(--chalk); box-shadow: inset 0 0 0 1px var(--chalk-3); }
.chip.on { background: var(--paper); color: var(--ink); box-shadow: none; }
.chip small { font: 500 11px/1 var(--mono); opacity: .6; }
.toggle { position: relative; width: 56px; height: 32px; border-radius: 16px; background: rgba(26, 22, 17, .18); transition: background .3s; flex: none; }
.toggle::after { content: ""; position: absolute; left: 4px; top: 4px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); transition: transform .45s var(--ease-out); }
.toggle[aria-checked="true"] { background: var(--u-green); }
.toggle[aria-checked="true"]::after { transform: translateX(24px); }
.stepper { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 13px; background: rgba(26, 22, 17, .07); }
.stepper button { width: 40px; height: 40px; border-radius: 10px; font-size: 22px; font-weight: 500; display: grid; place-items: center; }
.stepper button:hover { background: rgba(26, 22, 17, .08); }
.stepper output { min-width: 44px; text-align: center; font: 800 26px/1 var(--display); font-variation-settings: "wdth" 80; }

/* ---------- cartes à jouer (design maison) ---------- */
.pc {
  --w: 120px; --c: var(--u-red);
  position: relative; width: var(--w); height: calc(var(--w) * 1.5); flex: none;
  border-radius: calc(var(--w) * .1); background: var(--paper);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(0, 0, 0, .12), 0 calc(var(--w) * .12) calc(var(--w) * .25) calc(var(--w) * -.1) rgba(0, 0, 0, .75), 0 2px 4px rgba(0, 0, 0, .3);
  transform-style: preserve-3d;
}
.pc .f { position: absolute; inset: calc(var(--w) * .055); border-radius: calc(var(--w) * .065); background: var(--c); overflow: hidden; display: grid; place-items: center; }
.pc .f::before { content: ""; position: absolute; left: -30%; right: -30%; top: 36%; height: 28%; background: rgba(255, 255, 255, .17); transform: rotate(-32deg); }
.pc .f::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 30% 0%, rgba(255, 255, 255, .28), transparent 55%), radial-gradient(90% 70% at 100% 100%, rgba(0, 0, 0, .25), transparent 60%); }
.pc .big { position: relative; z-index: 1; font: 800 calc(var(--w) * .62)/1 var(--display); font-variation-settings: "wdth" 75, "opsz" 96; letter-spacing: -.04em; color: var(--paper); text-shadow: calc(var(--w) * .022) calc(var(--w) * .026) 0 var(--u-black); }
.pc .big.sm { font-size: calc(var(--w) * .46); }
.pc .big svg { width: calc(var(--w) * .5); height: calc(var(--w) * .5); display: block; filter: drop-shadow(calc(var(--w) * .022) calc(var(--w) * .026) 0 var(--u-black)); }
.pc .ix { position: absolute; z-index: 1; font: 800 calc(var(--w) * .15)/1 var(--display); font-variation-settings: "wdth" 80; color: var(--paper); }
.pc .ix svg { width: calc(var(--w) * .15); height: calc(var(--w) * .15); display: block; }
.pc .ix.tl { top: 7%; left: 10%; } .pc .ix.br { bottom: 7%; right: 10%; transform: rotate(180deg); }
.pc.wild { --c: var(--u-black); }
.pc.wild .f::before { display: none; }
.pc .wheel { position: relative; z-index: 1; width: 66%; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(var(--u-red) 0 25%, var(--u-yellow) 0 50%, var(--u-green) 0 75%, var(--u-blue) 0); box-shadow: 0 0 0 calc(var(--w) * .03) var(--paper), calc(var(--w) * .022) calc(var(--w) * .03) 0 calc(var(--w) * .03) rgba(0, 0, 0, .5); display: grid; place-items: center; transform: rotate(-20deg); }
.pc .wheel span { transform: rotate(20deg); font: 800 calc(var(--w) * .3)/1 var(--display); font-variation-settings: "wdth" 75; color: var(--paper); text-shadow: calc(var(--w) * .02) calc(var(--w) * .024) 0 var(--u-black); }
.pc.back .f { background: #0e2a21; }
.pc.back .f::before { inset: 0; left: 0; right: 0; top: 0; height: auto; transform: none; background:
  repeating-linear-gradient(45deg, rgba(214, 176, 102, .16) 0 1px, transparent 1px calc(var(--w) * .07)),
  repeating-linear-gradient(-45deg, rgba(214, 176, 102, .16) 0 1px, transparent 1px calc(var(--w) * .07)); }
.pc.back .f::after { background: radial-gradient(60% 45% at 50% 50%, rgba(14, 42, 33, 1) 40%, transparent 41%), radial-gradient(120% 80% at 30% 0%, rgba(255, 255, 255, .12), transparent 55%); }
.pc.back .mono-se { position: relative; z-index: 1; width: 54%; aspect-ratio: 1; border-radius: 50%; box-shadow: inset 0 0 0 calc(var(--w) * .012) var(--brass), 0 0 0 calc(var(--w) * .03) #0e2a21, 0 0 0 calc(var(--w) * .04) rgba(214, 176, 102, .5); display: grid; place-items: center; font: 800 calc(var(--w) * .2)/1 var(--display); font-variation-settings: "wdth" 75; color: var(--brass); letter-spacing: -.02em; }

/* deux faces pour les retournements */
.flip { position: relative; transform-style: preserve-3d; }
.flip > .pc { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip > .pc.back { transform: rotateY(180deg); }

/* ---------- accueil ---------- */
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 20px; align-items: center; min-height: min(760px, calc(100vh - var(--nav-h) - 40px)); padding: 20px 0 40px; }
.hero h1 { font-size: clamp(64px, 11vw, 168px); line-height: .84; }
.hero h1 .ln { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.hero h1 .ch { display: inline-block; will-change: transform; }
.hero h1 em { font-style: normal; color: var(--brass); }
.hero .txt { display: grid; gap: 30px; align-content: center; }
.hero .cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero .meta { display: flex; gap: 26px; flex-wrap: wrap; color: var(--chalk-3); font: 500 12px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.hero .meta b { display: block; color: var(--chalk); font: 800 30px/1 var(--display); font-variation-settings: "wdth" 80; letter-spacing: -.02em; margin-bottom: 6px; text-transform: none; }
.hand { position: relative; height: 560px; perspective: 1400px; }
.hand .tilt { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx, 8deg)) rotateY(var(--ry, -10deg)); }
.hand .slot { position: absolute; left: 50%; bottom: 70px; width: 0; height: 0; transform-style: preserve-3d; }
.hand .slot .pc { --w: clamp(150px, 15vw, 196px); position: absolute; left: calc(var(--w) * -.5); bottom: 0; transform-origin: 50% 120%; transition: transform .6s var(--ease-out); cursor: pointer; }
.hand .slot .pc:hover { transform: translateY(-34px) translateZ(40px) scale(1.04); }
.hand .shadow { position: absolute; left: 12%; right: 12%; bottom: 40px; height: 60px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent); filter: blur(8px); }
.hand .chipstack { position: absolute; right: 4%; bottom: 52px; transform: translateZ(60px); }
@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 0; padding-top: 10px; }
  .hand { height: 330px; order: -1; margin: -10px 0 10px; }
  .hand .slot { bottom: 40px; }
  .hand .slot .pc { --w: 104px; }
}
.marquee { position: relative; overflow: hidden; border-block: 1px solid var(--line); padding: 22px 0; margin-top: 30px; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee .tr { display: flex; width: max-content; gap: 44px; animation: mq 38s linear infinite; }
.marquee span { font: 800 clamp(34px, 5vw, 64px)/1 var(--display); font-variation-settings: "wdth" 76; letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1px var(--chalk-3); white-space: nowrap; display: inline-flex; align-items: center; gap: 44px; }
.marquee span:nth-child(3n+1) { color: var(--chalk); -webkit-text-stroke: 0; }
.marquee span i { width: 14px; height: 14px; border-radius: 3px; transform: rotate(45deg); background: var(--brass); display: inline-block; }
@keyframes mq { to { transform: translateX(-50%); } }

.feature { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 0; border-radius: 26px; overflow: hidden; background: var(--paper); color: var(--ink); box-shadow: 0 50px 90px -50px rgba(0, 0, 0, .95); position: relative; }
.feature .art { position: relative; min-height: 420px; background: radial-gradient(120% 90% at 30% 20%, #1b4a3b, #0d2820 70%); overflow: hidden; }
.feature .art .pc { position: absolute; --w: 150px; transition: transform .8s var(--ease-out); }
.feature:hover .art .pc { transform: var(--h) !important; }
.feature .info { padding: 44px; display: grid; gap: 22px; align-content: center; }
.feature .tags { display: flex; gap: 8px; flex-wrap: wrap; }
.tag { height: 28px; padding: 0 12px; border-radius: 8px; display: inline-flex; align-items: center; gap: 6px; font: 500 12px/1 var(--mono); letter-spacing: .04em; background: rgba(26, 22, 17, .07); color: var(--ink-2); }
.tag.live { background: rgba(43, 176, 105, .14); color: #18763f; }
.tag.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
@media (max-width: 900px) { .feature { grid-template-columns: minmax(0, 1fr); } .feature .art { min-height: 300px; } .feature .info { padding: 28px; } }

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; counter-reset: st; }
.step { position: relative; padding: 28px; border-radius: var(--r); background: rgba(16, 44, 35, .6); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 14px; align-content: start; overflow: hidden; }
.step .n { font: 800 88px/0.8 var(--display); font-variation-settings: "wdth" 75; color: transparent; -webkit-text-stroke: 1px var(--brass); opacity: .8; }
.step h3 { font: 700 22px/1.15 var(--display); font-variation-settings: "wdth" 85; letter-spacing: -.01em; }
.step p { margin: 0; color: var(--chalk-2); font-size: 15px; }
.step .code-demo { font: 500 15px/1 var(--mono); letter-spacing: .18em; color: var(--brass); }
@media (max-width: 900px) { .steps { grid-template-columns: minmax(0, 1fr); } }

.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.duo a { position: relative; padding: 32px; border-radius: 22px; min-height: 230px; display: grid; align-content: space-between; gap: 30px; overflow: hidden; transition: transform .5s var(--ease-out); }
.duo a:hover { transform: translateY(-4px); }
.duo a:nth-child(1) { background: var(--brass); color: var(--ink); }
.duo a:nth-child(2) { background: var(--table-3); box-shadow: inset 0 0 0 1px var(--line-2); }
.duo h3 { font: 800 clamp(30px, 3.4vw, 44px)/.95 var(--display); font-variation-settings: "wdth" 78; letter-spacing: -.02em; }
.duo p { margin: 10px 0 0; max-width: 34ch; opacity: .78; }
.duo .go { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, .12); transition: transform .5s var(--ease-out); }
.duo a:hover .go { transform: rotate(-45deg); }
.duo .go svg { width: 22px; height: 22px; }
@media (max-width: 700px) { .duo { grid-template-columns: minmax(0, 1fr); } }

/* ---------- jeux ---------- */
.games { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 22px; }
.gtile { position: relative; border-radius: 22px; aspect-ratio: 4 / 5; overflow: hidden; display: grid; align-content: end; padding: 24px; transform-style: preserve-3d; transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out); box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .95); transform: perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); max-width: 100%; }
.gtile.uno { background: radial-gradient(110% 80% at 50% 10%, #1d5040, #0c261e 70%); box-shadow: inset 0 0 0 1px var(--line-2), 0 40px 70px -40px rgba(0, 0, 0, .95); }
.gtile .glare { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(500px circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .14), transparent 45%); opacity: 0; transition: opacity .4s; }
.gtile:hover .glare { opacity: 1; }
.gtile .art { position: absolute; inset: 0 0 34%; display: grid; place-items: center; }
.gtile .art .fan { position: relative; width: 0; height: 0; top: 40px; }
.gtile .art .pc { --w: 96px; position: absolute; left: -48px; bottom: 0; transform-origin: 50% 130%; transition: transform .7s var(--ease-out); }
.gtile .meta { position: relative; display: grid; gap: 10px; }
.gtile h3 { font: 800 52px/.9 var(--display); font-variation-settings: "wdth" 76; letter-spacing: -.03em; }
.gtile .sub { color: var(--chalk-2); font-size: 14.5px; }
.gtile .tags { display: flex; gap: 6px; flex-wrap: wrap; }
.gtile .tag { background: rgba(236, 229, 212, .08); color: var(--chalk-2); }
.gtile .tag.live { background: rgba(61, 224, 166, .12); color: var(--mint); }
.gtile.idea { border: 1.5px dashed var(--line-2); box-shadow: none; background: transparent; align-content: center; justify-items: center; text-align: center; gap: 14px; }
.gtile.idea:hover { border-color: var(--brass); }
.gtile.idea .plus { width: 76px; height: 76px; border-radius: 22px; display: grid; place-items: center; background: rgba(214, 176, 102, .12); color: var(--brass); transition: transform .6s var(--ease-out); }
.gtile.idea:hover .plus { transform: rotate(90deg) scale(1.06); }
.gtile.idea .plus svg { width: 32px; height: 32px; }
.gtile.idea h3 { font-size: 34px; }

/* ---------- UNO (hub) ---------- */
.uno-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; align-items: center; padding: 20px 0 30px; }
.uno-title { font-size: clamp(110px, 19vw, 260px); line-height: .78; letter-spacing: -.05em; display: flex; }
.uno-title span { display: inline-block; }
.uno-title span:nth-child(1) { color: var(--u-red); } .uno-title span:nth-child(2) { color: var(--u-yellow); } .uno-title span:nth-child(3) { color: var(--u-blue); }
.uno-actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.act-card { position: relative; border-radius: 22px; padding: 26px; min-height: 230px; display: grid; align-content: space-between; gap: 18px; text-align: left; overflow: hidden; transition: transform .5s var(--ease-out); }
.act-card:hover { transform: translateY(-4px) rotate(-.4deg); }
.act-card.create { background: var(--paper); color: var(--ink); box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .95); }
.act-card.create.locked { opacity: .62; filter: saturate(.6); }
.act-card.create.locked p svg { width: 14px; height: 14px; vertical-align: -2px; }
.act-card.join { background: var(--table-3); box-shadow: inset 0 0 0 1px var(--line-2), 0 40px 70px -40px rgba(0, 0, 0, .95); }
.act-card h3 { font: 800 34px/.95 var(--display); font-variation-settings: "wdth" 78; letter-spacing: -.02em; }
.act-card p { margin: 8px 0 0; opacity: .72; font-size: 15px; }
.act-card .ico { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; }
.act-card.create .ico { background: var(--u-red); color: var(--paper); }
.act-card.join .ico { background: rgba(236, 229, 212, .08); color: var(--brass); }
.act-card .ico svg { width: 26px; height: 26px; }
.act-card .mini { position: absolute; right: -30px; top: -26px; transform: rotate(18deg); opacity: .95; transition: transform .7s var(--ease-out); }
.act-card:hover .mini { transform: rotate(8deg) translateY(10px); }
.act-card .mini .pc { --w: 92px; }
.rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 16px; }
.rule { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; padding: 18px; border-radius: 18px; background: rgba(16, 44, 35, .6); box-shadow: inset 0 0 0 1px var(--line); }
.rule .pc { --w: 58px; }
.rule b { display: block; font: 700 18px/1.15 var(--display); font-variation-settings: "wdth" 85; margin-bottom: 4px; }
.rule p { margin: 0; color: var(--chalk-2); font-size: 14px; line-height: 1.45; }
.rules-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.rules-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; color: var(--chalk-2); }
.rules-list li::before { content: ""; width: 10px; height: 10px; margin: 8px 0 0 8px; border-radius: 3px; transform: rotate(45deg); background: var(--brass); }
.rules-list b { color: var(--chalk); font-weight: 600; }
.open-games .empty { padding: 34px 20px; }
@media (max-width: 900px) { .uno-hero { grid-template-columns: minmax(0, 1fr); } .uno-actions { grid-template-columns: minmax(0, 1fr); } .act-card { min-height: 190px; } }

/* ---------- classement ---------- */
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 16px; max-width: 820px; margin: 10px auto 40px; }
.pod { display: grid; justify-items: center; gap: 14px; text-align: center; min-width: 0; }
.pod .who { display: grid; justify-items: center; gap: 10px; min-width: 0; max-width: 100%; }
.pod .who b { font-size: 17px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod .col { width: 100%; border-radius: 18px 18px 6px 6px; display: grid; justify-items: center; align-content: start; padding-top: 18px; gap: 4px; position: relative; overflow: hidden; transform-origin: bottom; }
.pod .col .place { font: 800 64px/1 var(--display); font-variation-settings: "wdth" 75; }
.pod .col .w { font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.pod.p1 .col { height: 230px; background: var(--brass); color: var(--ink); }
.pod.p2 .col { height: 170px; background: var(--paper); color: var(--ink); }
.pod.p3 .col { height: 130px; background: var(--table-3); box-shadow: inset 0 0 0 1px var(--line-2); }
.pod.p1 .av { --s: 76px; } .pod .av { --s: 60px; }
.pod .crown { color: var(--brass); width: 34px; height: 34px; margin-bottom: -6px; }
.pod.ghost .col { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-2); border-style: dashed; color: var(--chalk-3); }
.lb { display: grid; gap: 8px; }
.lb-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 18px 12px 12px; border-radius: 15px; background: rgba(16, 44, 35, .55); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: background .2s; }
.lb-row:hover { background: rgba(22, 58, 47, .8); }
.lb-row.me { box-shadow: inset 0 0 0 1.5px var(--brass); }
.lb-row .rk { font: 800 26px/1 var(--display); font-variation-settings: "wdth" 78; color: var(--chalk-3); text-align: center; }
.lb-row .wins { font: 800 28px/1 var(--display); font-variation-settings: "wdth" 80; text-align: right; }
.lb-row .wins small { display: block; font: 500 10.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--chalk-3); }
.note { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; background: rgba(214, 176, 102, .08); color: var(--chalk-2); font-size: 14.5px; }
.note svg { width: 20px; height: 20px; color: var(--brass); flex: none; margin-top: 1px; }
.note b { color: var(--chalk); }

/* ---------- suggestions ---------- */
.sug { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; padding: 18px; border-radius: 18px; background: rgba(16, 44, 35, .6); box-shadow: inset 0 0 0 1px var(--line); }
.vote { height: 74px; border-radius: 14px; display: grid; place-items: center; align-content: center; gap: 4px; box-shadow: inset 0 0 0 1px var(--line-2); transition: all .35s var(--ease-out); }
.vote svg { width: 18px; height: 18px; transition: transform .45s var(--ease-out); }
.vote b { font: 800 22px/1 var(--display); font-variation-settings: "wdth" 80; }
.vote:hover { box-shadow: inset 0 0 0 1px var(--brass); }
.vote:hover svg { transform: translateY(-3px); }
.vote.on { background: var(--brass); color: var(--ink); box-shadow: none; }
.sug h3 { font: 700 20px/1.2 var(--display); font-variation-settings: "wdth" 85; letter-spacing: -.01em; }
.sug p { margin: 6px 0 0; color: var(--chalk-2); font-size: 15px; white-space: pre-wrap; overflow-wrap: anywhere; }
.sug .ft { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; font-size: 13px; color: var(--chalk-3); }
.st { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 7px; font: 600 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.st.nouveau { background: rgba(236, 229, 212, .08); color: var(--chalk-2); }
.st.etude { background: rgba(45, 120, 227, .16); color: #8db8ff; }
.st.fait { background: rgba(61, 224, 166, .13); color: var(--mint); }
.st.refuse { background: rgba(255, 106, 85, .12); color: var(--danger); }
.sel { height: 32px; padding: 0 30px 0 12px; border-radius: 9px; border: 0; background: rgba(0, 0, 0, .25) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ece5d4' stroke-width='2.5'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right 10px center; appearance: none; -webkit-appearance: none; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 13px; color: var(--chalk); }
.sel option { background: #102c23; }

/* ---------- avis ---------- */
.score { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: center; }
.score .big { font: 800 112px/.8 var(--display); font-variation-settings: "wdth" 75; letter-spacing: -.04em; }
.score .big small { font-size: 32px; color: var(--ink-2); letter-spacing: 0; margin-left: 6px; }
.dist { display: grid; gap: 7px; }
.dist div { display: grid; grid-template-columns: 22px minmax(0, 1fr) 28px; gap: 10px; align-items: center; font: 500 12px/1 var(--mono); color: var(--ink-2); }
.dist i { height: 8px; border-radius: 4px; background: rgba(26, 22, 17, .1); overflow: hidden; display: block; }
.dist i span { display: block; height: 100%; background: var(--ink); border-radius: 4px; transform-origin: left; }
.starpick { display: flex; gap: 6px; }
.starpick button { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 12px; color: rgba(26, 22, 17, .2); transition: transform .35s var(--ease-out), color .2s; }
.starpick button:hover { transform: scale(1.15) rotate(-6deg); }
.starpick button.on { color: var(--brass-2); }
.starpick svg { width: 34px; height: 34px; }
.stars { display: inline-flex; gap: 2px; color: var(--brass); }
.stars svg { width: 16px; height: 16px; }
.stars svg.off { color: var(--chalk-3); opacity: .45; }
.paper .stars svg.off { color: var(--ink-2); }
.rev { padding: 20px; border-radius: 18px; background: rgba(16, 44, 35, .6); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 12px; }
.rev p { margin: 0; color: var(--chalk-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.rev .tgt { font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--chalk-3); }

/* ---------- amis ---------- */
.codecard { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; overflow: hidden; }
.codecard .code { font: 600 clamp(30px, 4.4vw, 54px)/1 var(--mono); display: flex; gap: .12em; flex-wrap: nowrap; white-space: nowrap; }
.codecard .code span { display: inline-block; }
.codecard .code .dash { color: var(--brass-2); }
.codecard .deco { position: absolute; right: -40px; bottom: -70px; transform: rotate(-14deg); opacity: .9; pointer-events: none; }
.codecard .deco .pc { --w: 120px; }
.fr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px; border-radius: 16px; background: rgba(16, 44, 35, .6); box-shadow: inset 0 0 0 1px var(--line); }
.fr .nm { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fr .sub { font-size: 13px; color: var(--chalk-3); }
.fr .acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.fr.in { box-shadow: inset 0 0 0 1.5px var(--brass); }
.ftitle { display: flex; align-items: center; gap: 10px; font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--chalk-3); margin: 34px 0 14px; }
.ftitle b { color: var(--brass); }
@media (max-width: 560px) { .fr { grid-template-columns: auto minmax(0, 1fr); } .fr .acts { grid-column: 1 / -1; justify-content: flex-start; } .codecard { grid-template-columns: minmax(0, 1fr); } }

/* ---------- profil ---------- */
.prof { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: center; }
.prof .av { --s: 132px; border-radius: 34%; }
.avedit { position: relative; }
.avedit button { position: absolute; right: -6px; bottom: -6px; width: 44px; height: 44px; border-radius: 14px; background: var(--ink); color: var(--paper); display: grid; place-items: center; box-shadow: 0 0 0 4px var(--paper); transition: transform .3s var(--ease-out); }
.avedit button:hover { transform: scale(1.08) rotate(-8deg); }
.avedit button svg { width: 20px; height: 20px; }
.prof h2 { font-size: clamp(36px, 5vw, 58px); color: var(--ink); overflow-wrap: anywhere; }
.statrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 26px; }
.stat { padding: 16px; border-radius: 14px; background: rgba(26, 22, 17, .06); }
.stat b { display: block; font: 800 36px/1 var(--display); font-variation-settings: "wdth" 78; }
.stat span { font: 500 11px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.sheet .stat { background: rgba(0, 0, 0, .2); } .sheet .stat span { color: var(--chalk-3); }
@media (max-width: 560px) { .prof { grid-template-columns: minmax(0, 1fr); justify-items: start; } .prof .av { --s: 104px; } .statrow { gap: 8px; } .stat { padding: 12px; } .stat b { font-size: 28px; } .stat span { font-size: 9.5px; letter-spacing: .06em; } }

/* ---------- admin ---------- */
.atabs { margin-bottom: 26px; overflow-x: auto; max-width: 100%; }
.tbl-wrap { overflow-x: auto; border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line); background: rgba(16, 44, 35, .5); }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--chalk-3); padding: 16px; border-bottom: 1px solid var(--line); }
.tbl td { padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; font-size: 14.5px; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tr { transition: background .2s; }
.tbl tbody tr:hover { background: rgba(236, 229, 212, .03); }
.tbl .acts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.arc { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px; border-radius: 16px; background: rgba(16, 44, 35, .6); box-shadow: inset 0 0 0 1px var(--line); }
.arc .ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: rgba(236, 229, 212, .07); color: var(--brass); }
.arc .ico svg { width: 22px; height: 22px; }
.arc b { display: block; font-weight: 600; overflow-wrap: anywhere; }
.arc .sub { font-size: 13px; color: var(--chalk-3); }
.arc .pv { font-size: 13.5px; color: var(--chalk-2); margin-top: 4px; overflow-wrap: anywhere; }
@media (max-width: 560px) { .arc { grid-template-columns: 48px minmax(0, 1fr); } .arc > .btn { grid-column: 1 / -1; } }
.lbcard { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; }
@media (max-width: 560px) { .lbcard { grid-template-columns: minmax(0, 1fr); } }

/* ---------- auth ---------- */
.auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 50px; align-items: center; min-height: calc(100vh - var(--nav-h) - 120px); }
.auth .pitch { display: grid; gap: 24px; }
.auth .pitch .deal { position: relative; height: 270px; perspective: 1000px; }
.auth .pitch .deal .pc { --w: 120px; position: absolute; left: 0; top: 0; }
.auth .paper { padding: 34px; display: grid; gap: 20px; }
.auth form { display: grid; gap: 18px; }
.auth .hint { font-size: 13.5px; color: var(--ink-2); display: flex; gap: 10px; align-items: flex-start; }
.auth .hint svg { width: 18px; height: 18px; flex: none; color: var(--brass-2); margin-top: 1px; }
.auth .corner { position: absolute; top: 18px; right: 20px; font: 800 26px/1 var(--display); color: var(--u-red); font-variation-settings: "wdth" 75; }
@media (max-width: 900px) { .auth { grid-template-columns: minmax(0, 1fr); gap: 20px; min-height: 0; } .auth .pitch .deal { display: none; } }

/* ---------- toasts, modales, aperçu ---------- */
.toasts { position: fixed; z-index: 90; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); display: grid; gap: 10px; width: min(440px, calc(100% - 32px)); pointer-events: none; }
.toast { pointer-events: auto; display: flex; gap: 12px; align-items: center; padding: 14px 18px; border-radius: 15px; background: var(--paper); color: var(--ink); box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .85); font-size: 14.5px; font-weight: 500; }
.toast i { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--u-green); color: #fff; flex: none; }
.toast.bad i { background: var(--danger); }
.toast.info i { background: var(--brass); color: var(--ink); }
.toast i svg { width: 15px; height: 15px; }
.scrim { position: fixed; inset: 0; z-index: 80; background: rgba(4, 12, 9, .66); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: grid; place-items: center; padding: 20px max(16px, env(safe-area-inset-right, 0px)) 20px max(16px, env(safe-area-inset-left, 0px)); overflow-y: auto; }
.modal { width: min(520px, 100%); display: grid; gap: 18px; padding: 30px; }
.modal h3 { font: 800 32px/1 var(--display); font-variation-settings: "wdth" 78; letter-spacing: -.02em; }
.modal .acts { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 6px; }
.modal .btn.ghost { --fg: var(--ink); box-shadow: inset 0 0 0 1px rgba(26, 22, 17, .2); }
.modal .x { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--ink-2); }
.modal .x:hover { background: rgba(26, 22, 17, .07); }
.modal .x svg { width: 20px; height: 20px; }
.optrow { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px dashed rgba(26, 22, 17, .16); }
.optrow:last-of-type { border-bottom: 0; }
.optrow b { display: block; font-size: 16px; }
.optrow small { color: var(--ink-2); font-size: 13.5px; }
.tempw { font: 600 30px/1 var(--mono); letter-spacing: .14em; padding: 18px; text-align: center; border-radius: 14px; background: rgba(26, 22, 17, .06); }
.prevbar { position: fixed; z-index: 70; left: max(12px, env(safe-area-inset-left, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 12px; background: rgba(9, 26, 20, .9); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .35); font: 500 12px/1.3 var(--mono); color: var(--chalk-2); max-width: calc(100% - 24px); backdrop-filter: blur(10px); }
.prevbar b { color: var(--brass); font-weight: 600; letter-spacing: .08em; }
.prevbar button { height: 28px; padding: 0 10px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line-2); font: inherit; color: var(--chalk); white-space: nowrap; }
.prevbar button:hover { box-shadow: inset 0 0 0 1px var(--brass); }
@media (max-width: 560px) { .prevbar span.long { display: none; } }

/* ---------- transitions de page ---------- */
.tx { position: fixed; inset: 0; z-index: 75; pointer-events: none; overflow: hidden; }
.tx.busy { pointer-events: auto; }
.tx .panel { position: absolute; top: -8vh; bottom: -8vh; width: 130vw; left: -15vw; border-radius: 60px; transform: translateX(120vw) rotate(-6deg); }
.tx .panel.a { background: var(--brass); }
.tx .panel.b { background: var(--paper); }
.tx .panel.c { background: #0d271f; display: grid; place-items: center; }
.tx .panel.c .mark { width: 110px; height: 110px; opacity: 0; }
.tx .stage { position: absolute; inset: 0; perspective: 1600px; }
.tx .floor { position: absolute; left: 50%; top: 50%; width: 420px; height: 90px; margin: 100px 0 0 -210px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .6), transparent); opacity: 0; filter: blur(6px); }
.tx .veil { position: absolute; inset: 0; background: rgba(4, 12, 9, .0); }
/* transition du Loup-garou : nuit, lune, loup, griffures, écran déchiré */
.tx .wf-half { position: absolute; inset: -4vh -4vw; transform: translateY(-104%); background: radial-gradient(120% 80% at 50% 20%, #1d2a6b, #0b1030 55%, #04061a); }
.tx .wf-half::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(1.5px 1.5px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 28% 8%, #fff, transparent), radial-gradient(1.2px 1.2px at 44% 30%, #dfe6ff, transparent), radial-gradient(1px 1px at 62% 12%, #fff, transparent), radial-gradient(1.4px 1.4px at 76% 26%, #fff, transparent), radial-gradient(1px 1px at 88% 9%, #fff, transparent), radial-gradient(1px 1px at 6% 48%, #fff, transparent), radial-gradient(1.3px 1.3px at 95% 52%, #fff, transparent), radial-gradient(1px 1px at 52% 4%, #fff, transparent), radial-gradient(1px 1px at 35% 62%, #cfd7ff, transparent), radial-gradient(1px 1px at 70% 70%, #fff, transparent); }
.tx .wf-half::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26%; background: radial-gradient(60% 100% at 30% 100%, #0a1430, transparent 70%), radial-gradient(60% 100% at 75% 100%, #070d24, transparent 70%); }
.tx .wf-half.a { clip-path: polygon(0 0, 100% 0, 100% 28%, 0 80%); }
.tx .wf-half.b { clip-path: polygon(0 79.6%, 100% 27.6%, 100% 100%, 0 100%); }
.tx .wf-sky { position: absolute; inset: 0; }
.tx .wf-moon { position: absolute; left: 50%; top: 12vh; width: min(40vw, 300px); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, 70vh); opacity: 0; background: radial-gradient(circle at 36% 34%, #fffbe8, #f1e2b0 55%, #c9b47a); box-shadow: 0 0 120px 30px rgba(255, 240, 190, .35), inset -18px -14px 0 rgba(160, 140, 90, .22); }
.tx .wf-title { position: absolute; left: 50%; top: calc(14vh + min(40vw, 300px)); transform: translateX(-50%); z-index: 5; font-size: clamp(46px, 9vw, 112px); color: #dfe5ff; text-shadow: 0 0 30px rgba(140, 155, 255, .8), 0 4px 0 rgba(5, 8, 26, .9); white-space: nowrap; display: flex; }
.tx .wf-claws { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.tx .wf-claws path { fill: none; stroke: #f3ecdc; stroke-width: 1.3; stroke-linecap: round; stroke-dasharray: 140; stroke-dashoffset: 140; filter: drop-shadow(0 0 3px rgba(255, 106, 85, .9)); }
/* transition du Quiz : téléviseur qui s'allume, plateau, logo en ampoules */
.tx .tv-crt { position: absolute; inset: 0; background: #050308; opacity: 0; display: grid; place-items: center; }
.tx .tv-line { width: 100%; height: 2px; background: #fff; box-shadow: 0 0 20px 4px rgba(200, 220, 255, .9); transform: scale(0, 1); }
.tx .tv-set { position: absolute; inset: 0; opacity: 0; display: grid; place-items: center; overflow: hidden; background: radial-gradient(80% 70% at 50% 40%, #4a2a78, #1a1030 55%, #07040e); }
.tx .tv-beam { position: absolute; top: -10%; width: 46%; height: 130%; background: linear-gradient(180deg, rgba(255, 236, 180, .4), transparent 75%); clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%); transform-origin: 50% 0; mix-blend-mode: screen; animation: sweep 1.6s ease-in-out infinite alternate; }
.tx .tv-beam.l { left: -4%; } .tx .tv-beam.r { right: -4%; animation-direction: alternate-reverse; }
.tx .tv-logo { position: relative; z-index: 2; display: grid; justify-items: center; gap: 2px; padding: 34px 54px 30px; border-radius: 28px; background: linear-gradient(180deg, #1f4ea8, #0f2a66); box-shadow: inset 0 0 0 4px #d6b066, 0 0 0 10px #2a1a08, 0 0 80px rgba(255, 210, 120, .45), 0 40px 80px rgba(0, 0, 0, .7); }
.tx .tv-logo b { font-size: clamp(60px, 11vw, 130px); line-height: .85; color: #ffd36e; text-shadow: 0 5px 0 #8a5a12, 0 0 40px rgba(255, 200, 80, .55); }
.tx .tv-logo em { font-style: normal; font-size: clamp(22px, 3.6vw, 40px); letter-spacing: .32em; text-transform: uppercase; color: #fff; margin-top: 4px; }
.tx .tv-onair { font: 700 12px/1 var(--mono); letter-spacing: .3em; padding: 7px 12px 7px 16px; border-radius: 7px; color: rgba(255, 255, 255, .35); background: #2a0a0e; margin-bottom: 8px; transition: all .3s; }
.tx .tv-onair.on { color: #fff; background: #e0312a; box-shadow: 0 0 0 2px #ff8b7a, 0 0 30px 6px rgba(255, 60, 40, .6); }
.tx .tv-bulbs { position: absolute; inset: -7px; pointer-events: none; }
.tx .tv-bulbs i { position: absolute; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: #ffe29a; box-shadow: 0 0 10px 3px rgba(255, 210, 120, .8); animation: chase 1s steps(1) infinite; animation-delay: calc(var(--k) * -.5s); }
.tx .tv-bulbs i:nth-child(-n+7) { top: 0; left: calc(8% + (var(--k)) * 14%); }
.tx .tv-bulbs i:nth-child(n+8):nth-child(-n+11) { right: 0; top: calc(20% + (var(--k) - 7) * 20%); }
.tx .tv-bulbs i:nth-child(n+12):nth-child(-n+18) { bottom: 0; left: calc(92% - (var(--k) - 11) * 14%); }
.tx .tv-bulbs i:nth-child(n+19) { left: 0; top: calc(80% - (var(--k) - 18) * 20%); }
.tx .tv-floor { position: absolute; left: -20%; right: -20%; bottom: -10%; height: 40%; transform: perspective(500px) rotateX(60deg); background: radial-gradient(50% 60% at 50% 30%, rgba(120, 80, 220, .4), transparent 70%), linear-gradient(90deg, rgba(255, 211, 110, .18) 1px, transparent 1px) 0 0 / 60px 60px, linear-gradient(0deg, rgba(255, 211, 110, .18) 1px, transparent 1px) 0 0 / 60px 60px; }
@media (max-width: 600px) { .tx .tv-logo { padding: 26px 30px 22px; } }

/* ---------- intro ---------- */
.intro { position: fixed; inset: 0; z-index: 95; background: var(--table); display: grid; place-items: center; overflow: hidden; }
.intro { background-color: #0a1d17; background-image: radial-gradient(70% 60% at 50% 40%, #17392c, #0a1d17 70%, #06120e); }
.intro .spot { position: absolute; left: 50%; top: -10vh; width: min(90vw, 760px); height: 90vh; transform: translateX(-50%); background: radial-gradient(50% 70% at 50% 90%, rgba(255, 226, 160, .22), rgba(255, 226, 160, 0) 70%); clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); transform-origin: 50% 0; pointer-events: none; }
.intro .dust { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(1.4px 1.4px at 44% 30%, rgba(255, 230, 170, .7), transparent), radial-gradient(1px 1px at 55% 44%, rgba(255, 230, 170, .6), transparent), radial-gradient(1.2px 1.2px at 48% 58%, rgba(255, 230, 170, .5), transparent), radial-gradient(1px 1px at 60% 22%, rgba(255, 230, 170, .6), transparent), radial-gradient(1.3px 1.3px at 39% 50%, rgba(255, 230, 170, .5), transparent); animation: dust 6s ease-in-out infinite alternate; }
@keyframes dust { to { transform: translateY(-14px); opacity: .6; } }
.intro .medal { position: relative; margin-top: -12vh; perspective: 900px; }
/* écran « Cliquer pour entrer » */
.gate { position: fixed; inset: 0; z-index: 96; display: grid; place-items: center; cursor: pointer; background-color: #0a1d17; background-image: radial-gradient(70% 60% at 50% 40%, #17392c, #0a1d17 70%, #06120e); padding: 24px; }
.gate .spot { position: absolute; left: 50%; top: -10vh; width: min(90vw, 760px); height: 90vh; transform: translateX(-50%); background: radial-gradient(50% 70% at 50% 90%, rgba(255, 226, 160, .14), rgba(255, 226, 160, 0) 70%); clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); pointer-events: none; }
.gate .g-in { position: relative; display: grid; justify-items: center; gap: 22px; text-align: center; }
.gate .g-medal { width: min(36vw, 150px); aspect-ratio: 1; border-radius: 50%; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .6)); animation: gbreath 3.2s ease-in-out infinite; }
.gate .g-medal svg { width: 100%; height: 100%; display: block; }
@keyframes gbreath { 50% { transform: translateY(-6px) scale(1.03); filter: drop-shadow(0 26px 34px rgba(0, 0, 0, .55)) drop-shadow(0 0 22px rgba(214, 176, 102, .25)); } }
.gate .g-sign > b { font: 800 clamp(38px, 7vw, 72px)/1 var(--display); font-variation-settings: "wdth" 76; letter-spacing: -.03em; color: var(--chalk); }
.gate .g-sign > b em { font-style: normal; color: var(--brass); }
.gate .g-go { position: relative; height: 56px; padding: 0 30px; border-radius: 999px; background: var(--brass); color: #1a1611; font: 700 17px/1 var(--body); box-shadow: 0 16px 34px -14px rgba(214, 176, 102, .8), inset 0 -3px 0 rgba(0, 0, 0, .18); transition: transform .2s var(--ease-out, ease); }
.gate .g-go::after { content: ""; position: absolute; inset: -6px; border-radius: inherit; box-shadow: 0 0 0 2px rgba(214, 176, 102, .5); animation: gring 2s ease-out infinite; }
@keyframes gring { from { opacity: 1; transform: scale(.96); } to { opacity: 0; transform: scale(1.18); } }
.gate:hover .g-go { transform: translateY(-2px); }
.gate small { display: inline-flex; align-items: center; gap: 8px; font: 500 13px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--chalk-3); }
.gate small svg { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) { .gate .g-medal, .gate .g-go::after { animation: none; } }
.intro .coin { position: relative; width: min(46vw, 230px); aspect-ratio: 1; border-radius: 50%; transform-style: preserve-3d; overflow: hidden; }
.intro .coin svg { width: 100%; height: 100%; display: block; }
.intro .coin .ratbadge text { transform-box: view-box; transform-origin: 100px 100px; }
.intro .coin.alive .ratbadge text { animation: ring 9s linear infinite; }
@keyframes ring { to { transform: rotate(360deg); } }
.intro .coin.alive .ear.el { animation: earl .5s ease-in-out 2 alternate; } .intro .coin.alive .ear.er { animation: earr .5s ease-in-out .15s 2 alternate; }
.intro .coin .ear { transform-box: fill-box; transform-origin: 50% 90%; }
@keyframes earl { to { transform: rotate(-16deg); } } @keyframes earr { to { transform: rotate(16deg); } }
.intro .coin .shine { position: absolute; inset: -20%; background: linear-gradient(90deg, transparent 35%, rgba(255, 250, 225, .55) 50%, transparent 65%); transform: translateX(-140%) rotate(20deg); mix-blend-mode: screen; pointer-events: none; }
.intro .tag { position: absolute; bottom: calc(16vh - 34px); left: 0; right: 0; width: 100%; justify-self: stretch; margin: 0; text-align: center; font: 500 12px/1 var(--mono); letter-spacing: .3em; text-transform: uppercase; color: var(--brass); opacity: 0; }
.intro .word { position: absolute; bottom: 16vh; left: 0; right: 0; text-align: center; font: 800 clamp(42px, 8vw, 96px)/1 var(--display); font-variation-settings: "wdth" 76; letter-spacing: -.03em; overflow: hidden; }
.intro .word span { display: inline-block; }
.intro .word em { font-style: normal; color: var(--brass); }
.intro .skip { position: absolute; right: max(20px, env(safe-area-inset-right, 0px)); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); font: 500 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--chalk-3); padding: 10px; }

/* apparitions au défilement (navigateurs compatibles) — l'état de repos reste visible */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rv { animation: rv linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    @keyframes rv { from { opacity: 0; transform: translateY(46px) rotate(.6deg); } to { opacity: 1; transform: none; } }
  }
}

footer.foot { border-top: 1px solid var(--line); padding-block: 30px 40px; color: var(--chalk-3); font-size: 13.5px; }
footer.foot .wrap { display: grid; gap: 22px; }
/* (étape 146) deux étages : en haut le site (logo, phrase) et ce qu'on peut faire (soutenir, réseaux) ; en bas les pages légales et le bug */
.foot-top { display: flex; justify-content: space-between; align-items: center; gap: 22px 40px; flex-wrap: wrap; }
.foot-id { display: grid; gap: 10px; max-width: 62ch; }
.foot-tag { margin: 0; line-height: 1.55; color: var(--chalk-3); }
.foot-act { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.foot-bot { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; padding-top: 18px; border-top: 1px dashed rgba(214, 176, 102, .22); }
.foot-bug { font-size: 13px; color: var(--chalk-2); opacity: .75; } .foot-bug:hover { opacity: 1; }
footer.foot .brand b { font-size: 16px; }
footer.foot .brand svg { width: 28px; height: 28px; }
/* (étape 133) les réseaux de Rats Game, en bas de page */
.foot-soc { display: flex; gap: 10px; align-items: center; }
.foot-soc a { --fs-bg: #0a1d17; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: var(--chalk, #f3e6c8);
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(227, 181, 82, .35); transition: transform .18s, background .18s, color .18s; }
.foot-soc a svg { width: 19px; height: 19px; }
.foot-soc a:hover, .foot-soc a:focus-visible { transform: translateY(-2px); color: #2a1d10; background: #e3b552; --fs-bg: #e3b552; }
@media (max-width: 640px) { footer.foot .wrap { justify-items: center; text-align: center; } .foot-top, .foot-bot, .foot-act { justify-content: center; } .foot-id { justify-items: center; } .legal-links { justify-content: center; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* =================== SON =================== */
.vol { position: relative; }
.vol .ic-btn svg { width: 20px; height: 20px; }
.volpop { position: fixed; z-index: 56; width: 250px; padding: 16px; border-radius: 16px; background: var(--paper); color: var(--ink); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8); display: grid; gap: 12px; transform-origin: top right; }
.volpop b { font: 600 14px/1 var(--body); display: flex; justify-content: space-between; }
.volpop b span { font: 500 12px/1 var(--mono); color: var(--ink-2); }
.volpop input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; }
.volpop input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--ink) var(--p, 50%), rgba(26, 22, 17, .15) var(--p, 50%)); }
.volpop input[type=range]::-moz-range-track { height: 6px; border-radius: 3px; background: rgba(26, 22, 17, .15); }
.volpop input[type=range]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--ink); }
.volpop input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: var(--brass); box-shadow: 0 0 0 3px var(--paper), 0 2px 8px rgba(0, 0, 0, .35); }
.volpop input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--brass); box-shadow: 0 0 0 3px var(--paper), 0 2px 8px rgba(0, 0, 0, .35); }
.volpop .row-c button { font-size: 13px; }
.volpop { width: 270px; }
.volpop .vsep { height: 1px; background: rgba(26, 22, 17, .12); margin: 2px 0; }
.resume { height: 40px; padding: 0 14px; border-radius: 12px; background: var(--brass); color: var(--ink); font: 600 13.5px/1 var(--body); display: inline-flex; align-items: center; gap: 8px; animation: glow 2.2s ease-in-out infinite; white-space: nowrap; }
.resume i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
@keyframes glow { 50% { box-shadow: 0 0 0 6px rgba(214, 176, 102, .18); } }
@media (max-width: 560px) { .resume span { display: none; } .resume { padding: 0 12px; } }

/* =================== SCUNO : salon =================== */
.codebox { display: grid; gap: 12px; padding: 22px 24px; justify-items: start; }
.gcode { font: 600 clamp(34px, 5vw, 52px)/1 var(--mono); letter-spacing: .14em; display: flex; perspective: 400px; }
.gcode span { display: inline-block; }
.seats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; }
.lseat { display: grid; justify-items: center; gap: 8px; padding: 22px 12px 18px; border-radius: 18px; background: rgba(16, 44, 35, .6); box-shadow: inset 0 0 0 1px var(--line); text-align: center; min-width: 0; }
.lseat b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lseat small { color: var(--chalk-3); font-size: 12.5px; }
.lseat.wait { box-shadow: none; border: 1.5px dashed var(--line-2); background: transparent; color: var(--chalk-3); }
.av.bot { background: #23493d; color: var(--brass); }
.av.bot svg { width: 52%; height: 52%; }
.open-list { display: grid; gap: 10px; }
.og { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 16px; background: rgba(16, 44, 35, .6); box-shadow: inset 0 0 0 1px var(--line); }
.og .code { font: 600 15px/1 var(--mono); letter-spacing: .14em; color: var(--brass); }
.og small { color: var(--chalk-3); font-size: 13px; }
.cur-game { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 18px 22px; border-radius: 18px; background: var(--brass); color: var(--ink); margin-bottom: 26px; }
.cur-game .ico { width: 46px; height: 46px; border-radius: 14px; background: rgba(0, 0, 0, .12); display: grid; place-items: center; }
.cur-game .ico svg { width: 22px; height: 22px; }
.cur-game b { display: block; font-size: 17px; }
.cur-game .btn { --bg: var(--ink); --fg: var(--paper); box-shadow: 0 4px 0 #000, 0 14px 30px -12px rgba(0, 0, 0, .5); }
@media (max-width: 560px) { .cur-game { grid-template-columns: minmax(0, 1fr); } }

/* =================== SCUNO : table =================== */
body.in-game footer.foot { display: none; }
body.in-game main { padding-top: calc(var(--nav-h) + 16px); }
body.in-game .page { padding-bottom: 0; }
.gtable { position: relative; height: calc(100vh - var(--nav-h) - 28px); height: calc(100dvh - var(--nav-h) - 28px); min-height: 520px; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto; overflow: hidden; }
.gbar { display: flex; align-items: center; gap: 14px; padding-block: 4px 10px; }
.gname { display: flex; align-items: baseline; gap: 10px; margin: 0 auto; }
.gname b { font-size: 24px; }
.gname .mono { font-size: 12px; letter-spacing: .14em; }
.gdir { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--brass); box-shadow: inset 0 0 0 1px var(--line); }
.gdir svg { width: 20px; height: 20px; animation: spinslow 6s linear infinite; }
.gdir.ccw svg { animation-direction: reverse; transform: scaleX(-1); }
@keyframes spinslow { to { rotate: 360deg; } }
.opps { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 14px; padding: 6px max(16px, env(safe-area-inset-right, 0px)) 6px max(16px, env(safe-area-inset-left, 0px)); }
.seat { position: relative; display: grid; justify-items: center; gap: 6px; width: 112px; padding: 10px 6px; border-radius: 16px; transition: background .3s, transform .4s var(--ease-out); }
.seat .sav { position: relative; }
.seat .tring { position: absolute; inset: -6px; border-radius: 34%; box-shadow: 0 0 0 2px var(--brass); opacity: 0; transition: opacity .3s; }
.seat.turn { background: rgba(214, 176, 102, .1); transform: translateY(4px); }
.seat.turn .tring { opacity: 1; animation: ringp 1.4s ease-in-out infinite; }
@keyframes ringp { 50% { box-shadow: 0 0 0 5px rgba(214, 176, 102, .35); } }
.seat .sinfo { display: grid; justify-items: center; gap: 4px; max-width: 100%; }
.seat b { font-size: 13.5px; max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat .mini { display: flex; align-items: center; gap: 0; height: 22px; }
.seat .mini i { width: 14px; height: 20px; border-radius: 3px; background: #0e2a21; box-shadow: inset 0 0 0 1.5px var(--paper), 0 2px 4px rgba(0, 0, 0, .4); margin-left: -6px; }
.seat .mini i:first-child { margin-left: 0; transform: rotate(-10deg); }
.seat .mini i:nth-child(3) { transform: rotate(10deg); }
.seat .cnt { margin-left: 8px; font: 800 18px/1 var(--display); font-variation-settings: "wdth" 80; display: inline-block; }
.seat.one .cnt { color: var(--danger); }
.seat.left { opacity: .55; }
.seat .tags em { font: 600 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; font-style: normal; color: var(--chalk-3); }
.seat .tags em.gold { color: var(--brass); }
.opps.compact .seat { width: 84px; padding: 6px 4px; }
.opps.compact .seat .mini i { display: none; }
.opps.compact .seat b { font-size: 12px; max-width: 76px; }
.board { position: relative; display: flex; align-items: center; justify-content: center; gap: clamp(28px, 6vw, 80px); padding: 10px 0; }
.halo { position: absolute; left: 50%; top: 50%; width: min(520px, 90vw); height: min(380px, 60vw); margin: calc(min(380px, 60vw) / -2) 0 0 calc(min(520px, 90vw) / -2); border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--hc, transparent) 32%, transparent), transparent); pointer-events: none; transition: background .6s; }
.deck { position: relative; width: var(--dw); height: calc(var(--dw) * 1.5); --dw: clamp(64px, min(9vw, 13vh), 116px); border-radius: 12px; transition: transform .35s var(--ease-out); }
.deck .pc { --w: var(--dw); position: absolute; left: 0; top: 0; }
.deck .pc.d2 { transform: translate(-3px, -3px); } .deck .pc.d1 { transform: translate(-6px, -6px); }
.deck:hover .pc.d1 { transform: translate(-8px, -14px) rotate(-3deg); }
.deck.hint .pc.d1 { animation: deckhint 1.3s var(--ease-out) infinite; }
@keyframes deckhint { 0%, 100% { transform: translate(-6px, -6px); } 40% { transform: translate(-8px, -22px) rotate(-4deg); } }
.deck .dcount { position: absolute; right: -10px; bottom: -10px; min-width: 30px; height: 26px; padding: 0 8px; border-radius: 9px; background: var(--paper); color: var(--ink); font-size: 12px; font-weight: 600; display: grid; place-items: center; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .7); }
.deck .dlabel { position: absolute; left: 0; right: 0; bottom: -30px; text-align: center; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--chalk-3); }
.discard { position: relative; width: var(--cw); height: calc(var(--cw) * 1.5); --cw: clamp(76px, min(11vw, 15vh), 136px); }
.discard .pc { --w: var(--cw); position: absolute; left: 0; top: 0; }
.discard .pc.under { filter: brightness(.7); }
.gstatus { text-align: center; color: var(--chalk-2); font-size: 15px; padding: 4px 16px 10px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; min-height: 34px; }
.cdot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--c); margin: 0 4px 0 2px; vertical-align: 0; box-shadow: 0 0 10px var(--c); }
.mezone { position: relative; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(180deg, transparent, rgba(6, 18, 14, .6)); }
.meline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-block: 6px; }
#g-me { position: relative; gap: 10px; padding: 6px 12px 6px 6px; border-radius: 14px; transition: background .3s; }
#g-me.turn { background: rgba(214, 176, 102, .14); box-shadow: inset 0 0 0 1.5px var(--brass); }
#g-me b { display: block; font-size: 14px; }
#g-me small { font-size: 12.5px; }
.timer { font: 600 13px/1 var(--mono); color: var(--chalk-2); min-width: 32px; }
.timer.warn { color: var(--danger); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .4; } }
.gacts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.gacts .pulse { animation: pulsebtn 1s ease-in-out infinite; }
@keyframes pulsebtn { 50% { transform: scale(1.06); } }
.scunob { height: 52px; padding: 0 20px; border-radius: 16px; background: rgba(236, 229, 212, .06); color: var(--chalk-3); box-shadow: inset 0 0 0 1px var(--line-2); transition: all .3s var(--ease-out); }
.scunob .d { font-size: 22px; letter-spacing: -.01em; }
.scunob.on { background: var(--u-red); color: var(--paper); box-shadow: 0 4px 0 #9b2420, 0 16px 30px -10px rgba(229, 64, 58, .6); animation: pulsebtn 1.1s ease-in-out infinite; }
.scunob.on:active { transform: translateY(3px); box-shadow: 0 1px 0 #9b2420; }
.scunob[disabled] { cursor: default; }
.hand-row { position: relative; width: 100%; max-width: 1180px; margin: 0 auto; }
.hc { position: absolute; left: 0; top: 18px; transform: translate(var(--x), var(--y)) rotate(var(--r)); transform-origin: 50% 120%; transition: transform .45s var(--ease-out), filter .3s; border-radius: 12px; }
.hand-row.mine .hc.ok:hover, .hand-row.mine .hc.ok:focus-visible { transform: translate(var(--x), calc(var(--y) - 28px)) rotate(var(--r)) scale(1.04); z-index: 99 !important; }
.hand-row.mine .hc.ok { filter: drop-shadow(0 0 12px rgba(214, 176, 102, .45)); }
.hand-row.mine .hc.ok .pc { box-shadow: 0 0 0 3px var(--brass), 0 18px 30px -12px rgba(0, 0, 0, .8); }
.hand-row.mine .hc.no { filter: brightness(.55) saturate(.7); cursor: not-allowed; }
.hc.drawn .pc { animation: drawn 1.2s ease-in-out infinite; }
@keyframes drawn { 50% { box-shadow: 0 0 0 4px var(--brass), 0 0 30px rgba(214, 176, 102, .7); } }
.flyer { position: fixed; left: 0; top: 0; z-index: 72; pointer-events: none; will-change: transform; }
.flyer > .pc { --w: 100%; width: 100%; height: 100%; }
.bubble { position: absolute; left: 50%; bottom: calc(100% - 4px); z-index: 5; white-space: nowrap; padding: 7px 12px; border-radius: 11px; background: var(--paper); color: var(--ink); font: 700 13px/1 var(--body); box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .7); pointer-events: none; }
.bubble::after { content: ""; position: absolute; left: 50%; bottom: -5px; width: 10px; height: 10px; margin-left: -5px; background: inherit; transform: rotate(45deg); border-radius: 2px; }
.bubble.bad { background: var(--danger); color: #2a0b05; }
.bubble.gold { background: var(--brass); font: 800 17px/1 var(--display); font-variation-settings: "wdth" 80; }
.yourturn { position: absolute; left: 50%; top: 46%; z-index: 20; font-size: clamp(64px, 12vw, 140px); color: var(--brass); text-shadow: 0 6px 0 rgba(0, 0, 0, .35); pointer-events: none; }
.picker { position: absolute; left: 50%; bottom: 200px; z-index: 30; transform: translateX(-50%); display: grid; justify-items: center; gap: 14px; padding: 20px 22px 14px; border-radius: 22px; background: var(--paper); color: var(--ink); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .85); }
.picker .pk { display: grid; grid-template-columns: repeat(4, 64px); gap: 10px; }
.picker .pk button { width: 64px; height: 64px; border-radius: 18px; background: var(--c); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .2), 0 8px 18px -8px rgba(0, 0, 0, .6); transition: transform .3s var(--ease-out); }
.picker .pk button:hover { transform: translateY(-4px) scale(1.06); }
.picker .pk span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.endcard { width: min(560px, 100%); }
/* les boutons de fin restent toujours visibles, même si la carte dépasse l'écran (téléphone, beaucoup de joueurs) */
.endbox .endcard .acts { position: sticky; bottom: 0; z-index: 2; margin: 0 -30px -30px; padding: 14px 30px 20px; background: linear-gradient(180deg, rgba(243, 236, 220, 0), var(--paper) 30%); border-radius: 0 0 var(--r) var(--r); }
.endcard h3 { font-size: clamp(40px, 7vw, 64px); }
.ranking { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ranking li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 13px; background: rgba(26, 22, 17, .05); }
.ranking li.me { box-shadow: inset 0 0 0 2px var(--ink); }
.ranking .pl { width: 26px; font-size: 24px; text-align: center; }
.ranking li:first-child { background: var(--brass); }
.ranking li:first-child .dim { color: var(--ink-2); }
@media (max-width: 640px) {
  .seat { width: 88px; padding: 6px 4px; }
  .seat b { font-size: 12px; max-width: 80px; }
  .board { gap: 34px; }
  .picker { bottom: 150px; }
  .picker .pk { grid-template-columns: repeat(4, 54px); } .picker .pk button { width: 54px; height: 54px; }
  .scunob { height: 46px; padding: 0 14px; } .scunob .d { font-size: 18px; }
}
.scuno-title { font-size: clamp(84px, 12.5vw, 196px); }
.scuno-title span:nth-child(4) { color: var(--u-green); }
.scuno-title span:nth-child(5) { color: var(--brass); }
body.in-game .prevbar { display: none; }

/* =================== ÉTAPE 3 : identité événementielle =================== */
/* affiches du héros */
.posters { position: relative; height: 560px; perspective: 1500px; }
.posters .tilt { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx, 6deg)) rotateY(var(--ry, -6deg)); }
.poster { position: absolute; left: 50%; top: 50%; width: 220px; height: 320px; margin: -170px 0 0 -110px; border-radius: 20px; overflow: hidden; display: block; box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(255, 255, 255, .12); transition: transform .6s var(--ease-out), box-shadow .6s; transform-style: preserve-3d; }
.poster:hover { transform: var(--t) translateY(-22px) translateZ(60px) scale(1.04) !important; box-shadow: 0 60px 90px -30px rgba(0, 0, 0, .95), inset 0 0 0 1px rgba(255, 255, 255, .2); z-index: 5; }
.poster .gart { position: absolute; inset: 0; }
.poster .pt { position: absolute; left: 0; right: 0; bottom: 0; padding: 60px 18px 18px; background: linear-gradient(transparent, rgba(5, 14, 11, .92)); display: grid; gap: 4px; }
.poster .pt small { font: 500 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--brass); }
.poster .pt b { font-size: 34px; line-height: .95; letter-spacing: -.02em; color: var(--chalk); }
.poster .bulbs { position: absolute; inset: 7px; border-radius: 15px; pointer-events: none; background:
  radial-gradient(circle, #ffe7a8 0 2px, transparent 2.6px) 0 0 / 18px 18px repeat-x,
  radial-gradient(circle, #ffe7a8 0 2px, transparent 2.6px) 0 100% / 18px 18px repeat-x; opacity: .0; transition: opacity .4s; height: auto; }
.poster:hover .bulbs { opacity: .9; animation: bulbs 1s steps(2) infinite; }
@keyframes bulbs { 50% { opacity: .45; } }
@media (max-width: 900px) {
  .posters { height: 330px; order: -1; margin: 0 0 10px; }
  .poster { width: 132px; height: 196px; margin: -98px 0 0 -66px; border-radius: 14px; }
  .poster .pt b { font-size: 22px; } .poster .pt { padding: 40px 12px 12px; }
}

/* illustrations des jeux */
.gart { position: relative; overflow: hidden; width: 100%; height: 100%; min-height: 100%; }
.gart.scuno { background: radial-gradient(110% 80% at 50% 10%, #1d5040, #0c261e 70%); display: grid; place-items: center; }
.gart.scuno .fan { position: relative; width: 0; height: 0; top: 30px; }
.gart.scuno .fan .pc { --w: 84px; position: absolute; left: -42px; bottom: 0; transform-origin: 50% 130%; transition: transform .7s var(--ease-out); }
.gart.loup { background: linear-gradient(180deg, #0b1030 0%, #1b2457 55%, #2b2f5e 75%, #121633 100%); }
.gart.loup .stars { position: absolute; inset: 0; background-image: radial-gradient(1.4px 1.4px at 20% 18%, #fff, transparent), radial-gradient(1px 1px at 70% 12%, #fff, transparent), radial-gradient(1.2px 1.2px at 40% 30%, #dfe6ff, transparent), radial-gradient(1px 1px at 85% 35%, #fff, transparent), radial-gradient(1.3px 1.3px at 10% 42%, #fff, transparent), radial-gradient(1px 1px at 55% 8%, #fff, transparent), radial-gradient(1px 1px at 92% 20%, #cfd7ff, transparent); animation: twinkle 4s ease-in-out infinite alternate; }
@keyframes twinkle { to { opacity: .55; } }
.gart.loup .moon { position: absolute; width: 38%; aspect-ratio: 1; right: 14%; top: 10%; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fffbe8, #f1e2b0 55%, #c9b47a); box-shadow: 0 0 60px 10px rgba(255, 240, 190, .35); }
.gart.loup .moon::before, .gart.loup .moon::after { content: ""; position: absolute; border-radius: 50%; background: rgba(160, 140, 90, .25); }
.gart.loup .moon::before { width: 22%; height: 22%; left: 55%; top: 30%; } .gart.loup .moon::after { width: 14%; height: 14%; left: 28%; top: 60%; }
.gart.loup .wolf { position: absolute; width: 46%; left: 10%; bottom: 14%; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .6)); }
.gart.loup .wolf svg { width: 100%; height: auto; display: block; }
.gart.loup .hills { position: absolute; left: -10%; right: -10%; bottom: -12%; height: 34%; border-radius: 50% 50% 0 0; background: #0a0e24; }
.gart.quiz { background: radial-gradient(90% 70% at 50% 0%, #5b3b10, #23160a 60%, #120c06); }
.gart.quiz .rays { position: absolute; inset: -30%; background: repeating-conic-gradient(from 0deg at 50% 70%, rgba(255, 210, 120, .14) 0 8deg, transparent 8deg 22deg); animation: spinslow 30s linear infinite; }
.gart.quiz .qmark { position: absolute; left: 50%; top: 14%; transform: translateX(-50%); font-size: clamp(60px, 9vw, 120px); color: var(--brass); text-shadow: 0 6px 0 rgba(0, 0, 0, .35), 0 0 40px rgba(255, 200, 100, .5); }
.gart.quiz .buzzer { position: absolute; left: 50%; bottom: 8%; width: 58%; transform: translateX(-50%); filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .6)); }
.gart.quiz .buzzer svg { width: 100%; height: auto; display: block; }

/* programme : billet */
.feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); background: transparent; box-shadow: none; overflow: visible; border-radius: 26px; }
.feature .art { border-radius: 26px 0 0 26px; min-height: 420px; position: relative; overflow: hidden; background: none; }
.feature .art .gart { position: absolute; inset: 0; }
.feature .art .gart.scuno .fan { top: 60px; } .feature .art .gart.scuno .fan .pc { --w: 130px; left: -65px; }
.feature:hover .gart.scuno .fan .pc:nth-child(1) { transform: rotate(-34deg) translateY(-14px) !important; }
.feature:hover .gart.scuno .fan .pc:nth-child(4) { transform: rotate(34deg) translateY(-14px) !important; }
.feature .badge-now { position: absolute; left: 18px; top: 18px; z-index: 2; height: 30px; padding: 0 12px; border-radius: 9px; display: inline-flex; align-items: center; gap: 8px; background: rgba(5, 14, 11, .6); backdrop-filter: blur(6px); font: 600 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--brass); }
.feature .badge-now::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); animation: blink 1.2s steps(2) infinite; }
.ticket { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 92px; background: var(--paper); color: var(--ink); border-radius: 0 26px 26px 0; box-shadow: 0 50px 90px -50px rgba(0, 0, 0, .95); }
.ticket::before, .ticket::after { content: ""; position: absolute; right: 80px; width: 24px; height: 24px; border-radius: 50%; background: var(--table); }
.ticket::before { top: -12px; } .ticket::after { bottom: -12px; }
.tmain { padding: 38px 38px 34px; display: grid; gap: 18px; align-content: center; min-width: 0; background: radial-gradient(120% 90% at 100% 0%, rgba(214, 176, 102, .22), transparent 55%); border-radius: 0 0 0 0; }
.tmain h3 { font-size: clamp(46px, 5.6vw, 76px); line-height: .9; letter-spacing: -.03em; }
.f-scuno .tmain h3 { color: var(--u-red); } .f-loup .tmain h3 { color: #2c3570; } .f-quiz .tmain h3 { color: var(--brass-2); }
.tdesc { margin: 0; color: var(--ink-2); max-width: 44ch; font-size: 15.5px; }
.tinfo { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; padding: 14px 0; border-block: 1px dashed rgba(26, 22, 17, .2); }
.tinfo dt { font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--brass-2); margin-bottom: 5px; }
.tinfo dd { margin: 0; font-weight: 600; font-size: 14.5px; }
.tstub { border-left: 2px dashed rgba(26, 22, 17, .22); display: grid; place-items: center; align-content: space-between; padding: 26px 0; background: linear-gradient(180deg, rgba(214, 176, 102, .35), rgba(214, 176, 102, .12)); border-radius: 0 26px 26px 0; }
.tstub .d { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 26px; letter-spacing: .02em; color: var(--ink); line-height: .95; text-align: center; }
.tstub .no { font-size: 12px; letter-spacing: .1em; color: var(--ink-2); }
@media (max-width: 900px) {
  .feature { grid-template-columns: minmax(0, 1fr); }
  .feature .art { border-radius: 26px 26px 0 0; min-height: 260px; }
  .ticket { border-radius: 0 0 26px 26px; grid-template-columns: minmax(0, 1fr) 64px; }
  .ticket::before, .ticket::after { right: 52px; }
  .tmain { padding: 24px; } .tstub { border-radius: 0 0 26px 0; } .tstub .d { font-size: 18px; }
}

/* têtes d'affiche */
.tops { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1180px) { .tops { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.topcol { padding: 20px; border-radius: 18px; background: rgba(16, 44, 35, .6); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 10px; align-content: start; }
.topcol .th { display: flex; align-items: center; gap: 10px; font-size: 16px; margin-bottom: 4px; }
.topcol .th .dot { width: 10px; height: 10px; border-radius: 3px; transform: rotate(45deg); }
.topcol .tr { display: grid; grid-template-columns: 22px auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px; border-radius: 11px; cursor: pointer; transition: background .2s; }
.topcol .tr:hover { background: rgba(236, 229, 212, .05); }
.topcol .rk { font-size: 20px; color: var(--chalk-3); text-align: center; }
.topcol .tr:first-of-type .rk { color: var(--brass); }
.topcol .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.topcol .w { font: 800 20px/1 var(--display); font-variation-settings: "wdth" 80; }
@media (max-width: 900px) { .tops { grid-template-columns: minmax(0, 1fr); } }

/* tuiles du catalogue */
.gtile { background: #0c261e; }
.gtile .art { inset: 0 0 34%; display: block; }
.gtile .art .gart { position: absolute; inset: 0; border-radius: 0; }
.gtile.t-scuno .gart.scuno .fan { top: 40px; } .gtile .gart.scuno .fan .pc { --w: 96px; left: -48px; }
.gtile.hov .gart.scuno .fan .pc:nth-child(1) { transform: rotate(-34deg) translateY(-16px) !important; } .gtile.hov .gart.scuno .fan .pc:nth-child(4) { transform: rotate(34deg) translateY(-16px) !important; }
.gtile.hov .gart.loup .moon { transform: scale(1.08); transition: transform .8s var(--ease-out); }
.gtile.hov .gart.quiz .buzzer { transform: translateX(-50%) translateY(-6px) scale(1.05); transition: transform .5s var(--ease-out); }
.gtile .art::after { content: ""; position: absolute; inset: auto 0 0; height: 60%; background: linear-gradient(transparent, #0c261e); }
.gtile.t-loup .art::after { background: linear-gradient(transparent, #0e1230); } .gtile.t-loup { background: #0e1230; }
.gtile.t-quiz .art::after { background: linear-gradient(transparent, #160e07); } .gtile.t-quiz { background: #160e07; }
.gtile:not(.idea) { box-shadow: inset 0 0 0 1px var(--line-2), 0 40px 70px -40px rgba(0, 0, 0, .95); }
.gtile .meta { z-index: 1; }

/* pages des jeux */
.hub-title { font-size: clamp(76px, 11vw, 168px); line-height: .82; letter-spacing: -.045em; }
.loup-title { color: #c9d2ff; text-shadow: 0 0 60px rgba(125, 140, 255, .45); }
.loup-title span { color: #7d8cff; }
.quiz-title { color: var(--brass); }
.quiz-title span { color: var(--chalk); }
.mini-ic { display: block; width: 92px; height: 92px; border-radius: 22px; background: #1b2457; padding: 10px; box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .7); }
.mini-ic svg { width: 100%; height: 100%; }
.mini-ic.buzz { background: #3a2610; } .mini-ic.q { display: grid; place-items: center; font-size: 64px; color: var(--brass); background: #2a1c0c; }
.act-card .mini .mini-ic { transform: rotate(-8deg); }
.hub-loup .act-card.create .ico { background: #3b47a8; } .hub-quiz .act-card.create .ico { background: var(--brass-2); }
.role-ic { width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; padding: 6px; flex: none; }
.role-ic svg { width: 100%; height: 100%; }
.role-ic.wolf { background: #1b2457; } .role-ic.vil { background: #3a2a1a; } .role-ic.buzz { background: #3a2610; } .role-ic.q { background: #2a1c0c; color: var(--brass); font-size: 38px; }
.optrow.col { display: grid; gap: 10px; justify-content: stretch; }
.optrow .val { font-weight: 600; font-size: 14.5px; text-align: right; }
.paper .sel.paper-sel { background-color: rgba(26, 22, 17, .07); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(26, 22, 17, .16); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231a1611' stroke-width='2.5'><path d='m6 9 6 6 6-6'/></svg>"); height: 38px; max-width: 170px; }
.paper .sel.paper-sel option { background: #fff; }
.lseat.is-master { box-shadow: inset 0 0 0 1.5px var(--mint); }
.ftitle .dim { margin-left: 6px; letter-spacing: .06em; }
.lbcard .mini-art { width: 90px; height: 64px; border-radius: 12px; overflow: hidden; position: relative; }
.lbcard .mini-art .gart.scuno .fan { top: 30px; } .lbcard .mini-art .gart .pc { --w: 34px !important; left: -17px !important; }
.lbcard .mini-art .gart.quiz .qmark { font-size: 30px; top: 6%; }
.empty .ill .gart { border-radius: 18px; }
.empty .ill { width: 120px; height: 90px; border-radius: 18px; overflow: hidden; }
.empty .ill .gart.scuno .pc { --w: 40px; left: -20px; } .empty .ill .gart.scuno .fan { top: 30px; }
.empty .ill .gart.quiz .qmark { font-size: 40px; }

/* scuno : joueurs ayant fini */
.seat.done { opacity: .75; }
.seat.done .sav { filter: saturate(.4); }

/* =================== LOUP-GAROU =================== */
.ltable { position: relative; height: calc(100vh - var(--nav-h) - 28px); height: calc(100dvh - var(--nav-h) - 28px); min-height: 600px; display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto auto; overflow: hidden; border-radius: 22px 22px 0 0; isolation: isolate; }
.lsky { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.lsky .sk { position: absolute; inset: 0; transition: opacity 2.2s ease; }
.lsky .sk.night { background: radial-gradient(120% 80% at 70% 0%, #1d2a6b, #0b1030 55%, #05081a); }
.lsky .sk.day { background: radial-gradient(120% 90% at 22% 0%, #fdf6e0, #bfe0f8 26%, #84b8e6 60%, #5b8fc8); opacity: 0; }
.lsky .sk.dusk { background: radial-gradient(120% 90% at 30% 10%, #ffd38a, #e8895a 38%, #7a3f62 75%, #2a1f45); opacity: 0; }
.ltable.is-day .lsky .sk.day { opacity: 1; }
.ltable.is-dusk .lsky .sk.dusk { opacity: 1; }
.lsky .stars.s2 { background-image: radial-gradient(1px 1px at 20px 30px, #fff, transparent), radial-gradient(1px 1px at 80px 10px, #dfe6ff, transparent), radial-gradient(1.2px 1.2px at 130px 60px, #fff, transparent), radial-gradient(1px 1px at 170px 24px, #fff, transparent), radial-gradient(.8px .8px at 60px 80px, #cfd7ff, transparent); background-size: 200px 110px; animation-duration: 5s; animation-delay: -2s; opacity: .7; }
.ltable.is-day .lsky .stars.s2, .ltable.is-dusk .lsky .stars { opacity: 0; }
.lsky .clouds { position: absolute; inset: 0; opacity: 0; transition: opacity 2s; }
.lsky .clouds i { position: absolute; top: 8%; left: -30%; width: 260px; height: 70px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0)); box-shadow: 60px 14px 0 -10px rgba(255, 255, 255, .5); animation: cloud 70s linear infinite; }
.lsky .clouds i:nth-child(2) { top: 3%; width: 180px; height: 50px; animation-delay: -30s; animation-duration: 90s; }
.lsky .clouds i:nth-child(3) { top: 14%; width: 220px; animation-delay: -55s; animation-duration: 80s; opacity: .7; }
@keyframes cloud { from { left: -30%; } to { left: 110%; } }
.ltable.is-day .lsky .clouds { opacity: .9; }
.ltable.is-dusk .lsky .clouds { opacity: .35; }
.lsky .stars { position: absolute; inset: 0; background-image: radial-gradient(1.5px 1.5px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 28% 8%, #fff, transparent), radial-gradient(1.2px 1.2px at 44% 22%, #dfe6ff, transparent), radial-gradient(1px 1px at 62% 12%, #fff, transparent), radial-gradient(1.4px 1.4px at 76% 26%, #fff, transparent), radial-gradient(1px 1px at 88% 9%, #fff, transparent), radial-gradient(1px 1px at 6% 40%, #fff, transparent), radial-gradient(1.3px 1.3px at 95% 44%, #fff, transparent), radial-gradient(1px 1px at 52% 4%, #fff, transparent), radial-gradient(1px 1px at 35% 38%, #cfd7ff, transparent); transition: opacity 2s; animation: twinkle 3.5s ease-in-out infinite alternate; }
.ltable.is-day .lsky .stars { opacity: 0; }
.lsky .moon { position: absolute; width: 92px; height: 92px; left: 12%; top: 13%; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fffbe8, #f1e2b0 55%, #c9b47a); box-shadow: 0 0 90px 20px rgba(255, 240, 190, .3); transition: transform 2.4s var(--ease-io), opacity 2s; }
.ltable.is-day .lsky .moon { transform: translateY(-260px); opacity: 0; }
.lsky .sun { position: absolute; width: 150px; height: 150px; left: 8%; top: 4%; border-radius: 50%; background: radial-gradient(circle, #fff3c4, #ffc861 55%, rgba(255, 170, 70, 0) 72%); transform: translateY(300px); opacity: 0; transition: transform 2.4s var(--ease-io), opacity 2s; }
.ltable.is-day .lsky .sun { transform: none; opacity: .9; }
.lsky .fog { position: absolute; left: -20%; right: -20%; bottom: 0; height: 40%; background: radial-gradient(60% 60% at 30% 100%, rgba(200, 210, 255, .12), transparent), radial-gradient(60% 60% at 70% 100%, rgba(200, 210, 255, .1), transparent); animation: fog 18s ease-in-out infinite alternate; }
@keyframes fog { to { transform: translateX(8%); } }
.lbar { display: flex; align-items: center; gap: 12px; padding-block: 12px 6px; }
.lphase { display: flex; align-items: baseline; gap: 10px; margin: 0 auto; }
.lphase b { white-space: nowrap; font-size: 26px; color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, .5); }
.lphase .mono { font-size: 11.5px; letter-spacing: .14em; color: rgba(255, 255, 255, .55); }
.ltimer { min-width: 60px; height: 34px; padding: 0 12px; border-radius: 10px; display: grid; place-items: center; background: rgba(0, 0, 0, .3); color: #fff; font-size: 15px; font-weight: 600; }
.ltimer.warn { color: #ffb4a8; animation: blink 1s steps(2) infinite; }
.myrole { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px 0 6px; border-radius: 13px; background: rgba(0, 0, 0, .3); color: #fff; text-align: left; transition: background .2s; }
.myrole:hover { background: rgba(0, 0, 0, .45); }
.myrole .ri { width: 34px; height: 34px; border-radius: 10px; padding: 3px; display: grid; } .myrole .ri.wolf { background: #1b2457; } .myrole .ri.vil { background: #5a4024; }
.myrole small { display: block; font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; opacity: .65; }
.myrole b { font-size: 14px; }
.lnarr { text-align: center; padding: 6px 20px 4px; min-height: 52px; font-size: clamp(16px, 1.8vw, 20px); color: #fff; text-shadow: 0 2px 16px rgba(0, 0, 0, .6); text-wrap: balance; }
.lnarr b { color: #ffd36e; }
.lmain { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; min-height: 0; padding: 0 max(16px, env(safe-area-inset-right, 0px)) 12px max(16px, env(safe-area-inset-left, 0px)); }
.village { position: relative; min-height: 0; }
.village .fire { position: absolute; left: 50%; top: 50%; width: 70px; height: 70px; margin: -35px 0 0 -35px; }
.village .fire i { position: absolute; left: 50%; bottom: 10px; width: 26px; height: 40px; margin-left: -13px; border-radius: 50% 50% 40% 40%; background: radial-gradient(circle at 50% 80%, #fff2b0, #ff9b3d 45%, rgba(230, 70, 30, 0) 75%); filter: blur(1px); animation: flame 1.1s ease-in-out infinite alternate; transform-origin: 50% 100%; }
.village .fire i:nth-child(2) { width: 18px; margin-left: -20px; height: 30px; animation-delay: -.4s; } .village .fire i:nth-child(3) { width: 18px; margin-left: 2px; height: 28px; animation-delay: -.7s; }
.village .fire::before { content: ""; position: absolute; inset: -60px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 150, 60, .28), transparent); animation: glowf 2s ease-in-out infinite alternate; }
.village .fire::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 8px; border-radius: 4px; background: #4a2a14; box-shadow: 0 -2px 0 #6b3d1e; }
@keyframes flame { to { transform: scaleY(1.18) scaleX(.9) skewX(4deg); } }
@keyframes glowf { to { opacity: .6; transform: scale(1.1); } }
.ltable.is-night .village .fire { opacity: .45; }
.tok { position: absolute; left: 0; top: 0; transform: translate(calc(var(--x) - 50%), calc(var(--y) - 50%)); display: grid; justify-items: center; gap: 4px; width: calc(var(--s) * 1.7); transition: transform .8s var(--ease-out), filter .6s, opacity .6s; cursor: default; color: #fff; }
.tok .tav { position: relative; width: var(--s); height: var(--s); border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 3px rgba(255, 255, 255, .85), 0 10px 22px -8px rgba(0, 0, 0, .8); transition: box-shadow .3s, transform .3s var(--ease-out); }
.tok .tav .av { --s: 100% !important; width: 100%; height: 100%; border-radius: 50%; font-size: calc(var(--s) * .42); }
.tok .tnm { font-size: 12.5px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 6px rgba(0, 0, 0, .8); }
.tok .tcount { position: absolute; top: -6px; right: calc(50% - var(--s) / 2 - 10px); min-width: 26px; height: 26px; padding: 0 7px; border-radius: 13px; background: var(--danger); color: #2a0b05; font: 800 14px/26px var(--body); text-align: center; box-shadow: 0 4px 10px rgba(0, 0, 0, .5); }
.tok .tcount:empty { display: none; }
.tok .tvotes { display: flex; gap: 2px; min-height: 0; }
.tok .tvotes i { width: 16px; height: 16px; border-radius: 50%; background: rgba(255, 255, 255, .85); color: #1a1611; font: 700 9px/16px var(--body); font-style: normal; text-align: center; }
.tok .ttag em { white-space: nowrap; font: 600 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; font-style: normal; padding: 3px 6px; border-radius: 5px; background: rgba(0, 0, 0, .45); }
.r-wolf { color: #ff9b8a; } .r-vil { color: #ffd9a6; }
.tok.me .tav { box-shadow: 0 0 0 3px var(--brass), 0 10px 22px -8px rgba(0, 0, 0, .8); }
.tok.wolfmate .tav { box-shadow: 0 0 0 3px #ff6a55, 0 0 22px rgba(255, 106, 85, .55); }
.tok.target { cursor: pointer; }
.tok.target:hover .tav { transform: scale(1.1); box-shadow: 0 0 0 3px #ffd36e, 0 0 30px rgba(255, 211, 110, .7); }
.tok.voted .tav { box-shadow: 0 0 0 4px var(--danger), 0 0 30px rgba(255, 106, 85, .7); }
.tok.voted::before { content: "Ton vote"; position: absolute; top: calc(var(--s) * -.1 - 22px); font: 700 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; background: var(--danger); color: #2a0b05; padding: 4px 7px; border-radius: 6px; }
.tok.dead { filter: grayscale(1) brightness(.6); opacity: .8; }
.tok.dead .tav::after { content: ""; position: absolute; inset: 0; background: linear-gradient(45deg, transparent 46%, rgba(255, 255, 255, .7) 47% 53%, transparent 54%), linear-gradient(-45deg, transparent 46%, rgba(255, 255, 255, .7) 47% 53%, transparent 54%); }
.ltable.is-night .tok:not(.me):not(.wolfmate):not(.dead) .tav { filter: brightness(.75); }
.lchat { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; border-radius: 18px; background: rgba(8, 12, 30, .55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); overflow: hidden; color: #fff; transition: box-shadow .4s; }
.ltable.chat-wolves .lchat { box-shadow: inset 0 0 0 1.5px rgba(255, 106, 85, .55); }
.lch-h { display: flex; align-items: baseline; gap: 8px; padding: 14px 16px 10px; border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: 13px; }
.lch-h b { font: 800 18px/1 var(--display); font-variation-settings: "wdth" 80; }
.lch-h .dim { color: rgba(255, 255, 255, .5); }
.lch-x { display: none; margin-left: auto; width: 34px; height: 34px; border-radius: 10px; place-items: center; color: #fff; }
.lch-x svg { width: 18px; height: 18px; }
.lch-list { overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.msg { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; align-items: start; }
.msg b { font-size: 12.5px; color: rgba(255, 255, 255, .7); }
.msg p { margin: 2px 0 0; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.msg.mine b { color: var(--brass); }
.msg.ch-loups p { color: #ffb4a8; } .msg.ch-dead p { color: rgba(255, 255, 255, .55); font-style: italic; }
.chtag { font: 600 9.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 2px 5px; border-radius: 4px; background: rgba(255, 106, 85, .25); color: #ffb4a8; margin-left: 4px; }
.lch-f { display: flex; gap: 8px; padding: 10px; border-top: 1px solid rgba(255, 255, 255, .08); }
.lch-f .inp { height: 44px; background: rgba(0, 0, 0, .3); color: #fff; font-size: 15px; }
.lch-f .inp:disabled { opacity: .5; }
.lch-f .btn { height: 44px; padding: 0 14px; }
.lhint { text-align: center; padding: 0 16px calc(12px + env(safe-area-inset-bottom, 0px)); color: rgba(255, 255, 255, .7); font-size: 14px; min-height: 30px; }
.lchat-btn { display: none; position: absolute; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 6; height: 48px; padding: 0 16px; border-radius: 15px; background: var(--paper); color: var(--ink); font-weight: 600; align-items: center; gap: 8px; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .8); }
.lchat-btn svg { width: 20px; height: 20px; }
.lchat-btn .badge { position: static; box-shadow: none; }
/* transitions jour / nuit : un voile de ciel translucide, l'astre qui se lève, un titre fin entre deux filets dorés */
.ltrans { position: absolute; inset: 0; z-index: 210; display: grid; place-items: center; pointer-events: none; overflow: hidden; }
.ltrans .lt-sky { position: absolute; inset: 0; backdrop-filter: blur(3px) saturate(.8); }
.ltrans.to-night .lt-sky { background: radial-gradient(120% 90% at 50% 30%, rgba(27, 36, 87, .78), rgba(5, 8, 26, .94) 70%); }
.ltrans.to-dawn .lt-sky { background: linear-gradient(180deg, rgba(38, 52, 104, .86) 0%, rgba(120, 90, 140, .78) 42%, rgba(214, 140, 110, .74) 72%, rgba(255, 200, 150, .76) 100%); }
.ltrans .lt-orb { position: absolute; left: 50%; top: 18%; width: clamp(80px, 13vw, 130px); aspect-ratio: 1; border-radius: 50%; }
.ltrans.to-night .lt-orb { background: radial-gradient(circle at 36% 34%, #fffbe8, #f1e2b0 55%, #c9b47a); box-shadow: 0 0 80px 24px rgba(255, 240, 190, .28), inset -10px -8px 0 rgba(160, 140, 90, .25); }
.ltrans.to-dawn .lt-orb { top: auto; bottom: -6%; width: clamp(160px, 26vw, 260px); background: radial-gradient(circle, #fff6d8, #ffd27a 40%, rgba(255, 170, 90, 0) 70%); }
.ltrans .lt-stars { position: absolute; inset: 0; background-image: radial-gradient(1.4px 1.4px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 28% 32%, #fff, transparent), radial-gradient(1.6px 1.6px at 44% 10%, #fff, transparent), radial-gradient(1px 1px at 63% 26%, #fff, transparent), radial-gradient(1.4px 1.4px at 78% 14%, #fff, transparent), radial-gradient(1px 1px at 88% 36%, #fff, transparent), radial-gradient(1.2px 1.2px at 6% 44%, #fff, transparent), radial-gradient(1px 1px at 36% 52%, #fff, transparent), radial-gradient(1.2px 1.2px at 92% 58%, #fff, transparent); animation: ltwinkle 2.6s ease-in-out infinite alternate; }
@keyframes ltwinkle { from { opacity: .5; } to { opacity: 1; } }
.ltrans .lt-rays { position: absolute; left: 50%; bottom: -30%; width: 160vmax; aspect-ratio: 1; transform: translateX(-50%); background: repeating-conic-gradient(from 0deg, rgba(255, 230, 170, .16) 0deg 6deg, transparent 6deg 18deg); mask: radial-gradient(circle, #000 10%, transparent 55%); -webkit-mask: radial-gradient(circle, #000 10%, transparent 55%); animation: lrays 9s linear infinite; }
@keyframes lrays { to { transform: translateX(-50%) rotate(40deg); } }
.ltrans .lt-txt { position: relative; display: grid; justify-items: center; gap: 10px; text-align: center; padding: 0 20px; }
.ltrans .lt-txt i { width: min(220px, 50vw); height: 1.5px; background: linear-gradient(90deg, transparent, var(--brass), transparent); }
.ltrans .lt-txt b { font-size: clamp(42px, 8vw, 92px); line-height: 1; color: #fff8e6; text-shadow: 0 4px 30px rgba(0, 0, 0, .45); letter-spacing: .01em; }
.ltrans.to-dawn .lt-txt b { color: #fffaf0; text-shadow: 0 3px 24px rgba(90, 40, 30, .45); }
.ltrans .lt-txt small { font: 600 clamp(13px, 1.8vw, 18px)/1.2 var(--body); letter-spacing: .06em; color: rgba(255, 248, 230, .85); text-transform: uppercase; }
.lbanner { position: absolute; left: 50%; top: 14px; z-index: 205; pointer-events: none; padding: 9px 20px; border-radius: 999px; background: rgba(12, 18, 40, .72); backdrop-filter: blur(6px); color: #fff8e6; box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .45), 0 14px 30px -14px rgba(0, 0, 0, .8); white-space: nowrap; max-width: calc(100% - 24px); overflow: hidden; text-overflow: ellipsis; }
.lbanner span { font-size: clamp(16px, 2.2vw, 22px); }
.lbanner.dusk { background: rgba(70, 30, 30, .74); }
.lrole, .ldeath { position: absolute; inset: 0; z-index: 220; display: grid; place-items: center; background: rgba(3, 5, 15, .6); backdrop-filter: blur(4px); perspective: 1200px; padding: 16px; }
.flipc { position: relative; transform-style: preserve-3d; }
.flipc .face { backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 24px; }
.flipc .face.back { position: absolute; inset: 0; transform: rotateY(180deg); background: radial-gradient(circle at 50% 40%, #1d2a6b, #05081a); display: grid; place-items: center; box-shadow: inset 0 0 0 2px rgba(214, 176, 102, .5); }
.flipc .back b { position: absolute; font-size: 90px; color: var(--brass); }
.moonbig { width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fffbe8, #c9b47a); box-shadow: 0 0 60px rgba(255, 240, 190, .4); }
.rcard, .dcard { width: 340px; max-width: calc(100vw - 40px); }
.rcard .front, .dcard .front { display: grid; justify-items: center; gap: 12px; text-align: center; padding: 28px 24px 24px; color: #fff; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9); }
.rcard .front.wolf, .dcard .front.wolf { background: radial-gradient(120% 80% at 50% 0%, #3b47a8, #141a45 70%); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9), inset 0 0 0 2px #ff6a55; }
.rcard .front.vil, .dcard .front.vil { background: radial-gradient(120% 80% at 50% 0%, #b37a42, #4a2e18 75%); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9), inset 0 0 0 2px #ffd9a6; }
.rcard small, .dcard small { font: 500 11px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.rcard .ri, .dcard .ri { width: 120px; height: 120px; display: block; }
.rcard .ri svg, .dcard .ri svg { width: 100%; height: 100%; }
.rcard b.d { font-size: 46px; line-height: .9; } .dcard b.d { font-size: 32px; }
.rcard p { margin: 0; font-size: 15px; opacity: .9; }
.dcard em { font-style: normal; font: 700 14px/1 var(--body); padding: 8px 12px; border-radius: 10px; background: rgba(0, 0, 0, .3); }
.dcard .front .av { --s: 84px; border-radius: 50%; box-shadow: 0 0 0 3px #fff; }
.mates { display: grid; gap: 8px; justify-items: center; }
.mates span { display: inline-flex; align-items: center; gap: 8px; margin: 0 6px; font-weight: 600; }
.lend.win-loups h3 { color: #2c3570; } .lend.win-village h3 { color: #8b5a2b; }
.teams { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.teams small { display: flex; align-items: center; gap: 8px; font: 600 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px; }
.teams small svg { width: 26px; height: 26px; }
.teams small.r-wolf { color: #b4311f; } .teams small.r-vil { color: #8b5a2b; }
.teams ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.teams li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: rgba(26, 22, 17, .05); font-size: 14px; min-width: 0; }
.teams li .who { display: grid; gap: 3px; min-width: 0; flex: 1; }
.teams li b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.2; }
.teams li .meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.teams li .meta .rl { font-size: 11px; padding: 2px 7px; }
.paper.lend { width: min(640px, calc(100vw - 32px)); }
.teams li .dim { font-size: 12px; white-space: nowrap; }
.teams li.dead { opacity: .65; }
@media (max-width: 900px) {
  .lmain { grid-template-columns: minmax(0, 1fr); }
  .lchat { position: absolute; left: 10px; right: 10px; bottom: 10px; top: 30%; z-index: 15; transform: translateY(110%); transition: transform .5s var(--ease-out); background: rgba(8, 12, 30, .92); }
  .ltable.chat-open .lchat { transform: none; }
  .lch-x { display: grid; }
  .lchat-btn { display: inline-flex; }
  .teams { grid-template-columns: minmax(0, 1fr); }
  .myrole span:last-child { display: none; } .myrole { padding: 0 6px; }
  .lphase b { font-size: 20px; }
  .lhint { padding-right: 140px; text-align: left; }
}

/* =================== QUIZ GAMES =================== */
.qtable { position: relative; min-height: calc(100vh - var(--nav-h) - 28px); display: grid; grid-template-rows: auto auto minmax(0, 1fr); overflow: hidden; border-radius: 22px 22px 0 0; background: radial-gradient(90% 70% at 50% 8%, #3a2458, #1a1030 50%, #0a0714); isolation: isolate; padding-bottom: 120px; }
.qlights { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.qlights i { position: absolute; top: -10%; width: 34%; height: 120%; background: linear-gradient(180deg, rgba(255, 220, 140, .22), transparent 70%); clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%); transform-origin: 50% 0; animation: beam 7s ease-in-out infinite alternate; mix-blend-mode: screen; }
.qlights i:nth-child(1) { left: -6%; transform: rotate(-24deg); } .qlights i:nth-child(2) { left: 22%; animation-delay: -2s; transform: rotate(-8deg); }
.qlights i:nth-child(3) { right: 22%; animation-delay: -4s; transform: rotate(8deg); } .qlights i:nth-child(4) { right: -6%; animation-delay: -1s; transform: rotate(24deg); }
@keyframes beam { from { rotate: -6deg; opacity: .7; } to { rotate: 6deg; opacity: 1; } }
.qbar { display: flex; align-items: center; gap: 12px; padding-block: 12px 4px; }
.qtitle { display: flex; align-items: baseline; gap: 14px; margin: 0 auto; }
.qtitle b { font-size: 26px; color: var(--brass); }
.qtitle .mono { font-size: 12px; letter-spacing: .12em; color: rgba(255, 255, 255, .6); }
.qscores { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; padding-block: 10px 6px; }
.desk { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; min-width: 150px; max-width: 220px; padding: 10px 14px 10px 10px; border-radius: 14px; background: linear-gradient(180deg, #2a2f3a, #171a21); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 12px 24px -12px rgba(0, 0, 0, .8); color: #fff; transition: box-shadow .4s; }
.desk .av-wrap, .desk > .av { grid-row: 1 / 3; }
.desk .dn { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desk .ds { grid-row: 1 / 3; grid-column: 3; font-size: 34px; line-height: 1; color: #ffd36e; text-shadow: 0 0 14px rgba(255, 200, 80, .5); min-width: 26px; text-align: right; }
.desk .dst { grid-column: 2; font-size: 11.5px; color: rgba(255, 255, 255, .55); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.desk .dst.ok { color: var(--mint); } .desk .dst.ko { color: #ff9b8a; } .desk .dst.sent { color: var(--brass); }
.desk.lead { box-shadow: inset 0 0 0 1.5px var(--brass), 0 12px 24px -12px rgba(0, 0, 0, .8); }
.desk.won { box-shadow: inset 0 0 0 2px var(--mint), 0 0 30px rgba(61, 224, 166, .4); }
.qstage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 20px; align-items: start; padding-block: 18px; }
.qstage:has(.qmaster), .qstage:has(.qwait) { grid-template-columns: minmax(0, 1fr); }
.qcard { position: relative; border-radius: 26px; padding: 30px 30px 26px; background: linear-gradient(180deg, #1f4ea8, #102a66); color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .15), 0 40px 80px -30px rgba(0, 0, 0, .9); display: grid; gap: 20px; min-height: 300px; align-content: start; }
.qc-top { display: flex; align-items: center; gap: 10px; padding-right: 90px; }
.qcard .cat, .qs .cat { height: 26px; padding: 0 10px; border-radius: 8px; display: inline-flex; align-items: center; font: 600 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; background: rgba(255, 211, 110, .2); color: #ffd36e; }
.qround { font-size: 12px; opacity: .7; letter-spacing: .1em; }
.qq { font: 700 clamp(24px, 3.2vw, 38px)/1.15 var(--display); font-variation-settings: "wdth" 90; letter-spacing: -.01em; padding-right: 70px; text-wrap: balance; }
.qcard .ring { position: absolute; right: 22px; top: 22px; width: 84px; height: 84px; transform: rotate(-90deg); }
.qcard .ring circle { fill: none; stroke-width: 8; }
.qcard .ring .bg { stroke: rgba(255, 255, 255, .15); }
.qcard .ring .fg { stroke: #ffd36e; stroke-linecap: round; stroke-dasharray: 276.5; stroke-dashoffset: 0; transition: stroke-dashoffset .15s linear, stroke .3s; }
.qcard .ring .fg.warn { stroke: var(--danger); }
.qcard .secs { position: absolute; right: 22px; top: 22px; width: 84px; height: 84px; display: grid; place-items: center; font-size: 34px; }
.qform { display: flex; gap: 12px; align-items: center; }
.qform .inp { height: 60px; font-size: 19px; background: rgba(0, 0, 0, .25); color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .25); }
.qform .inp::placeholder { color: rgba(255, 255, 255, .5); }
.qform .inp:focus { box-shadow: inset 0 0 0 2px #ffd36e; }
.buzzbtn { flex: none; width: 96px; height: 96px; border-radius: 50%; background: radial-gradient(circle at 40% 30%, #ff8a80, #e5403a 45%, #a3221c); color: #fff; font: 800 15px/1 var(--display); letter-spacing: .02em; text-transform: uppercase; box-shadow: 0 8px 0 #6e1410, 0 20px 30px -10px rgba(0, 0, 0, .8), inset 0 -4px 10px rgba(0, 0, 0, .25); transition: transform .1s, box-shadow .1s; }
.buzzbtn:hover { filter: brightness(1.08); }
.buzzbtn:active { transform: translateY(6px); box-shadow: 0 2px 0 #6e1410, 0 8px 16px -6px rgba(0, 0, 0, .8); }
.qsent, .qexp, .qwait-s { display: flex; gap: 12px; align-items: center; padding: 16px 18px; border-radius: 16px; background: rgba(0, 0, 0, .25); font-size: 16px; }
.qsent svg { width: 22px; height: 22px; color: var(--mint); flex: none; }
.qexp { display: grid; gap: 4px; } .qexp small, .qreveal small { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.qexp b { font-size: 22px; color: #ffd36e; }
.dots { display: inline-flex; gap: 5px; } .dots i { width: 8px; height: 8px; border-radius: 50%; background: #ffd36e; animation: dot 1s ease-in-out infinite; } .dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 50% { transform: translateY(-6px); opacity: .5; } }
.qreveal { display: grid; gap: 8px; justify-items: start; padding: 18px 20px; border-radius: 18px; }
.qreveal.yes { background: rgba(61, 224, 166, .16); box-shadow: inset 0 0 0 1.5px rgba(61, 224, 166, .5); }
.qreveal.no { background: rgba(255, 106, 85, .14); box-shadow: inset 0 0 0 1.5px rgba(255, 106, 85, .4); }
.qreveal b.d { font-size: clamp(30px, 4vw, 46px); color: #fff; }
.qreveal .btn { margin-top: 6px; }
.qanswers { display: grid; gap: 10px; }
.qanswers.dark { color: #fff; }
.qa { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px; border-radius: 12px; background: rgba(26, 22, 17, .05); }
.qanswers.dark .qa { background: rgba(255, 255, 255, .06); }
.qa b { display: block; font-size: 14px; }
.qa span { font-size: 13.5px; color: var(--ink-2); overflow-wrap: anywhere; }
.qanswers.dark .qa span { color: rgba(255, 255, 255, .7); }
.qa.ok { box-shadow: inset 3px 0 0 var(--u-green); } .qa.ko { box-shadow: inset 3px 0 0 var(--danger); }
.qa.sugg { background: rgba(214, 176, 102, .25); }
.qa .okmark svg { width: 20px; height: 20px; color: var(--u-green); }
.qmaster { display: grid; gap: 18px; color: #fff; }
.qm-h { display: grid; gap: 10px; }
.qsugg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.qs { display: grid; gap: 12px; align-content: start; text-align: left; padding: 20px; border-radius: 20px; background: linear-gradient(180deg, #1f4ea8, #102a66); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .15), 0 20px 40px -20px rgba(0, 0, 0, .8); transition: transform .4s var(--ease-out), box-shadow .3s; min-height: 200px; }
.qs:hover { transform: translateY(-6px) rotate(-.5deg); box-shadow: inset 0 0 0 2px #ffd36e, 0 30px 50px -20px rgba(0, 0, 0, .9); }
.qs b { font: 700 19px/1.25 var(--display); font-variation-settings: "wdth" 90; }
.qs .ans { font-size: 13px; color: rgba(255, 255, 255, .65); }
.qs .go { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: #ffd36e; }
.qs .go svg { width: 14px; height: 14px; }
.qm-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.qm-row .btn.ghost { --fg: #fff; }
.qcustom { display: grid; gap: 14px; }
.qwait { position: relative; display: grid; justify-items: center; gap: 14px; text-align: center; padding: 50px 20px; color: #fff; }
.qwait .spot { position: absolute; left: 50%; top: 0; width: 360px; height: 360px; margin-left: -180px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 220, 140, .25), transparent); }
.qwait .buzzbig { width: 180px; position: relative; } .qwait .buzzbig svg { width: 100%; height: auto; display: block; }
.qwait .muted { color: rgba(255, 255, 255, .65); margin: 0; }
.qstar { position: absolute; left: 0; top: 0; z-index: 30; color: #ffd36e; font-size: 26px; pointer-events: none; text-shadow: 0 0 12px rgba(255, 210, 110, .8); }
.qrole .role { height: 26px; }
@media (max-width: 900px) {
  .qstage { grid-template-columns: minmax(0, 1fr); }
  .qsugg { grid-template-columns: minmax(0, 1fr); }
  .qs { min-height: 0; }
  .qcard { padding: 22px 20px; min-height: 0; }
  .qcard .ring, .qcard .secs { width: 64px; height: 64px; right: 16px; top: 16px; } .qcard .secs { font-size: 26px; }
  .qq { padding-right: 60px; }
  .buzzbtn { width: 76px; height: 76px; font-size: 12px; }
  .desk { min-width: 0; max-width: none; flex: 1 1 140px; }
}
body.in-game .page-partie-x { padding-bottom: 0; }

.sec-h > .chips { display: flex; }

.paper .btn.xs { --fg: var(--ink); box-shadow: inset 0 0 0 1px rgba(26, 22, 17, .25); }
.paper .btn.xs:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.lobby .grid-side { grid-template-columns: minmax(0, 1fr) minmax(0, 380px); }
.grid-side.prof-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
@media (max-width: 900px) { .lobby .grid-side, .grid-side.prof-grid { grid-template-columns: minmax(0, 1fr); } }

/* logo Rats Game */
.brand svg.ratlogo { width: 40px; height: 40px; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .45)); transition: transform .6s var(--ease-out); }
.brand:hover svg.ratlogo { transform: rotate(-8deg) scale(1.06); }
.ratlogo .ear { transform-box: fill-box; transform-origin: 50% 90%; transition: transform .5s var(--ease-out); }
.brand:hover .ratlogo .el { transform: rotate(-14deg); } .brand:hover .ratlogo .er { transform: rotate(14deg); }
.ratlogo .eyes, .ratbadge .eyes { transform-box: fill-box; transform-origin: center; animation: blinkrat 5s infinite; }
@keyframes blinkrat { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
.ratbadge text { text-transform: uppercase; }
@media (max-width: 420px) { .brand svg.ratlogo { width: 34px; height: 34px; } }

/* =================== LOUP-GAROU : village =================== */
.ltable .village { position: relative; min-height: 0; overflow: hidden; border-radius: 22px; container-type: size; }
.village .vdefs { position: absolute; width: 0; height: 0; }
.village .vback { position: absolute; inset: 0; transform: translate(calc(var(--px, 0) * -5px), calc(var(--py, 0) * -3px)); pointer-events: none; }
.village .vback .hills { position: absolute; left: -2%; width: 104%; top: 6%; height: 18%; transition: filter 2s; }
.village .decor { --u: min(1.45cqw, 2.1cqh); position: absolute; inset: 0; transform: translate(calc(var(--px, 0) * -12px), calc(var(--py, 0) * -7px)); }
.village .ground { position: absolute; inset: 0; width: 100%; height: 100%; }
.village .forest { position: absolute; left: -2%; width: 104%; top: 12%; height: 12%; z-index: 1; }
.village .it { position: absolute; width: calc(var(--w) * var(--u)); transform: translate(-50%, -100%); pointer-events: none; }
.village .it svg, .village .fountain svg { width: 100%; height: auto; display: block; overflow: visible; }
.village .fountain { position: absolute; left: 50%; top: 61%; width: calc(14 * var(--u)); transform: translate(-50%, -80%); z-index: 121; pointer-events: none; }
.village .gsh { transition: opacity 2s; }
.village .toks { position: absolute; inset: 0; z-index: 60; }
/* fenêtres : reflet bleuté le jour, chaudes la nuit */
.village .win { fill: #7d94b4; transition: fill 1.6s; }
.village .win.stained { fill: #6b77a8; }
.village .lampf { fill: #6b6b78; transition: fill 1.5s; }
.village .forgefire { animation: forge 1.3s ease-in-out infinite alternate; }
@keyframes forge { from { fill: #ff7a2a; } to { fill: #ffc25a; } }
.village .smoke circle { fill: rgba(236, 236, 244, .55); animation: smoke 4.2s ease-in infinite; transform-box: fill-box; transform-origin: center; }
.village .smoke circle:nth-child(2) { animation-delay: -1.4s; } .village .smoke circle:nth-child(3) { animation-delay: -2.8s; }
.village .smoke.big circle { fill: rgba(200, 200, 210, .6); }
@keyframes smoke { 0% { transform: translateY(6px) scale(.5); opacity: 0; } 30% { opacity: .9; } 100% { transform: translate(6px, -26px) scale(1.7); opacity: 0; } }
.village .sails { transform-box: view-box; animation: sails 18s linear infinite; }
@keyframes sails { to { transform: rotate(360deg); } }
.village .water { fill: #4f8fc4; transition: fill 2s; }
.village .jets path { stroke-dasharray: 5 4; animation: jet .7s linear infinite; }
@keyframes jet { to { stroke-dashoffset: -9; } }
.village .ripple ellipse { transform-box: fill-box; transform-origin: center; animation: ripple 2.6s ease-out infinite; }
.village .ripple ellipse:nth-child(2) { animation-delay: -1.3s; }
@keyframes ripple { from { transform: scale(.3); opacity: .9; } to { transform: scale(3.4); opacity: 0; } }
/* voile de nuit / crépuscule, puis les lumières par-dessus */
.village .vshade { position: absolute; inset: -30px; z-index: 300; pointer-events: none; mix-blend-mode: multiply; opacity: 0; background: linear-gradient(180deg, #34428a, #3d4a92 45%, #2c3678); transition: opacity 2s; }
.village .vlights { position: absolute; inset: 0; z-index: 301; pointer-events: none; opacity: 0; mix-blend-mode: screen; transition: opacity 1.8s; }
.village .vlights i { position: absolute; left: 0; top: 0; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 218, 140, .95), rgba(255, 172, 72, .5) 34%, rgba(255, 150, 60, 0)); }
.village .vlights i.st { background: radial-gradient(closest-side, rgba(205, 175, 255, .9), rgba(255, 140, 190, .35) 40%, rgba(255, 140, 190, 0)); }
.village .vlights i.lp { animation: flick 2.8s ease-in-out infinite alternate; }
.village .vlights i.fg { background: radial-gradient(closest-side, rgba(255, 150, 60, .95), rgba(255, 90, 30, .4) 40%, rgba(255, 90, 30, 0)); animation: flick 1.3s ease-in-out infinite alternate; }
@keyframes flick { from { opacity: .75; } to { opacity: 1; } }
.village .vmist { position: absolute; inset: 0; z-index: 302; pointer-events: none; opacity: 0; transition: opacity 2.4s; }
.village .vmist i { position: absolute; left: -30%; width: 160%; height: 16%; border-radius: 50%; background: radial-gradient(closest-side, rgba(205, 215, 255, .32), rgba(205, 215, 255, 0)); animation: mist 24s ease-in-out infinite alternate; }
.village .vmist i:nth-child(1) { top: 20%; } .village .vmist i:nth-child(2) { top: 74%; height: 22%; animation-delay: -12s; }
@keyframes mist { to { transform: translateX(14%); } }
.village .flies { position: absolute; inset: 0; z-index: 303; pointer-events: none; opacity: 0; transition: opacity 2s; }
.village .flies i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fff6a8; box-shadow: 0 0 8px 3px rgba(255, 240, 120, .65); animation: fly 9s ease-in-out infinite alternate, fblink 2.6s ease-in-out infinite; }
@keyframes fly { 0% { transform: translate(0, 0); } 33% { transform: translate(18px, -12px); } 66% { transform: translate(-10px, -24px); } 100% { transform: translate(14px, 6px); } }
@keyframes fblink { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
.village .birds { position: absolute; inset: 0; opacity: 0; transition: opacity 2s; }
.village .birds i { position: absolute; left: -6%; top: 6%; width: 18px; height: 8px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 8'%3E%3Cpath d='M1 6q4-6 8-1q4-5 8 1' fill='none' stroke='%232a2a3a' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; animation: bird 26s linear infinite, flap .5s ease-in-out infinite alternate; }
.village .birds i:nth-child(2) { top: 9%; width: 14px; animation-delay: -9s, -.2s; } .village .birds i:nth-child(3) { top: 3.5%; width: 12px; animation-delay: -17s, -.35s; }
@keyframes bird { from { left: -6%; } to { left: 106%; } }
@keyframes flap { to { transform: scaleY(.45); } }
/* lune et soleil dans le ciel du village */
.village .vmoon, .village .vsun { position: absolute; border-radius: 50%; transition: transform 2.4s var(--ease-io), opacity 2s; }
.village .vmoon { right: 7%; top: 1.5%; width: min(9cqw, 74px); aspect-ratio: 1; background: radial-gradient(circle at 36% 34%, #fffbe8, #f1e2b0 55%, #c9b47a); box-shadow: 0 0 60px 14px rgba(255, 240, 190, .32), inset -8px -6px 0 rgba(160, 140, 90, .25); }
.village .vsun { left: 3%; top: 2%; width: min(13cqw, 110px); aspect-ratio: 1; background: radial-gradient(circle, #fffbe0, #ffd56a 42%, rgba(255, 190, 80, 0) 70%); opacity: 0; transform: translateY(60%); }
.ltable.is-day .village .vmoon { opacity: 0; transform: translateY(-80%); }
.ltable.is-day .village .vsun { opacity: 1; transform: none; }
.ltable.is-dusk .village .vsun { transform: translateY(40%); filter: hue-rotate(-18deg) saturate(1.3); }
.ltable .lsky .moon, .ltable .lsky .sun { display: none; }
.ltable.is-day .lsky::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 160px; background: linear-gradient(180deg, rgba(8, 18, 40, .55), rgba(8, 18, 40, 0)); pointer-events: none; }
/* jour */
.ltable.is-day .village .birds { opacity: .85; }
/* nuit */
.ltable.is-night .village .vshade { opacity: 1; }
.ltable.is-night .village .vlights { opacity: 1; }
.ltable.is-night .village .vmist, .ltable.is-night .village .flies { opacity: 1; }
.ltable.is-night .village .win { fill: #ffd27a; } .ltable.is-night .village .win.stained { fill: #c7a2ff; }
.ltable.is-night .village .lampf { fill: #ffd27a; }
.ltable.is-night .village .gsh { opacity: .3; }
.ltable.is-night .village .water { fill: #2d4c7a; }
.ltable.is-night .village .vback .hills { filter: brightness(.42) saturate(.7) hue-rotate(12deg); }
/* crépuscule (verdict, chasseur) */
.ltable.is-dusk .village .vshade { opacity: .75; background: linear-gradient(180deg, #e08a5a, #e8a87a 50%, #c97a5a); }
.ltable.is-dusk .village .vlights { opacity: .55; }
.ltable.is-dusk .village .vback .hills { filter: brightness(.8) sepia(.35); }
@container (max-width: 640px) {
  .village .decor { --u: min(1.75cqw, 1.5cqh); }
  .village .vback .hills { top: 8%; height: 17%; }
  .village .it.opt { display: none; }
  .village .flies i:nth-child(n+9) { display: none; }
}
@media (prefers-reduced-motion: reduce) { .village .sails, .village .smoke circle, .village .jets path, .village .ripple ellipse, .village .flies i, .village .birds i, .village .vmist i { animation: none; } }
/* le maître du jeu : badge sur le village, panneau de commandes, pause */
.lmj { position: absolute; left: 12px; top: 10px; z-index: 70; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 24px); padding: 6px 12px 6px 6px; border-radius: 14px; background: rgba(20, 14, 6, .62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(214, 176, 102, .55); }
.lmj[hidden] { display: none; }
.lmj small { display: block; font: 600 10px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--brass); }
.lmj b { font-size: 14px; }
.lmj em { display: block; font-style: normal; font-size: 11.5px; opacity: .75; }
.lmj .ri { width: 26px; height: 26px; display: grid; } .lmj .ri svg { width: 100%; height: 100%; }
.myrole .ri.mj { background: #5a4220; }
.rcard .front.mj { background: radial-gradient(120% 80% at 50% 0%, #9a7a3a, #3a2a10 72%); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9), inset 0 0 0 2px #ffd36e; }
.actp.mjp { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; text-align: left; justify-content: stretch; width: min(860px, 100%); box-shadow: inset 0 0 0 1.5px rgba(214, 176, 102, .55), 0 16px 30px -12px rgba(0, 0, 0, .8); }
.mjsay { display: grid; gap: 3px; min-width: 0; }
.mjsay small { font: 600 10px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--brass); }
.mjsay span { font-size: 15px; font-style: italic; }
.mjsay em { font-style: normal; font-size: 12.5px; color: rgba(255, 255, 255, .7); }
.mjbtns { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.lpause { position: absolute; left: 50%; top: 40%; z-index: 205; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 6px; padding: 18px 28px; border-radius: 20px; background: rgba(8, 12, 30, .82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; text-align: center; box-shadow: inset 0 0 0 1.5px rgba(214, 176, 102, .6), 0 30px 60px -20px rgba(0, 0, 0, .9); pointer-events: none; }
.lpause[hidden] { display: none; }
.lpause b { font-size: 40px; color: var(--brass); }
.lpause span { font-size: 14px; opacity: .85; max-width: 280px; }
.ltable.is-paused .ltimer { opacity: .5; }
.msg.ch-mj p { color: #ffe3a3; font-style: italic; }
.msg.ch-mj .chtag { background: rgba(214, 176, 102, .25); color: #ffd36e; }
.rnote { font: 600 12px/1.3 var(--body) !important; letter-spacing: 0 !important; text-transform: none !important; padding: 6px 10px; border-radius: 10px; background: rgba(0, 0, 0, .3); opacity: 1 !important; }
.mjline { display: flex; align-items: center; gap: 8px; } .mjline svg { width: 24px; height: 24px; }
@media (max-width: 900px) {
  .actp.mjp { grid-template-columns: minmax(0, 1fr); }
  .mjbtns { justify-content: flex-start; }
  .lmj { top: 6px; left: 6px; padding: 4px 10px 4px 4px; } .lmj .ri { display: none; }
}
.tok { z-index: 100; }
.tok .tshadow { position: absolute; top: calc(var(--s) * .86); width: calc(var(--s) * .9); height: calc(var(--s) * .22); border-radius: 50%; background: rgba(0, 0, 0, .45); filter: blur(3px); }
.tok .theart { display: none; position: absolute; top: -4px; left: calc(50% - var(--s) / 2 - 8px); width: 22px; height: 22px; border-radius: 50%; background: #ff6b8b; color: #fff; font-size: 12px; line-height: 22px; text-align: center; box-shadow: 0 3px 8px rgba(0, 0, 0, .4); }
.tok.lover .theart { display: block; }
.tok.picked .tav { box-shadow: 0 0 0 4px #ff6b8b, 0 0 26px rgba(255, 107, 139, .7); }
.ltable[data-step="garde"] .tok.picked .tav { box-shadow: 0 0 0 4px #5b9bff, 0 0 26px rgba(91, 155, 255, .8); }
.tok.hunterNow .tav { box-shadow: 0 0 0 4px var(--danger), 0 0 30px rgba(255, 106, 85, .8); filter: none; }
.lcomp { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; padding: 0 16px 8px; }
.cchip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 4px; border-radius: 13px; background: rgba(0, 0, 0, .32); color: #fff; font-size: 12px; font-weight: 600; }
.cchip i { width: 20px; height: 20px; display: grid; } .cchip i svg { width: 100%; height: 100%; }
.lact { display: flex; justify-content: center; padding: 0 16px; }
.actp { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; padding: 10px 12px 10px 16px; border-radius: 16px; background: rgba(8, 12, 30, .8); backdrop-filter: blur(8px); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 16px 30px -12px rgba(0, 0, 0, .8); font-size: 14.5px; margin-bottom: 6px; }
.actp .btn.ghost { --fg: #fff; }
.actp .used { font-size: 12.5px; opacity: .6; }
.actp.witch { box-shadow: inset 0 0 0 1.5px rgba(155, 89, 220, .6), 0 16px 30px -12px rgba(0, 0, 0, .8); }
.myrole .ri.seer, .cchip.seer i, .rcard .front.seer, .dcard .front.seer { background: #2a1f55; }
.myrole .ri.witch { background: #3a1f55; } .myrole .ri.guard { background: #173a6b; } .myrole .ri.hunter { background: #4a1d17; } .myrole .ri.cupid { background: #5a1f33; }
.rcard .front.seer, .dcard .front.seer { background: radial-gradient(120% 80% at 50% 0%, #5b4ab0, #1d1640 70%); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9), inset 0 0 0 2px #b8a8ff; }
.rcard .front.witch, .dcard .front.witch { background: radial-gradient(120% 80% at 50% 0%, #6b3a9a, #241433 72%); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9), inset 0 0 0 2px #bff5d6; }
.rcard .front.guard, .dcard .front.guard { background: radial-gradient(120% 80% at 50% 0%, #2d6ad0, #0f2347 72%); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9), inset 0 0 0 2px #9cc4ff; }
.rcard .front.hunter, .dcard .front.hunter { background: radial-gradient(120% 80% at 50% 0%, #8a3a2a, #2a110c 72%); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9), inset 0 0 0 2px #ffb4a8; }
.rcard .front.cupid, .dcard .front.cupid { background: radial-gradient(120% 80% at 50% 0%, #b8455f, #3a1220 72%); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9), inset 0 0 0 2px #ffc2d0; }
.rl { font-size: 11.5px; font-weight: 700; padding: 3px 7px; border-radius: 6px; background: rgba(26, 22, 17, .08); white-space: nowrap; }
.rl.wolf { color: #b4311f; }
.lovemark { color: #ff6b8b; }
.lend.win-amoureux h3 { color: #b8455f; }
.lintro { position: absolute; inset: 0; z-index: 230; display: grid; place-items: center; align-content: center; gap: 10px; text-align: center; background: radial-gradient(120% 90% at 50% 30%, #18235c, #05081a 70%); color: #fff; overflow: hidden; }
.lintro .moonbig { width: 120px; height: 120px; }
.lintro h2 { font-size: clamp(54px, 9vw, 110px); color: #c9d2ff; text-shadow: 0 0 60px rgba(125, 140, 255, .5); }
.lintro p { margin: 0; font-size: 18px; opacity: .8; }
/* le paquet et les cartes distribuées montrent un vrai dos de carte (tête de loup dans la lune) */
.flipc .face.back.cb { background: transparent; box-shadow: none; padding: 0; overflow: visible; } /* (seulement la carte, sans bandes sombres autour) */
.flipc .face.back.cb svg { width: 100%; height: 100%; display: block; }
.lintro .ideck { position: relative; width: 84px; height: 120px; margin-top: 18px; }
.lintro .ideck svg, .icard svg { display: block; width: 100%; height: 100%; }
.lintro .ideck > svg, .lintro .ideck > i { position: absolute; inset: 0; border-radius: 9px; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .55)); }
.lintro .ideck > i:nth-child(1) { transform: translate(6px, 8px) rotate(5deg); opacity: .8; } .lintro .ideck > i:nth-child(2) { transform: translate(3px, 4px) rotate(2deg); opacity: .9; }
.icard { position: absolute; width: 84px; height: 120px; border-radius: 9px; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .55)); }
@media (max-width: 900px) {
  .village { border-radius: 16px; }
  .lcomp { gap: 4px; } .cchip { height: 22px; font-size: 11px; }
  .lintro .moonbig { width: 80px; height: 80px; }
}

.mchips { display: flex; flex-wrap: wrap; gap: 6px; }
.mchip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: var(--ink-2); box-shadow: inset 0 0 0 1px rgba(26, 22, 17, .2); transition: all .25s var(--ease-out); }
.mchip svg { opacity: 0; width: 0; transition: all .25s; }
.mchip.on { background: var(--ink); color: var(--paper); box-shadow: none; }
.mchip.on svg { opacity: 1; width: 13px; }
@media (max-width: 720px) { .lsky .moon { width: 46px; height: 46px; left: auto; right: 18%; top: 2%; } .lsky .sun { width: 80px; height: 80px; left: auto; right: 14%; top: 0; } }

/* ---------- Quiz : plateau TV ---------- */
.qset { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.qset .qlights { z-index: 4; }
.qset .truss { position: absolute; left: 0; right: 0; top: 0; height: 22px; z-index: 5; background: repeating-linear-gradient(60deg, transparent 0 10px, rgba(255,255,255,.08) 10px 12px), repeating-linear-gradient(-60deg, transparent 0 10px, rgba(255,255,255,.08) 10px 12px), linear-gradient(180deg, #2b2a33, #15141b); box-shadow: 0 1px 0 rgba(255,255,255,.08), 0 6px 18px rgba(0,0,0,.6); display: flex; justify-content: space-around; padding-inline: 4%; }
.qset .spot { position: relative; top: 14px; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 50% 60%, #fff8dc, var(--c, #ffd36e) 45%, #3b2f12 80%); box-shadow: 0 0 18px 4px color-mix(in srgb, var(--c, #ffd36e) 55%, transparent); animation: spotblink 3.2s ease-in-out infinite; animation-delay: calc(var(--k) * -.37s); }
.qset .spot:nth-child(3n+2) { --c: #7fe0c4; } .qset .spot:nth-child(3n) { --c: #ff8fb8; }
@keyframes spotblink { 0%, 100% { opacity: .95; } 50% { opacity: .55; } }
.qset .ledwall { position: absolute; left: 50%; top: 52px; width: min(980px, 72%); height: min(52%, 430px); transform: translateX(-50%); border-radius: 20px 20px 6px 6px; overflow: hidden; z-index: 1; background: #0b0816; box-shadow: inset 0 0 0 2px rgba(255, 211, 110, .18), 0 0 80px rgba(120, 80, 220, .25); }
.qset .leds { position: absolute; inset: -20%; background: conic-gradient(from 0deg at 50% 50%, #3d1f7a, #1f4ea8, #0f7c6b, #8a5a12, #7a1f4f, #3d1f7a); filter: blur(30px) saturate(1.2); opacity: .55; animation: ledspin 24s linear infinite; }
.qset .ledwall::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, transparent 1.1px, #0b0816 1.6px) 0 0 / 7px 7px; opacity: .9; }
@keyframes ledspin { to { transform: rotate(360deg); } }
.qset .ledwall b { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; align-content: center; font-size: clamp(70px, 13vw, 190px); line-height: .85; letter-spacing: -.02em; color: rgba(255, 230, 170, .06); text-align: center; }
.qset .ledwall b em { display: block; font-style: normal; font-size: .38em; letter-spacing: .3em; text-transform: uppercase; }
.qset .ledwall .scan { position: absolute; left: 0; right: 0; height: 40%; z-index: 2; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .06), transparent); animation: scan 5s linear infinite; }
@keyframes scan { from { top: -40%; } to { top: 100%; } }
.qset .screen { position: absolute; top: 96px; width: 13%; max-width: 170px; aspect-ratio: 3 / 4; border-radius: 12px; z-index: 1; background: linear-gradient(160deg, #1f4ea8, #10225a 60%, #0a1236); box-shadow: inset 0 0 0 3px #2c2b36, inset 0 0 0 5px rgba(255,255,255,.08), 0 20px 40px rgba(0,0,0,.6); display: grid; place-items: center; overflow: hidden; }
.qset .screen::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 2px, transparent 2px 4px); }
.qset .screen span { font-size: clamp(60px, 7vw, 110px); color: #ffd36e; text-shadow: 0 0 30px rgba(255, 211, 110, .7); animation: glyph 2.6s ease-in-out infinite; }
.qset .screen.l { left: 3.5%; transform: perspective(700px) rotateY(24deg); } .qset .screen.r { right: 3.5%; transform: perspective(700px) rotateY(-24deg); }
.qset .screen.r { background: linear-gradient(200deg, #7a1f4f, #3a0f2a 60%, #1a0714); } .qset .screen.r span { color: #ffb3cf; text-shadow: 0 0 30px rgba(255, 140, 190, .7); animation-delay: -1.3s; }
@keyframes glyph { 0%, 100% { transform: scale(1) rotate(-4deg); } 50% { transform: scale(1.12) rotate(4deg); } }
.qset .marquee { position: absolute; top: 60px; bottom: 140px; width: 12px; z-index: 2; display: flex; flex-direction: column; justify-content: space-between; }
.qset .marquee.l { left: 1%; } .qset .marquee.r { right: 1%; }
.qset .marquee i { width: 10px; height: 10px; border-radius: 50%; background: #ffe29a; box-shadow: 0 0 10px 2px rgba(255, 210, 120, .7); animation: chase 1.4s steps(1) infinite; }
.qset .marquee i:nth-child(odd) { animation-delay: -.7s; }
@keyframes chase { 0% { opacity: 1; } 50% { opacity: .25; box-shadow: none; } }
.qset .floor { position: absolute; left: -30%; right: -30%; bottom: -8%; height: 48%; z-index: 0; transform: perspective(520px) rotateX(62deg); transform-origin: 50% 100%; background: radial-gradient(50% 60% at 50% 30%, rgba(120, 80, 220, .35), transparent 70%), linear-gradient(180deg, #1a1030, #0a0714); }
.qset .floor .grid { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255, 211, 110, .16) 1px, transparent 1px) 0 0 / 60px 60px, linear-gradient(0deg, rgba(255, 211, 110, .16) 1px, transparent 1px) 0 0 / 60px 60px; mask-image: linear-gradient(180deg, transparent, #000 40%); -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%); animation: floorrun 6s linear infinite; }
@keyframes floorrun { to { background-position: 0 60px, 0 60px; } }
.qset .floor .ring { position: absolute; left: 50%; top: 18%; width: 36%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; box-shadow: 0 0 0 3px rgba(127, 224, 196, .55), 0 0 40px 6px rgba(127, 224, 196, .35), inset 0 0 40px rgba(127, 224, 196, .25); animation: ringpulse 3s ease-in-out infinite; }
@keyframes ringpulse { 50% { box-shadow: 0 0 0 3px rgba(255, 211, 110, .6), 0 0 50px 10px rgba(255, 211, 110, .3), inset 0 0 40px rgba(255, 211, 110, .2); } }
.qset .crowd { position: absolute; left: 0; right: 0; bottom: 0; height: 130px; z-index: 6; background: radial-gradient(60% 90% at 50% 100%, rgba(170, 120, 255, .28), transparent 70%); }
.qset .crowd .row { filter: drop-shadow(0 -1.5px 0 rgba(255, 200, 240, .35)) drop-shadow(0 0 8px rgba(160, 110, 255, .35)); }
.qset .crowd .row { position: absolute; left: -2%; right: -2%; display: flex; justify-content: space-between; }
.qset .crowd .row.back { bottom: 34px; opacity: .75; transform: scale(.82); }
.qset .crowd .row.front { bottom: -6px; }
.qset .hd { position: relative; flex: none; width: 54px; height: calc(70px + var(--h) * 2px); background: radial-gradient(circle at 50% 22%, #07050d 15px, transparent 16px), radial-gradient(60% 55% at 50% 100%, #07050d 98%, transparent 100%); animation: bob 2.4s ease-in-out infinite; animation-delay: calc(var(--d) * -1); }
.qset .row.back .hd { background: radial-gradient(circle at 50% 22%, #120c20 15px, transparent 16px), radial-gradient(60% 55% at 50% 100%, #120c20 98%, transparent 100%); }
.qset .hd:nth-child(5n+2)::after { content: ""; position: absolute; left: 70%; top: 18%; width: 6px; height: 10px; border-radius: 2px; background: #cfe8ff; box-shadow: 0 0 14px 4px rgba(190, 220, 255, .55); animation: phone 3.4s ease-in-out infinite; animation-delay: calc(var(--d) * -2); }
.qset .hd:nth-child(7n+4)::before { content: ""; position: absolute; left: 10%; top: -8%; width: 4px; height: 40px; border-radius: 3px; background: linear-gradient(#ff8fb8, #ffd36e); box-shadow: 0 0 12px 3px rgba(255, 143, 184, .6); transform-origin: 50% 100%; animation: stick 1.6s ease-in-out infinite alternate; }
@keyframes bob { 50% { transform: translateY(-4px); } }
@keyframes phone { 0%, 100% { opacity: .9; } 50% { opacity: .35; } }
@keyframes stick { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } }
.qtable::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(70% 60% at 50% 45%, transparent 40%, rgba(5, 3, 10, .55)); }
@media (max-width: 1000px) { .qset .screen { display: none; } .qset .ledwall { width: 90%; } }
@media (max-width: 700px) { .qtable { padding-bottom: 84px; } .qset .crowd { height: 80px; } .qset .hd { width: 40px; transform: scale(.8); } .qset .marquee { display: none; } .qset .ledwall { top: 44px; height: 38%; } .qset .truss { height: 16px; } .qset .spot { width: 14px; height: 14px; top: 9px; } }

/* transition de lancement du quiz */
.qintro { position: absolute; inset: 0; z-index: 230; display: grid; place-items: center; overflow: hidden; background: rgba(6, 4, 12, .5); }
.qintro .cur { position: absolute; top: 0; bottom: 0; width: 51%; z-index: 1; background: repeating-linear-gradient(90deg, #5a0d18 0 18px, #8c1a28 30px, #b02a36 38px, #7a1422 50px, #5a0d18 64px), #6b1020; box-shadow: inset 0 -60px 80px rgba(0, 0, 0, .55), inset 0 30px 60px rgba(0,0,0,.4); }
.qintro .cur::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35), transparent 30%, transparent 70%, rgba(0,0,0,.5)); }
.qintro .cur.l { left: 0; border-right: 3px solid #3a0610; } .qintro .cur.r { right: 0; border-left: 3px solid #3a0610; }
.qintro .valance { position: absolute; left: 0; right: 0; top: 0; height: 64px; z-index: 2; background: radial-gradient(40px 26px at 40px 64px, transparent 98%, #8c1a28 100%) 0 0 / 80px 64px repeat-x, linear-gradient(#5a0d18, #8c1a28); border-bottom: 4px solid #d6b066; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.qintro .qi-c { position: relative; z-index: 3; display: grid; justify-items: center; gap: 10px; text-align: center; color: #fff; padding: 20px; }
.qintro .onair { font: 700 13px/1 var(--mono); letter-spacing: .3em; padding: 9px 14px 9px 18px; border-radius: 8px; color: rgba(255, 255, 255, .35); background: #2a0a0e; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .15); transition: all .3s; }
.qintro .onair.on { color: #fff; background: #e0312a; box-shadow: 0 0 0 2px #ff8b7a, 0 0 40px 6px rgba(255, 60, 40, .6); }
.qintro h2 { margin: 0; font-size: clamp(54px, 10vw, 120px); line-height: .9; color: #ffd36e; text-shadow: 0 4px 0 #8a5a12, 0 0 50px rgba(255, 200, 80, .5); }
.qintro p { margin: 0; font-size: 17px; color: rgba(255, 255, 255, .8); }
.qintro .count { height: 120px; font-size: 110px; line-height: 120px; color: #fff; text-shadow: 0 0 40px rgba(255, 255, 255, .6); }
.qintro .beam { position: absolute; top: -10%; width: 40%; height: 130%; z-index: 2; background: linear-gradient(180deg, rgba(255, 240, 200, .35), transparent 75%); clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%); transform-origin: 50% 0; mix-blend-mode: screen; animation: sweep 2.2s ease-in-out infinite alternate; }
.qintro .beam.a { left: 0; } .qintro .beam.b { right: 0; animation-delay: -1.1s; animation-direction: alternate-reverse; }
@keyframes sweep { from { transform: rotate(-28deg); } to { transform: rotate(28deg); } }

/* ---------- Scuno : décor de la table ---------- */
/* ---------- Scuno : la salle et la table (étape 6) ---------- */
.gtable { isolation: isolate; grid-template-rows: auto minmax(0, 1fr) auto auto; background: #140c07; border-radius: 22px 22px 0 0; }
.room { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.room .wall { position: absolute; inset: 0 0 36% 0; background: radial-gradient(60% 80% at 50% 0%, #4a2f1a, transparent 70%), linear-gradient(180deg, #24160c, #352113 70%, #2a190d); }
.room .panels { position: absolute; left: 0; right: 0; top: 30%; height: 34%; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .28) 0 2px, rgba(255, 210, 160, .05) 2px 3px, transparent 3px 150px), linear-gradient(180deg, #4d301a, #3a2312); box-shadow: inset 0 4px 0 #6b4424, inset 0 7px 0 #2a170a, inset 0 -8px 16px rgba(0, 0, 0, .45); }
.room .floor { position: absolute; left: 0; right: 0; bottom: 0; height: 38%; background: linear-gradient(180deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, .15) 60%, rgba(0, 0, 0, .4)), repeating-linear-gradient(90deg, #4a2c15 0 74px, #3a210e 74px 76px); }
.room .rug { position: absolute; left: 50%; top: 60%; width: min(1400px, 118%); height: 74%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, #5b1e23 0 74%, #3a1115 75% 80%, #8a5a2a 81% 83%, #3a1115 84% 92%, transparent 93%); opacity: .92; }
.room .sconce { position: absolute; top: 15%; width: 16px; height: 30px; border-radius: 7px 7px 3px 3px; background: linear-gradient(#fff0c8, #e7a64c); box-shadow: 0 0 26px 8px rgba(255, 196, 110, .45), 0 0 140px 70px rgba(255, 170, 80, .13); }
.room .sconce::after { content: ""; position: absolute; left: 50%; top: 100%; width: 24px; height: 8px; margin-left: -12px; border-radius: 0 0 6px 6px; background: #8a6a3a; }
.room .sconce.l { left: 6%; } .room .sconce.r { right: 6%; }
.room .shelf { position: absolute; top: 7%; height: 64px; display: flex; align-items: flex-end; gap: 9px; padding: 0 14px; border-bottom: 7px solid #6b4424; box-shadow: 0 6px 10px rgba(0, 0, 0, .4); opacity: .85; }
.room .shelf.l { left: 13%; } .room .shelf.r { right: 13%; }
.room .shelf i { display: block; width: 13px; border-radius: 5px 5px 2px 2px; background: linear-gradient(90deg, rgba(255, 255, 255, .18), transparent 40%), var(--b, #2f5a3a); }
.room .shelf i:nth-child(1) { height: 44px; --b: #2f5a3a; } .room .shelf i:nth-child(2) { height: 52px; --b: #7a3a1a; } .room .shelf i:nth-child(3) { height: 36px; width: 22px; border-radius: 9px 9px 3px 3px; --b: #a8782a; }
.room .shelf i:nth-child(4) { height: 48px; --b: #3a2a5a; } .room .shelf i:nth-child(5) { height: 30px; width: 26px; border-radius: 3px; --b: #6b4424; }
.room .pendant { position: absolute; left: 50%; top: 0; width: 2px; height: 5%; background: #0c0805; }
.room .pendant::after { content: ""; position: absolute; left: 50%; top: 100%; width: 120px; height: 34px; margin-left: -60px; clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, #2f4a3a, #1d3326); box-shadow: inset 0 -4px 0 #d6b066; }
.room .cone { position: absolute; left: 50%; top: 5%; width: min(1200px, 110%); height: 86%; transform: translateX(-50%); background: radial-gradient(50% 60% at 50% 62%, rgba(255, 228, 165, .2), transparent 70%); clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%); }
.gtable .arena { position: relative; min-height: 0; }
.gtable .ptable { position: absolute; inset: 0; pointer-events: none; }
.gtable .ptable .tshadow { position: absolute; left: calc(var(--cx) - var(--rx) * 1.04); top: calc(var(--cy) - var(--ry) + 26px); width: calc(var(--rx) * 2.08); height: calc(var(--ry) * 2.12); border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .65), transparent); }
.gtable .ptable .rim { position: absolute; left: calc(var(--cx) - var(--rx)); top: calc(var(--cy) - var(--ry)); width: calc(var(--rx) * 2); height: calc(var(--ry) * 2); border-radius: 50%; padding: clamp(10px, 2vw, 22px);
  background: radial-gradient(110% 120% at 50% 12%, rgba(255, 214, 160, .28), transparent 50%), repeating-linear-gradient(100deg, rgba(0, 0, 0, 0) 0 7px, rgba(0, 0, 0, .13) 8px, rgba(0, 0, 0, 0) 12px), linear-gradient(180deg, #8f5d2f, #5c3619 60%, #3f240f);
  box-shadow: 0 0 0 2px #2a170a, inset 0 3px 0 rgba(255, 224, 176, .4), inset 0 -4px 8px rgba(0, 0, 0, .5), 0 12px 0 #2e190a, 0 14px 0 #1c0e04, 0 40px 60px -12px rgba(0, 0, 0, .85); }
.gtable .ptable .felt { position: relative; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: radial-gradient(55% 60% at 50% 38%, #2f8461, #1c5e44 55%, #0f3a29); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .4), inset 0 14px 40px rgba(0, 0, 0, .6); }
.gtable .ptable .felt::before { content: ""; position: absolute; inset: 0; opacity: .4; background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px); background-size: 3px 3px; }
.gtable .ptable .stitch { position: absolute; inset: 12px; border-radius: 50%; border: 2px dashed rgba(214, 176, 102, .3); }
.gtable .ptable .mark { position: absolute; left: 50%; bottom: 9%; transform: translateX(-50%); white-space: nowrap; }
.gtable .ptable .mark b { font-size: clamp(30px, 6vw, 72px); line-height: .9; letter-spacing: .08em; color: rgba(0, 0, 0, .18); text-shadow: 0 1px 0 rgba(255, 255, 255, .06); }
.gtable .ptable .chipstack { position: absolute; display: grid; }
.gtable .ptable .chipstack i { width: 38px; height: 10px; margin-top: -4px; border-radius: 50%; background: var(--cc, #c0392b); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .3); background-image: repeating-linear-gradient(90deg, transparent 0 5px, rgba(255, 255, 255, .75) 5px 8px); background-blend-mode: soft-light; }
.gtable .ptable .chipstack.s1 { left: calc(var(--cx) - var(--rx) * .62); top: calc(var(--cy) + var(--ry) * .3); --cc: #b8322a; }
.gtable .ptable .chipstack.s2 { left: calc(var(--cx) + var(--rx) * .52); top: calc(var(--cy) + var(--ry) * .28); --cc: #1f4ea8; }
/* les places autour de la table */
.gtable .opps { position: absolute; inset: 0; display: block; padding: 0; }
.gtable .seat { position: absolute; left: 0; top: 0; width: auto; padding: 0; gap: 4px; background: none; transform: translate(calc(var(--x) - 50%), calc(var(--y) - 50%)); transition: transform .5s var(--ease-out), opacity .3s; }
.gtable .seat.turn { background: none; transform: translate(calc(var(--x) - 50%), calc(var(--y) - 50%)) scale(1.1); }
.gtable .seat .sav { border-radius: 50%; box-shadow: 0 0 0 3px #2a170a, 0 0 0 5px rgba(214, 176, 102, .45), 0 10px 18px rgba(0, 0, 0, .6); }
.gtable .seat .sav .av { border-radius: 50%; }
.gtable .seat .tring { inset: -9px; border-radius: 50%; box-shadow: 0 0 0 3px var(--brass), 0 0 26px 8px rgba(255, 210, 120, .55); }
.gtable .seat .cnt { position: absolute; right: -11px; bottom: -6px; margin: 0; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 13px; background: var(--paper); color: var(--ink); font-size: 15px; line-height: 26px; text-align: center; box-shadow: 0 0 0 2px #2a170a, 0 3px 8px rgba(0, 0, 0, .5); }
.gtable .seat.one .cnt { background: var(--danger); color: #2a0b05; }
.gtable .seat .mini { display: none; }
.gtable .seat .sinfo b { display: block; font-size: 12.5px; color: #fff; padding: 2px 9px; border-radius: 8px; background: rgba(10, 6, 3, .62); max-width: 116px; }
.gtable .seat.turn .sinfo b { background: var(--brass); color: var(--ink); }
.gtable .seat .tags { position: absolute; top: calc(100% + 2px); left: 50%; transform: translateX(-50%); white-space: nowrap; }
.gtable .seat .tags em { padding: 2px 6px; border-radius: 6px; background: rgba(10, 6, 3, .6); }
.gtable .opps[data-d="2"] .seat .sinfo b { font-size: 12px; max-width: 96px; }
.gtable .opps[data-d="3"] .seat .sinfo b { font-size: 11px; max-width: 74px; padding: 1px 6px; }
.gtable .opps[data-d="3"] .seat .cnt { min-width: 22px; height: 22px; line-height: 22px; font-size: 13px; right: -9px; }
.gtable .opps[data-d="4"] .seat .sinfo b { font-size: 10px; max-width: 58px; padding: 1px 5px; }
.gtable .opps[data-d="4"] .seat .cnt { min-width: 19px; height: 19px; line-height: 19px; font-size: 11.5px; right: -8px; bottom: -4px; padding: 0 4px; }
.gtable .opps[data-d="4"] .seat .tring { inset: -6px; }
.gtable .board { position: absolute; left: 50%; top: 53%; transform: translate(-50%, -50%); padding: 0; z-index: 5; }
.gtable .gstatus { position: relative; z-index: 8; }
.gtable .gstatus > span:first-child { padding: 4px 10px; border-radius: 10px; background: rgba(10, 6, 3, .55); }
@media (max-width: 640px) {
  .gtable .seat { width: auto; padding: 0; }
  /* beaucoup de joueurs sur téléphone : avatar + nombre de cartes, le nom seulement pour celui qui joue */
  .gtable .opps[data-d="3"] .seat:not(.turn) .sinfo, .gtable .opps[data-d="4"] .seat:not(.turn) .sinfo { display: none; }
  .gtable .opps[data-d="3"] .seat .tags, .gtable .opps[data-d="4"] .seat .tags { display: none; }
  .gtable .board { top: 54%; gap: 26px; }
  .room .shelf, .room .sconce { display: none; }
  .gtable .ptable .chipstack { display: none; }
}

.qtitle b { white-space: nowrap; } .qrole .role { white-space: nowrap; }
@media (max-width: 700px) { .qtitle .mono { display: none; } .qtitle b { font-size: 22px; } .qrole .role { font-size: 10px; padding: 5px 8px; letter-spacing: .08em; } }

/* ---------- passe DA étape 4 : textes, espacements ---------- */
.act-card p { line-height: 1.5; max-width: 34ch; }
.act-card .mini .pc { --w: 84px; }
.act-card .mini { right: -26px; top: -30px; }
.hero .meta { gap: 18px 32px; }
p { text-wrap: pretty; }
@media (max-width: 560px) {
  .eyebrow { letter-spacing: .1em; font-size: 11px; line-height: 1.35; }
  .hero .meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; font-size: 10.5px; letter-spacing: .05em; }
  .hero .meta b { font-size: 26px; }
  .act-card { min-height: 0; padding: 22px; }
  .act-card h3 { font-size: 30px; padding-right: 56px; }
  .phead { padding: 18px 0 24px; gap: 12px; }
  .phead .row { gap: 14px; }
  .phead .row > .lead, .phead .row > div { padding-bottom: 0; }
  .sec-h { margin-bottom: 18px; }
}
.stat span { color: currentColor; opacity: .68; }
.stat small.dim { color: currentColor !important; opacity: .55; }
.sheet.stat span { color: var(--chalk-2); opacity: 1; }
.tbl td small, .tbl td.num { white-space: nowrap; }
.seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
@media (max-width: 560px) { .seg button { padding: 0 11px; font-size: 13.5px; height: 38px; } }
.poster[data-i="2"] .pt, .poster[data-i="3"] .pt { justify-items: end; text-align: right; }

/* ================= Étape 7 ================= */
/* recherche des jeux */
.gfind { display: grid; gap: 14px; }
.gsearch { position: relative; display: flex; align-items: center; gap: 10px; max-width: 560px; height: 54px; padding: 0 8px 0 18px; border-radius: 16px; background: rgba(236, 229, 212, .07); box-shadow: inset 0 0 0 1px var(--line-2); transition: box-shadow .25s, background .25s; }
.gsearch:focus-within { background: rgba(236, 229, 212, .11); box-shadow: inset 0 0 0 1.5px var(--brass), 0 0 0 4px rgba(214, 176, 102, .14); }
.gsearch > svg { width: 20px; height: 20px; color: var(--chalk-3); flex: none; }
.gsearch input { flex: 1; min-width: 0; height: 100%; background: transparent; border: 0; outline: 0; color: var(--chalk); font: 500 17px/1 var(--body); }
.gsearch input::placeholder { color: var(--chalk-3); }
.gsearch input::-webkit-search-cancel-button { display: none; }
.gsearch .gclear { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: var(--chalk-2); }
.gsearch .gclear:hover { background: rgba(236, 229, 212, .08); }
.gsearch .gclear svg { width: 18px; height: 18px; }
@media (max-width: 560px) { .gsearch { height: 50px; } .gsearch input { font-size: 16px; } }

/* cartes classiques (Blackjack) */
.bjc { --cw: 64px; position: relative; width: var(--cw); height: calc(var(--cw) * 1.4); border-radius: calc(var(--cw) * .1); background: linear-gradient(160deg, #fffdf6, #f1e9d6); color: #1b1b22; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(0, 0, 0, .12); font-family: Georgia, "Times New Roman", serif; flex: none; transform-style: preserve-3d; }
.bjc.red { color: #b3262d; }
.bjc .ix { position: absolute; display: grid; justify-items: center; line-height: .9; font-weight: 700; font-size: calc(var(--cw) * .26); }
.bjc .ix i { font-style: normal; font-size: .85em; }
.bjc .ix.tl { left: 6%; top: 5%; } .bjc .ix.br { right: 6%; bottom: 5%; transform: rotate(180deg); }
.bjc .pip { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--cw) * .5); }
.bjc.face .pip { align-content: center; gap: 0; font-size: calc(var(--cw) * .3); }
.bjc.face .pip b { font-size: calc(var(--cw) * .5); line-height: 1; }
.bjc.face { background: linear-gradient(160deg, #fffaf0, #efe2c4); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(0, 0, 0, .12), inset 0 0 0 calc(var(--cw) * .07) #fffaf0, inset 0 0 0 calc(var(--cw) * .08) rgba(179, 38, 45, .35); }
.bjc.back { background: #7a1f24; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .6), inset 0 0 0 calc(var(--cw) * .06) #f3ecdc; }
.bjc.back .bk { position: absolute; inset: 12%; border-radius: 6%; background: repeating-linear-gradient(45deg, rgba(214, 176, 102, .55) 0 2px, transparent 2px 7px), repeating-linear-gradient(-45deg, rgba(214, 176, 102, .55) 0 2px, transparent 2px 7px); }
.bjghost { position: fixed; z-index: 70; pointer-events: none; margin: 0; }

/* illustration du Blackjack (tuile, affiche, page) */
.gart.blackjack { background: radial-gradient(110% 80% at 50% 0%, #1f6a4a, #0d3324 62%, #071d14); }
.gart.blackjack .arc { position: absolute; left: -20%; right: -20%; top: 54%; height: 70%; border-radius: 50%; border: 2px solid rgba(224, 180, 76, .45); }
.gart.blackjack .bjfan { position: absolute; left: 50%; top: 18%; display: flex; transform: translateX(-50%); }
.gart.blackjack .bjfan .bjc { --cw: 76px; margin: 0 -10px; box-shadow: 0 16px 26px -10px rgba(0, 0, 0, .7); transition: transform .6s var(--ease-out); }
.gart.blackjack .chips3 { position: absolute; left: 16%; bottom: 20%; width: 46px; height: 40px; }
.gart.blackjack .chips3 i { position: absolute; left: 0; width: 46px; height: 14px; border-radius: 50%; background: #c8463a; box-shadow: inset 0 0 0 3px #f3ecdc, inset 0 0 0 5px #c8463a, 0 2px 0 #7a1f24; }
.gart.blackjack .chips3 i:nth-child(1) { bottom: 0; } .gart.blackjack .chips3 i:nth-child(2) { bottom: 6px; background: #2d78e3; box-shadow: inset 0 0 0 3px #f3ecdc, inset 0 0 0 5px #2d78e3, 0 2px 0 #163e78; } .gart.blackjack .chips3 i:nth-child(3) { bottom: 12px; background: #111; box-shadow: inset 0 0 0 3px #e0b44c, inset 0 0 0 5px #111, 0 2px 0 #000; }
.gart.blackjack .n21 { position: absolute; right: 12%; bottom: 16%; font-size: clamp(34px, 5vw, 56px); color: #e0b44c; text-shadow: 0 0 24px rgba(224, 180, 76, .55); }
.poster .gart.blackjack .bjfan .bjc { --cw: 70px; }
@media (max-width: 900px) { .poster .gart.blackjack .bjfan .bjc { --cw: 46px; } .poster .gart.blackjack .n21 { font-size: 26px; } .poster .gart.blackjack .chips3 { transform: scale(.7); transform-origin: left bottom; } }
.gtile.t-blackjack, .gtile.t-blackjack .art::after { background: #071d14; } .gtile.t-blackjack .art::after { background: linear-gradient(transparent, #071d14); }
.gtile.hov .gart.blackjack .bjfan .bjc:first-child { transform: rotate(-20deg) translateY(-10px) !important; } .gtile.hov .gart.blackjack .bjfan .bjc:last-child { transform: rotate(18deg) translateY(-10px) !important; }
.bj-title { color: #e0b44c; text-shadow: 0 0 60px rgba(224, 180, 76, .3); } .bj-title span { color: var(--chalk); }
.mini-ic.bjmini, .role-ic.bjmini { background: #0d3324; display: grid; place-items: center; }
.mini-ic.bjmini .bjc { --cw: 50px; } .role-ic.bjmini .bjc { --cw: 32px; }
.role-ic.bjchipic { background: #0d3324; } .role-ic.bjchipic i { width: 40px; height: 40px; border-radius: 50%; background: #c8463a; box-shadow: inset 0 0 0 4px #f3ecdc, inset 0 0 0 8px #c8463a, inset 0 0 0 9px rgba(243, 236, 220, .6); }
.hub-blackjack .act-card.create .ico { background: #1f6a4a; }

/* transition « table de casino » */
.tx .cs-felt { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(120% 90% at 50% 20%, #1f6a4a, #0d3324 60%, #061710); }
.tx .cs-lamp { position: absolute; left: 50%; top: -20%; width: 90vmin; height: 90vmin; transform: translateX(-50%); background: radial-gradient(circle, rgba(255, 236, 190, .22), transparent 62%); opacity: 0; }
.tx .cs-arc { position: absolute; left: 50%; top: 52%; width: min(92vw, 820px); transform: translateX(-50%); opacity: 0; overflow: visible; }
.tx .cs-arc text { font: 700 17px/1 var(--mono); letter-spacing: .18em; fill: rgba(224, 180, 76, .8); }
.tx .cs-cards { position: absolute; left: 50%; top: 30%; width: 0; height: 0; }
.tx .cs-c { position: absolute; left: -50px; top: 0; }
.tx .cs-c .bjc { --cw: clamp(76px, 11vw, 120px); box-shadow: 0 30px 40px -16px rgba(0, 0, 0, .8); backface-visibility: hidden; }
.tx .cs-chips { position: absolute; left: calc(50% - 170px); top: calc(30% + 130px); width: 60px; height: 70px; }
.tx .cs-chips i { position: absolute; left: 0; width: 60px; height: 18px; border-radius: 50%; background: #c8463a; box-shadow: inset 0 0 0 4px #f3ecdc, inset 0 0 0 7px #c8463a, 0 3px 0 #7a1f24; }
.tx .cs-chips i:nth-child(1) { bottom: 0; } .tx .cs-chips i:nth-child(2) { bottom: 8px; } .tx .cs-chips i:nth-child(3) { bottom: 16px; background: #111; box-shadow: inset 0 0 0 4px #e0b44c, inset 0 0 0 7px #111, 0 3px 0 #000; } .tx .cs-chips i:nth-child(4) { bottom: 24px; } .tx .cs-chips i:nth-child(5) { bottom: 32px; background: #2d78e3; box-shadow: inset 0 0 0 4px #f3ecdc, inset 0 0 0 7px #2d78e3, 0 3px 0 #163e78; }
.tx .cs-title { position: absolute; left: 50%; bottom: 13%; transform: translateX(-50%); font-size: clamp(54px, 10vw, 128px); line-height: 1; letter-spacing: -.04em; color: var(--chalk); white-space: nowrap; opacity: 0; }
.tx .cs-title em { font-style: normal; color: #e0b44c; }
.tx .cs-21 { position: absolute; left: calc(50% + 190px); top: calc(30% + 70px); font-size: clamp(50px, 8vw, 96px); color: #ffd56a; text-shadow: 0 0 30px rgba(255, 200, 90, .8), 0 0 70px rgba(255, 170, 60, .5); opacity: 0; }
@media (max-width: 640px) { .tx .cs-chips { left: calc(50% - 120px); top: calc(30% + 110px); transform: scale(.75); } .tx .cs-21 { left: calc(50% + 110px); top: calc(30% + 40px); } .tx .cs-c { left: -38px; } }

/* table de Blackjack — salon de casino haut de gamme (étape 8) */
.bjtable { position: relative; min-height: calc(100dvh - 90px); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; max-width: 100vw; isolation: isolate; color: var(--chalk); background: #120a08; border-radius: 22px 22px 0 0; }
/* la salle : boiseries, tentures, lustre, appliques en laiton, lumières floues des autres tables, moquette */
.bjroom { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bjroom .wall { position: absolute; inset: 0 0 38%; background: radial-gradient(60% 80% at 50% 0%, rgba(255, 214, 150, .14), transparent 70%), repeating-linear-gradient(90deg, rgba(0, 0, 0, .28) 0 1px, transparent 1px 150px), linear-gradient(180deg, #2c1015 0%, #1d0a0e 100%); }
.bjroom .deco { position: absolute; inset: 34px 0 40%; background-image: radial-gradient(circle at 50% 100%, transparent 17px, rgba(214, 176, 102, .13) 18px 19px, transparent 20px 28px, rgba(214, 176, 102, .09) 29px 30px, transparent 31px); background-size: 66px 33px; -webkit-mask: linear-gradient(180deg, transparent, #000 25%, #000 70%, transparent); mask: linear-gradient(180deg, transparent, #000 25%, #000 70%, transparent); }
.bjroom .bokeh { position: absolute; inset: 0 12% 40%; }
.bjroom .bokeh i { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%; background: var(--c); filter: blur(7px); opacity: .28; animation: bjbokeh 5s ease-in-out infinite alternate; animation-delay: calc(var(--d) * -1); }
@keyframes bjbokeh { to { opacity: .1; transform: scale(.8); } }
.bjroom .wains { position: absolute; left: 0; right: 0; top: 54%; height: 12%; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .35) 0 2px, transparent 2px 110px), linear-gradient(180deg, #43230f, #1d0d06); box-shadow: inset 0 3px 0 rgba(214, 176, 102, .55), inset 0 -2px 0 rgba(0, 0, 0, .6); }
.bjroom .curtain { position: absolute; top: 0; bottom: 30%; width: 11%; background: repeating-linear-gradient(90deg, #3a0a12 0 6px, #6e1622 6px 18px, #4a0d16 18px 26px, #2a060c 26px 32px); box-shadow: inset 0 0 40px rgba(0, 0, 0, .6), 0 0 40px rgba(0, 0, 0, .7); }
.bjroom .curtain.l { left: 0; border-radius: 0 0 70% 0 / 0 0 18% 0; } .bjroom .curtain.r { right: 0; border-radius: 0 0 0 70% / 0 0 0 18%; }
.bjroom .valance { position: absolute; left: 0; right: 0; top: 0; height: 30px; background: linear-gradient(180deg, #5a1220, #350810); box-shadow: 0 8px 16px rgba(0, 0, 0, .55); }
.bjroom .valance::after { content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 10px; background: repeating-linear-gradient(90deg, #d6b066 0 2px, transparent 2px 6px); opacity: .8; }
.bjroom .sconce { position: absolute; top: 24%; width: 14px; height: 30px; border-radius: 6px 6px 3px 3px; background: linear-gradient(90deg, #8a6424, #f2d58a, #8a6424); box-shadow: 0 0 0 1px rgba(0, 0, 0, .4); }
.bjroom .sconce::before { content: ""; position: absolute; left: 50%; top: -18px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: #ffe2a8; box-shadow: 0 0 28px 12px rgba(255, 200, 120, .45), 0 0 90px 40px rgba(255, 170, 80, .16); }
.bjroom .sconce.l { left: 17%; } .bjroom .sconce.r { right: 17%; }
.bjroom .chand { position: absolute; left: 50%; top: 0; width: 220px; height: 70px; margin-left: -110px; background: radial-gradient(50% 60% at 50% 40%, rgba(255, 236, 190, .55), rgba(255, 200, 120, .12) 55%, transparent 75%); }
.bjroom .chand i { position: absolute; left: 50%; top: 30px; width: 90px; height: 16px; margin-left: -45px; border-radius: 50%; background: radial-gradient(circle, #fff6dc, #f2d58a 50%, rgba(214, 176, 102, 0) 72%); }
.bjroom .cone { position: absolute; left: 50%; top: 0; width: min(110vw, 1400px); height: 92%; transform: translateX(-50%); background: radial-gradient(42% 70% at 50% 18%, rgba(255, 232, 186, .13), transparent 72%); }
.bjroom .carpet { position: absolute; left: -20%; right: -20%; bottom: 0; height: 42%; transform: perspective(600px) rotateX(48deg); transform-origin: 50% 100%; background: repeating-linear-gradient(45deg, rgba(214, 176, 102, .09) 0 2px, transparent 2px 34px), repeating-linear-gradient(-45deg, rgba(214, 176, 102, .09) 0 2px, transparent 2px 34px), radial-gradient(60% 80% at 50% 0%, #4a121b, #22070c 70%); }
.bjroom .vign { position: absolute; inset: 0; box-shadow: inset 0 0 180px 40px rgba(0, 0, 0, .85); }
.bjbar { position: relative; display: flex; align-items: center; gap: 14px; padding-top: 40px; padding-bottom: 6px; z-index: 6; }
.bjbar .btn.xs { background: rgba(0, 0, 0, .45); color: var(--chalk); box-shadow: inset 0 0 0 1px var(--line-2); }
.bjname { display: flex; align-items: baseline; gap: 10px; margin-right: auto; min-width: 0; }
.bjname b { font-size: 24px; color: #f2d58a; white-space: nowrap; text-shadow: 0 2px 12px rgba(0, 0, 0, .6); } .bjname .mono { font-size: 12px; color: var(--chalk-3); letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bjwallet { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border-radius: 999px; background: rgba(10, 6, 4, .65); box-shadow: inset 0 0 0 1px rgba(242, 213, 138, .45), 0 10px 22px -10px rgba(0, 0, 0, .9); }
.bjwallet b { font: 800 20px/1 var(--display); color: #ffe3a3; } .bjwallet small { font-size: 12px; color: var(--chalk-3); }
.bjarena { position: relative; min-height: 480px; }
.bjsvg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bjsvg text { font-family: var(--mono); font-weight: 700; letter-spacing: .24em; }
.bjsvg .p1 { fill: rgba(242, 213, 138, .88); } .bjsvg .p2 { fill: rgba(243, 236, 220, .5); letter-spacing: .18em; }
.bjdealer { position: absolute; transform: translate(-50%, calc(-100% - 22px)); display: grid; justify-items: center; gap: 5px; z-index: 3; }
.bjdealer .dav { width: 54px; height: 54px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px #e0b44c, 0 10px 24px -8px rgba(0, 0, 0, .9); }
.bjdealer .dav svg { width: 100%; height: 100%; display: block; }
.bjdealer .dname { font: 600 10.5px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: rgba(243, 236, 220, .75); }
.bjarena .dcards { position: absolute; transform: translateX(-50%); display: flex; z-index: 3; min-height: calc(var(--dcw, 70px) * 1.4); }
.bjarena .dcards .bjc { --cw: var(--dcw, 70px); margin-left: calc(var(--dcw, 70px) * -.38); box-shadow: 0 10px 20px -8px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(0, 0, 0, .12); }
.bjarena .dcards .bjc:first-child { margin-left: 0; }
.bjarena .dtotal { position: absolute; transform: translateX(-50%); z-index: 3; min-width: 40px; text-align: center; padding: 5px 11px; border-radius: 999px; background: rgba(0, 0, 0, .55); font: 700 14px/1 var(--mono); color: #fff; }
.bjarena .dtotal:empty { visibility: hidden; }
.bjarena .dtotal.bust { background: #b3262d; }
.bjshoe { position: absolute; width: 62px; height: 78px; z-index: 3; transform: translateX(-50%) rotate(-7deg); }
.bjshoe .sb { position: absolute; inset: 0; border-radius: 10px 10px 6px 6px; background: linear-gradient(160deg, #4a2412, #1a0d06); box-shadow: 0 14px 24px -10px rgba(0, 0, 0, .9), inset 0 0 0 2px rgba(242, 213, 138, .5); }
.bjshoe .sc { position: absolute; left: 9px; right: 9px; top: 9px; height: 40px; border-radius: 5px; background: #7a1f24; box-shadow: inset 0 0 0 3px #f3ecdc; }
.bjshoe .sn { position: absolute; left: 0; right: 0; bottom: 7px; text-align: center; font-size: 10.5px; color: rgba(243, 236, 220, .75); }
.bjarena .bjtray { position: absolute; width: 50px; height: 64px; z-index: 3; transform: translateX(-50%) rotate(5deg); border-radius: 6px; background: linear-gradient(160deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04)); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .25), inset 0 -8px 0 rgba(179, 38, 45, .55), 0 10px 20px -8px rgba(0, 0, 0, .8); }
.bjseats { position: absolute; inset: 0; z-index: 4; }
/* une place = un point sur l'ellipse de la table : le cercle de mise y est centré, les cartes au-dessus, la plaque au-dessous */
.bjseat { --scw: 58px; --sp: 60px; position: absolute; left: var(--x, 50%); top: var(--y, 70%); width: 0; height: 0; transition: left .5s var(--ease-out), top .5s var(--ease-out); }
.bjseat .bjspot { position: absolute; left: calc(var(--sp) / -2); top: calc(var(--sp) / -2); width: var(--sp); height: var(--sp); border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0) 70%); box-shadow: inset 0 0 0 2px rgba(242, 213, 138, .85), inset 0 0 0 5px rgba(0, 0, 0, .15), inset 0 0 0 6px rgba(242, 213, 138, .35); }
.bjseat .bjspot.nobet { box-shadow: inset 0 0 0 1.5px rgba(242, 213, 138, .45), inset 0 0 0 5px rgba(0, 0, 0, .1), inset 0 0 0 6px rgba(242, 213, 138, .18); }
.bjseat .bjspot .bjstack { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; transform: translate(-50%, -50%) scale(calc(var(--sp) / 60px)); }
.bjseat .bjspot .bjstack i { position: absolute; left: 0; bottom: calc(10px + var(--k) * 3.4px); width: 40px; height: 13px; border-radius: 50%; }
.bjseat .bjspot .bjamt { position: absolute; bottom: -10px; padding: 2px 7px; border-radius: 999px; background: #e0b44c; color: #1a1206; font-size: 11px; font-weight: 700; z-index: 2; }
.bjseat .bjspot .bjamt:empty { display: none; }
.bjseat .bjhands { position: absolute; left: 0; bottom: calc(var(--sp) / 2 + 6px); transform: translateX(-50%); display: flex; gap: 6px; align-items: flex-end; }
.bjseat .bjhand { display: grid; justify-items: center; gap: 4px; padding: 4px; border-radius: 12px; transition: background .3s, box-shadow .3s; }
.bjseat .bjhand.act { background: rgba(255, 220, 140, .16); box-shadow: 0 0 0 2px rgba(242, 213, 138, .9), 0 0 24px rgba(255, 210, 110, .35); }
.bjseat .bjhand .bjcards { display: flex; }
.bjseat .bjhand .bjc { --cw: var(--scw); margin-left: calc(var(--scw) * -.55); box-shadow: 0 8px 16px -8px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(0, 0, 0, .12); }
.bjseat .bjhand .bjc:first-child { margin-left: 0; }
.bjseat .bjhand .bjtot { padding: 3px 8px; border-radius: 999px; background: rgba(0, 0, 0, .6); font-size: 12px; color: #fff; white-space: nowrap; }
.bjseat .bjhand.r-win .bjtot, .bjseat .bjhand.r-bj .bjtot { background: #2bb069; color: #04170c; } .bjseat .bjhand.r-lose .bjtot, .bjseat .bjhand.r-bust .bjtot { background: #b3262d; } .bjseat .bjhand.r-push .bjtot { background: #c99a2e; color: #1a1206; }
.bjseat .bjhand.r-lose .bjcards, .bjseat .bjhand.r-bust .bjcards { filter: brightness(.72) saturate(.6); }
.c10 { background: #f3ecdc; box-shadow: inset 0 0 0 3px #2d78e3, 0 2px 0 #9a9284; } .c25 { background: #2bb069; box-shadow: inset 0 0 0 3px #f3ecdc, 0 2px 0 #145a34; } .c50 { background: #c8463a; box-shadow: inset 0 0 0 3px #f3ecdc, 0 2px 0 #7a1f24; } .c100 { background: #111; box-shadow: inset 0 0 0 3px #e0b44c, 0 2px 0 #000; } .c500 { background: #7c5cd6; box-shadow: inset 0 0 0 3px #f3ecdc, 0 2px 0 #3d2a7a; }
.bjseat .bjplate { position: absolute; left: 0; top: calc(var(--sp) / 2 + 12px); transform: translateX(-50%); width: max-content; display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; background: rgba(12, 6, 4, .78); box-shadow: inset 0 0 0 1px rgba(242, 213, 138, .25), 0 8px 18px -8px rgba(0, 0, 0, .9); max-width: 170px; white-space: nowrap; }
.bjseat .bjplate span { display: grid; min-width: 0; } .bjseat .bjplate b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bjseat .bjplate small { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; color: #f2d58a; white-space: nowrap; }
.bjseat.me .bjplate { box-shadow: inset 0 0 0 1.5px #e0b44c, 0 8px 18px -8px rgba(0, 0, 0, .9); background: rgba(46, 28, 6, .85); }
.bjseat.turn .bjplate { box-shadow: inset 0 0 0 2px #ffd56a, 0 0 22px rgba(255, 210, 110, .5); }
.bjseat.out { opacity: .55; }
.bjseat .bjwait { position: absolute; left: 0; bottom: calc(var(--sp) / 2 + 10px); transform: translateX(-50%); display: none; padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, .55); font-size: 11px; font-style: italic; color: var(--chalk-2); white-space: nowrap; }
.bjseat.waiting .bjwait { display: block; }
.bjseat .bjres { position: absolute; left: calc(var(--sp) / 2 + 4px); top: calc(var(--sp) / -2 - 4px); z-index: 2; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .7); padding: 5px 11px; border-radius: 999px; font: 800 16px/1 var(--display); white-space: nowrap; }
.bjseat .bjres:empty { display: none; }
.bjseat .bjres.up { background: #2bb069; color: #04170c; } .bjseat .bjres.down { background: #b3262d; color: #fff; } .bjseat .bjres.eq { background: #c99a2e; color: #1a1206; }
.bjseat .bubble { left: 0; bottom: calc(var(--sp) / 2 + 40px); top: auto; }
.bjstatus { position: absolute; transform: translateX(-50%); padding: 7px 16px; border-radius: 999px; background: rgba(0, 0, 0, .45); box-shadow: inset 0 0 0 1px rgba(242, 213, 138, .25); font: 700 15px/1 var(--body); color: #ffe3a3; white-space: nowrap; z-index: 2; }
.bjstatus:empty { display: none; }
.bjfly { position: fixed; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; z-index: 80; pointer-events: none; }
.bjcontrols { position: relative; z-index: 6; display: grid; justify-items: center; gap: 10px; padding-top: 10px; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); min-height: 96px; background: linear-gradient(180deg, transparent, rgba(8, 4, 3, .7) 40%); }
.bjmsg { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; text-align: center; padding: 10px 16px; border-radius: 14px; background: rgba(0, 0, 0, .5); font-size: 15px; }
.bjmsg svg { width: 18px; height: 18px; color: #2bb069; } .bjmsg .ratcoin { color: inherit; } .bjmsg b { color: #ffe3a3; } .bjmsg.dim { color: var(--chalk-2); }
.bjcontrols .btn.ghost { color: var(--chalk); box-shadow: inset 0 0 0 1px var(--line-2); }
.bjchips { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.bjchip { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font: 800 14px/1 var(--display); color: #fff; transition: transform .2s var(--ease-out), opacity .2s; position: relative; }
.bjchip::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, .6); }
.bjchip.c10 { color: #163e78; } .bjchip.c10::before { border-color: rgba(45, 120, 227, .6); }
.bjchip.call { background: #e0b44c; color: #1a1206; box-shadow: inset 0 0 0 3px #fff3d0, 0 2px 0 #8a6424; font-size: 12px; }
.bjchip span { position: relative; }
.bjchip:hover:not(:disabled) { transform: translateY(-4px); }
.bjchip:disabled { opacity: .3; cursor: not-allowed; }
.bjbet { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.bjbet > span { font-size: 15px; color: var(--chalk-2); } .bjbet b { font: 800 22px/1 var(--display); color: #ffe3a3; margin-left: 6px; } .bjbet small { color: var(--chalk-3); }
.bjhint { font-size: 12px; color: var(--chalk-3); text-align: center; }
.bjacts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; align-items: center; }
.bjact { min-width: 112px; height: 52px; font-size: 16px; }
.bjact.alt { background: var(--chalk); color: var(--ink); } .bjact.gold { background: #e0b44c; color: #1a1206; }
.bjtimer { font-size: 13px; color: var(--chalk-3); min-width: 40px; } .bjtimer.warn { color: #ff8a7a; }
.bjintro { position: absolute; left: 50%; top: 45%; z-index: 30; display: grid; justify-items: center; gap: 8px; padding: 24px 34px; border-radius: 22px; background: rgba(12, 6, 4, .84); backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px rgba(242, 213, 138, .55), 0 30px 60px -20px rgba(0, 0, 0, .9); pointer-events: none; text-align: center; max-width: calc(100% - 32px); }
.bjintro span { font-size: clamp(32px, 7vw, 60px); color: #f2d58a; line-height: 1; } .bjintro small { font: 600 13px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--chalk-2); }
/* pendant une partie, les messages s'affichent en haut : jamais sur les boutons de jeu */
body.in-game .toasts { top: calc(84px + env(safe-area-inset-top, 0px)); bottom: auto; }
@media (max-width: 640px) {
  .bjtable { min-height: calc(100dvh - 70px); border-radius: 16px 16px 0 0; }
  .bjarena { min-height: 500px; }
  .bjarena .dcards { --dcw: 44px; } .bjdealer .dav { width: 40px; height: 40px; } .bjdealer .dname { font-size: 9px; }
  .bjshoe { width: 44px; height: 56px; } .bjshoe .sc { height: 26px; left: 7px; right: 7px; top: 7px; } .bjshoe .sn { bottom: 4px; font-size: 9px; }
  .bjarena .bjtray { width: 36px; height: 46px; }
  .bjseat { --scw: 36px; --sp: 44px; }
  .bjseat.me { --scw: 46px; --sp: 52px; }
  .bjseat .bjplate { padding: 3px 8px 3px 3px; max-width: 112px; gap: 6px; } .bjseat .bjplate b { font-size: 11.5px; } .bjseat .bjplate small { font-size: 9.5px; }
  .bjseat .bjplate .av { --s: 24px !important; }
  .bjtable[data-n="4"] .bjseat:not(.me), .bjtable[data-n="5"] .bjseat:not(.me) { --scw: 30px; --sp: 40px; }
  .bjtable[data-dense="1"] .bjseat:not(.me) { --scw: 24px; --sp: 32px; }
  .bjtable[data-dense="1"] .bjseat:not(.me) .bjplate { padding: 2px; } .bjtable[data-dense="1"] .bjseat:not(.me) .bjplate > span:not(.av) { display: none; }
  .bjtable[data-dense="1"] .bjseat:not(.me) .bjtot { font-size: 10px; padding: 2px 5px; }
  .bjstatus { font-size: 13px; }
  .bjtable[data-small="1"] .bjsvg .p2, .bjtable[data-small="1"] .bjsvg .p0 { display: none; } /* téléphone : une seule ligne de marquage, plus lisible */
  .bjseat .bjwait { font-size: 9.5px; padding: 3px 7px; }
  .bjchip { width: 48px; height: 48px; } .bjact { min-width: 0; flex: 1 1 40%; height: 50px; }
  .bjbar { gap: 8px; padding-top: 34px; } .bjname { flex-direction: column; gap: 2px; align-items: flex-start; } .bjname b { font-size: 19px; } .bjname .mono { font-size: 10px; }
  .bjwallet { padding: 5px 10px 5px 6px; } .bjwallet b { font-size: 17px; } .bjwallet small { display: none; }
  .bjroom .curtain { width: 6%; } .bjroom .sconce { display: none; } .bjroom .bokeh i:nth-child(n+7) { display: none; }
}

/* rats : solde dans le menu, petite fenêtre, menu mobile */
.ratcoin { flex: none; display: block; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .4)); }
.ratpill { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 12px 0 8px; border-radius: 999px; background: linear-gradient(180deg, rgba(242, 213, 138, .16), rgba(242, 213, 138, .06)); box-shadow: inset 0 0 0 1px rgba(242, 213, 138, .4); color: #ffe3a3; transition: background .2s, transform .2s; }
.ratpill:hover { background: linear-gradient(180deg, rgba(242, 213, 138, .26), rgba(242, 213, 138, .1)); }
.ratpill b { font: 800 16px/1 var(--display); letter-spacing: -.01em; }
@media (max-width: 560px) { .ratpill { height: 36px; padding: 0 9px 0 6px; gap: 5px; } .ratpill b { font-size: 14px; } .ratpill .ratcoin { width: 19px; height: 19px; } }
/* téléphone : avec le solde de rats, la barre doit garder le bouton du menu à l'écran (le logo reste, le mot part) */
@media (max-width: 480px) { .nav .brand b { display: none; } .nav-r { gap: 6px; } }
.ratpop { position: fixed; z-index: 56; width: 290px; padding: 18px; border-radius: 18px; background: var(--paper); color: var(--ink); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8); display: grid; gap: 12px; transform-origin: top right; }
.ratpop .rp-h { display: flex; align-items: center; gap: 12px; } .ratpop .rp-h small { display: block; font: 600 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.ratpop .rp-h b { font: 800 30px/1.1 var(--display); }
.ratpop p { margin: 0; font-size: 14px; color: var(--ink-2); } .ratpop p b { color: var(--ink); }
.ratpop .btn { justify-self: start; } .ratpop .btn.ghost { --fg: var(--ink); box-shadow: inset 0 0 0 1px rgba(26, 22, 17, .2); }
.mmenu .mm-rats { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; margin-top: 10px; padding: 12px 16px; border-radius: 16px; background: rgba(242, 213, 138, .1); box-shadow: inset 0 0 0 1px rgba(242, 213, 138, .35); font-size: 18px !important; }
.mmenu .mm-rats .ratcoin { grid-row: span 2; } .mmenu .mm-rats b { color: #ffe3a3; } .mmenu .mm-rats small { font: 500 12px/1 var(--mono); color: var(--chalk-3); letter-spacing: .06em; }
.ratu { margin-left: 4px; font: 500 11px/1 var(--mono); color: var(--chalk-3); }
.lb-row .wins.neg { color: #ff9a8a; }
.gate.on .g-go { transform: scale(.97); }

/* page du Blackjack : bourse et salons */
.bjhero { align-items: end; }
.bjpurse { display: grid; gap: 14px; align-content: start; padding: 24px; }
.bjpurse .bp-h { display: flex; align-items: center; gap: 14px; }
.bjpurse .bp-h small { display: block; font: 600 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.bjpurse .bp-h b { font: 800 40px/1.05 var(--display); color: var(--ink); }
.bjpurse p { margin: 0; color: var(--ink-2); font-size: 15px; } .bjpurse p b { color: var(--ink); }
.bjpurse .btn { justify-self: start; } .bjpurse small.dim { color: var(--ink-2) !important; font-size: 13px; }
.bjrooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 14px; }
@media (max-width: 560px) { .bjrooms { gap: 10px; } .bjroom-card { padding: 14px; gap: 8px; } .bjroom-card .rc-h b { font-size: 19px; } }
.bjroom-card { position: relative; display: grid; gap: 12px; padding: 18px 18px 16px; border-radius: 18px; overflow: hidden; background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--gem) 26%, #0c261e), #0a1d17 70%); box-shadow: inset 0 0 0 1px rgba(242, 213, 138, .2), 0 24px 40px -26px rgba(0, 0, 0, .9); transition: transform .3s var(--ease-out), box-shadow .3s; }
.bjroom-card:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(242, 213, 138, .45), 0 30px 46px -26px rgba(0, 0, 0, .95); }
.bjroom-card .gem { position: absolute; right: 16px; top: 16px; width: 18px; height: 18px; transform: rotate(45deg); border-radius: 4px; background: linear-gradient(135deg, #fff8, var(--gem) 45%, color-mix(in srgb, var(--gem) 60%, #000)); box-shadow: 0 0 18px color-mix(in srgb, var(--gem) 70%, transparent); }
.bjroom-card .rc-h b { display: block; font-size: 22px; line-height: 1.05; color: var(--chalk); padding-right: 30px; }
.bjroom-card .rc-h small { font-size: 12.5px; color: var(--chalk-3); }
.bjroom-card .rc-seats { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.bjroom-card .rc-seats i { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(242, 213, 138, .5); }
.bjroom-card .rc-seats i.on { background: #f2d58a; box-shadow: 0 0 8px rgba(242, 213, 138, .6); }
.bjroom-card .rc-seats span { margin-left: 6px; font: 600 13px/1 var(--mono); color: var(--chalk-2); }
.bjroom-card .rc-f { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bjroom-card .rc-st { font-size: 12.5px; color: var(--chalk-3); } .bjroom-card .rc-st.live { color: var(--mint); }
.bjroom-card.mine { box-shadow: inset 0 0 0 1.5px #e0b44c, 0 24px 40px -26px rgba(0, 0, 0, .9); }
.bjroom-card.full { opacity: .65; }
.role-ic.bjchipic svg { width: 40px; height: 40px; } .role-ic.bjchipic { color: var(--chalk); }

/* ---- Scuno : chrono du tour (10 s) — anneau qui se vide autour de l'avatar du joueur actif ---- */
.gtable .seat .sav { position: relative; }
.gtable .seat .tring::after, .meav .tclock { content: ""; position: absolute; inset: -6px; border-radius: 50%;
  background: conic-gradient(#ffd27a calc(var(--p, 0) * 360deg), rgba(255, 255, 255, .1) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); }
.meav { position: relative; display: inline-grid; place-items: center; }
.meav .tclock { inset: -5px; opacity: 0; transition: opacity .3s; }
#g-me.turn .meav .tclock { opacity: 1; }
#g-me .timer { font: 700 18px/1 var(--mono); color: #ffd27a; min-width: 40px; text-align: right; }
#g-me .timer.warn { color: #ff8a7a; }

/* ---- Rats Game : connexion, Google, règles ---- */
.tiny { font-size: 12.5px; }
.chk.acc { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.4; cursor: pointer; margin: 4px 0 2px; }
.chk.acc input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--ink); }
.chk.acc a { color: inherit; text-decoration: underline; }
.gsep { display: flex; align-items: center; gap: 12px; margin: 18px 0 12px; color: rgba(26, 22, 17, .5); font-size: 13px; }
.gsep::before, .gsep::after { content: ""; flex: 1; height: 1px; background: rgba(26, 22, 17, .15); }
.paper .btn.gbtn { width: 100%; --fg: var(--ink); box-shadow: inset 0 0 0 1px rgba(26, 22, 17, .25); gap: 10px; }
.paper .btn.gbtn svg { width: 18px; height: 18px; }
.auth.one { grid-template-columns: minmax(0, 520px); justify-content: center; }
.acts.col { flex-direction: column; align-items: stretch; }
.rp-virt { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; opacity: .85; }
.rp-virt svg { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.gtag svg { width: 13px; height: 13px; vertical-align: -2px; }
.bantag { color: var(--danger); display: inline-flex; gap: 4px; align-items: center; }
.bantag svg { width: 12px; height: 12px; }
/* pages légales */
.wrap.narrow { max-width: 820px; }
.legal { padding-top: 40px; padding-bottom: 60px; display: grid; gap: 18px; }
.legalbox { padding: clamp(20px, 4vw, 40px); line-height: 1.6; }
.legalbox h3 { margin: 22px 0 6px; font-size: 19px; } .legalbox h3:first-child { margin-top: 0; }
.legalbox p, .legalbox ul { margin: 0 0 8px; } .legalbox ul { padding-left: 20px; }
.legal-links { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; }
.legal-links a { color: var(--chalk-2, var(--chalk)); opacity: .75; text-decoration: none; } .legal-links a:hover { opacity: 1; text-decoration: underline; }
.lb-since { margin: 6px 0 0; font-size: 14px; } .lb-since b { color: var(--chalk); text-transform: capitalize; }
/* admin : signalements, consommation */
.report { padding: 16px 18px; border-radius: 16px; background: rgba(236, 229, 212, .05); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 8px; }
.report.new { box-shadow: inset 0 0 0 1px rgba(255, 106, 85, .45); background: rgba(255, 106, 85, .06); }
.report .rp-h { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.report .rp-tag { font: 600 12px/1 var(--mono); padding: 5px 8px; border-radius: 7px; background: rgba(255, 106, 85, .18); color: #ffb1a5; }
.report.done .rp-tag { background: rgba(236, 229, 212, .1); color: var(--chalk); }
.report .rp-ok { color: var(--mint); display: inline-flex; gap: 4px; align-items: center; font-size: 13px; } .report .rp-ok svg { width: 14px; height: 14px; }
.report .rp-msg { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.report .acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .report .spacer { flex: 1; }
.rp-full { max-width: 100%; max-height: 70vh; border-radius: 10px; display: block; margin: 8px auto; }
.gauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 14px; }
.gauge { display: grid; gap: 6px; } .gauge .gh { display: flex; justify-content: space-between; }
.usebar { height: 10px; border-radius: 6px; background: rgba(236, 229, 212, .1); overflow: hidden; } .usebar i { display: block; height: 100%; border-radius: 6px; } /* (pas « gbar » : c'est la barre du haut des jeux) */
.dayrow { display: grid; grid-template-columns: minmax(120px, 210px) 1fr 52px; gap: 12px; align-items: center; padding: 6px 0; text-transform: capitalize; }
.warnbox { background: rgba(232, 165, 58, .14); box-shadow: inset 0 0 0 1px rgba(232, 165, 58, .5); margin-bottom: 12px; }
.tbl .num.neg { color: var(--danger); } .tbl .num.pos { color: var(--mint); }
@media (max-width: 640px) { .dayrow { grid-template-columns: 1fr 52px; } .dayrow .usebar { grid-column: 1 / -1; grid-row: 2; } }

/* ---- vocal : petit bouton à côté de chaque joueur, animation « il parle » ---- */
.pav { position: relative; display: inline-grid; place-items: center; flex: none; }
.pav .pbadge { position: absolute; right: -5px; bottom: -5px; z-index: 3; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgba(10, 29, 23, .92); color: rgba(236, 229, 212, .55); box-shadow: 0 0 0 1.5px rgba(236, 229, 212, .25), 0 2px 6px rgba(0, 0, 0, .5); transition: color .2s, background .2s, transform .15s; }
.pav .pbadge svg { width: 11px; height: 11px; }
.pav .pbadge:hover, .pav .pbadge:focus-visible { color: var(--chalk); transform: scale(1.12); outline: none; }
.pav.vc-on .pbadge { color: var(--mint); box-shadow: 0 0 0 1.5px var(--mint), 0 2px 6px rgba(0, 0, 0, .5); }
.pav.vc-muted .pbadge { color: var(--danger); box-shadow: 0 0 0 1.5px var(--danger), 0 2px 6px rgba(0, 0, 0, .5); }
.pav.vc-muted .pbadge::after { content: ""; position: absolute; width: 14px; height: 1.8px; background: currentColor; transform: rotate(-45deg); border-radius: 1px; }
.pav.vc-speaking > .av { box-shadow: 0 0 0 2.5px var(--mint), 0 0 16px 3px rgba(61, 224, 166, .55); }
.pav.vc-speaking .pbadge { animation: vcpulse .5s ease-in-out infinite alternate; }
@keyframes vcpulse { to { transform: scale(1.18); } }
.vcslot { display: contents; }
.vcdock { display: flex; align-items: center; gap: 4px; padding: 3px; border-radius: 13px; background: rgba(236, 229, 212, .06); box-shadow: inset 0 0 0 1px var(--line); }
.vcb { width: 34px; height: 34px; border-radius: 10px; border: 0; display: grid; place-items: center; cursor: pointer; background: rgba(236, 229, 212, .08); color: var(--chalk); transition: background .2s, color .2s; position: relative; }
.vcb svg { width: 17px; height: 17px; }
.vcb:hover { background: rgba(236, 229, 212, .16); }
.vcb.off { background: rgba(255, 106, 85, .2); color: #ffb1a5; }
.vcb.on { background: rgba(61, 224, 166, .2); color: var(--mint); }
.vcb.leave { background: rgba(255, 106, 85, .85); color: #2a0b05; } .vcb.leave svg { transform: rotate(135deg); }
.vcb.join { width: auto; padding: 0 10px; gap: 6px; font: 600 12px/1 var(--mono); grid-auto-flow: column; }
.vcdock .vcn { padding: 0 4px 0 2px; font: 600 11px/1 var(--mono); color: rgba(236, 229, 212, .6); }
.vcpop { position: fixed; z-index: 120; padding: 14px; border-radius: 16px; display: grid; gap: 10px; color: var(--ink); box-shadow: 0 20px 50px rgba(0, 0, 0, .55); }
.vcpop .pop-t { font-size: 15px; overflow-wrap: anywhere; }
.vcpop .pop-f { display: grid; gap: 6px; font-size: 13px; } .vcpop .pop-f span { display: flex; justify-content: space-between; } .vcpop .pop-f output { font: 600 12px/1.4 var(--mono); }
.vcpop input[type=range] { width: 100%; accent-color: #2f8461; }
.vcpop .pop-row { display: flex; gap: 8px; flex-wrap: wrap; }
.vcpop .btn.xs svg, .notif .btn.xs svg { width: 14px; height: 14px; }
.vc-rules { margin: 0; padding-left: 18px; display: grid; gap: 8px; line-height: 1.45; }
.rp-prev { max-width: 100%; max-height: 160px; border-radius: 8px; margin-top: 8px; box-shadow: 0 0 0 1px rgba(26, 22, 17, .2); }
.vc-chk.dis { opacity: .6; cursor: default; }
@media (max-width: 640px) { .vcb { width: 32px; height: 32px; } .vcb.join span, .vcdock .vcn { display: none; } .vcdock .vcb[data-vc=set] { display: none; } }

/* ---- tchats : bouton, panneau, notifications ---- */
.chatfab { position: fixed; z-index: 70; right: 16px; bottom: 16px; width: 52px; height: 52px; border-radius: 18px; border: 0; cursor: pointer; display: grid; place-items: center;
  background: var(--brass); color: var(--ink); box-shadow: 0 4px 0 #9c7a35, 0 14px 30px -8px rgba(0, 0, 0, .7); transition: transform .2s; }
.chatfab:hover { transform: translateY(-2px); } .chatfab svg { width: 24px; height: 24px; }
.chatfab .cbadge { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--danger); color: #fff; font: 700 11px/20px var(--mono); }
.chatfab.has { animation: fabnudge 2.4s ease-in-out infinite; } @keyframes fabnudge { 0%, 90%, 100% { transform: none; } 94% { transform: rotate(-8deg); } 97% { transform: rotate(6deg); } }
body.in-game .chatfab { bottom: auto; top: 76px; right: 12px; width: 44px; height: 44px; border-radius: 14px; }
body:has(.prevbar) .chatfab:not(:where(body.in-game *)) { bottom: 64px; }
.chatp { position: fixed; z-index: 76; right: 16px; top: 78px; width: min(380px, calc(100vw - 32px)); height: min(600px, calc(100vh - 96px)); display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; border-radius: 20px;
  background: #0d241c; color: var(--chalk); box-shadow: inset 0 0 0 1px var(--line-2), 0 30px 70px rgba(0, 0, 0, .65); }
.chatp[hidden] { display: none; }
.cp-h { display: flex; align-items: center; gap: 8px; padding: 12px 12px 12px 16px; border-bottom: 1px solid var(--line); min-width: 0; }
.cp-h b.d { font-size: 20px; } .cp-title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cp-h .spacer, .cp-row .spacer { flex: 1; } #cp-hacts { display: flex; gap: 6px; }
.cp-x { width: 34px; height: 34px; flex: none; border: 0; border-radius: 10px; display: grid; place-items: center; background: rgba(236, 229, 212, .07); color: var(--chalk); cursor: pointer; position: relative; }
.cp-x svg { width: 17px; height: 17px; } .cp-x:hover { background: rgba(236, 229, 212, .15); }
.cp-x.live { background: rgba(61, 224, 166, .2); color: var(--mint); } .cp-x i { position: absolute; top: -4px; right: -4px; font: 700 10px/16px var(--mono); min-width: 16px; border-radius: 8px; background: var(--mint); color: var(--ink); font-style: normal; }
.cp-body { overflow-y: auto; padding: 8px 10px 16px; display: grid; gap: 14px; align-content: start; }
.cp-sec { display: grid; gap: 4px; } .cp-sec small { font: 600 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; opacity: .6; padding: 6px 6px 4px; }
.cp-row { display: flex; align-items: center; gap: 6px; }
.cp-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 0; border-radius: 12px; background: none; color: inherit; text-align: left; cursor: pointer; font: inherit; min-width: 0; }
.cp-item:hover { background: rgba(236, 229, 212, .07); } .cp-item b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.cp-item.sm { padding: 6px 8px; font-size: 14px; }
.cp-ico { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: rgba(214, 176, 102, .15); color: var(--brass); flex: none; } .cp-ico svg { width: 16px; height: 16px; }
.cp-on { width: 9px; height: 9px; border-radius: 50%; background: var(--mint); flex: none; }
.cp-un { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--danger); color: #fff; font: 700 11px/20px var(--mono); text-align: center; }
.cp-load { height: 30px; border-radius: 10px; background: linear-gradient(90deg, rgba(236,229,212,.04), rgba(236,229,212,.1), rgba(236,229,212,.04)); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.cp-games summary { cursor: pointer; font-size: 13px; opacity: .7; padding: 4px 8px; } .cp-games[open] summary { margin-bottom: 4px; }
.cp-msgs { overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; overscroll-behavior: contain; }
.cp-empty { text-align: center; margin: auto; }
.cp-m { display: flex; gap: 8px; align-items: flex-end; max-width: 88%; } .cp-m.me { align-self: flex-end; flex-direction: row-reverse; }
.cp-who { border: 0; padding: 0; background: none; cursor: pointer; flex: none; border-radius: 30%; }
.cp-bub { padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: rgba(236, 229, 212, .08); min-width: 0; }
.cp-m.me .cp-bub { border-radius: 14px 14px 4px 14px; background: rgba(214, 176, 102, .22); }
.cp-bub b { font-size: 12.5px; color: var(--brass); display: block; margin-bottom: 2px; } .cp-bub p { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; line-height: 1.4; }
.cp-bub small { display: block; font-size: 10.5px; opacity: .5; margin-top: 3px; text-align: right; }
.cp-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); } .cp-form .inp { flex: 1; min-width: 0; height: 42px; } .cp-form .btn { height: 42px; padding: 0 14px; } .cp-form .btn svg { width: 17px; height: 17px; }
.gm { gap: 6px; padding: 4px 0; } .gmembers { display: grid; max-height: 260px; overflow-y: auto; } .gm .btn.xs svg { width: 13px; height: 13px; }
.gfind { max-height: 50vh; overflow-y: auto; } .gf { gap: 10px; } .gf .cp-ico { background: rgba(26, 22, 17, .08); color: var(--ink); }
.notifs { position: fixed; z-index: 130; left: 16px; bottom: 16px; display: grid; gap: 8px; width: min(340px, calc(100vw - 32px)); }
body:has(.prevbar) .notifs { bottom: 64px; }
.notif { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; border-radius: 14px; cursor: pointer; background: rgba(13, 36, 28, .96); color: var(--chalk); box-shadow: inset 0 0 0 1px var(--line-2), 0 14px 34px rgba(0, 0, 0, .55); }
.notif > span:nth-child(2) { flex: 1; min-width: 0; display: grid; } .notif b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .notif small { opacity: .7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif .ni { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: rgba(214, 176, 102, .18); color: var(--brass); flex: none; } .notif .ni svg { width: 16px; height: 16px; }
.ni.ring { background: rgba(61, 224, 166, .2); color: var(--mint); animation: vcpulse .6s ease-in-out infinite alternate; }
.notif .nx { width: 26px; height: 26px; border: 0; border-radius: 8px; background: none; color: inherit; opacity: .6; cursor: pointer; display: grid; place-items: center; } .notif .nx svg { width: 14px; height: 14px; }
.notif .btn.xs { --fg: var(--chalk); }
/* appel en cours */
.callbox { position: fixed; z-index: 77; left: 16px; top: 80px; width: min(420px, calc(100vw - 32px)); border-radius: 20px; padding: 12px; display: grid; gap: 10px;
  background: rgba(8, 22, 17, .95); color: var(--chalk); box-shadow: inset 0 0 0 1px var(--line-2), 0 30px 60px rgba(0, 0, 0, .6); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.cb-h { display: flex; align-items: center; gap: 8px; min-width: 0; } .cb-h b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cb-h .spacer { flex: 1; } .cb-h .ni { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; flex: none; } .cb-h .ni svg { width: 14px; height: 14px; }
.cb-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; max-height: 52vh; overflow-y: auto; }
.cb-t { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; background: rgba(236, 229, 212, .06); display: grid; place-items: center; align-content: center; gap: 6px; overflow: hidden; }
.cb-t small { font-size: 12px; max-width: 92%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-t video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; } .cb-t video.mirror { transform: scaleX(-1); }
.cb-t.has-v small { position: absolute; left: 6px; bottom: 6px; padding: 2px 6px; border-radius: 6px; background: rgba(0, 0, 0, .55); } .cb-t.has-v .pav { position: absolute; top: 6px; left: 6px; transform: scale(.55); transform-origin: top left; }
.cb-acts { display: flex; justify-content: center; gap: 10px; }
.callbox.min .cb-tiles { display: none; } .callbox.min [data-k=min] svg { transform: rotate(180deg); }
@media (max-width: 640px) {
  .chatp, body.in-game .chatp { inset: 0; width: auto; height: auto; border-radius: 0; z-index: 79; }
  .callbox { left: 8px; right: 8px; top: 64px; width: auto; }
  .chatfab { right: 12px; bottom: 12px; width: 48px; height: 48px; }
}
/* (le petit bouton du joueur dans les autres tables) */
.tok .tav .pav { width: 100%; height: 100%; display: block; }
.tok .tav .pbadge { right: auto; left: 50%; bottom: 3px; transform: translateX(-50%); width: 18px; height: 18px; }
.tok .tav .pbadge:hover { transform: translateX(-50%) scale(1.12); }
.tok .tav:has(.pav.vc-speaking) { box-shadow: 0 0 0 3px var(--mint), 0 0 24px rgba(61, 224, 166, .7); }
.desk > .pav { grid-row: 1 / 3; }
.vcb .cbadge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--danger); color: #fff; font: 700 10px/18px var(--mono); }
body.in-game .chatfab { display: none; }
.tok .tav { --ts: var(--s); } .tok .tav .av { font-size: calc(var(--ts, 64px) * .42); }
@media (max-width: 1100px) { .nav-r .me-chip .nm, .nav-r .me-chip > svg { display: none; } }
@media (max-width: 900px) { .vcb.join span, .vcdock .vcn { display: none; } }
/* ---- Blackjack : table pour le fun (un joueur tient le croupier) ---- */
.bjfun { display: inline-flex; align-items: center; margin-left: 8px; padding: 4px 8px; border-radius: 8px; background: #5b3fb0; color: #fff; font: 700 11px/1.1 var(--mono); letter-spacing: .03em; text-transform: uppercase; box-shadow: 0 0 0 1px rgba(239, 230, 255, .4); }
.bjtable.fun .bjstack i, .bjtable.fun .bjchip { filter: hue-rotate(235deg) saturate(1.25) brightness(1.05); }
.bjtable.fun .bjchip { box-shadow: 0 0 0 2px rgba(139, 108, 240, .55); }
.bjtable.fun .bjwallet { box-shadow: inset 0 0 0 1px rgba(139, 108, 240, .7); }
.bjdealer .dav .av { border-radius: 50%; box-shadow: 0 0 0 3px #8b6cf0; }
@media (max-width: 640px) { .bjfun { margin: 4px 0 0; font-size: 10px; } }
/* (Safari d'iPhone : les cartes de l'affiche ne doivent pas élargir la page) */
.hero { overflow-x: clip; overflow-y: visible; }

/* ---- Étape 10 : fenêtre « Mon micro » qui tient toujours dans l'écran ---- */
.vcpop { box-sizing: border-box; max-width: calc(100vw - 24px); overflow-y: auto; overscroll-behavior: contain; }
.vcpop > *, .vcpop .pop-f, .vcpop .pf-h > span:first-child { min-width: 0; }
.vcpop .pop-f { display: grid; gap: 6px; }
.vcpop .pf-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.vcpop .pf-h > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vcpop .pf-h output { flex: none; min-width: 5ch; text-align: right; font-variant-numeric: tabular-nums; }
.vcpop select.sel { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vcpop input[type=range] { display: block; width: 100%; max-width: 100%; margin: 0; box-sizing: border-box; }
.vcpop .pop-big { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vcpop .pbig { display: grid; justify-items: center; gap: 2px; padding: 12px 6px; border: 0; border-radius: 14px; cursor: pointer; font: inherit; color: var(--ink); background: rgba(47, 132, 97, .14); box-shadow: inset 0 0 0 1.5px rgba(47, 132, 97, .45); min-width: 0; touch-action: manipulation; }
.vcpop .pbig svg { width: 24px; height: 24px; }
.vcpop .pbig span { font-weight: 700; font-size: 14px; }
.vcpop .pbig small { font-size: 11.5px; opacity: .7; text-align: center; }
.vcpop .pbig.off { background: rgba(255, 106, 85, .14); box-shadow: inset 0 0 0 1.5px rgba(200, 70, 50, .5); color: #9a2b1c; }
.vcpop .pop-leave { justify-self: start; }
.vcb { touch-action: manipulation; }
.vcb .vcdot { position: absolute; right: 4px; top: 4px; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 2px rgba(8, 22, 17, .9); }
.vcb.off .vcdot { background: var(--danger); }

/* ---- carte d'appel entrant (partout sur le site) ---- */
.ringcard { position: fixed; z-index: 160; left: 50%; top: calc(14px + env(safe-area-inset-top, 0px)); transform: translate(-50%, 0); width: min(440px, calc(100vw - 24px)); box-sizing: border-box;
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 14px; padding: 14px 16px; border-radius: 22px;
  background: rgba(13, 36, 28, .97); color: var(--chalk); box-shadow: inset 0 0 0 1px rgba(61, 224, 166, .45), 0 24px 60px rgba(0, 0, 0, .65); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.ringcard .rc-av { position: relative; display: grid; place-items: center; }
.ringcard .rc-wave { position: absolute; inset: -6px; border-radius: 30%; box-shadow: 0 0 0 2px var(--mint); animation: rcwave 1.4s ease-out infinite; }
@keyframes rcwave { from { opacity: .9; transform: scale(.92); } to { opacity: 0; transform: scale(1.35); } }
.ringcard .rc-t { display: grid; gap: 2px; min-width: 0; } .ringcard .rc-t small { opacity: .7; font-size: 12.5px; } .ringcard .rc-t b { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ringcard .rc-acts { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ringcard .rc-b { display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border: 0; border-radius: 14px; font: 700 15px/1 var(--body, inherit); cursor: pointer; touch-action: manipulation; }
.ringcard .rc-b svg { width: 18px; height: 18px; }
.ringcard .rc-b.yes { background: #2fbf7c; color: #04210f; animation: vcpulse .6s ease-in-out infinite alternate; }
.ringcard .rc-b.no { background: #e2513d; color: #2a0b05; } .ringcard .rc-b.no svg { transform: rotate(135deg); }
@media (prefers-reduced-motion: reduce) { .ringcard .rc-wave, .ringcard .rc-b.yes { animation: none; } }

/* ---- appel : une case par personne (vidéo, ou photo + pseudo), animation quand on parle ---- */
.cb-tt { display: grid; min-width: 0; } .cb-tt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.callbox { width: min(520px, calc(100vw - 32px)); }
.cb-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.callbox[data-n="1"] .cb-tiles { grid-template-columns: minmax(0, 1fr); }
.callbox[data-n="5"] .cb-tiles, .callbox[data-n="6"] .cb-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cb-t .pav.vc-speaking > .av { box-shadow: 0 0 0 3px var(--mint), 0 0 22px 4px rgba(61, 224, 166, .6); }
.cb-t.has-v:has(.pav.vc-speaking) { box-shadow: inset 0 0 0 3px var(--mint); }
.cb-t.screen video:first-of-type { object-fit: contain; }
.cb-t video.pip { inset: auto 6px 6px auto; width: 34%; height: auto; aspect-ratio: 4 / 3; border-radius: 8px; box-shadow: 0 0 0 2px rgba(0, 0, 0, .6); z-index: 2; }
.cb-t.wait { outline: 1.5px dashed rgba(236, 229, 212, .3); outline-offset: -1.5px; }
.cb-ringing { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: rgba(61, 224, 166, .18); color: var(--mint); animation: vcpulse .6s ease-in-out infinite alternate; }
.cb-ringing svg { width: 22px; height: 22px; }
@media (max-width: 640px) { .callbox[data-n="5"] .cb-tiles, .callbox[data-n="6"] .cb-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cb-tiles { max-height: 46vh; } }

/* ================= Bataille navale : poste de commandement ================= */
/* Toutes les classes sont préfixées « nv ». Acier bleu nuit, lampes ambrées, radar vert phosphore, mer animée. */
.nvtable { --nv-steel: #121b24; --nv-rivet: #2c3a46; --nv-green: #5dffa2; --nv-amber: #ffbf5a; --nv-red: #ff5a3c; --nv-board: min(44vw, calc(100dvh - 330px), 520px);
  position: relative; min-height: calc(100dvh - var(--nav-h) - 28px); display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto; gap: 8px; padding-bottom: 14px;
  overflow: hidden; isolation: isolate; color: #dfe9ef; background: var(--nv-steel); border-radius: 22px 22px 0 0; }
.nvroom { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.nvroom .wall { position: absolute; inset: 0; background:
  radial-gradient(60% 50% at 50% 0%, rgba(255, 191, 90, .1), transparent 70%),
  repeating-linear-gradient(90deg, transparent 0 239px, rgba(0, 0, 0, .35) 239px 241px, rgba(255, 255, 255, .04) 241px 242px),
  repeating-linear-gradient(0deg, transparent 0 159px, rgba(0, 0, 0, .3) 159px 161px),
  radial-gradient(circle at 12px 12px, var(--nv-rivet) 2px, transparent 2.6px) 0 0 / 120px 80px,
  linear-gradient(180deg, #1a2632, #0f171f 70%, #0a1016); }
.nvroom .pipes { position: absolute; left: 0; right: 0; top: 6px; height: 14px; background: linear-gradient(180deg, #3a4651, #1d252c); box-shadow: 0 22px 0 -4px #26313a, 0 3px 8px rgba(0, 0, 0, .6); opacity: .8; }
.nvroom .lamp { position: absolute; top: 26px; width: 26px; height: 16px; border-radius: 0 0 14px 14px; background: #3b3122; box-shadow: 0 8px 26px 10px rgba(255, 191, 90, .22); }
.nvroom .lamp::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: -4px; height: 6px; border-radius: 50%; background: var(--nv-amber); filter: blur(1px); animation: nvflick 6s steps(1) infinite; }
.nvroom .lamp.l { left: 8%; } .nvroom .lamp.r { right: 8%; }
@keyframes nvflick { 0%, 94%, 100% { opacity: 1; } 95% { opacity: .55; } 97% { opacity: .85; } }
.nvroom .scan { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 3px); }
.nvroom .vign { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, .55)); }
.nvbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-block: 12px 0; }
.nvbar .btn.xs { background: rgba(0, 0, 0, .35); color: #dfe9ef; box-shadow: inset 0 0 0 1px rgba(223, 233, 239, .2); }
.nvname { display: flex; align-items: baseline; gap: 10px; min-width: 0; } .nvname b { font-size: clamp(20px, 2.4vw, 28px); letter-spacing: .02em; } .nvname .mono { font-size: 12px; opacity: .6; letter-spacing: .12em; }
.nvstatus { margin-left: auto; padding: 8px 14px; border-radius: 12px; background: rgba(0, 0, 0, .4); box-shadow: inset 0 0 0 1px rgba(93, 255, 162, .25); font: 600 14px/1.2 var(--mono); color: var(--nv-green); font-variant-numeric: tabular-nums; max-width: 100%; }
.nvstatus.mine { background: rgba(93, 255, 162, .12); box-shadow: inset 0 0 0 1.5px var(--nv-green), 0 0 18px rgba(93, 255, 162, .25); }
.nvstatus.warn { color: #ffc27a; box-shadow: inset 0 0 0 1.5px #ffb050; }
.nvfleets { display: flex; gap: 10px 22px; flex-wrap: wrap; }
.nvside { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 14px; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px rgba(223, 233, 239, .1); min-width: 0; flex-wrap: wrap; }
.nvside.turn { box-shadow: inset 0 0 0 1.5px var(--nv-green); }
.nvside b { font-size: 14px; }
.nvready-chip { font: 600 11px/1 var(--mono); padding: 4px 7px; border-radius: 6px; background: rgba(255, 255, 255, .08); opacity: .8; }
.nvready-chip.on { background: rgba(93, 255, 162, .2); color: var(--nv-green); opacity: 1; }
.nvminis { display: flex; gap: 5px; align-items: center; }
.nvmini { position: relative; width: calc(var(--n) * 7px + 4px); height: 8px; border-radius: 3px 5px 5px 3px; background: linear-gradient(180deg, #a9b6bf, #5b6872); }
.nvmini.sunk { background: #4b2a24; opacity: .55; }
.nvmini.sunk::after { content: ""; position: absolute; left: -2px; right: -2px; top: 50%; height: 2px; background: var(--nv-red); transform: rotate(-12deg); }
.nvaway { font: 600 11px/1 var(--mono); padding: 4px 7px; border-radius: 6px; background: rgba(255, 90, 60, .2); color: #ffb1a3; }
.nvtabs { display: none; gap: 8px; }
.nvtabs button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 40px; border: 0; border-radius: 12px; background: rgba(0, 0, 0, .35); color: #dfe9ef; font: 600 14px/1 inherit; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(223, 233, 239, .15); }
.nvtabs button svg { width: 16px; height: 16px; }
.nvtabs button.on { background: rgba(93, 255, 162, .15); color: var(--nv-green); box-shadow: inset 0 0 0 1.5px var(--nv-green); }
.nvboards { display: flex; justify-content: center; align-items: flex-start; gap: clamp(16px, 3vw, 44px); min-height: 0; }
.nvpanel { display: grid; gap: 8px; justify-items: center; min-width: 0; }
.nvpanel > header { display: flex; align-items: baseline; gap: 10px; width: 100%; }
.nvpanel > header b { font: 700 13px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.nvpanel > header small { opacity: .65; font-size: 13px; }
.nvenemy > header b { color: var(--nv-green); }
/* une grille : lettres en haut, chiffres à gauche, 10 × 10 cases */
.nvframe { --b: var(--nv-board); display: grid; grid-template-columns: 22px var(--b); grid-template-rows: 20px var(--b); gap: 4px; }
.nvcorner { grid-area: 1 / 1; }
.nvcols { grid-area: 1 / 2; display: grid; grid-template-columns: repeat(10, 1fr); }
.nvrows { grid-area: 2 / 1; display: grid; grid-template-rows: repeat(10, 1fr); }
.nvcols span, .nvrows span { display: grid; place-items: center; font: 600 11px/1 var(--mono); opacity: .7; }
.nv-en .nvcols span, .nv-en .nvrows span { color: var(--nv-green); }
.nvarea { grid-area: 2 / 2; position: relative; width: var(--b); height: var(--b); border-radius: 8px; overflow: hidden; touch-action: none; }
.nv-my .nvarea { box-shadow: 0 0 0 3px #26323d, 0 0 0 5px #0d141a, 0 18px 40px rgba(0, 0, 0, .55); background: #0b3d55; }
.nvwater { position: absolute; inset: 0; width: 100%; height: 100%; }
.nvcells { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(10, 1fr); grid-template-rows: repeat(10, 1fr); z-index: 3; }
.nvc { border: 0; padding: 0; margin: 0; background: transparent; box-shadow: inset 0 0 0 .5px rgba(190, 230, 245, .16); cursor: default; }
.nv-my .nvc.ok { background: rgba(93, 255, 162, .35); box-shadow: inset 0 0 0 1.5px var(--nv-green); }
.nv-my .nvc.bad { background: rgba(255, 90, 60, .38); box-shadow: inset 0 0 0 1.5px var(--nv-red); }
.nvships, .nvmarks, .nvfx { position: absolute; inset: 0; pointer-events: none; }
.nvships { z-index: 2; } .nvmarks { z-index: 4; } .nvfx { z-index: 6; }
.nvship { position: absolute; padding: 4%; box-sizing: border-box; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .45)); transition: transform .25s var(--ease-out); }
.nvship .nvhull { width: 100%; height: 100%; display: block; }
.nvtable[data-phase="place"] #nv-my .nvships { z-index: 5; }
.nvtable[data-phase="place"] #nv-my .nvship { pointer-events: auto; cursor: grab; touch-action: none; }
.nvship.sel { filter: drop-shadow(0 0 6px var(--nv-green)) drop-shadow(0 4px 4px rgba(0, 0, 0, .45)); }
.nvship.sunk { filter: grayscale(.7) brightness(.55); opacity: .65; transform: rotate(-2deg) scale(.96); }
.nvship.sinking { animation: nvsink 3s ease-in forwards; }
@keyframes nvsink { 0% { transform: none; } 30% { transform: rotate(-4deg); } 100% { transform: rotate(-7deg) scale(.9); filter: grayscale(.8) brightness(.4); opacity: .55; } }
/* tirs reçus sur ma mer : écume, trou, flammes, fumée */
.nvm { position: absolute; display: grid; place-items: center; }
.nv-my .nvm.miss .foam { width: 46%; height: 46%; border-radius: 50%; box-shadow: 0 0 0 2px rgba(240, 252, 255, .75), 0 0 0 6px rgba(240, 252, 255, .18); }
.nv-my .nvm .hole { position: absolute; width: 34%; height: 34%; border-radius: 50%; background: radial-gradient(#140c08 40%, #4a2a18 70%, transparent 72%); }
.nv-my .nvm .flame { position: absolute; width: 44%; height: 58%; bottom: 40%; border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%; background: radial-gradient(60% 70% at 50% 75%, #fff2b0, #ffb33a 40%, #ff5a1f 70%, transparent 72%); transform-origin: 50% 100%; animation: nvfire .45s ease-in-out infinite alternate; mix-blend-mode: screen; }
.nv-my .nvm.sunk .flame { display: none; }
.nv-my .nvm .smoke { position: absolute; width: 40%; height: 40%; bottom: 60%; border-radius: 50%; background: radial-gradient(rgba(60, 60, 60, .55), transparent 70%); animation: nvsmoke 2.6s linear infinite; }
.nv-my .nvm .smoke.s2 { animation-delay: -1.3s; }
@keyframes nvfire { from { transform: scale(.9, .85) rotate(-4deg); opacity: .85; } to { transform: scale(1.05, 1.12) rotate(4deg); opacity: 1; } }
@keyframes nvsmoke { 0% { transform: translate(0, 0) scale(.5); opacity: 0; } 15% { opacity: .9; } 100% { transform: translate(10px, -46px) scale(2.1); opacity: 0; } }
/* radar de l'adversaire */
.nv-en .nvarea { background: radial-gradient(circle at 50% 50%, #0c3a24, #06200f 70%, #031409); box-shadow: 0 0 0 3px #1e2b25, 0 0 0 5px #0a110d, 0 0 30px rgba(93, 255, 162, .12), inset 0 0 40px rgba(0, 0, 0, .7); }
.nv-en .nvc { box-shadow: inset 0 0 0 .5px rgba(93, 255, 162, .18); }
.nv-en .nvarea.armed .nvc:not(.done) { cursor: crosshair; }
.nv-en .nvarea.armed .nvc:not(.done):hover, .nv-en .nvarea.armed .nvc:focus-visible { background: rgba(93, 255, 162, .22); box-shadow: inset 0 0 0 1.5px var(--nv-green); outline: none; }
.nv-en .nvc.aim { background: rgba(255, 191, 90, .3); box-shadow: inset 0 0 0 2px var(--nv-amber); animation: vcpulse .3s ease-in-out infinite alternate; }
.nvsweep { position: absolute; inset: -50%; z-index: 1; background: conic-gradient(from 0deg, rgba(93, 255, 162, .32), rgba(93, 255, 162, .08) 40deg, transparent 70deg, transparent 360deg); animation: nvsweep 4s linear infinite; pointer-events: none; }
@keyframes nvsweep { to { transform: rotate(360deg); } }
.nvblips { position: absolute; inset: 0; z-index: 1; background: radial-gradient(circle at 50% 50%, transparent 0 24%, rgba(93, 255, 162, .1) 24.4% 24.8%, transparent 25% 49%, rgba(93, 255, 162, .1) 49.4% 49.8%, transparent 50%); pointer-events: none; }
.nvhl { position: absolute; z-index: 2; background: rgba(93, 255, 162, .1); opacity: 0; transition: opacity .15s; pointer-events: none; }
.nvhl.r { left: 0; right: 0; height: 10%; top: calc(var(--hr, 0) * 10%); }
.nvhl.c { top: 0; bottom: 0; width: 10%; left: calc(var(--hc, 0) * 10%); }
.nv-en .nvarea.hov .nvhl { opacity: 1; }
.nv-my .nvhl { display: none; }
.nvcoord { position: absolute; z-index: 7; right: 6px; top: 6px; padding: 3px 7px; border-radius: 6px; background: rgba(0, 0, 0, .55); color: var(--nv-green); font-size: 13px; opacity: 0; transition: opacity .15s; pointer-events: none; }
.nv-en .nvarea.hov .nvcoord { opacity: 1; }
.nv-en .nvm.miss .dot { width: 26%; height: 26%; border-radius: 50%; background: #e9fff2; box-shadow: 0 0 8px 2px rgba(233, 255, 242, .6); }
.nv-en .nvm .cross { position: absolute; width: 62%; height: 62%; background: linear-gradient(45deg, transparent 42%, var(--nv-red) 42% 58%, transparent 58%), linear-gradient(-45deg, transparent 42%, var(--nv-red) 42% 58%, transparent 58%); filter: drop-shadow(0 0 4px rgba(255, 90, 60, .8)); }
.nv-en .nvm.sunk .cross { opacity: .85; filter: none; }
.nv-en .nvm .flame { position: absolute; width: 34%; height: 44%; bottom: 46%; border-radius: 50% 50% 40% 40%; background: radial-gradient(60% 70% at 50% 75%, #fff2b0, #ff9a2a 45%, transparent 70%); animation: nvfire .5s ease-in-out infinite alternate; transform-origin: 50% 100%; }
.nv-en .nvship.ghostly { filter: sepia(1) hue-rotate(-40deg) saturate(3) brightness(.8); opacity: .55; }
/* placement : le port (bateaux à poser) et les boutons */
.nvplace { display: grid; gap: 10px; width: calc(var(--nv-board) + 26px); max-width: 100%; }
.nvplace[hidden] { display: none; }
.nvtray { display: flex; flex-wrap: wrap; gap: 8px; }
.nvdock { --cw: min(30px, calc(var(--nv-board) / 12)); display: grid; gap: 4px; justify-items: start; padding: 6px 8px; border: 0; border-radius: 10px; background: rgba(0, 0, 0, .3); color: #dfe9ef; cursor: grab; touch-action: none; box-shadow: inset 0 0 0 1px rgba(223, 233, 239, .15); }
.nvdock .nvhull { width: calc(var(--n) * var(--cw)); height: var(--cw); }
.nvdock small { font-size: 12px; opacity: .8; }
.nvdock.sel { box-shadow: inset 0 0 0 1.5px var(--nv-green); background: rgba(93, 255, 162, .12); }
.nvpbtns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.nvpbtns .btn.xs { background: rgba(0, 0, 0, .35); color: #dfe9ef; box-shadow: inset 0 0 0 1px rgba(223, 233, 239, .2); }
.nvpbtns .nvready { margin-left: auto; }
.nvhelp { opacity: .7; font-size: 12.5px; line-height: 1.4; }
.nvok, .nvwait { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--nv-green); font-size: 14px; }
.nvok svg, .nvwait svg { width: 16px; height: 16px; }
.nvwait .btn.xs { background: rgba(0, 0, 0, .35); color: #dfe9ef; }
.nvghost { position: fixed; left: 0; top: 0; z-index: 200; pointer-events: none; filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .55)); opacity: .9; }
.nvghost .nvhull { width: 100%; height: 100%; display: block; }
.nvghost.bad { filter: drop-shadow(0 0 6px var(--nv-red)) sepia(1) hue-rotate(-30deg); }
/* journal des tirs */
.nvlog { display: grid; gap: 6px; }
.nvlogt { font: 700 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.nvlog ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.nvlog li { font-size: 13px; padding: 5px 9px; border-radius: 8px; background: rgba(0, 0, 0, .3); }
.nvlog li.hit { box-shadow: inset 2px 0 0 #ff8a5c; }
.nvlog li.sunk { box-shadow: inset 2px 0 0 var(--nv-red); background: rgba(255, 90, 60, .12); }
.nvlog li.miss { box-shadow: inset 2px 0 0 #cfe8f5; }
.nvlog li small { opacity: .6; }
/* effets */
.nvshell { position: fixed; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; z-index: 210; pointer-events: none; background: radial-gradient(#fff6d0, #ffb03a 55%, transparent 70%); box-shadow: 0 0 14px 4px rgba(255, 176, 58, .6); }
.nvshell.radar { background: radial-gradient(#eafff1, var(--nv-green) 55%, transparent 70%); box-shadow: 0 0 14px 4px rgba(93, 255, 162, .6); }
.nvpart { position: fixed; z-index: 205; pointer-events: none; width: 7px; height: 7px; border-radius: 50%; }
.nvpart.drop { width: 6px; height: 9px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #e8f8ff; }
.nvpart.spark { width: 4px; height: 4px; background: #ffe39a; box-shadow: 0 0 6px 2px rgba(255, 170, 60, .8); }
.nvpart.fire { width: 14px; height: 14px; background: radial-gradient(#fff0b0, #ff8a2a 50%, transparent 70%); }
.nvpart.bubble { width: 8px; height: 8px; background: transparent; box-shadow: inset 0 0 0 1.5px rgba(220, 245, 255, .85); }
.nvpart.blip { width: 6px; height: 6px; background: var(--nv-green); box-shadow: 0 0 8px var(--nv-green); }
.nvring { position: absolute; border-radius: 50%; box-shadow: 0 0 0 2px rgba(235, 250, 255, .85); }
.nvring.radar { box-shadow: 0 0 0 2px rgba(93, 255, 162, .9); }
.nvring.radarhit { box-shadow: 0 0 0 3px rgba(255, 90, 60, .9); }
.nvring.blast { background: radial-gradient(rgba(255, 220, 140, .85), rgba(255, 110, 40, .5) 45%, transparent 70%); box-shadow: none; }
.nvbanner { position: absolute; left: 50%; top: 46%; z-index: 30; display: grid; justify-items: center; gap: 4px; padding: 14px 26px; border-radius: 16px; pointer-events: none; text-align: center; background: rgba(5, 12, 18, .85); box-shadow: inset 0 0 0 1.5px rgba(223, 233, 239, .25), 0 20px 50px rgba(0, 0, 0, .6); max-width: calc(100% - 24px); }
.nvbanner b { font-size: clamp(24px, 4vw, 40px); }
.nvbanner small { opacity: .8; }
.nvbanner.good b { color: var(--nv-green); }
.nvbanner.bad b { color: #ff8a6c; }
.nvbanner.miss b { color: #d8f1ff; font-size: clamp(20px, 3vw, 30px); }
.nvbanner.hitb b { font-size: clamp(22px, 3.4vw, 34px); }
.nvintro { position: absolute; inset: 0; z-index: 40; display: grid; place-content: center; justify-items: center; gap: 8px; background: rgba(4, 10, 16, .82); overflow: hidden; text-align: center; }
.nvintro .sea { position: absolute; left: 0; right: 0; top: 30%; height: 40%; background: linear-gradient(180deg, transparent, rgba(14, 74, 99, .7) 20%, rgba(8, 44, 64, .9) 80%, transparent); }
.nvintro .fl { position: absolute; top: 40%; display: flex; gap: 14px; align-items: center; }
.nvintro .fl .nvhull { height: 28px; width: auto; }
.nvintro .fl.l { left: 0; animation: nvsailL 2.4s cubic-bezier(.2, .7, .2, 1) forwards; }
.nvintro .fl.r { right: 0; top: 54%; animation: nvsailR 2.4s cubic-bezier(.2, .7, .2, 1) forwards; }
.nvintro .fl.r .nvhull { transform: scaleX(-1); }
@keyframes nvsailL { from { transform: translateX(-110%); } to { transform: translateX(8vw); } }
@keyframes nvsailR { from { transform: translateX(110%); } to { transform: translateX(-8vw); } }
.nvintro b { position: relative; font-size: clamp(30px, 6vw, 64px); color: var(--nv-amber); letter-spacing: .04em; text-shadow: 0 4px 24px rgba(0, 0, 0, .8); }
.nvintro small { position: relative; font-size: 15px; opacity: .85; }
/* fin de partie */
.nvend { width: min(720px, calc(100vw - 24px)); }
.nvend.nv-win h3 { color: #1f7a4c; }
.nvend.nv-lose h3 { color: #9a3a26; }
.nvend-boards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.nvend-b { display: grid; gap: 6px; min-width: 0; }
.nvend-b small { font-weight: 600; font-size: 13px; }
.nvend-g { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: #0b3d55; box-shadow: 0 0 0 2px #26323d; }
.nvend-g .nvship { padding: 3%; }
.nvend-g > .nvm { position: absolute; }
.nvend-g > .nvm.miss::after { content: ""; position: absolute; inset: 34%; border-radius: 50%; background: #e8f8ff; opacity: .85; }
.nvend-g > .nvm.hit::after, .nvend-g > .nvm.sunk::after { content: ""; position: absolute; inset: 24%; background: linear-gradient(45deg, transparent 40%, #ff5a3c 40% 60%, transparent 60%), linear-gradient(-45deg, transparent 40%, #ff5a3c 40% 60%, transparent 60%); }
.nvstats { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.nvstats th, .nvstats td { padding: 6px 8px; text-align: right; border-bottom: 1px solid rgba(26, 22, 17, .12); }
.nvstats th:first-child, .nvstats td:first-child { text-align: left; }
@media (prefers-reduced-motion: reduce) { .nvsweep, .nvroom .lamp::after, .nv-my .nvm .flame, .nv-my .nvm .smoke, .nv-en .nvm .flame { animation: none; } }
/* téléphone : une grille à la fois, avec des onglets */
@media (max-width: 759px) {
  .nvtable { --nv-board: min(calc(100vw - 58px), calc(100dvh - 330px)); min-height: calc(100dvh - var(--nav-h) - 20px); border-radius: 16px 16px 0 0; }
  .nvtabs { display: flex; }
  .nvtable[data-phase="place"] .nvtabs { display: none; }
  .nvboards { display: grid; justify-items: center; }
  .nvtable[data-tab="radar"] .nvmine, .nvtable[data-tab="mine"] .nvenemy { display: none; }
  .nvfleets { gap: 6px; }
  .nvside { padding: 4px 8px 4px 4px; }
  .nvside b { font-size: 13px; }
  .nvstatus { margin-left: 0; width: 100%; text-align: center; box-sizing: border-box; }
  .nvlog ul { max-height: 76px; overflow: hidden; }
  .nvend-boards { gap: 8px; }
}
@media (max-width: 759px) and (max-height: 720px) { .nvtable { --nv-board: min(calc(100vw - 58px), 330px); } }

/* ---- Bataille navale : affiche, page du jeu, transition « sonar » ---- */
.gart.navale { background: radial-gradient(110% 90% at 30% 20%, #0f5470, #08354b 55%, #041a26); overflow: hidden; }
.gart.navale .ngrid { position: absolute; inset: 8%; background-image: linear-gradient(rgba(190, 230, 245, .14) 1px, transparent 1px), linear-gradient(90deg, rgba(190, 230, 245, .14) 1px, transparent 1px); background-size: 10% 10%; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(190, 230, 245, .2); }
.gart.navale .sonar { position: absolute; right: -14%; top: -14%; width: 62%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #0c3a24, #04160c 70%); box-shadow: 0 0 0 3px #1e2b25, 0 0 30px rgba(93, 255, 162, .25); overflow: hidden; }
.gart.navale .sonar::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, transparent 30%, rgba(93, 255, 162, .2) 31% 32%, transparent 33% 62%, rgba(93, 255, 162, .2) 63% 64%, transparent 65%); }
.gart.navale .sonar i { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(rgba(93, 255, 162, .45), transparent 70deg); animation: nvsweep 3.6s linear infinite; }
.gart.navale .nship { position: absolute; height: 9%; border-radius: 40% 60% 60% 40% / 50%; background: linear-gradient(180deg, #a5b2bb, #56636d 60%, #323c44); box-shadow: 0 6px 10px rgba(0, 0, 0, .45); }
.gart.navale .nship.s1 { left: 16%; top: 54%; width: 46%; }
.gart.navale .nship.s2 { left: 30%; top: 28%; width: 28%; transform: rotate(90deg); transform-origin: left center; }
.gart.navale .nhit { position: absolute; left: 39%; top: 50%; width: 9%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(#fff2b0, #ff8a2a 50%, transparent 70%); box-shadow: 0 0 22px 8px rgba(255, 120, 40, .45); animation: nvfire .5s ease-in-out infinite alternate; }
.gart.navale .nsplash { position: absolute; left: 70%; top: 72%; width: 8%; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 0 2px rgba(235, 250, 255, .8), 0 0 0 7px rgba(235, 250, 255, .2); }
.navale-title { color: #5dffa2; text-shadow: 0 0 50px rgba(93, 255, 162, .3); letter-spacing: .01em; } .navale-title span { color: var(--chalk); }
.mini-ic.nvmini-ic { position: relative; background: radial-gradient(circle, #0c3a24, #04160c 75%); overflow: hidden; }
.mini-ic.nvmini-ic i { position: absolute; inset: 0; background: conic-gradient(rgba(93, 255, 162, .5), transparent 80deg); animation: nvsweep 3.2s linear infinite; }
.mini-ic.nvmini-ic.hit { background: radial-gradient(circle at 50% 55%, #ffd27a, #ff6a2a 30%, #3a1406 62%, #12070a); }
.mini-ic.nvmini-ic.hit i { background: none; }
.role-ic.nvrule { position: relative; background: #0b3d55; border-radius: 12px; }
.role-ic.nvrule.miss::after { content: ""; position: absolute; inset: 30%; border-radius: 50%; box-shadow: 0 0 0 3px #eaf8ff, 0 0 0 8px rgba(234, 248, 255, .25); }
.role-ic.nvrule.hit::after, .role-ic.nvrule.sunk::after { content: ""; position: absolute; inset: 22%; background: linear-gradient(45deg, transparent 40%, #ff5a3c 40% 60%, transparent 60%), linear-gradient(-45deg, transparent 40%, #ff5a3c 40% 60%, transparent 60%); }
.role-ic.nvrule.sunk { background: linear-gradient(180deg, #3a4651, #1d252c); }
.tx .sn-bg { position: absolute; inset: 0; background: radial-gradient(60% 60% at 50% 45%, #06261a, #020a07 70%); }
.tx .sn-scope { position: absolute; left: 50%; top: 45%; width: min(64vmin, 520px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #0c3a24, #04160c 72%); box-shadow: 0 0 0 4px #1e2b25, 0 0 0 10px #0a110d, 0 0 80px rgba(93, 255, 162, .25); overflow: hidden; }
.tx .sn-grid { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, transparent 0 24%, rgba(93, 255, 162, .22) 24.5% 25%, transparent 25.5% 49%, rgba(93, 255, 162, .22) 49.5% 50%, transparent 50.5% 74%, rgba(93, 255, 162, .22) 74.5% 75%, transparent 75.5%), linear-gradient(rgba(93, 255, 162, .2), rgba(93, 255, 162, .2)) center / 1px 100% no-repeat, linear-gradient(rgba(93, 255, 162, .2), rgba(93, 255, 162, .2)) center / 100% 1px no-repeat; }
.tx .sn-sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(rgba(93, 255, 162, .55), rgba(93, 255, 162, .1) 50deg, transparent 80deg); animation: nvsweep 1.6s linear infinite; }
.tx .sn-blip { position: absolute; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: #c8ffe0; box-shadow: 0 0 12px 4px rgba(93, 255, 162, .8); opacity: 0; animation: snblip 1.2s var(--d) ease-out both; }
@keyframes snblip { 0% { opacity: 0; transform: scale(.2); } 20% { opacity: 1; transform: scale(1.3); } 100% { opacity: .35; transform: scale(1); } }
.tx .sn-ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 3px rgba(93, 255, 162, .9); }
.tx .sn-title { position: absolute; left: 50%; bottom: 10%; transform: translateX(-50%); white-space: nowrap; font-size: clamp(34px, 7vw, 78px); color: #5dffa2; text-shadow: 0 0 30px rgba(93, 255, 162, .45); }
.tx .sn-title em { color: var(--chalk); font-style: normal; }
.tx .sn-sea { position: absolute; left: -5%; right: -5%; bottom: 0; height: 110%; transform: translateY(100%); background: linear-gradient(180deg, rgba(160, 220, 240, .5) 0 4px, #0e4a63 4px, #082c40 60%, #041a26); border-radius: 40% 40% 0 0 / 6% 6% 0 0; }
@media (prefers-reduced-motion: reduce) { .tx .sn-sweep, .gart.navale .sonar i, .mini-ic.nvmini-ic i { animation: none; } }
/* (corrections) bateaux à la bonne épaisseur ; pendant le placement, le port est à côté de ma grille (pas de radar) */
.nvship, .nvend-g .nvship { padding: 0; }
.nvship .nvhull { transform: scale(.96); }
.nvtable[data-phase="place"] .nvenemy { display: none; }
@media (min-width: 760px) {
  .nvtable[data-phase="place"] .nvmine { grid-template-columns: auto minmax(260px, 380px); align-items: start; column-gap: 28px; }
  .nvtable[data-phase="place"] .nvmine > header { grid-column: 1 / -1; }
  .nvtable[data-phase="place"] .nvplace { width: auto; align-self: center; }
  .nvtable[data-phase="place"] .nvtray { flex-direction: column; align-items: stretch; }
  .nvtable[data-phase="place"] .nvdock { --cw: 34px; }
  .nvtable[data-phase="place"] .nvpbtns .nvready { margin-left: 0; }
}
/* (étape 10) barre du haut des jeux : toujours entière sous le menu du site, même quand la page défile (Quiz, Bataille navale) */
.qtable, .nvtable { overflow: clip; }
.qbar, .nvbar { position: sticky; top: calc(var(--nav-h) + 16px + env(safe-area-inset-top, 0px)); z-index: 25; border-radius: 14px; padding-inline: 12px; margin-inline: auto; }
.qbar { background: linear-gradient(180deg, rgba(26, 16, 48, .94), rgba(26, 16, 48, .82)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.nvbar { background: linear-gradient(180deg, rgba(18, 27, 36, .95), rgba(18, 27, 36, .85)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding-block: 10px; }

/* ===== Étape 11 : admin — tableau qui tient dans la page, historique, onglets des signalements ===== */
.tbl-fit .tdacts { min-width: 200px; }
.tbl-fit td .sel { max-width: 130px; }
@media (max-width: 860px) {
  .tbl-wrap { overflow: visible; background: none; box-shadow: none; }
  .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; width: auto; }
  .tbl thead { display: none; }
  .tbl tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; padding: 14px; margin-bottom: 10px; border-radius: 16px; background: rgba(16, 44, 35, .5); box-shadow: inset 0 0 0 1px var(--line); }
  .tbl td { padding: 0; border: 0; min-width: 0; }
  .tbl td:first-child, .tbl td.tdacts { grid-column: 1 / -1; }
  .tbl td[data-l]::before { content: attr(data-l); display: block; font: 500 10.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--chalk-3); margin-bottom: 2px; }
  .tbl .acts { justify-content: flex-start; padding-top: 4px; }
  .tbl-fit .tdacts { min-width: 0; }
}
.atabs .seg button { position: relative; }
.abadge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-left: 4px; border-radius: 99px; background: var(--danger); color: #fff; font: 700 11.5px/1 var(--mono); vertical-align: 1px; }
.abadge.zero { background: rgba(236, 229, 212, .14); color: var(--chalk-2, var(--chalk)); }
.rptabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.rpt { all: unset; cursor: pointer; padding: 10px 16px; border-radius: 99px; font: 600 14px/1 var(--body); color: var(--chalk); box-shadow: inset 0 0 0 1px var(--line); transition: background .2s, box-shadow .2s; }
.rpt:hover { background: rgba(236, 229, 212, .06); }
.rpt.on { background: rgba(214, 176, 102, .16); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .55); }
.rpt:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.logf { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; margin-bottom: 16px; }
.logf .field { display: grid; gap: 6px; margin: 0; min-width: 0; }
.logf .field > span { font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--chalk-3); }
.logf .sel { min-width: 190px; max-width: 100%; }
.loglist { display: grid; gap: 8px; }
.logi { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; gap: 6px 16px; align-items: center; padding: 12px 16px; border-radius: 14px; background: rgba(236, 229, 212, .04); box-shadow: inset 0 0 0 1px var(--line); }
.logi.odd { box-shadow: inset 0 0 0 1px rgba(255, 106, 85, .55); background: rgba(255, 106, 85, .06); }
.logt { font: 600 11px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--brass); }
.logi.t-ban .logt, .logi.t-delete .logt, .logi.t-leaderboard .logt { color: #ffb1a5; }
.logi.t-unban .logt, .logi.t-restore .logt { color: var(--mint); }
.logm { min-width: 0; overflow-wrap: anywhere; }
.logr { display: block; font-size: 13.5px; color: var(--chalk-3); margin-top: 2px; }
.logw { display: grid; justify-items: end; gap: 2px; text-align: right; font-size: 13.5px; }
.logwarn { color: #ffb1a5; display: inline-flex; align-items: center; gap: 4px; }
.logwarn svg { width: 13px; height: 13px; }
@media (max-width: 700px) {
  .logi { grid-template-columns: 1fr; }
  .logw { justify-items: start; text-align: left; }
  .logf .sel { min-width: 0; width: 100%; } .logf .field { flex: 1 1 140px; }
}

/* ===== Étape 11 : consommation (état du jour, projection, heure par heure) ===== */
.usehead { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: var(--r); background: rgba(61, 224, 166, .08); box-shadow: inset 0 0 0 1px rgba(61, 224, 166, .35); }
.usehead.warn { background: rgba(232, 165, 58, .1); box-shadow: inset 0 0 0 1px rgba(232, 165, 58, .5); }
.usehead.bad { background: rgba(255, 106, 85, .1); box-shadow: inset 0 0 0 1px rgba(255, 106, 85, .6); }
.usehead > div { display: grid; gap: 4px; min-width: 0; }
.usehead b { font: 800 22px/1.15 var(--display); }
.usehead .uh-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(61, 224, 166, .16); color: var(--mint); }
.usehead.warn .uh-ic { background: rgba(232, 165, 58, .18); color: #e8a53a; } .usehead.bad .uh-ic { background: rgba(255, 106, 85, .18); color: var(--danger); }
.gauges { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px 24px; }
.usebar.proj { position: relative; overflow: visible; }
.usebar.proj em { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--chalk); opacity: .8; }
.hz { position: relative; display: grid; grid-template-columns: 52px 1fr; grid-template-rows: 170px auto auto; gap: 6px 8px; margin-top: 16px; }
.hz-y { display: flex; flex-direction: column; justify-content: space-between; font: 500 11px/1 var(--mono); color: var(--chalk-3); text-align: right; padding-bottom: 2px; }
.hz-bars { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; align-items: end; border-bottom: 1px solid var(--line); background: repeating-linear-gradient(to top, transparent 0 42px, rgba(236, 229, 212, .05) 42px 43px); }
.hz-b { all: unset; height: 100%; display: flex; align-items: flex-end; cursor: pointer; border-radius: 4px 4px 0 0; }
.hz-b i { display: block; width: 100%; border-radius: 4px 4px 0 0; background: var(--brass); opacity: .75; transition: opacity .15s; }
.hz-b.now i { opacity: 1; background: var(--mint); }
.hz-b:hover i, .hz-b.on i, .hz-b:focus-visible i { opacity: 1; }
.hz-b.on, .hz-b:focus-visible { background: rgba(236, 229, 212, .06); }
.hz-b.fut { cursor: default; }
.hz-x { grid-column: 2; position: relative; height: 14px; font: 500 11px/1 var(--mono); color: var(--chalk-3); }
.hz-x span { position: absolute; transform: translateX(-2px); white-space: nowrap; }
.hz-read { grid-column: 1 / -1; min-height: 18px; }
[data-seg="usem"] { max-width: 100%; overflow-x: auto; }
.usedays td small { font-size: 11.5px; }
@media (max-width: 640px) { .hz { grid-template-columns: 40px 1fr; grid-template-rows: 140px auto auto; } .usehead b { font-size: 19px; } }

/* ===== Étape 11 : appels agrandis, plein écran, personne mise en grand ===== */
.cb-t[data-uid] { cursor: zoom-in; } .cb-t.focus { cursor: zoom-out; }
.callbox.big, .callbox.full { grid-template-rows: auto minmax(0, 1fr) auto; }
.callbox.big { left: 50%; top: 84px; transform: translateX(-50%); width: min(1180px, calc(100vw - 32px)); height: calc(100dvh - 100px); z-index: 90; }
.callbox.full { inset: 0; left: 0; top: 0; transform: none; width: auto; height: 100dvh; border-radius: 0; z-index: 140;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
.callbox:fullscreen { width: 100vw; height: 100vh; }
.callbox.big .cb-tiles, .callbox.full .cb-tiles { max-height: none; min-height: 0; height: 100%; align-content: center; }
.callbox.big:not(.stage) .cb-tiles, .callbox.full:not(.stage) .cb-tiles { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.callbox.stage .cb-tiles { display: grid; grid-template-columns: minmax(0, 1fr) 150px; grid-template-rows: minmax(0, 1fr); align-content: stretch; height: 300px; overflow: hidden; }
.callbox.big.stage .cb-tiles, .callbox.full.stage .cb-tiles { grid-template-columns: minmax(0, 1fr) 210px; height: 100%; }
.callbox.stage .cb-t.focus { aspect-ratio: auto; height: 100%; min-height: 0; }
.cb-t.focus video:first-of-type { object-fit: contain; }
.cb-side { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 0; overscroll-behavior: contain; }
.cb-side .cb-t { flex: none; }
.callbox.stage .cb-tiles:has(.cb-side:empty) { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 700px) {
  .callbox.big { left: 8px; right: 8px; top: 64px; transform: none; width: auto; height: calc(100dvh - 72px); }
  .callbox.stage .cb-tiles, .callbox.big.stage .cb-tiles, .callbox.full.stage .cb-tiles { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .callbox.stage:not(.big):not(.full) .cb-tiles { height: 360px; }
  .cb-side { flex-direction: row; overflow-x: auto; overflow-y: hidden; }
  .cb-side .cb-t { width: 112px; }
}
/* groupes : bouton « Inviter » et liste d'amis à cocher */
.cp-inv { white-space: nowrap; }
.fpick { display: grid; gap: 4px; max-height: 240px; overflow-y: auto; padding: 4px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); }
.fpi { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; cursor: pointer; min-width: 0; }
.fpi:hover { background: rgba(26, 22, 17, .06); }
.fpi b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fpi input { width: 18px; height: 18px; accent-color: var(--brass); flex: none; }

/* ===== Étape 11 : fenêtre « Tes rats » bien alignée ===== */
.ratpop { width: min(300px, calc(100vw - 24px)); max-height: calc(100dvh - 90px); overflow-y: auto; gap: 14px; }
.ratpop .rp-virt { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: rgba(26, 22, 17, .06); line-height: 1.45; }
.ratpop .rp-virt svg { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.ratpop .rp-virt span { min-width: 0; }
.ratpop .rp-acts { display: grid; gap: 8px; }
.ratpop .rp-acts .btn { justify-self: stretch; justify-content: center; }

/* ===== Étape 11 : Bataille navale — noms au-dessus des grilles, journal compact, message sur la grille, lignes visibles ===== */
.nvfleets { display: none; }
.nvwho { display: flex; justify-content: center; min-height: 40px; margin-bottom: 6px; }
.nvwho .nvside { margin: 0 auto; }
.nvframe { position: relative; }
.nvframe > .nvbanner { top: 50%; padding: 10px 20px; border-radius: 14px; background: rgba(5, 12, 18, .78); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.nvframe > .nvbanner.miss { top: 18%; padding: 6px 14px; border-radius: 99px; display: flex; align-items: baseline; gap: 8px; }
.nvframe > .nvbanner.miss b { font-size: clamp(16px, 2.2vw, 22px); }
.nvframe > .nvbanner.miss small { font: 600 12px/1 var(--mono); }
.nvlog { max-width: 760px; margin-inline: auto; width: 100%; gap: 8px; margin-top: 10px; }
.nvlogt { display: flex; justify-content: space-between; align-items: baseline; }
.nvlogt small { font: 500 11px/1 var(--mono); letter-spacing: .08em; opacity: .8; text-transform: none; }
.nvlog ul { display: block; max-height: 168px; overflow-y: auto; border-radius: 12px; background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1px rgba(223, 233, 239, .1); padding: 4px; overscroll-behavior: contain; }
.nvlog li { display: grid; grid-template-columns: 18px 26px 120px 34px minmax(0, 1fr); align-items: center; gap: 8px; padding: 5px 8px; border-radius: 8px; background: none; box-shadow: none !important; font-size: 13px; line-height: 1.3; }
.nvlog li + li { border-top: 1px solid rgba(223, 233, 239, .06); }
.nvlog li:first-child { background: rgba(223, 233, 239, .06); }
.nvlog li b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 120px; }
.nvli-ic { display: grid; place-items: center; } .nvli-ic svg { width: 15px; height: 15px; }
.nvlog li.miss .nvli-ic { color: #bfe3f5; } .nvlog li.hit .nvli-ic { color: #ff9a5c; } .nvlog li.sunk .nvli-ic { color: var(--nv-red); }
.nvlog li.sunk .nvli-r { color: #ffb3a3; font-weight: 600; }
.nvli-n { opacity: .45; font-size: 11px; text-align: right; } .nvli-c { opacity: .85; font-size: 12px; }
.nvli-r { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nvli-r small { opacity: .6; }
.nvli-empty { display: block !important; opacity: .6; padding: 8px 10px !important; }
@media (max-width: 700px) {
  .nvc { box-shadow: inset 0 0 0 1px rgba(190, 230, 245, .3); }
  .nv-en .nvc { box-shadow: inset 0 0 0 1px rgba(93, 255, 162, .28); }
  .nvlog li { grid-template-columns: 16px 92px 32px minmax(0, 1fr); } .nvli-n { display: none; }
}
.nvwho { flex-wrap: wrap; gap: 8px 16px; }
/* Loup-garou : les 4 coins de la zone du village arrondis pareil (les calques animés ne dépassent plus, même sur Safari) */
.ltable .village { border-radius: 22px; clip-path: inset(0 round 22px); -webkit-mask-image: -webkit-radial-gradient(white, black); isolation: isolate; }
.ltable { border-radius: 22px; margin-bottom: 14px; }

/* ===== Étape 11 : barre du haut sur téléphone — plus rien ne déborde (Son et Amis passent dans le menu ☰) ===== */
.mmenu { overflow-y: auto; overscroll-behavior: contain; }
.mmenu a .badge { position: static; transform: none; font-size: 14px; align-self: center; }
.burger { position: relative; }
.burger .badge { position: absolute; top: 2px; right: 2px; }
@media (max-width: 640px) {
  .nav-r > #volbtn, .nav-r > a.ic-btn[href="#amis"] { display: none; }
  .nav-in { gap: 8px; padding: 0 8px 0 10px; }
  .nav .brand b { display: none; }
  .nav-r { gap: 4px; min-width: 0; }
  .nav-r .ic-btn, .burger { width: 38px; height: 38px; }
  .nav-r .me-chip { height: 38px; padding: 0 2px; }
  .nav-r .me-chip .av { width: 32px !important; height: 32px !important; }
}
@media (max-width: 360px) { .ratpill { padding: 0 7px 0 5px; } .ratpill b { font-size: 13px; } .nav-in { gap: 4px; } }
/* bas de l'écran (iPhone, Android) : le dernier panneau reste au-dessus des barres du navigateur */
.page { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
.lobby { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }
.mmenu { padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
.callbox.big { height: calc(100dvh - 100px - env(safe-area-inset-bottom, 0px)); }
.chatfab { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); right: calc(16px + env(safe-area-inset-right, 0px)); }
.notifs { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
/* (hauteurs « dvh » : la vraie hauteur visible, sans la partie cachée sous les barres de Safari) */
.chatp { height: min(600px, calc(100dvh - 96px - env(safe-area-inset-bottom, 0px))); }
.qtable { min-height: calc(100dvh - var(--nav-h) - 28px); }
.gtable, .ltable { height: calc(100dvh - var(--nav-h) - 28px - env(safe-area-inset-bottom, 0px)); }
/* accueil : les affiches tournent en boucle (4 visibles, 3 sur téléphone), sans jamais sortir de leur colonne */
.posters .poster { transition: transform .95s cubic-bezier(.2, .8, .2, 1), opacity .7s ease, box-shadow .3s; }
.hero .txt { position: relative; z-index: 2; }
.posters { z-index: 1; }

/* ===== Étape 11 : spectateurs et joueurs déconnectés ===== */
.watchchip { position: fixed; z-index: 72; left: calc(16px + env(safe-area-inset-left, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 14px; background: rgba(9, 26, 20, .86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px var(--line), 0 14px 30px -12px rgba(0, 0, 0, .7); color: var(--chalk); font-size: 13.5px; pointer-events: none; }
.watchchip svg { width: 18px; height: 18px; color: var(--brass); flex: none; }
.watchchip span { display: grid; line-height: 1.25; } .watchchip small { color: var(--chalk-3); font-size: 12px; }
.watchchip.me { box-shadow: inset 0 0 0 1.5px rgba(214, 176, 102, .6), 0 14px 30px -12px rgba(0, 0, 0, .7); }
[data-pid].is-away { position: relative; }
[data-pid].is-away > :first-child { filter: grayscale(.85) brightness(.7); }
[data-pid].is-away::after { content: attr(data-gone); position: absolute; left: 50%; top: -8px; transform: translateX(-50%); z-index: 6; white-space: nowrap; padding: 3px 7px 3px 20px; border-radius: 99px;
  background: #ff6a55 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M9 2v6M15 2v6M6 8h12v3a6 6 0 0 1-12 0zM12 17v5'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E") no-repeat 6px 50% / 11px 11px; color: #fff; font: 700 11px/1 var(--mono); box-shadow: 0 4px 12px rgba(0, 0, 0, .5); pointer-events: none; animation: awaypulse 1s ease-in-out infinite alternate; }
@keyframes awaypulse { from { opacity: .75; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { [data-pid].is-away::after { animation: none; } }
.ogplay { display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 99px; font: 600 10.5px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; background: rgba(61, 224, 166, .15); color: var(--mint); }

/* ===== Étape 11 : bugs signalés par les joueurs ===== */
.linkbtn { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; color: inherit; }
.linkbtn:hover { color: var(--chalk); } .linkbtn svg { width: 14px; height: 14px; }
.linkbtn:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 4px; }
.drop button[data-bug] { display: flex; align-items: center; gap: 10px; width: 100%; }
.bugcard.new { box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .55); background: rgba(214, 176, 102, .06); }
.rp-tag.bug-new { background: rgba(214, 176, 102, .2); color: #f2d58a; }
.rp-tag.bug-doing { background: rgba(91, 155, 255, .2); color: #a9c9ff; }
.rp-tag.bug-done { background: rgba(61, 224, 166, .18); color: var(--mint); }
.rp-tag.bug-wont { background: rgba(236, 229, 212, .1); color: var(--chalk-2); }

/* ===== Étape 11 (corrections) : Scuno — le petit micro en haut à gauche de l'avatar (le nombre de cartes est en bas à droite) ===== */
.gtable .seat .pav .pbadge { right: auto; bottom: auto; left: -7px; top: -7px; }
.gtable .opps[data-d="3"] .seat .pav .pbadge, .gtable .opps[data-d="4"] .seat .pav .pbadge { width: 17px; height: 17px; left: -6px; top: -6px; }
.gtable .opps[data-d="3"] .seat .pav .pbadge svg, .gtable .opps[data-d="4"] .seat .pav .pbadge svg { width: 9px; height: 9px; }

/* ===== Étape 11 (corrections) : joueur parti bien visible — avatar grisé, prise débranchée rouge, compte à rebours ===== */
[data-pid].is-away > :first-child { filter: grayscale(1) brightness(.55) !important; transition: filter .3s; }
[data-pid].is-away { border-radius: 50%; box-shadow: 0 0 0 3px #ff4b33, 0 0 16px 2px rgba(255, 75, 51, .55); }
[data-pid].is-away::before { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff4b33' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M9 2v6M15 2v6M6 8h12v3a6 6 0 0 1-12 0zM12 17v5'/%3E%3Cpath d='M3 3l18 18'/%3E%3C/svg%3E") no-repeat center / 52% 52%, radial-gradient(circle, rgba(0, 0, 0, .55) 0 55%, transparent 56%); }
[data-pid].is-away::after { top: auto; bottom: -12px; font-size: 12px; padding: 4px 8px 4px 22px; background-color: #ff4b33; animation: none; }
.hostwait { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 14px; border-radius: 12px; background: rgba(214, 176, 102, .14); color: var(--ink); font-size: 14px; }
.hostwait svg { width: 18px; height: 18px; flex: none; }
[data-pid].is-away::after { top: 50%; bottom: auto; left: auto; right: calc(100% + 7px); transform: translateY(-50%); }
.gtable .seat [data-pid].is-away::after { right: calc(100% + 9px); }
/* compte à rebours d'un joueur parti : AU-DESSUS de son avatar (toujours visible, même pour le joueur tout à gauche sur téléphone) */
[data-pid].is-away::after, .gtable .seat [data-pid].is-away::after { top: auto; bottom: calc(100% + 9px); left: 50%; right: auto; transform: translateX(-50%); }

/* ===== Étape 11 (suite) : supprimer une partie (équipe du site) ===== */
.og-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.og-del span { margin-left: 2px; }
@media (max-width: 560px) { .og-del span { display: none; } }
.rc-btns { display: inline-flex; gap: 6px; align-items: center; }
.staffclose { position: fixed; z-index: 72; right: calc(84px + env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .7); }
@media (max-width: 640px) { .staffclose { right: auto; left: calc(16px + env(safe-area-inset-left, 0px)); bottom: calc(66px + env(safe-area-inset-bottom, 0px)); } }

/* ===== Étape 12 : support ===== */
.supgrid { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: 16px; align-items: start; }
.suplist { display: grid; gap: 8px; padding: 14px; max-height: 70vh; overflow-y: auto; }
.supit { all: unset; cursor: pointer; display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); }
.supit:hover { background: rgba(236, 229, 212, .05); } .supit.on { background: rgba(214, 176, 102, .12); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .5); }
.supit:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.supconv { padding: 18px; display: grid; gap: 12px; min-width: 0; }
.supst { display: inline-block; padding: 3px 8px; border-radius: 99px; font: 600 11px/1.3 var(--mono); letter-spacing: .04em; vertical-align: 2px; }
.supst.st-wait { background: rgba(214, 176, 102, .2); color: #f2d58a; } .supst.st-doing { background: rgba(91, 155, 255, .2); color: #a9c9ff; } .supst.st-done { background: rgba(61, 224, 166, .18); color: var(--mint); }
.supmsgs { display: grid; gap: 10px; max-height: 52vh; overflow-y: auto; padding: 4px 2px; overscroll-behavior: contain; }
.supm { display: flex; } .supm.me { justify-content: flex-end; }
.supb { max-width: min(78%, 560px); display: grid; gap: 6px; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: rgba(236, 229, 212, .07); box-shadow: inset 0 0 0 1px var(--line); overflow-wrap: anywhere; }
.supm.me .supb { border-radius: 16px 16px 4px 16px; background: rgba(214, 176, 102, .16); }
.supm.staff .supb { box-shadow: inset 0 0 0 1px rgba(61, 224, 166, .4); }
.supb p { margin: 0; white-space: pre-wrap; font-size: 14.5px; }
.supwho { display: inline-flex; align-items: center; gap: 6px; font: 700 12.5px/1.2 var(--body); color: var(--mint); }
.supwho svg { width: 13px; height: 13px; } .supwho small { font-weight: 500; color: var(--chalk-3); }
.supt { font-size: 11.5px; color: var(--chalk-3); justify-self: end; }
.supform { display: grid; gap: 8px; } .supform textarea { min-height: 80px; }
.supcard .supmsgs { max-height: 46vh; margin: 6px 0; }
.drop a .badge, .cp-h .badge { position: static; transform: none; margin-left: 4px; }
@media (max-width: 760px) { .supgrid { grid-template-columns: 1fr; } .suplist { max-height: none; } .supb { max-width: 88%; } }
/* Admin › Support : quelqu'un a écrit depuis ma dernière réponse ? */
.supnew { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 99px; font: 600 12px/1.2 var(--body); }
.supnew svg { width: 13px; height: 13px; }
.supnew.yes { background: #ff6a55; color: #fff; box-shadow: 0 0 0 3px rgba(255, 106, 85, .18); animation: awaypulse 1.1s ease-in-out infinite alternate; }
.supnew.no { background: rgba(236, 229, 212, .08); color: var(--chalk-3); }
@media (prefers-reduced-motion: reduce) { .supnew.yes { animation: none; } }

/* ===== Étape 13 : atelier (personnages et décors) — page cachée de l'admin ===== */
.atelier .at-perso { display: grid; grid-template-columns: minmax(280px, 400px) minmax(0, 1fr); gap: 22px; padding: 20px; align-items: start; }
.at-stage { position: relative; aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden; background: linear-gradient(180deg, #a9c7e8 0%, #d9e8f2 46%, #6f9a55 46.5%, #4e7a3a 100%); box-shadow: inset 0 0 0 1px var(--line); transition: filter .8s; }
.at-stage[data-fond="casino"] { background: radial-gradient(120% 80% at 50% 0%, #6b2a2a, #2a0f12 70%); }
.at-stage[data-fond="port"] { background: linear-gradient(180deg, #f2c48a 0%, #f6dcb4 40%, #3a6e92 40.5%, #2f5a7a 70%, #d8c08a 70.5%, #c9ad74 100%); }
.at-stage[data-fond="aucun"] { background: radial-gradient(circle at 50% 40%, #2a4a3e, #12261f); }
.at-stage.nuit { filter: brightness(.55) saturate(.8) hue-rotate(-12deg); }
.at-bg { position: absolute; inset: 0; }
.at-it { position: absolute; width: calc(var(--w) * 1%); transform: translate(-50%, -100%); }
.at-it svg { width: 100%; height: auto; display: block; overflow: visible; }
.at-char { position: absolute; left: 50%; bottom: 3%; width: 72%; transform: translateX(-50%); filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .35)); }
.at-char svg { width: 100%; height: auto; display: block; }
.at-ctrl { display: grid; gap: 14px; min-width: 0; }
.at-row { display: grid; gap: 7px; } .at-row > b { font: 600 11.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--chalk-3); }
.at-row .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip small.r-rare { color: #6aa8ff; } .chip small.r-epique { color: #c39bff; } .chip small.r-legendaire { color: #f2c14e; }
.sw { display: flex; gap: 8px; flex-wrap: wrap; }
.sw button { width: 30px; height: 30px; border-radius: 50%; border: 0; cursor: pointer; background: var(--c); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .25); transition: transform .15s; }
.sw button:hover { transform: scale(1.1); } .sw button.on { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--brass); }
.sw button:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.at-av { width: var(--s); height: var(--s); border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 50% 35%, #2a4a3e, #16302a); box-shadow: inset 0 0 0 1px var(--line); }
.at-av svg { width: 100%; height: 100%; display: block; }
.at-code { margin: 0; padding: 10px 12px; border-radius: 10px; background: rgba(0, 0, 0, .25); font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--chalk-2); }
.at-h { margin: 18px 0 10px; font: 700 13px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--brass); }
.at-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.at-card { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 6px; justify-items: center; text-align: center; padding: 12px 10px; border-radius: 16px; background: radial-gradient(circle at 50% 30%, #2a4a3e, #16302a); box-shadow: inset 0 0 0 1px var(--line); transition: transform .2s, box-shadow .2s; }
.at-card:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .6); } .at-card:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.at-card.dk { cursor: default; background: linear-gradient(180deg, #b8d0e6, #e2edf3 60%, #9cbf86 60.5%, #7aa364); color: #1a1611; }
.at-card.dk .dim { color: #3b4a40; }
.decorlib.nuit .at-card.dk { background: linear-gradient(180deg, #1b2440, #2b3758 60%, #2e4630 60.5%, #233a26); color: var(--chalk); }
.at-th { width: 100%; height: 120px; display: grid; place-items: center; }
.at-th svg { max-width: 100%; max-height: 120px; width: auto; height: auto; overflow: visible; }
.rar { font: 600 10.5px/1.3 var(--mono); padding: 2px 7px; border-radius: 99px; background: rgba(236, 229, 212, .1); }
.rar.r-rare { color: #9cc4ff; background: rgba(91, 155, 255, .16); } .rar.r-epique { color: #d4b8ff; background: rgba(124, 92, 214, .2); } .rar.r-legendaire { color: #f6d98a; background: rgba(214, 176, 102, .2); }
.at-scene { position: relative; aspect-ratio: 16 / 7; border-radius: 22px; overflow: hidden; background: linear-gradient(180deg, #9cbde0 0%, #d6e6f0 44%, #6f9a55 44.5%, #4e7a3a 100%); box-shadow: inset 0 0 0 1px var(--line); transition: filter .8s; }
.at-scene.nuit { filter: brightness(.55) saturate(.85) hue-rotate(-12deg); }
.at-ground { position: absolute; left: 10%; right: 10%; top: 62%; bottom: -10%; border-radius: 50%; background: radial-gradient(#b4a892, #9a8e7c 60%, transparent 72%); opacity: .7; }
.at-p { position: absolute; bottom: 2%; width: 14%; transform: translateX(-50%); filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .3)); }
.at-p svg { width: 100%; height: auto; display: block; }
/* fenêtres, lanternes et animations des décors (comme dans le village) */
.decorlib .win, .at-stage .win { fill: #7d94b4; transition: fill 1.2s; } .decorlib .win.stained { fill: #6b77a8; }
.decorlib .lampf, .at-stage .lampf { fill: #6b6b78; transition: fill 1.2s; }
.decorlib.nuit .win, .at-stage.nuit .win { fill: #ffd27a; } .decorlib.nuit .lampf, .at-stage.nuit .lampf { fill: #ffd27a; }
.decorlib .smoke circle, .at-stage .smoke circle { fill: rgba(236, 236, 244, .55); animation: smoke 4.2s ease-in infinite; transform-box: fill-box; transform-origin: center; }
.decorlib .smoke circle:nth-child(2) { animation-delay: -1.4s; } .decorlib .smoke circle:nth-child(3) { animation-delay: -2.8s; }
.decorlib .sails { transform-box: view-box; animation: sails 18s linear infinite; }
.decorlib .forgefire { animation: forge 1.3s ease-in-out infinite alternate; }
.decorlib .fire, .at-stage .fire { transform-box: fill-box; transform-origin: 50% 100%; animation: rgflame .9s ease-in-out infinite alternate; }
.decorlib .bubbles circle { animation: rgbub 1.8s ease-in infinite; animation-delay: calc(var(--i, 0) * -.6s); transform-box: fill-box; }
.decorlib .fx-smoke circle { animation: smoke 4s ease-in infinite; animation-delay: calc(var(--i) * -1s); transform-box: fill-box; transform-origin: center; }
.decorlib .fx-spark path { animation: rgspark 1.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.32s); transform-box: fill-box; transform-origin: center; }
.decorlib .fx-fly circle { animation: rgfly 3.2s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.5s); }
.decorlib .fx-glow { animation: rgglow 2.4s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: center; }
.decorlib .flag { animation: rgflag 1.6s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 0 50%; }
@keyframes rgflame { from { transform: scale(1, 1) skewX(-3deg); } to { transform: scale(1.06, 1.12) skewX(3deg); } }
@keyframes rgbub { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-8px); opacity: 0; } }
@keyframes rgspark { 0%, 100% { opacity: .2; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes rgfly { from { transform: translate(0, 0); opacity: .5; } to { transform: translate(3px, -4px); opacity: 1; } }
@keyframes rgglow { from { opacity: .7; transform: scale(.94); } to { opacity: 1; transform: scale(1.04); } }
@keyframes rgflag { from { transform: scaleX(1); } to { transform: scaleX(.86) skewY(4deg); } }
@media (prefers-reduced-motion: reduce) { .decorlib *, .at-stage * { animation: none !important; } }
@media (max-width: 860px) { .atelier .at-perso { grid-template-columns: 1fr; } .at-stage { max-width: 380px; margin: 0 auto; width: 100%; } .at-scene { aspect-ratio: 4 / 3; } .at-p { width: 22%; } }
.atelier .vdefs, .at-scene .vdefs { position: absolute; width: 0; height: 0; overflow: hidden; }
.at-card { overflow: hidden; } .at-th { overflow: hidden; } .at-th svg { width: 100%; height: 120px; max-height: none; }
.at-card.dk .at-th { height: 140px; padding-top: 12px; box-sizing: border-box; } .at-card.dk .at-th svg { width: 100%; height: 118px; }
.decorlib.nuit .at-card.dk .dim { color: var(--chalk-3); }

/* ===================== Étape 14 : direction artistique ===================== */
/* Petits titres au-dessus des contenus : en phrase normale, laiton, avec un petit carreau (comme sur une carte)
   au lieu des capitales espacées en police machine. */
.eyebrow { font: 600 13.5px/1.25 var(--body); letter-spacing: .005em; text-transform: none; }
.eyebrow::before { width: 7px; height: 7px; border-radius: 1.5px; transform: rotate(45deg); flex: none; }

/* ---------- accueil ---------- */
.hero { min-height: min(640px, calc(100vh - var(--nav-h) - 150px)); padding-bottom: 28px; }
.hero .txt { gap: 26px; }
.hero .lead { max-width: 44ch; }
.hstat { display: flex; flex-wrap: wrap; gap: 10px; }
.hs { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px 0 14px; border-radius: 999px; background: rgba(236, 229, 212, .05); box-shadow: inset 0 0 0 1px var(--line); color: var(--chalk-2); font-size: 14px; }
.hs b { font: 800 20px/1 var(--display); font-variation-settings: "wdth" 80; color: var(--chalk); letter-spacing: -.01em; }
.hs i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); }
.hs i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--mint); animation: ping 2.4s var(--ease-out) infinite; }

/* la salle ce soir : un seul plateau, tables à gauche, amis à droite, séparés par une couture */
.salle { position: relative; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); border-radius: 26px; background: linear-gradient(180deg, rgba(22, 58, 47, .78), rgba(14, 40, 32, .62)); box-shadow: inset 0 0 0 1px var(--line-2), 0 50px 90px -60px #000; }
.salle::before { content: ""; position: absolute; inset: 8px; border-radius: 20px; border: 1px dashed rgba(214, 176, 102, .16); pointer-events: none; }
.salle > div { position: relative; padding: 26px 28px 24px; min-width: 0; }
.salle-f { border-left: 1px dashed rgba(214, 176, 102, .2); }
.salle-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.salle-h h2 { font-size: 30px; }
.salle-h .link { font-size: 14px; white-space: nowrap; }
.st-row { display: grid; grid-template-columns: 118px auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 10px 9px 12px; border-radius: 14px; transition: background .2s; }
.st-row + .st-row { margin-top: 4px; }
.st-row:hover { background: rgba(236, 229, 212, .045); }
.st-g { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 600; color: var(--chalk-2); white-space: nowrap; }
.st-g::before, .chip .pip { content: ""; width: 9px; height: 9px; border-radius: 2px; transform: rotate(45deg); background: var(--acc); flex: none; box-shadow: 0 0 0 2px rgba(10, 29, 23, .9); }
.st-who { display: grid; min-width: 0; line-height: 1.25; }
.st-who b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-who small { color: var(--chalk-3); font-size: 13px; }
.st-none p, .sf-none p { margin: 0 0 14px; color: var(--chalk-2); }
.st-quick { display: flex; flex-wrap: wrap; gap: 8px; }
.st-quick .chip { gap: 10px; }
.sf-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; }
.sf { display: grid; justify-items: center; gap: 7px; padding: 10px 4px 8px; border-radius: 14px; font-size: 13px; color: var(--chalk-2); text-align: center; transition: background .2s, color .2s; min-width: 0; }
.sf > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf:hover { background: rgba(236, 229, 212, .05); color: var(--chalk); }
.sf-n { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px var(--line-2); font-weight: 700; color: var(--chalk); }
.sf-none .code-demo { font: 500 16px/1 var(--mono); letter-spacing: .16em; color: var(--brass); }
@media (max-width: 900px) {
  .salle { grid-template-columns: minmax(0, 1fr); }
  .salle-f { border-left: 0; border-top: 1px dashed rgba(214, 176, 102, .2); }
  .salle > div { padding: 22px 18px 20px; }
  .st-row { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 2px; padding: 10px 6px; }
  .st-row .st-g { grid-column: 1 / -1; font-size: 12.5px; }
}

/* les jeux en tickets d'entrée : image, nom, talon détachable « Jouer » (deux encoches découpées dans le carton) */
.tix { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.tk { --notch: 50px; position: relative; display: grid; grid-template-rows: 150px auto 50px; border-radius: 20px; overflow: hidden; background: var(--paper); color: var(--ink); box-shadow: 0 34px 60px -38px #000;
  -webkit-mask: radial-gradient(circle 9px at 0 calc(100% - var(--notch)), #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 9px at 100% calc(100% - var(--notch)), #0000 97%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 9px at 0 calc(100% - var(--notch)), #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 9px at 100% calc(100% - var(--notch)), #0000 97%, #000) right / 51% 100% no-repeat;
  transition: transform .5s var(--ease-out); }
.tk:hover { transform: translateY(-6px) rotate(-.8deg); }
.tk:nth-child(even):hover { transform: translateY(-6px) rotate(.8deg); }
.tk-art { position: relative; overflow: hidden; }
.tk-art .gart { position: absolute; inset: 0; }
.tk-art::after { content: ""; position: absolute; inset: auto 0 0; height: 4px; background: var(--acc); }
.tk-body { display: grid; gap: 3px; padding: 14px 16px 14px; align-content: start; }
.tk-body b { font-size: 27px; line-height: .95; margin-bottom: 5px; }
.tk-body small { font-size: 13px; color: var(--ink-2); }
.tk-stub { display: flex; align-items: center; justify-content: center; gap: 8px; border-top: 2px dashed rgba(26, 22, 17, .2); background: linear-gradient(180deg, rgba(214, 176, 102, .42), rgba(214, 176, 102, .22)); font-weight: 700; font-size: 14.5px; }
.tk-stub svg { width: 15px; height: 15px; }
.tk:hover .tk-stub { background: var(--brass); }
.tk .gart.scuno .fan { top: 34px; } .tk .gart.scuno .fan .pc { --w: 62px; left: -31px; }
.tk .gart.quiz .qmark { font-size: 56px; top: 6%; }
.tk .gart.quiz .buzzer { width: 44%; bottom: 4%; }
.tk .gart.blackjack .bjfan { top: 14%; } .tk .gart.blackjack .bjfan .bjc { --cw: 50px; }
.tk .gart.blackjack .n21 { font-size: 30px; } .tk .gart.blackjack .chips3 { transform: scale(.72); transform-origin: left bottom; }
.tk .gart.loup .moon { width: 30%; }
@media (max-width: 1100px) { .tix { grid-template-columns: repeat(5, 210px); overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 20px 26px; margin: 0 -20px -22px; scrollbar-width: none; } .tix::-webkit-scrollbar { display: none; } .tk { scroll-snap-align: start; scroll-margin-left: 20px; } }

.topcol .th .dot { background: var(--acc); }
.topnone { margin: 4px 0 0; font-size: 14px; color: var(--chalk-3); }
@media (prefers-reduced-motion: reduce) { .hs i::after { animation: none; } .tk, .tk:hover { transition: none; transform: none; } }
.tops { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.topcol { padding: 18px 16px; }
@media (max-width: 1180px) { .tops { grid-template-columns: repeat(5, 250px); overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 20px 18px; margin: 0 -20px -14px; scrollbar-width: none; } .tops::-webkit-scrollbar { display: none; } .topcol { scroll-snap-align: start; scroll-margin-left: 20px; } }
.topsnone { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; padding: 22px 24px; border-radius: 20px; border: 1px dashed var(--line-2); }
.topsnone p { margin: 0; color: var(--chalk-2); max-width: 60ch; }
/* étiquettes : police du texte (plus de police machine), un peu plus lisibles */
.tag { font: 600 12.5px/1 var(--body); letter-spacing: 0; }
.st-row .btn.ghost { height: 36px; }

/* ---------- liste des jeux ---------- */
@media (max-width: 640px) {
  .gtile { aspect-ratio: auto; padding: 206px 20px 22px; }
  .gtile .art { inset: 0 0 auto; height: 200px; }
  .gtile h3 { font-size: 44px; }
  .gtile.idea { padding: 30px 20px; }
  .gtile.idea .plus { width: 56px; height: 56px; border-radius: 16px; }
}

/* ---------- salon d'attente ---------- */
.ltitle { color: var(--chalk); }
.ltitle::after { content: ""; display: block; width: 64px; height: 6px; border-radius: 3px; margin-top: 14px; background: var(--acc); }
.lhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 30px 0 14px; }
.lhead h2 { font-size: 30px; }
.lcount { color: var(--chalk-3); font-size: 14px; }
.lcount b { color: var(--chalk); font: 800 20px/1 var(--display); font-variation-settings: "wdth" 80; }
.seats-grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 12px; }
.lseat.is-bot { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.lseat.is-bot b { color: var(--chalk-2); font-weight: 500; }
.lobby .grid-side { row-gap: 14px; }
.lacts { grid-column: 2; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.lacts .btn:not(.ghost) { flex: 1 1 auto; }
.lacts .hostwait { flex: 1 1 100%; background: rgba(214, 176, 102, .12); color: var(--chalk); }
@media (max-width: 900px) {
  .lacts { grid-column: auto; position: sticky; z-index: 5; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); padding: 10px; border-radius: 20px; background: rgba(10, 29, 23, .86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px var(--line-2), 0 20px 40px -16px #000; }
  .lacts .hostwait { padding: 6px 4px; background: none; font-size: 13.5px; }
}
@media (max-width: 640px) {
  .seats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .lseat { padding: 14px 6px 12px; gap: 6px; border-radius: 14px; }
  .lseat .av { width: 46px !important; height: 46px !important; font-size: 19px !important; }
  .lseat b { font-size: 14px; }
  .lseat small { font-size: 11.5px; }
  .lhead { margin-top: 22px; }
}
/* bouton « Supprimer la partie » (équipe du site) : discret, en bas à gauche, jamais par-dessus les réglages */
.staffclose { right: auto; left: calc(16px + env(safe-area-inset-left, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); background: rgba(10, 29, 23, .9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
@media (max-width: 900px) { .staffclose { top: calc(var(--nav-h) + 14px + env(safe-area-inset-top, 0px)); bottom: auto; left: auto; right: calc(16px + env(safe-area-inset-right, 0px)); width: 32px; padding: 0; justify-content: center; } .staffclose span { display: none; } }

/* ---------- écrans de fin ---------- */
/* une bande de couleur en haut de la carte : laiton pour une victoire, gris pour une défaite ;
   un tampon encré dans le coin donne ta place (Scuno, Quiz) ; médailles or, argent, bronze dans le classement */
.endcard.res-win, .endcard.res-lose, .endcard.res-none { border-top: 10px solid var(--res, var(--paper-2)); }
.endcard.res-win { --res: var(--brass); background: radial-gradient(120% 60% at 50% 0%, rgba(214, 176, 102, .28), transparent 60%), var(--paper); }
.endcard.res-lose { --res: #9a8f7a; }
.endcard.res-none { --res: var(--paper-2); }
.endstamp { position: absolute; top: 18px; right: 22px; z-index: 1; display: flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 50%; border: 3px solid currentColor; color: #b5402f; font: 800 34px/1 var(--display); font-variation-settings: "wdth" 80; letter-spacing: -.02em; transform: rotate(-14deg); opacity: .82; box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 5px currentColor; pointer-events: none; mix-blend-mode: multiply; }
.endstamp sup { font-size: .42em; vertical-align: .9em; margin-left: 1px; }
.res-win .endstamp { color: #1f7a48; }
.endcard:has(.endstamp) h3 { padding-right: 96px; }
.ranking li { padding: 9px 14px; }
.ranking .pl { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; font-size: 17px; color: var(--ink-2); }
.ranking li:nth-child(1) .pl { background: radial-gradient(circle at 35% 30%, #ffe8a6, #d6b066 55%, #a07a32); color: #3b2a0c; box-shadow: 0 2px 0 #7d5c22; }
.ranking li:nth-child(2) .pl { background: radial-gradient(circle at 35% 30%, #ffffff, #c9ccd2 55%, #8f949c); color: #2c2f35; box-shadow: 0 2px 0 #6c7078; }
.ranking li:nth-child(3) .pl { background: radial-gradient(circle at 35% 30%, #ffd9b8, #c8834e 55%, #8a5427); color: #2e1606; box-shadow: 0 2px 0 #6b3d18; }
.ranking li:first-child { background: rgba(214, 176, 102, .32); }
.ranking li:first-child b { font-size: 17px; }
@media (max-width: 640px) { .endstamp { width: 64px; height: 64px; font-size: 26px; top: 14px; right: 14px; } .endcard:has(.endstamp) h3 { padding-right: 70px; } }
@media (prefers-reduced-motion: no-preference) { .endstamp { animation: stamp .5s .45s cubic-bezier(.3, 1.6, .5, 1) backwards; } }
@keyframes stamp { from { transform: rotate(-30deg) scale(2.2); opacity: 0; } to { transform: rotate(-14deg) scale(1); opacity: .82; } }
/* (le texte gris clair du tapis était invisible sur le carton : « 2 cartes en main », « 3 points »…) */
.ranking .dim { color: var(--ink-2); font-size: 14px; white-space: nowrap; }
.ranking li > b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paper .dim { color: rgba(26, 22, 17, .52); }

/* ---------- tchats ---------- */
.cp-sec small { font: 600 12.5px/1 var(--body); letter-spacing: 0; text-transform: none; opacity: 1; color: var(--chalk-3); padding: 8px 8px 4px; }
.cp-msgs { gap: 3px; }
.cp-m { margin-top: 8px; }
.cp-m.cont { margin-top: 0; }
.cp-m.more .cp-who { visibility: hidden; }
.cp-m.more .cp-bub { border-bottom-left-radius: 14px; }
.cp-m.cont .cp-bub { border-top-left-radius: 6px; }
.cp-m.me.more .cp-bub { border-bottom-right-radius: 14px; border-bottom-left-radius: 14px; }
.cp-m.me.cont .cp-bub { border-top-right-radius: 6px; border-top-left-radius: 14px; }
.cp-m.more .cp-bub small { display: none; }
.cp-m.cont { padding-left: 0; }
.cp-m.me .cp-bub { background: rgba(214, 176, 102, .26); }
.cp-m.me .cp-bub small { color: var(--brass); opacity: .75; }
.cp-day { align-self: center; margin: 14px 0 4px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--chalk-3); background: rgba(236, 229, 212, .05); }
.cp-day:first-child { margin-top: 0; }
.cp-day::first-letter { text-transform: uppercase; }
.cp-form .inp { border-radius: 999px; padding: 0 16px; }
.cp-form .btn { border-radius: 999px; width: 42px; padding: 0; justify-content: center; }
@media (max-width: 640px) {
  .chatp, body.in-game .chatp { height: auto; top: 0; bottom: 0; }
  .cp-h { padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
  .cp-form { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .cp-form .inp { font-size: 16px; }
}
/* ---------- appels ---------- */
.cb-time { font-variant-numeric: tabular-nums; }
.cb-t { background: radial-gradient(circle at 50% 42%, rgba(236, 229, 212, .1), rgba(236, 229, 212, .035) 62%); transition: box-shadow .2s; }
.cb-t:has(.vc-speaking) { box-shadow: inset 0 0 0 2px var(--mint), 0 0 24px -6px rgba(61, 224, 166, .5); }
.cb-t:has(.vc-muted) small::after { content: " (micro coupé)"; color: var(--chalk-3); }
.callbox.big .cb-acts, .callbox.full .cb-acts { gap: 14px; padding: 6px 0 4px; }
.callbox.big .vcb, .callbox.full .vcb { width: 52px; height: 52px; border-radius: 50%; }
.callbox.big .vcb svg, .callbox.full .vcb svg { width: 22px; height: 22px; }
.callbox.big .vcb.leave, .callbox.full .vcb.leave { width: 76px; border-radius: 999px; }
.callbox .vcb.leave { width: 46px; border-radius: 999px; }
.callbox.big .cb-t .av, .callbox.full .cb-t .av { width: 96px !important; height: 96px !important; font-size: 40px !important; }

/* ---------- administration ---------- */
.tbl th { font: 600 12.5px/1 var(--body); letter-spacing: 0; text-transform: none; }
.stat span { font: 600 13px/1.3 var(--body); letter-spacing: 0; text-transform: none; }
@media (max-width: 560px) { .stat span { font-size: 12px; letter-spacing: 0; } }
.tbl td[data-l]::before { font: 600 12px/1.4 var(--body) !important; letter-spacing: 0 !important; text-transform: none !important; }
.amore { position: relative; display: inline-block; }
.amore > summary { list-style: none; cursor: pointer; letter-spacing: .1em; }
.amore > summary::-webkit-details-marker { display: none; }
.amore[open] > summary { box-shadow: inset 0 0 0 1px var(--brass); }
.amore-m { position: absolute; z-index: 20; right: 0; top: calc(100% + 6px); display: grid; gap: 4px; min-width: 170px; padding: 6px; border-radius: 14px; background: #0f2a21; box-shadow: inset 0 0 0 1px var(--line-2), 0 18px 40px -12px #000; }
.amore-m .btn { justify-content: flex-start; width: 100%; }
@media (max-width: 760px) { .amore-m { right: auto; left: 0; } }
/* onglets de l'admin : sur téléphone ils défilent ; un dégradé à droite montre qu'il y en a d'autres */
@media (max-width: 900px) { [data-seg="atab"] { -webkit-mask: linear-gradient(90deg, #000 85%, transparent); mask: linear-gradient(90deg, #000 85%, transparent); } }

/* ---------- classements et profil ---------- */
/* podium : or, argent, bronze (les mêmes médailles que sur les écrans de fin), avec un reflet en haut */
.pod .col { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), inset 0 -10px 24px -12px rgba(0, 0, 0, .35), 0 30px 50px -30px #000; }
.pod.p1 .col { background: linear-gradient(180deg, #f1d58e, #d6b066 40%, #b48d45); color: #3b2a0c; }
.pod.p2 .col { background: linear-gradient(180deg, #f4f5f7, #cdd0d6 45%, #a3a8b0); color: #2c2f35; }
.pod.p3 .col { background: linear-gradient(180deg, #e7b48a, #c8834e 45%, #9a5d2c); color: #2e1606; }
.pod .col .w { font: 700 14px/1.2 var(--body); letter-spacing: 0; text-transform: none; opacity: .78; }
.pod.ghost .col { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-2); color: var(--chalk-3); }
.lb-row .wins small { font: 600 12px/1.4 var(--body); letter-spacing: 0; text-transform: none; }
.lb-row .rk.md { width: 38px; height: 38px; justify-self: center; display: grid; place-items: center; border-radius: 50%; font-size: 19px; }
.lb-row .rk.md1 { background: radial-gradient(circle at 35% 30%, #ffe8a6, #d6b066 55%, #a07a32); color: #3b2a0c; }
.lb-row .rk.md2 { background: radial-gradient(circle at 35% 30%, #ffffff, #c9ccd2 55%, #8f949c); color: #2c2f35; }
.lb-row .rk.md3 { background: radial-gradient(circle at 35% 30%, #ffd9b8, #c8834e 55%, #8a5427); color: #2e1606; }
@media (max-width: 640px) {
  .podium { gap: 8px; }
  .pod.p1 .col { height: 190px; } .pod.p2 .col { height: 140px; } .pod.p3 .col { height: 110px; }
  .pod .col .place { font-size: 48px; }
  .lb-row { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; padding: 10px 14px 10px 8px; }
  [data-seg="game"] { -webkit-mask: linear-gradient(90deg, #000 85%, transparent); mask: linear-gradient(90deg, #000 85%, transparent); }
}
/* étiquettes des champs (mot de passe, description…) : texte normal au lieu des capitales espacées */
.field label, .lbl { font: 600 13px/1.2 var(--body); letter-spacing: 0; text-transform: none; }
/* statistiques du profil : un jeu par case, sa couleur en haut (comme les tickets de l'accueil) */
.stat.gst { position: relative; overflow: hidden; padding-top: 20px; }
.stat.gst::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--acc); }
.stat.gst span { display: flex; align-items: center; gap: 7px; font-weight: 700; color: currentColor; opacity: .85; margin-top: 4px; }
.statrow:has(.gst) { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
/* banderole de l'accueil (gardée à la demande de Nico) : un peu d'air avant « la salle » */
.marquee + .wrap > .salle:first-child { margin-top: 34px; }

/* ===================== Étape 15 : Color Rats ===================== */
/* titre : « COLOR » lettre par lettre aux quatre couleurs, « RATS » en dessous, crème */
.cr-title { flex-wrap: wrap; font-size: clamp(76px, 10.5vw, 168px); line-height: .8; column-gap: 0; }
.cr-title .cr-rats { display: flex; flex-basis: 100%; }
.cr-title .cr-rats span { color: var(--chalk) !important; }
/* cartes : Joker « tête de rat » aux 4 couleurs, dos Color Rats */
.pc .crhead { position: relative; z-index: 1; width: 78%; display: grid; place-items: center; filter: drop-shadow(calc(var(--w) * .02) calc(var(--w) * .026) 0 rgba(0, 0, 0, .55)); transform: rotate(-8deg); }
.pc .crhead svg { width: 100%; height: auto; display: block; }
.pc.p4 .crhead { width: 64%; margin-top: -24%; }
.pc .crhead span { position: absolute; left: 50%; bottom: -62%; transform: translateX(-50%) rotate(8deg); font: 800 calc(var(--w) * .27)/1 var(--display); font-variation-settings: "wdth" 75; color: var(--paper); text-shadow: calc(var(--w) * .02) calc(var(--w) * .024) 0 var(--u-black); }
.pc.back .f::after { background: radial-gradient(120% 80% at 30% 0%, rgba(255, 255, 255, .12), transparent 55%); }
.pc.back .crback { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
/* image du jeu (page Jeux, affiches, tickets) : une table de jeu le soir, sous une lampe, avec des cartes floues
   posées autour, un jeton et une tasse ; l'éventail de cartes reste net au premier plan */
.gart.scuno { background: radial-gradient(70% 55% at 50% 8%, rgba(255, 214, 140, .2), transparent 70%), radial-gradient(120% 90% at 50% 0%, #1f4a3c, #0b231c 62%, #07170f); isolation: isolate; }
.gart.scuno .cr-lamp { position: absolute; left: 50%; top: -30%; width: 120%; height: 120%; transform: translateX(-50%); background: conic-gradient(from 160deg at 50% 0%, transparent 0deg, rgba(255, 226, 160, .13) 14deg, rgba(255, 226, 160, .2) 20deg, rgba(255, 226, 160, .13) 26deg, transparent 40deg); filter: blur(6px); z-index: 0; animation: crlamp 7s ease-in-out infinite alternate; }
.gart.scuno .cr-table { position: absolute; left: -12%; right: -12%; top: 50%; height: 95%; border-radius: 50%; background: radial-gradient(60% 50% at 50% 30%, #2b7a5c, #19513d 60%, #10382a); box-shadow: 0 0 0 7px #5b3a22, 0 0 0 9px #3a2414, 0 -18px 40px -10px rgba(0, 0, 0, .7) inset; z-index: 0; }
.gart.scuno .cr-table i { position: absolute; inset: 6% 8% auto; height: 70%; border-radius: 50%; border: 1px dashed rgba(214, 176, 102, .28); }
.gart.scuno .cr-blur { position: absolute; inset: 0; z-index: 0; filter: blur(2.2px) saturate(.8); opacity: .55; }
.gart.scuno .cr-blur .pc { position: absolute; }
.gart.scuno .cr-blur .pc:nth-child(1) { left: 2%; top: 58%; } .gart.scuno .cr-blur .pc:nth-child(2) { right: 2%; top: 54%; } .gart.scuno .cr-blur .pc:nth-child(3) { left: 62%; top: 80%; }
.gart.scuno .cr-chip { position: absolute; left: 14%; top: 44%; width: 30px; height: 11px; border-radius: 50%; background: #c8463a; box-shadow: inset 0 0 0 3px #f3ecdc, inset 0 0 0 5px #c8463a, 0 3px 0 #7a1f24, 0 7px 0 #f3ecdc, 0 9px 0 #7a1f24; z-index: 0; filter: blur(.6px); }
.gart.scuno .cr-cup { position: absolute; right: 10%; top: 36%; width: 26px; height: 22px; border-radius: 3px 3px 10px 10px; background: linear-gradient(90deg, #e9e2d0, #fff 40%, #cfc6b0); z-index: 0; filter: blur(.8px); opacity: .9; }
.gart.scuno .cr-cup::after { content: ""; position: absolute; right: -8px; top: 5px; width: 8px; height: 9px; border: 2.5px solid #d8cfb8; border-left: 0; border-radius: 0 6px 6px 0; }
.gart.scuno .cr-cup::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 3px; height: 14px; margin-left: -2px; border-radius: 3px; background: rgba(255, 255, 255, .35); filter: blur(2px); animation: crsteam 3s ease-in-out infinite; }
.gart.scuno .fan { z-index: 1; }
@keyframes crlamp { from { opacity: .75; } to { opacity: 1; } }
@keyframes crsteam { 0% { transform: translateY(0) scaleX(1); opacity: 0; } 30% { opacity: .8; } 100% { transform: translateY(-14px) scaleX(2.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .gart.scuno .cr-lamp, .gart.scuno .cr-cup::before { animation: none; } }
.lbcard .mini-art .gart.scuno .cr-blur, .lbcard .mini-art .gart.scuno .cr-chip, .lbcard .mini-art .gart.scuno .cr-cup, .empty .ill .gart.scuno .cr-blur, .empty .ill .gart.scuno .cr-cup, .empty .ill .gart.scuno .cr-chip { display: none; }

/* ---------- décors de la table de Color Rats (public/tables.js) ---------- */
.room .tsc { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tsc * { transform-box: fill-box; transform-origin: center; }
.tsc .tw { animation: tsTw 3.2s ease-in-out infinite alternate; }
.tsc .tw2 { animation: tsTw 5s steps(2) infinite; }
.tsc .cloud { animation: tsCloud 40s linear infinite alternate; }
.tsc .shim { animation: tsShim 2.6s ease-in-out infinite alternate; }
.tsc .bird { animation: tsBird 9s ease-in-out infinite alternate; }
.tsc .steam { animation: tsSteam 3.4s ease-in-out infinite; transform-origin: bottom; }
.tsc .neon { animation: tsNeon 7s infinite; }
.tsc .flame { transform-origin: bottom; }
.tsc .flame.f1 { animation: tsFlame 1.1s ease-in-out infinite alternate; }
.tsc .flame.f2 { animation: tsFlame .8s ease-in-out infinite alternate-reverse; }
.tsc .flame.f3 { animation: tsFlame 1.4s ease-in-out infinite alternate; }
.tsc .glow, .tsc .flick { animation: tsFlick 2.2s ease-in-out infinite alternate; }
.tsc .beam { transform-origin: left center; animation: tsBeam 6s ease-in-out infinite; }
.tsc .wave { animation: tsWave 6s ease-in-out infinite alternate; }
.tsc .fly { animation: tsFly 8s ease-in-out infinite alternate; }
.tsc .drop { animation: tsDrop 2s linear infinite; }
.tsc .flake { animation: tsFlake 6s linear infinite; }
@keyframes tsTw { from { opacity: .35; } to { opacity: 1; } }
@keyframes tsCloud { from { transform: translateX(-40px); } to { transform: translateX(60px); } }
@keyframes tsShim { from { opacity: .25; transform: scaleX(.8); } to { opacity: .85; transform: scaleX(1.1); } }
@keyframes tsBird { from { transform: translate(0, 0); } to { transform: translate(80px, -24px); } }
@keyframes tsSteam { 0% { opacity: 0; transform: translateY(6px) scaleX(.8); } 40% { opacity: .5; } 100% { opacity: 0; transform: translateY(-16px) scaleX(1.4); } }
@keyframes tsNeon { 0%, 48%, 52%, 54%, 100% { opacity: 1; } 50%, 53% { opacity: .55; } }
@keyframes tsFlame { from { transform: scale(1, .9) skewX(-2deg); } to { transform: scale(.94, 1.08) skewX(3deg); } }
@keyframes tsFlick { from { opacity: .7; } to { opacity: 1; } }
@keyframes tsBeam { 0%, 100% { opacity: .2; transform: scaleX(.3); } 50% { opacity: 1; transform: scaleX(1); } }
@keyframes tsWave { from { transform: translate(-30px, -6px); } to { transform: translate(30px, 6px); } }
@keyframes tsFly { 0% { transform: translate(0, 0); opacity: .2; } 50% { opacity: 1; } 100% { transform: translate(40px, -30px); opacity: .3; } }
@keyframes tsDrop { from { transform: translateY(0); opacity: 0; } 15% { opacity: .6; } to { transform: translateY(150px); opacity: 0; } }
@keyframes tsFlake { from { transform: translate(0, 0); } to { transform: translate(18px, 260px); } }
@media (prefers-reduced-motion: reduce) { .tsc * { animation: none !important; } }
/* les décors autres que « la salle » ont leurs propres lumières : pas de lampe ni de tapis d'origine */
.gtable:not(.deco-salle) { background: #0b0806; }
/* couleur du tapis de jeu selon le décor (les cartes restent bien lisibles) */
.gtable.deco-cafe .ptable .felt { background: radial-gradient(55% 60% at 50% 38%, #8a2f3e, #6a2030 55%, #3e1019); }
.gtable.deco-plage .ptable .felt { background: radial-gradient(55% 60% at 50% 38%, #2a7f86, #1b5e66 55%, #0e3a40); }
.gtable.deco-terrasse .ptable .felt { background: radial-gradient(55% 60% at 50% 38%, #34796a, #22594d 55%, #123a31); }
.gtable.deco-chalet .ptable .felt { background: radial-gradient(55% 60% at 50% 38%, #3a6a3a, #284f2a 55%, #15301a); }

/* choix du décor (création et salon) : de petites vignettes */
.decopick { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin-top: 4px; }
.dp { display: grid; gap: 6px; padding: 5px 5px 8px; border-radius: 13px; background: rgba(26, 22, 17, .06); box-shadow: inset 0 0 0 1.5px transparent; text-align: center; transition: box-shadow .2s, background .2s; }
.dp:hover { background: rgba(26, 22, 17, .1); }
.dp.on { box-shadow: inset 0 0 0 2px var(--ink); background: rgba(214, 176, 102, .25); }
.dp b { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.dp-art { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 9px; overflow: hidden; background: #140c07; }
.dp-art .tsc { position: absolute; inset: 0; width: 100%; height: 100%; }
.dp-art .tsc * { animation: none !important; }
.dp-art.deco-salle { background: linear-gradient(180deg, #2a190d, #3a2312 55%, #4a2c15 56%, #2a170a); }
.dp-art.deco-salle > span { display: none; }
@media (max-width: 900px) { body.in-game .staffclose { top: calc(var(--nav-h) + 64px + env(safe-area-inset-top, 0px)); } }
.tsc .beam.b2 { transform-origin: right center; animation-delay: -3s; }
/* vignettes : on montre le haut du décor (ce qu'on voit pendant la partie) et une petite table posée devant */
.dp-art .tsc { width: 160%; height: 160%; left: -30%; top: 0; }
.dp-art::after { content: ""; position: absolute; z-index: 1; left: 12%; right: 12%; bottom: -34%; height: 76%; border-radius: 50%; background: radial-gradient(55% 60% at 50% 38%, #2f8461, #1c5e44 55%, #0f3a29); box-shadow: 0 0 0 4px #7a4a24, 0 0 0 5px #3a2414, 0 6px 14px rgba(0, 0, 0, .6); }
.dp-art.deco-cafe::after { background: radial-gradient(55% 60% at 50% 38%, #8a2f3e, #6a2030 55%, #3e1019); }
.dp-art.deco-plage::after { background: radial-gradient(55% 60% at 50% 38%, #2a7f86, #1b5e66 55%, #0e3a40); }
.dp-art.deco-terrasse::after { background: radial-gradient(55% 60% at 50% 38%, #34796a, #22594d 55%, #123a31); }
.dp-art.deco-chalet::after { background: radial-gradient(55% 60% at 50% 38%, #3a6a3a, #284f2a 55%, #15301a); }
.dp-art.deco-salle { background: radial-gradient(60% 80% at 50% 0%, #4a2f1a, transparent 70%), linear-gradient(180deg, #24160c, #352113 60%, #4a2c15 61%, #2a170a); }

/* ===================== Étape 16 : Rats-Garous ===================== */
/* les yeux du rat-garou s'allument de temps en temps */
.rg-eyes { animation: rgEyes 6s ease-in-out infinite; }
@keyframes rgEyes { 0%, 70%, 100% { opacity: 1; } 76% { opacity: .15; } 80% { opacity: 1; } 88% { filter: drop-shadow(0 0 6px #ffd36e); } }
@media (prefers-reduced-motion: reduce) { .rg-eyes { animation: none; } }
/* image du jeu : étoiles qui scintillent, nuages devant la lune, sapins et maisons au loin (fenêtres allumées),
   brume au sol, lucioles, et le rat-garou au premier plan (ses yeux s'allument) */
.gart.loup .stars.s2 { background-image: radial-gradient(1.2px 1.2px at 30% 22%, #fff, transparent), radial-gradient(1px 1px at 62% 28%, #fff, transparent), radial-gradient(1.4px 1.4px at 8% 12%, #dfe6ff, transparent), radial-gradient(1px 1px at 48% 40%, #fff, transparent), radial-gradient(1.2px 1.2px at 78% 6%, #fff, transparent); animation-duration: 2.6s; animation-delay: -1.3s; }
.gart.loup .lcloud { position: absolute; z-index: 1; height: 13%; border-radius: 999px; background: linear-gradient(180deg, rgba(190, 200, 240, .5), rgba(120, 130, 190, .25)); filter: blur(3px); animation: lcloud 26s linear infinite; }
.gart.loup .lcloud::before { content: ""; position: absolute; left: 22%; top: -45%; width: 45%; height: 120%; border-radius: 50%; background: inherit; }
.gart.loup .lcloud.c1 { width: 46%; top: 18%; animation-delay: -6s; }
.gart.loup .lcloud.c2 { width: 34%; top: 33%; animation-duration: 34s; animation-delay: -20s; opacity: .7; }
@keyframes lcloud { from { left: -50%; } to { left: 110%; } }
.gart.loup .lscape { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 46%; z-index: 1; }
.gart.loup .lscape .lw { animation: lwin 5s steps(2) infinite; }
.gart.loup .lscape .lw:nth-of-type(2n) { animation-delay: -2.4s; }
@keyframes lwin { 0%, 80% { opacity: 1; } 90% { opacity: .35; } }
.gart.loup .lfog { position: absolute; left: -20%; right: -20%; bottom: 6%; height: 22%; z-index: 2; background: radial-gradient(50% 60% at 30% 60%, rgba(200, 210, 255, .2), transparent 70%), radial-gradient(40% 50% at 75% 50%, rgba(200, 210, 255, .16), transparent 70%); filter: blur(4px); animation: lfog 12s ease-in-out infinite alternate; }
@keyframes lfog { from { transform: translateX(-6%); } to { transform: translateX(6%); } }
.gart.loup .lfly { position: absolute; inset: 0; z-index: 2; }
.gart.loup .lfly i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #e8ff9a; box-shadow: 0 0 6px 2px rgba(232, 255, 154, .6); animation: lfly 7s ease-in-out infinite alternate; }
.gart.loup .lfly i:nth-child(1) { left: 62%; top: 70%; } .gart.loup .lfly i:nth-child(2) { left: 78%; top: 60%; animation-delay: -2s; } .gart.loup .lfly i:nth-child(3) { left: 88%; top: 78%; animation-delay: -4s; } .gart.loup .lfly i:nth-child(4) { left: 52%; top: 82%; animation-delay: -1s; } .gart.loup .lfly i:nth-child(5) { left: 70%; top: 86%; animation-delay: -5s; }
@keyframes lfly { 0% { transform: translate(0, 0); opacity: .2; } 50% { opacity: 1; } 100% { transform: translate(14px, -18px); opacity: .3; } }
.gart.loup .wolf { z-index: 3; width: 44%; left: 6%; bottom: 4%; }
.gart.loup .moon { z-index: 0; }
.gart.loup .hills { display: none; }
@media (prefers-reduced-motion: reduce) { .gart.loup .lcloud, .gart.loup .lfog, .gart.loup .lfly i, .gart.loup .lscape .lw { animation: none; } }
.lbcard .mini-art .gart.loup .lcloud, .lbcard .mini-art .gart.loup .lfly, .empty .ill .gart.loup .lfly, .empty .ill .gart.loup .lcloud { display: none; }
/* transition des Rats-Garous : nuages, montagnes et forêt, brume, grands sapins, le rat-garou sur son rocher */
.tx .wf-title span { display: inline-block; }
.tx .wf-cloud { position: absolute; z-index: 1; left: 30%; height: 7vh; width: 34vw; border-radius: 999px; background: linear-gradient(180deg, rgba(170, 182, 235, .55), rgba(90, 100, 170, .35)); filter: blur(6px); }
.tx .wf-cloud::before { content: ""; position: absolute; left: 20%; top: -55%; width: 42%; height: 130%; border-radius: 50%; background: inherit; }
.tx .wf-cloud.k1 { top: 20vh; } .tx .wf-cloud.k2 { top: 29vh; width: 26vw; opacity: .8; } .tx .wf-cloud.k3 { top: 9vh; width: 22vw; opacity: .6; }
.tx .wf-far { position: absolute; left: 0; bottom: 18vh; width: 100%; height: 40vh; z-index: 2; }
.tx .wf-front { position: absolute; left: 0; bottom: 0; width: 100%; height: 50vh; z-index: 4; overflow: visible; }
.tx .wf-front .wf-beast, .tx .wf-front .wf-head { transform-box: fill-box; }
.tx .wf-front .wf-beast { transform-origin: 50% 100%; }
.tx .wf-front .wf-head { transform-origin: 85% 90%; }
.tx .wf-front .wf-eye { filter: drop-shadow(0 0 3px #ffd36e); }
.tx .wf-mist { position: absolute; left: -10vw; right: -10vw; height: 16vh; border-radius: 50%; filter: blur(14px); pointer-events: none; background: radial-gradient(50% 50% at 50% 50%, rgba(190, 200, 255, .3), transparent 70%); }
.tx .wf-mist.m1 { bottom: 20vh; z-index: 3; } .tx .wf-mist.m2 { bottom: -4vh; z-index: 5; height: 20vh; background: radial-gradient(50% 50% at 40% 50%, rgba(170, 180, 240, .28), transparent 70%); }
@media (max-width: 640px) { .tx .wf-front { height: 42vh; } .tx .wf-far { height: 30vh; bottom: 16vh; } .tx .wf-cloud { width: 60vw; } }
/* écran large : le titre se place à droite de la lune, loin du rat-garou */
@media (min-width: 900px) { .tx .wf-title { left: auto; right: 7vw; top: 22vh; transform: none; } .tx .wf-moon { left: 38%; } }
/* cartes du village : effets propres à chaque lieu */
.village .vsnow { position: absolute; inset: 0; z-index: 304; pointer-events: none; overflow: hidden; }
.village .vsnow i { position: absolute; left: 0; right: 0; top: -100%; height: 200%; background-image: radial-gradient(2px 2px at 20px 30px, #fff, transparent), radial-gradient(1.6px 1.6px at 80px 90px, #fff, transparent), radial-gradient(2.4px 2.4px at 150px 50px, #fff, transparent), radial-gradient(1.4px 1.4px at 200px 140px, #fff, transparent), radial-gradient(2px 2px at 260px 20px, #fff, transparent), radial-gradient(1.6px 1.6px at 320px 110px, #fff, transparent); background-size: 340px 160px; opacity: .85; animation: vsnow 14s linear infinite; }
.village .vsnow i:nth-child(2) { background-size: 230px 120px; opacity: .55; animation-duration: 22s; filter: blur(.6px); }
@keyframes vsnow { from { transform: translate(0, 0); } to { transform: translate(-40px, 50%); } }
.village .vleaves { position: absolute; inset: 0; z-index: 304; pointer-events: none; overflow: hidden; }
.village .vleaves i { position: absolute; top: -4%; width: 9px; height: 6px; border-radius: 0 70% 0 70%; background: var(--c); opacity: .9; animation: vleaf 11s linear infinite; }
@keyframes vleaf { 0% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(30px, 28vh) rotate(160deg); } 50% { transform: translate(-10px, 55vh) rotate(320deg); } 75% { transform: translate(26px, 80vh) rotate(480deg); } 100% { transform: translate(0, 108vh) rotate(640deg); opacity: .2; } }
.village .vwisps { position: absolute; inset: 0; z-index: 303; pointer-events: none; opacity: .25; transition: opacity 2s; }
.village .vwisps i { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #b8fff0; box-shadow: 0 0 14px 6px rgba(140, 255, 220, .55); animation: vwisp 7s ease-in-out infinite alternate; }
@keyframes vwisp { 0% { transform: translate(0, 0); opacity: .3; } 50% { opacity: 1; } 100% { transform: translate(26px, -18px); opacity: .4; } }
.ltable.is-night .village .vwisps, .ltable.is-dusk .village .vwisps { opacity: 1; }
.village.map-marais .vmist { opacity: .7; }
.village.map-marais .vmist i { background: radial-gradient(closest-side, rgba(220, 228, 220, .45), rgba(220, 228, 220, 0)); }
.village .lbeam { opacity: 0; transition: opacity 2s; transform-box: view-box; }
.ltable.is-night .village .lbeam { opacity: 1; animation: lbeam 5s ease-in-out infinite; }
@keyframes lbeam { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
.village .vshim path { animation: tsShim 2.6s ease-in-out infinite alternate; }
.village .cloth { transform-box: fill-box; transform-origin: top center; animation: cloth 3s ease-in-out infinite alternate; }
@keyframes cloth { from { transform: skewX(-4deg); } to { transform: skewX(5deg); } }
.village .hills.mtn { top: 0; height: 26%; }
@media (prefers-reduced-motion: reduce) { .village .vsnow i, .village .vleaves i, .village .vwisps i, .village .lbeam, .village .cloth, .village .vshim path { animation: none !important; } }
/* vignettes des cartes : on voit toute la vignette (pas de petite table par-dessus) */
.mappick .dp-art::after { display: none; }
.mappick .dp-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.village .vback .hills.sea { top: 0; height: 28%; }

/* ===================== Étape 17 : Quiz games ===================== */
/* image du jeu : un grand plateau télé */
.gart.quiz { background: radial-gradient(70% 55% at 50% 30%, #4a2a78, #1d1034 58%, #0a0614); }
.gart.quiz .qa-beam { position: absolute; top: -12%; width: 34%; height: 120%; z-index: 0; background: linear-gradient(180deg, rgba(255, 236, 190, .34), transparent 78%); clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); transform-origin: 50% 0; mix-blend-mode: screen; animation: qabeam 4s ease-in-out infinite alternate; }
.gart.quiz .qa-beam.b1 { left: -6%; } .gart.quiz .qa-beam.b2 { left: 33%; animation-delay: -1.3s; background: linear-gradient(180deg, rgba(127, 224, 196, .3), transparent 78%); } .gart.quiz .qa-beam.b3 { right: -6%; animation-delay: -2.6s; background: linear-gradient(180deg, rgba(255, 143, 184, .3), transparent 78%); }
@keyframes qabeam { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
.gart.quiz .qa-screen { position: absolute; left: 50%; top: 8%; z-index: 1; width: 46%; aspect-ratio: 16 / 10; transform: translateX(-50%); border-radius: 10px; display: grid; place-items: center; background: radial-gradient(circle at 50% 50%, #1f4ea8, #0d1f50 70%); box-shadow: inset 0 0 0 3px #d6b066, 0 0 0 6px #1a0e2a, 0 0 40px rgba(120, 160, 255, .45); overflow: visible; }
.gart.quiz .qa-screen::after { content: ""; position: absolute; inset: 3px; border-radius: 8px; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 4px); }
.gart.quiz .qa-q { font-size: clamp(40px, 6vw, 84px); line-height: 1; color: #ffd36e; text-shadow: 0 4px 0 #8a5a12, 0 0 30px rgba(255, 210, 110, .7); animation: qaq 2.4s ease-in-out infinite; }
@keyframes qaq { 0%, 100% { transform: scale(1) rotate(-4deg); } 50% { transform: scale(1.08) rotate(4deg); } }
.gart.quiz .qa-bulbs { position: absolute; inset: -9px; border-radius: 14px; background: radial-gradient(circle, #ffe29a 2.2px, transparent 2.8px) 0 0 / 12px 12px; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 4px; animation: qabulb .8s steps(2) infinite; }
@keyframes qabulb { 50% { background-position: 6px 0; } }
.gart.quiz .qa-set { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 62%; z-index: 2; }
.gart.quiz .qa-buzz { animation: qabuzz 1.6s ease-in-out infinite; }
@keyframes qabuzz { 0%, 60%, 100% { fill: #e5403a; } 70% { fill: #ff8a7a; filter: drop-shadow(0 0 6px #ff6a55); } }
.gart.quiz .qa-desk { animation: tsTw 2.2s ease-in-out infinite alternate; }
.gart.quiz .qa-conf { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.gart.quiz .qa-conf i { position: absolute; top: -6%; width: 5px; height: 8px; border-radius: 1px; background: var(--c); animation: qaconf 6s linear infinite; }
@keyframes qaconf { from { transform: translateY(0) rotate(0); } to { transform: translateY(560%) rotate(540deg); } }
.gart.quiz .rays, .gart.quiz .qmark, .gart.quiz .buzzer { display: none; }
.tk .gart.quiz .qa-screen { top: 6%; width: 52%; } .tk .gart.quiz .qa-q { font-size: 34px; }
.lbcard .mini-art .gart.quiz .qa-conf, .empty .ill .gart.quiz .qa-conf, .lbcard .mini-art .gart.quiz .qa-beam { display: none; }
@media (prefers-reduced-motion: reduce) { .gart.quiz .qa-beam, .gart.quiz .qa-q, .gart.quiz .qa-bulbs, .gart.quiz .qa-buzz, .gart.quiz .qa-conf i, .gart.quiz .qa-desk { animation: none; } }
.gart.quiz { isolation: isolate; }
.gtile .gart.quiz .qa-set { bottom: 20%; height: 58%; } .gtile .gart.quiz .qa-screen { top: 7%; width: 44%; }
.poster .gart.quiz .qa-set { bottom: 24%; height: 48%; }

/* transition « régie » du Quiz : un mur de 9 écrans */
.tx .rg-room { position: absolute; inset: 0; opacity: 0; display: grid; place-items: center; overflow: hidden; background: radial-gradient(70% 60% at 50% 50%, #1a1030, #07040e 70%); }
.tx .rg-glow { position: absolute; inset: 0; background: radial-gradient(40% 40% at 50% 50%, rgba(120, 80, 220, .35), transparent 70%); }
.tx .rg-wall { --cw: min(28vw, 48vh); position: relative; display: grid; grid-template-columns: repeat(3, var(--cw)); gap: 10px; padding: 14px; border-radius: 16px; background: #0c0a14; box-shadow: inset 0 0 0 2px #2a2636, 0 30px 80px rgba(0, 0, 0, .8); }
.tx .rg-cell { position: relative; aspect-ratio: 16 / 10; border-radius: 6px; overflow: hidden; background: #050308; box-shadow: inset 0 0 0 2px #1f1b29; opacity: 0; }
.tx .rg-cell::after { content: ""; position: absolute; inset: 0; z-index: 4; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 4px), radial-gradient(80% 80% at 50% 50%, transparent 60%, rgba(0, 0, 0, .5)); pointer-events: none; }
.tx .rg-snow { position: absolute; inset: -50%; z-index: 1; opacity: 0; background-image: repeating-radial-gradient(circle at 17% 32%, #fff 0 1px, transparent 1px 3px), repeating-radial-gradient(circle at 72% 64%, #9a9a9a 0 1px, transparent 1px 2px); background-size: 7px 7px, 5px 5px; }
@keyframes rgsnow { 0% { transform: translate(0, 0); } 33% { transform: translate(-12%, 8%); } 66% { transform: translate(9%, -10%); } }
.tx .rg-bars { position: absolute; inset: 0; z-index: 2; opacity: 0; background: linear-gradient(90deg, #f3ecdc 0 14.3%, #f4bf3d 0 28.6%, #3dc0c8 0 42.9%, #2bb069 0 57.2%, #c84aa8 0 71.5%, #e5403a 0 85.8%, #2d78e3 0); }
.tx .rg-bars::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: linear-gradient(90deg, #2d78e3 0 14.3%, #15131f 0 28.6%, #c84aa8 0 42.9%, #15131f 0 57.2%, #3dc0c8 0 71.5%, #15131f 0 85.8%, #f3ecdc 0); }
.tx .rg-cell.on .rg-snow { animation: rgsnow .18s steps(3) infinite, rgsnowin .5s ease-out forwards; }
@keyframes rgsnowin { 0%, 60% { opacity: .9; } 100% { opacity: 0; } }
.tx .rg-cell.on .rg-bars { animation: rgbars .5s ease-out .25s forwards; }
@keyframes rgbars { to { opacity: 1; } }
/* le logo géant : chaque écran montre son morceau (une image de 3 × 3 écrans, décalée selon la place) */
.tx .rg-logo { position: absolute; z-index: 3; left: calc(var(--x) * (-100% - 10px)); top: calc(var(--y) * (-100% - 10px)); width: calc(300% + 20px); height: calc(300% + 20px); display: grid; place-items: center; align-content: center; opacity: 0; transition: opacity .3s; background: radial-gradient(60% 60% at 50% 45%, #2a5bd7, #10225a 60%, #0a1236); }
.tx .rg-logo b { font-size: calc(var(--cw) * .95); line-height: .78; color: #ffd36e; text-shadow: 0 .05em 0 #8a5a12, 0 0 .4em rgba(255, 200, 80, .55); letter-spacing: -.02em; }
.tx .rg-logo em { font-style: normal; font-size: calc(var(--cw) * .32); letter-spacing: .3em; text-transform: uppercase; color: #fff; margin-top: .3em; }
.tx.rg-logo-on .rg-logo { opacity: 1; }
.tx .rg-tally { position: absolute; z-index: 5; right: 6px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: #3a0a0e; }
.tx.rg-logo-on .rg-tally { background: #ff3b30; box-shadow: 0 0 8px 2px rgba(255, 59, 48, .8); }
.tx .rg-onair { position: absolute; left: 50%; bottom: 7vh; transform: translateX(-50%); font: 700 13px/1 var(--mono); letter-spacing: .3em; padding: 9px 14px 9px 18px; border-radius: 8px; color: rgba(255, 255, 255, .35); background: #2a0a0e; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .15); transition: all .3s; }
.tx .rg-onair.on { color: #fff; background: #e0312a; box-shadow: 0 0 0 2px #ff8b7a, 0 0 40px 6px rgba(255, 60, 40, .6); }
@media (max-width: 640px) { .tx .rg-wall { --cw: 29vw; gap: 6px; padding: 8px; } .tx .rg-cell { aspect-ratio: 3 / 4; } }

/* lancement de la partie : le viseur de la caméra du plateau */
.qintro.qcam { background: radial-gradient(70% 60% at 50% 50%, rgba(10, 6, 20, .35), rgba(6, 4, 12, .78)); }
.qcam .vf { position: absolute; width: 54px; height: 54px; border: 0 solid rgba(255, 255, 255, .85); z-index: 3; }
.qcam .vf.tl { left: 6%; top: 10%; border-width: 3px 0 0 3px; } .qcam .vf.tr { right: 6%; top: 10%; border-width: 3px 3px 0 0; }
.qcam .vf.bl { left: 6%; bottom: 12%; border-width: 0 0 3px 3px; } .qcam .vf.br { right: 6%; bottom: 12%; border-width: 0 3px 3px 0; }
.qcam .rec { position: absolute; left: calc(6% + 18px); top: calc(10% + 16px); z-index: 3; display: flex; align-items: center; gap: 8px; font: 700 14px/1 var(--mono); letter-spacing: .1em; color: #fff; }
.qcam .rec i { width: 12px; height: 12px; border-radius: 50%; background: #ff3b30; box-shadow: 0 0 10px 2px rgba(255, 59, 48, .7); animation: blink 1s steps(2) infinite; }
.qcam .rec b { font-weight: 600; opacity: .8; }
.qcam .cam { position: absolute; right: calc(6% + 18px); top: calc(10% + 16px); z-index: 3; font: 700 14px/1 var(--mono); letter-spacing: .1em; color: #ffd36e; }
.qcam .clap { position: absolute; left: 50%; top: 13%; transform: translateX(-50%); z-index: 3; padding: 10px 22px; border-radius: 12px; font-size: clamp(20px, 3vw, 30px); letter-spacing: .14em; color: rgba(255, 255, 255, .25); background: #1a0e14; box-shadow: inset 0 0 0 3px #3a2a2a; transition: all .25s; }
.qcam .clap.on { color: #fff3c4; background: #c8402a; box-shadow: inset 0 0 0 3px #ffd36e, 0 0 40px 8px rgba(255, 140, 60, .55); animation: clapblink .5s steps(2) 4; }
@keyframes clapblink { 50% { filter: brightness(.6); } }
.qcam .qi-c { gap: 6px; }
.qcam .count { height: 140px; font-size: 130px; line-height: 140px; }
.qcam .lower { position: absolute; left: 0; bottom: 18%; z-index: 3; display: grid; padding: 12px 28px 12px 7%; border-radius: 0 14px 14px 0; background: linear-gradient(90deg, #1f4ea8, #2a5bd7); box-shadow: 0 10px 30px rgba(0, 0, 0, .5), inset -4px 0 0 #ffd36e; color: #fff; }
.qcam .lower .lw-a { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: #ffd36e; }
.qcam .lower .lw-b { font-size: 18px; } .qcam .lower .lw-b b { font-weight: 800; }
.qcam .flash { position: absolute; inset: 0; z-index: 5; background: #fff; opacity: 0; pointer-events: none; }
@media (max-width: 640px) { .qcam .vf { width: 34px; height: 34px; } .qcam .clap { top: 18%; } .qcam .count { font-size: 100px; height: 110px; line-height: 110px; } .qcam .lower { bottom: 14%; } .qcam .lower .lw-b { font-size: 15px; } }
.tx .rg-logo b { font-size: calc(var(--cw) * .95); }
@media (max-width: 640px) { .tx .rg-logo b { font-size: calc(var(--cw) * 1.2); } .tx .rg-logo em { font-size: calc(var(--cw) * .38); } }
/* décors du Quiz (public/quizsets.js) */
.qset.qdraw .qsc { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.qsc * { transform-box: fill-box; transform-origin: center; }
.qsc .qb { transform-box: view-box; animation: qbeam 5s ease-in-out infinite alternate; }
@keyframes qbeam { from { transform: rotate(-14deg); } to { transform: rotate(14deg); } }
.qsc .qwave { animation: qwave 12s linear infinite alternate; }
@keyframes qwave { from { transform: translateX(-200px); } to { transform: translateX(0); } }
.qsc .qled { animation: tsTw 1.8s ease-in-out infinite alternate; }
.qsc .qtw { animation: tsTw 2.6s ease-in-out infinite alternate; }
.qsc .qbulb { animation: qbulb2 .9s steps(2) infinite; }
@keyframes qbulb2 { 50% { opacity: .35; } }
.qsc .qtinsel { animation: qtinsel 3s ease-in-out infinite alternate; transform-origin: top center; }
@keyframes qtinsel { from { transform: skewX(-1.5deg); opacity: .75; } to { transform: skewX(1.5deg); opacity: 1; } }
.qsc .qflick { animation: tsFlick 2.2s ease-in-out infinite alternate; }
.qsc .qneon { animation: tsNeon 7s infinite; } .qsc .qneon.b2 { animation-delay: -3.3s; }
.qsc .qball { transform-box: view-box; animation: qball 6s linear infinite; }
@keyframes qball { to { transform: rotate(360deg); } }
.qsc .qclock { transform-box: view-box; animation: qball 60s linear infinite; }
.qsc .qsun { animation: tsFlick 6s ease-in-out infinite alternate; }
.qsc .qhd { animation: qbob 2.4s ease-in-out infinite; }
@keyframes qbob { 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .qsc * { animation: none !important; } }
/* un léger voile sombre derrière le contenu : les textes du plateau restent lisibles quel que soit le décor */
.qtable:not(.qd-plateau) { background: #0a0714; }
.qtable:not(.qd-plateau)::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(8, 5, 14, .1) 0, rgba(8, 5, 14, .35) 30%, rgba(8, 5, 14, .45) 100%); }
.qtable.qd-amphi::before { background: linear-gradient(180deg, rgba(8, 5, 14, .05) 0, rgba(8, 5, 14, .5) 30%, rgba(8, 5, 14, .55) 100%); }
/* vignettes du choix */
.qsetpick .dp-art::after { display: none; }
.qsetpick .dp-art .qsc { position: absolute; inset: 0; width: 100%; height: 100%; }
.qsetpick .dp-art .qsc * { animation: none !important; }
/* le plateau d'origine : des faisceaux en plus, qui balaient depuis la rampe */
.qd-plateau .qset::before, .qd-plateau .qset::after { content: ""; position: absolute; top: 0; width: 32%; height: 90%; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255, 236, 190, .22), transparent 80%); clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%); transform-origin: 50% 0; mix-blend-mode: screen; animation: qabeam 5s ease-in-out infinite alternate; }
.qd-plateau .qset::before { left: 8%; } .qd-plateau .qset::after { right: 8%; animation-delay: -2.5s; background: linear-gradient(180deg, rgba(127, 224, 196, .2), transparent 80%); }
/* intro « caméra » : plus sombre derrière le viseur */
.qintro.qcam { background: radial-gradient(70% 60% at 50% 50%, rgba(10, 6, 20, .82), rgba(6, 4, 12, .95)); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.qtable:not(.qd-plateau)::before { background: linear-gradient(180deg, rgba(8, 5, 14, .08) 0, rgba(8, 5, 14, .25) 12%, rgba(8, 5, 14, .62) 24%, rgba(8, 5, 14, .66) 100%); }
.qtable.qd-amphi::before { background: linear-gradient(180deg, rgba(8, 5, 14, .05) 0, rgba(8, 5, 14, .3) 12%, rgba(8, 5, 14, .7) 24%, rgba(8, 5, 14, .72) 100%); }
.qtable:not(.qd-plateau) .qset { z-index: -2; }

/* ===================== Étape 18 : Black Rat ===================== */
/* décors des salons (public/bjrooms.js) */
.bjroom .bjsc { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bjsc * { transform-box: fill-box; transform-origin: center; }
.bjsc .bjtw { animation: tsTw 2.8s ease-in-out infinite alternate; }
.bjsc .bjflick, .bjsc .bjglow { animation: tsFlick 2.4s ease-in-out infinite alternate; }
.bjsc .bjchase { animation: qbulb2 .8s steps(2) infinite; }
.bjsc .bjneon { animation: tsNeon 7s infinite; } .bjsc .bjneon.b2 { animation-delay: -3.4s; }
.bjsc .bjslot { animation: bjslot 3s steps(1) infinite; }
@keyframes bjslot { 0%, 80% { opacity: 1; } 85% { opacity: .2; transform: translateY(-6px); } 90% { opacity: 1; transform: none; } }
.bjsc .bjshim { animation: tsShim 2.6s ease-in-out infinite alternate; }
.bjsc .bjwave { animation: tsWave 6s ease-in-out infinite alternate; }
.bjsc .bjnote { animation: bjnote 4.4s ease-in-out infinite; }
@keyframes bjnote { 0% { opacity: 0; transform: translate(0, 0); } 30% { opacity: .9; } 100% { opacity: 0; transform: translate(40px, -60px); } }
.bjsc .bjsmoke { animation: bjsmoke 8s ease-in-out infinite; }
@keyframes bjsmoke { 0% { transform: translate(0, 0) scale(1); opacity: 0; } 30% { opacity: .1; } 100% { transform: translate(30px, -120px) scale(1.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .bjsc * { animation: none !important; } }
.bjroom .vign { position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 20%, transparent 50%, rgba(0, 0, 0, .55)); }
/* liste des salons : un aperçu de la salle en haut de chaque carte, avec son nom */
.bjroom-card .rc-art { position: relative; display: block; margin: -18px -18px 0; height: 104px; overflow: hidden; border-bottom: 1px solid rgba(242, 213, 138, .2); }
.bjroom-card .rc-art .bjsc { position: absolute; inset: 0; width: 100%; height: 100%; }
.bjroom-card .rc-art .bjsc * { animation: none !important; }
.bjroom-card .rc-art em { position: absolute; left: 10px; bottom: 8px; padding: 3px 9px; border-radius: 999px; font: 600 12px/1.3 var(--body); font-style: normal; color: #fff; background: rgba(0, 0, 0, .6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
@media (max-width: 560px) { .bjroom-card .rc-art { margin: -14px -14px 0; height: 88px; } }
@media (min-width: 1100px) { .bjrooms:has(> .bjroom-card:nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Black Rat : le croupier rat (mains posées sur le bord de la table, gestes rapides par classes) */
.bjdealer.house { transform: translate(-50%, calc(-100% + 9px)); gap: 0; pointer-events: none; }
.bjdealer.house .dav { width: 172px; height: 129px; border-radius: 0; overflow: visible; box-shadow: none; filter: drop-shadow(0 14px 14px rgba(0, 0, 0, .55)); }
.bjdealer.house .dname { display: none; }
.ratdealer { overflow: visible; }
.ratdealer .rd-head { transform-box: view-box; transform-origin: 80px 80px; animation: rd-bob 4.2s ease-in-out infinite; }
.ratdealer .rd-eyes { transform-box: view-box; transform-origin: 80px 51px; animation: rd-blink 5.2s infinite; }
.ratdealer .rd-arm { transform-box: view-box; transition: transform .22s ease; }
.ratdealer .rd-arm.l { transform-origin: 44px 96px; } .ratdealer .rd-arm.r { transform-origin: 116px 96px; }
.ratdealer .rd-m, .ratdealer .rd-brow { transition: opacity .15s, transform .2s; transform-box: view-box; transform-origin: 80px 44px; }
.ratdealer .rd-m.big, .ratdealer .rd-m.o { opacity: 0; }
.bjdealer.deal .rd-arm.r { animation: rd-deal .38s ease-in-out infinite; }
.bjdealer.flip .rd-arm.l { animation: rd-flip .6s ease-in-out; }
.bjdealer.pay .rd-arm { animation: rd-pay .8s ease-in-out; }
.bjdealer.collect .rd-arm.l { animation: rd-sweep-l .8s ease-in-out; } .bjdealer.collect .rd-arm.r { animation: rd-sweep-r .8s ease-in-out; }
.bjdealer.smile .rd-m.n, .bjdealer.oops .rd-m.n { opacity: 0; }
.bjdealer.smile .rd-m.big { opacity: 1; } .bjdealer.smile .rd-eyes { animation: none; transform: scaleY(.55); }
.bjdealer.oops .rd-m.o { opacity: 1; } .bjdealer.oops .rd-brow { transform: translateY(-3px); }
.bjdealer.oops .rd-head { animation: rd-oops .9s ease-in-out; }
.bjdealer.oops .rd-arm.l { animation: rd-shrug-l .9s ease-in-out; } .bjdealer.oops .rd-arm.r { animation: rd-shrug-r .9s ease-in-out; }
@keyframes rd-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-1.5px) rotate(.6deg); } }
@keyframes rd-blink { 0%, 95%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
@keyframes rd-deal { 0%, 100% { transform: rotate(0); } 45% { transform: rotate(-16deg) translateY(-3px); } }
@keyframes rd-flip { 0%, 100% { transform: rotate(0); } 40% { transform: rotate(22deg) translateY(-4px); } 70% { transform: rotate(-6deg); } }
@keyframes rd-pay { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px) scale(1.04); } }
@keyframes rd-sweep-l { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-18deg); } }
@keyframes rd-sweep-r { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(18deg); } }
@keyframes rd-oops { 0%, 100% { transform: rotate(0); } 30%, 70% { transform: rotate(-7deg) translateY(1px); } }
@keyframes rd-shrug-l { 0%, 100% { transform: rotate(0); } 30%, 70% { transform: rotate(38deg) translateY(-4px); } }
@keyframes rd-shrug-r { 0%, 100% { transform: rotate(0); } 30%, 70% { transform: rotate(-38deg) translateY(-4px); } }
@media (max-width: 640px) { .bjdealer.house .dav { width: 112px; height: 84px; } }
@media (prefers-reduced-motion: reduce) { .ratdealer .rd-head, .ratdealer .rd-eyes, .bjdealer .rd-arm { animation: none !important; } }

/* Black Rat : dos des cartes (bordeaux et or, médaillon au rat) */
.bjc.back { background: radial-gradient(120% 90% at 50% 40%, #93222f, #5a1220 60%, #3c0a13); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .6), inset 0 0 0 calc(var(--cw) * .045) #f3ecdc; overflow: hidden; }
.bjc.back .bk { inset: 9%; border-radius: 4%; opacity: .32; background: repeating-linear-gradient(45deg, #d6b066 0 1px, transparent 1px 6px), repeating-linear-gradient(-45deg, #d6b066 0 1px, transparent 1px 6px); }
.bjc.back .bkart { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bjc.back::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(125deg, transparent 35%, rgba(255, 240, 200, .16) 48%, transparent 60%); pointer-events: none; }

/* Black Rat : image du jeu (salle chic, lumière douce, jetons, carte qui se retourne, main du croupier) */
.gart.blackjack { container-type: size; isolation: isolate; background: radial-gradient(80% 60% at 50% 0%, #4a3416, #1a1208 55%, #0a0704); }
.gart.blackjack .arc, .gart.blackjack .bjfan, .gart.blackjack .chips3 { display: none; }
.gart.blackjack .ba-glow { position: absolute; left: 50%; top: -30%; width: 90%; height: 110%; transform: translateX(-50%); z-index: 0; background: radial-gradient(closest-side, rgba(255, 214, 140, .45), rgba(255, 190, 100, .12) 60%, transparent); animation: baglow 5s ease-in-out infinite alternate; }
.gart.blackjack .ba-bokeh i { position: absolute; z-index: 0; width: 7cqh; height: 7cqh; border-radius: 50%; background: rgba(255, 210, 140, .5); filter: blur(2px); animation: babok 4s ease-in-out infinite alternate; }
.gart.blackjack .ba-bokeh i:nth-child(1) { left: 6%; top: 12%; } .gart.blackjack .ba-bokeh i:nth-child(2) { left: 18%; top: 30%; width: 4cqh; height: 4cqh; animation-delay: -1s; } .gart.blackjack .ba-bokeh i:nth-child(3) { left: 30%; top: 8%; width: 5cqh; height: 5cqh; animation-delay: -2s; background: rgba(224, 120, 90, .45); }
.gart.blackjack .ba-bokeh i:nth-child(4) { right: 8%; top: 14%; animation-delay: -1.5s; } .gart.blackjack .ba-bokeh i:nth-child(5) { right: 22%; top: 34%; width: 4cqh; height: 4cqh; animation-delay: -3s; } .gart.blackjack .ba-bokeh i:nth-child(6) { right: 32%; top: 6%; width: 3cqh; height: 3cqh; animation-delay: -.5s; background: rgba(140, 220, 180, .4); } .gart.blackjack .ba-bokeh i:nth-child(7) { left: 46%; top: 2%; width: 3cqh; height: 3cqh; animation-delay: -2.5s; }
.gart.blackjack .ba-set { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 62%; z-index: 1; }
.gart.blackjack .ba-cards { position: absolute; left: 50%; top: 22%; z-index: 2; display: flex; transform: translateX(-50%); perspective: 600px; }
.gart.blackjack .bjc { --cw: clamp(24px, 30cqh, 92px); box-shadow: 0 14px 22px -10px rgba(0, 0, 0, .8); }
.gart.blackjack .ba-a { transform: rotate(-10deg) translateY(4%); margin-right: -8%; transition: transform .6s var(--ease-out); }
.gart.blackjack .ba-flip { position: relative; transform-style: preserve-3d; transform: rotate(8deg); animation: baflip 6s ease-in-out infinite; }
.gart.blackjack .ba-flip .bc { position: absolute; inset: 0; transform: rotateY(180deg); backface-visibility: hidden; } .gart.blackjack .ba-flip .fc { backface-visibility: hidden; }
.gart.blackjack .ba-flip .bjc { backface-visibility: hidden; }
.gart.blackjack .ba-paw { position: absolute; right: 3%; top: 16%; z-index: 3; width: 34cqh; height: auto; filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .5)); animation: bapaw 6s ease-in-out infinite; }
.gart.blackjack .n21 { right: auto; left: 6%; bottom: auto; top: 6%; z-index: 3; font-size: clamp(18px, 17cqh, 56px); color: #ffd98a; text-shadow: 0 0 6px rgba(255, 200, 100, .9), 0 0 22px rgba(224, 160, 60, .7); animation: ba21 3.2s ease-in-out infinite; }
@keyframes baglow { from { opacity: .75; } to { opacity: 1; } }
@keyframes babok { from { opacity: .25; transform: scale(.85); } to { opacity: .8; transform: scale(1.1); } }
@keyframes baflip { 0%, 12% { transform: rotate(8deg) rotateY(180deg); } 24%, 86% { transform: rotate(8deg) rotateY(0); } 98%, 100% { transform: rotate(8deg) rotateY(180deg); } }
@keyframes bapaw { 0%, 8% { transform: translate(0, 0); } 18%, 30% { transform: translate(-6%, 4%); } 44%, 84% { transform: translate(22%, -8%); } 96%, 100% { transform: translate(0, 0); } }
@keyframes ba21 { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }
.gtile.hov .gart.blackjack .ba-a { transform: rotate(-16deg) translateY(-4%); }
.lbcard .mini-art .gart.blackjack .ba-paw, .lbcard .mini-art .gart.blackjack .ba-bokeh, .lbcard .mini-art .gart.blackjack .n21 { display: none; }
@media (prefers-reduced-motion: reduce) { .gart.blackjack .ba-glow, .gart.blackjack .ba-bokeh i, .gart.blackjack .ba-flip, .gart.blackjack .ba-paw, .gart.blackjack .n21 { animation: none; } .gart.blackjack .ba-flip { transform: rotate(8deg); } }

/* Black Rat : transition d'ouverture (lampes, mélange, distribution, pluie de jetons) */
.tx .cs-felt { background: radial-gradient(120% 90% at 50% 20%, #23774f, #0e3826 60%, #061710); }
.tx .cs-dark { position: absolute; inset: 0; z-index: 4; background: radial-gradient(60% 50% at 50% 30%, rgba(4, 8, 6, .82), #020403); pointer-events: none; }
.tx .cs-lamps { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.tx .cs-lamps i { position: absolute; top: 0; width: 34vmin; height: 70vh; transform: translateX(-50%); opacity: 0; background: linear-gradient(180deg, rgba(255, 226, 160, .5), rgba(255, 210, 140, .1) 70%, transparent); clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); mix-blend-mode: screen; }
.tx .cs-lamps i b { position: absolute; left: 50%; top: 0; width: 18%; height: 3.4vmin; transform: translateX(-50%); border-radius: 0 0 50% 50% / 0 0 100% 100%; background: #e0b44c; box-shadow: 0 0 22px 8px rgba(255, 214, 140, .7); }
.tx .cs-lamps .l0 { left: 22%; } .tx .cs-lamps .l1 { left: 50%; } .tx .cs-lamps .l2 { left: 78%; }
.tx .cs-deck { position: absolute; left: 50%; top: 30%; z-index: 2; width: clamp(76px, 11vw, 120px); height: calc(clamp(76px, 11vw, 120px) * 1.4); transform: translateX(-50%); }
.tx .cs-h { position: absolute; inset: 0; transform-origin: 50% 100%; }
.tx .cs-h > span { position: absolute; inset: 0; transform: translate(calc(var(--n) * -1.5px), calc(var(--n) * -2px)); }
.tx .cs-h .bjc { --cw: clamp(76px, 11vw, 120px); box-shadow: 0 12px 20px -10px rgba(0, 0, 0, .8); }
.tx .cs-h.h1 > span { transform: translate(calc(var(--n) * 1.5px + 3px), calc(var(--n) * -2px - 6px)); }
.tx .cs-cards { z-index: 3; } .tx .cs-c { left: calc(clamp(76px, 11vw, 120px) / -2); }
.tx .cs-rain { position: absolute; left: 50%; top: calc(30% + 30vmin); z-index: 3; width: 0; height: 0; }
.tx .cs-rain i { position: absolute; transform: translateX(var(--x)); left: -30px; top: calc(var(--k) * -8px); width: 60px; height: 18px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 4px #f3ecdc, inset 0 0 0 7px var(--c), 0 3px 0 rgba(0, 0, 0, .45); }
.tx .cs-title { z-index: 6; text-shadow: 0 4px 30px rgba(0, 0, 0, .7); } .tx .cs-21 { z-index: 6; }
@media (max-width: 640px) { .tx .cs-rain i { width: 42px; height: 13px; left: -21px; top: calc(var(--k) * -6px); box-shadow: inset 0 0 0 3px #f3ecdc, inset 0 0 0 5px var(--c), 0 2px 0 rgba(0, 0, 0, .45); } .tx .cs-rain { top: calc(30% + 36vmin); } .tx .cs-lamps i { width: 46vmin; } }
.tx .cs-c { opacity: 0; transform-style: preserve-3d; } .tx .cs-c .bjc.back { position: absolute; left: 0; top: 0; transform: rotateY(180deg); }
.tx .cs-rain i { opacity: 0; }
.bjpurse .bp-free { margin: 4px 0 0; padding-top: 10px; border-top: 1px dashed rgba(0, 0, 0, .18); font-size: 12.5px; line-height: 1.4; opacity: .75; }

/* Color Rats : image du jeu animée (l'éventail respire, reflet sur les cartes, le Joker se lève, « Rats ! », jeton qui saute) */
.gart.scuno .fan .pc { animation: crfan 4.4s ease-in-out infinite; }
.gart.scuno .fan .pc:nth-child(1) { --r: -6deg; } .gart.scuno .fan .pc:nth-child(2) { --r: -2.5deg; animation-delay: -.15s; } .gart.scuno .fan .pc:nth-child(3) { --r: 2.5deg; animation-delay: -.3s; }
.gart.scuno .fan .pc:nth-child(4) { --r: 6deg; animation: crjoker 4.4s ease-in-out infinite; }
.gart.scuno .fan .pc::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .38) 50%, transparent 58%) 140% 0 / 300% 100% no-repeat; animation: crsheen 5.5s ease-in-out infinite; }
.gart.scuno .fan .pc:nth-child(2)::after { animation-delay: .12s; } .gart.scuno .fan .pc:nth-child(3)::after { animation-delay: .24s; } .gart.scuno .fan .pc:nth-child(4)::after { animation-delay: .36s; }
.gart.scuno .cr-shout { position: absolute; right: 9%; top: 9%; z-index: 2; padding: 5px 11px 6px; border-radius: 14px 14px 14px 4px; background: #f3ecdc; color: #1b3a2e; font-size: 17px; line-height: 1; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .7); transform-origin: 0 100%; opacity: 0; animation: crshout 4.4s ease-in-out infinite; }
.gart.scuno .cr-chip { animation: crchip 4.4s ease-in-out infinite; }
.gart.scuno .cr-blur .pc:nth-child(3) { animation: crdrift 9s ease-in-out infinite alternate; }
@keyframes crfan { 0%, 100% { rotate: 0deg; translate: 0 0; } 50% { rotate: var(--r); translate: 0 -3px; } }
@keyframes crjoker { 0%, 100% { rotate: 0deg; translate: 0 0; filter: none; } 45%, 62% { rotate: var(--r); translate: 0 -12px; filter: drop-shadow(0 0 14px rgba(255, 214, 120, .55)); } }
@keyframes crsheen { 0%, 55% { background-position: 140% 0; } 80%, 100% { background-position: -40% 0; } }
@keyframes crshout { 0%, 44% { opacity: 0; transform: scale(.4) rotate(-10deg); } 50% { opacity: 1; transform: scale(1.1) rotate(4deg); } 54%, 70% { opacity: 1; transform: scale(1) rotate(0); } 78%, 100% { opacity: 0; transform: scale(.8) translateY(-6px); } }
@keyframes crchip { 0%, 60%, 100% { translate: 0 0; } 66% { translate: 0 -9px; } 72% { translate: 0 0; } 76% { translate: 0 -3px; } 80% { translate: 0 0; } }
@keyframes crdrift { from { translate: 0 0; rotate: 0deg; } to { translate: -10px -4px; rotate: -5deg; } }
.tk .gart.scuno .cr-shout { font-size: 13px; padding: 4px 8px 5px; }
.lbcard .mini-art .gart.scuno .cr-shout, .empty .ill .gart.scuno .cr-shout { display: none; }
@media (prefers-reduced-motion: reduce) { .gart.scuno .fan .pc, .gart.scuno .fan .pc::after, .gart.scuno .cr-chip, .gart.scuno .cr-blur .pc, .gart.scuno .cr-shout { animation: none; } }

/* Bataille navale : image du jeu (cuirassé qui tangue, houle, fumée, gerbe d'obus, radar) */
.gart.navale { background: #061a26; isolation: isolate; }
.gart.navale .ngrid, .gart.navale .nship, .gart.navale .nhit, .gart.navale .nsplash { display: none; }
.gart.navale .nv-scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.gart.navale .nv-w { animation: nvwave 7s linear infinite; } .gart.navale .nv-w.w2 { animation-duration: 9s; } .gart.navale .nv-w.w3 { animation-duration: 6s; animation-direction: reverse; } .gart.navale .nv-w.w4 { animation-duration: 8s; } .gart.navale .nv-w.w5 { animation-duration: 5s; animation-direction: reverse; }
.gart.navale .nv-w.w1 { --p: -40px; } .gart.navale .nv-w.w2 { --p: -56px; } .gart.navale .nv-w.w3 { --p: -70px; } .gart.navale .nv-w.w4 { --p: -90px; } .gart.navale .nv-w.w5 { --p: -110px; }
.gart.navale .nv-ship { transform-box: view-box; transform-origin: 216px 146px; animation: nvbob 4.6s ease-in-out infinite; }
.gart.navale .nv-far { transform-box: view-box; transform-origin: 78px 98px; animation: nvbob 6.4s ease-in-out infinite reverse; }
.gart.navale .nv-wake { animation: nvfoam 2.4s ease-in-out infinite alternate; } .gart.navale .nv-bow { animation: nvfoam 1.6s ease-in-out infinite alternate; }
.gart.navale .nv-smoke circle { transform-box: fill-box; transform-origin: center; animation: nvsmoke 3.2s ease-out infinite; } .gart.navale .nv-smoke circle:nth-child(2) { animation-delay: -1.1s; } .gart.navale .nv-smoke circle:nth-child(3) { animation-delay: -2.2s; }
.gart.navale .nv-radar { transform-box: fill-box; transform-origin: center; animation: nvradar 2.4s linear infinite; }
.gart.navale .nv-flag { transform-box: fill-box; transform-origin: 0 50%; animation: nvflag 1.1s ease-in-out infinite alternate; }
.gart.navale .nv-win rect { animation: nvwin 5s steps(1) infinite; } .gart.navale .nv-win rect:nth-child(2n) { animation-delay: -2.4s; }
.gart.navale .nv-splash { transform-box: fill-box; transform-origin: 50% 100%; animation: nvsplash 5s ease-out infinite; }
.gart.navale .nv-ring { transform-box: fill-box; transform-origin: center; animation: nvring 5s ease-out infinite; }
.gart.navale .sonar { right: auto; left: 5%; top: 6%; width: 22%; max-width: 96px; z-index: 1; opacity: .92; }
.gart.navale .sonar b { position: absolute; left: 30%; top: 58%; width: 6%; aspect-ratio: 1; border-radius: 50%; background: #9dffc8; box-shadow: 0 0 8px #5dffa2; animation: nvblip 3.6s linear infinite; }
@keyframes nvwave { from { transform: translateX(0); } to { transform: translateX(var(--p)); } }
@keyframes nvbob { 0%, 100% { transform: rotate(-1.1deg) translateY(0); } 50% { transform: rotate(1.1deg) translateY(1.6px); } }
@keyframes nvfoam { from { opacity: .3; } to { opacity: .75; } }
@keyframes nvsmoke { 0% { transform: translate(6px, 10px) scale(.5); opacity: 0; } 25% { opacity: 1; } 100% { transform: translate(-10px, -12px) scale(1.5); opacity: 0; } }
@keyframes nvradar { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(-1); } }
@keyframes nvflag { from { transform: skewY(-8deg) scaleX(1); } to { transform: skewY(6deg) scaleX(.85); } }
@keyframes nvwin { 0%, 70% { opacity: 1; } 72%, 80% { opacity: .35; } }
@keyframes nvsplash { 0%, 58% { transform: scaleY(0); opacity: 0; } 62% { transform: scaleY(1.05); opacity: 1; } 74% { transform: scaleY(.9); opacity: .9; } 86%, 100% { transform: scaleY(.2); opacity: 0; } }
@keyframes nvring { 0%, 60% { transform: scale(.3); opacity: 0; } 64% { opacity: .9; } 92%, 100% { transform: scale(1.8); opacity: 0; } }
@keyframes nvblip { 0%, 30% { opacity: 0; } 34% { opacity: 1; } 70%, 100% { opacity: 0; } }
.lbcard .mini-art .gart.navale .sonar, .empty .ill .gart.navale .sonar { display: none; }
@media (prefers-reduced-motion: reduce) { .gart.navale .nv-w, .gart.navale .nv-ship, .gart.navale .nv-far, .gart.navale .nv-wake, .gart.navale .nv-bow, .gart.navale .nv-smoke circle, .gart.navale .nv-radar, .gart.navale .nv-flag, .gart.navale .nv-win rect, .gart.navale .nv-splash, .gart.navale .nv-ring, .gart.navale .sonar b { animation: none; } }

/* Bataille navale : transition « la flotte » (océan de nuit, sonar qui pingue, tir de canon) */
.tx .sv-wrap { position: absolute; inset: 0; background: #02090e; }
.tx .sv-scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tx .sv-w { animation: svwave 6s linear infinite; } .tx .sv-w.w1 { --p: -120px; animation-duration: 8s; } .tx .sv-w.w2 { --p: -180px; } .tx .sv-w.w3 { --p: -220px; animation-duration: 5s; } .tx .sv-w.w4 { --p: -260px; animation-duration: 4.5s; animation-direction: reverse; }
.tx .sv-ship { transform-box: fill-box; transform-origin: 50% 90%; animation: svbob 3.4s ease-in-out infinite; } .tx .sv-ship.s2 { animation-delay: -1.2s; } .tx .sv-ship.s3 { animation-delay: -2.1s; }
.tx .sv-muzzle { transform-box: fill-box; transform-origin: 20% 50%; opacity: 0; }
.tx .sv-hud { left: auto; top: auto; right: 4vmin; bottom: 4vmin; width: min(30vmin, 230px); transform: none; box-shadow: 0 0 0 3px #1e2b25, 0 0 40px rgba(93, 255, 162, .3); }
.tx .sv-title { bottom: auto; top: 12%; z-index: 2; text-shadow: 0 4px 24px rgba(0, 0, 0, .8); }
.tx .sv-flash { position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0; background: radial-gradient(60% 60% at 62% 58%, #fff8e0, #ffd38a 45%, #f5efe4); }
@keyframes svwave { from { transform: translateX(0); } to { transform: translateX(var(--p)); } }
@keyframes svbob { 0%, 100% { transform: rotate(-.8deg) translateY(0); } 50% { transform: rotate(.8deg) translateY(3px); } }
@media (max-width: 640px) { .tx .sv-hud { width: 34vmin; } .tx .sv-title { top: 16%; } }
.tx .sv-hud, .tx .sv-title { opacity: 0; }

/* Bataille navale : petite boussole en laiton sur la case « Rejoindre » (l'aiguille cherche le nord) */
.mini-ic.nvcompass { padding: 0; border-radius: 50%; background: none; box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .75); }
.mini-ic.nvcompass .nvc-needle { transform-box: view-box; transform-origin: 50px 50px; animation: nvcneedle 5s ease-in-out infinite; }
.act-card:hover .mini-ic.nvcompass .nvc-needle { animation-duration: 1.6s; }
@keyframes nvcneedle { 0%, 100% { transform: rotate(-14deg); } 30% { transform: rotate(11deg); } 55% { transform: rotate(-5deg); } 75% { transform: rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .mini-ic.nvcompass .nvc-needle { animation: none; } }
.act-card .mini:has(.nvcompass) { right: -12px; top: -14px; } .act-card .mini .mini-ic.nvcompass { width: 78px; height: 78px; transform: none; }

/* Rats-Garous : le maire (écharpe bleu-blanc-rouge et médaille sur son jeton, annonce de l'élection) */
.tok .tmayor { display: none; position: absolute; top: -10px; left: calc(50% + var(--s) / 2 - 20px); width: 34px; height: 34px; z-index: 3; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .6)); }
.tok .tmayor svg { width: 100%; height: 100%; display: block; }
.tok.mayor .tmayor { display: block; animation: mayorin .6s var(--ease-out); }
.tok.mayor .tav { box-shadow: 0 0 0 3px #e6be62, 0 0 18px rgba(230, 190, 98, .55), 0 10px 22px -8px rgba(0, 0, 0, .8); }
.tok.tied .tav { box-shadow: 0 0 0 3px #ff9a5a, 0 0 20px rgba(255, 154, 90, .6); }
@keyframes mayorin { from { transform: scale(0) rotate(-40deg); } to { transform: none; } }
.lmayor { position: absolute; left: 50%; top: 22%; z-index: 60; display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px; border-radius: 16px; background: rgba(20, 16, 10, .82); box-shadow: inset 0 0 0 1px rgba(230, 190, 98, .55), 0 18px 40px -16px rgba(0, 0, 0, .9); color: var(--chalk); pointer-events: none; }
.lmayor .ri { width: 40px; height: 40px; } .lmayor .ri svg { width: 100%; height: 100%; }
.lmayor small { display: block; font-size: 12px; color: #e6be62; } .lmayor b { font-size: 20px; }
.mayormark { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; } .mayormark svg { width: 100%; height: 100%; }
.ri.mayor, .cchip.mayor i { background: #2a2140; }
@media (prefers-reduced-motion: reduce) { .tok.mayor .tmayor { animation: none; } }

/* Rats-Garous : les cartes de rôle en bas de la page du jeu */
.rolegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.rolec { --a: #b37a42; --b: #4a2e18; --e: #ffd9a6; position: relative; display: grid; justify-items: center; align-content: start; gap: 8px; padding: 22px 18px 20px; border-radius: 18px; text-align: center; color: #fff; background: radial-gradient(120% 80% at 50% 0%, var(--a), var(--b) 72%); box-shadow: inset 0 0 0 1.5px var(--e), inset 0 0 0 6px rgba(0, 0, 0, .18), 0 22px 40px -22px rgba(0, 0, 0, .9); transition: transform .5s var(--ease-out), box-shadow .5s; overflow: hidden; }
.rolec::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .14) 50%, transparent 60%) 160% 0 / 300% 100% no-repeat; animation: rolesheen 7s ease-in-out infinite; animation-delay: calc(var(--i) * .5s); pointer-events: none; }
.rolec:hover { transform: translateY(-6px) rotate(-1deg); }
.rolec .rc-ri { width: 92px; height: 92px; display: block; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .45)); animation: rolefloat 5s ease-in-out infinite; animation-delay: calc(var(--i) * -.6s); }
.rolec .rc-ri > svg { width: 100%; height: 100%; display: block; }
.rolec b.d { font-size: 26px; line-height: 1; }
.rolec p { margin: 0; font-size: 14px; line-height: 1.45; opacity: .9; }
.rolec.wolf { --a: #3b47a8; --b: #141a45; --e: #ff6a55; } .rolec.seer { --a: #5b4ab0; --b: #1d1640; --e: #b8a8ff; } .rolec.witch { --a: #6b3a9a; --b: #241433; --e: #bff5d6; }
.rolec.guard { --a: #2d6ad0; --b: #0f2347; --e: #9cc4ff; } .rolec.hunter { --a: #8a3a2a; --b: #2a110c; --e: #ffb4a8; } .rolec.cupid { --a: #b8455f; --b: #3a1220; --e: #ffc2d0; }
.rolec.mayor { --a: #8a6a2a; --b: #2a1f10; --e: #e6be62; } .rolec.mj { --a: #4a5a6a; --b: #161c24; --e: #d6b066; }
@keyframes rolesheen { 0%, 70% { background-position: 160% 0; } 90%, 100% { background-position: -60% 0; } }
@keyframes rolefloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .rolec::after, .rolec .rc-ri { animation: none; } }
/* accueil : le titre des affiches passe toujours devant le dessin (Rats-Garous : son dessin le cachait), pas de guirlande d'ampoules sur la nuit */
.gart.loup { isolation: isolate; } .poster .pt { z-index: 4; } .poster.p-loup .bulbs { display: none; }

/* Black Rat : nouvelle table (étape 20) — le croupier debout derrière la table, sabot, défausse et jetons de casino */
.bjsvg { z-index: 2; }
.bjdealer.house { z-index: 1; transform: translate(-50%, calc(-100% + 24px)); }
.bjdealer.house .dav { width: 172px; height: 161px; }
.bjdealer.house.hands { z-index: 3; pointer-events: none; }
.bjdealer.hands .rd-body, .bjdealer.hands .rd-head { visibility: hidden; }
.bjdealer.house:not(.hands) .rd-arm { visibility: hidden; }
.bjdealer.house:not(.hands) .dav { filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .5)); }
.bjdealer.hands .dav { filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .45)); }
@media (max-width: 640px) { .bjdealer.house .dav { width: 112px; height: 105px; } .bjdealer.house { transform: translate(-50%, calc(-100% + 16px)); } }
/* le sabot (à droite du croupier) et la défausse (à gauche) : laque noire et dorure, comme le rack à jetons (étape 24) */
.bjshoe { width: 132px; height: 91px; transform: translateX(-50%); z-index: 3; }
.bjshoe .sb, .bjshoe .sc { display: none; }
.bjshoe .shw, .bjshoe .shoesvg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.bjshoe .sn { position: absolute; left: 65.7%; width: 21.4%; top: 67.7%; height: 12.5%; display: grid; place-items: center; font: 700 9.5px/1 var(--mono); color: #2a1a06; letter-spacing: .02em; }
.bjarena .bjtray { width: 74px; height: 74px; transform: translateX(-50%); background: none; box-shadow: none; border-radius: 0; }
.bjtray .traysvg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
@media (max-width: 640px) { .bjshoe { width: 84px; height: 58px; } .bjshoe .sn { font-size: 7px; } .bjarena .bjtray { width: 50px; height: 50px; } }
/* jetons de casino : couleur, 8 incrustations sur le bord, anneau intérieur et valeur au centre */
.c10 { --c: #f3ecdc; --e: #2d78e3; --t: #163e78; } .c25 { --c: #2bb069; --e: #f3ecdc; --t: #fff; } .c50 { --c: #c8463a; --e: #f3ecdc; --t: #fff; }
.c100 { --c: #1b1b22; --e: #e0b44c; --t: #ffe3a3; } .c500 { --c: #6d47c9; --e: #f2d58a; --t: #fff; }
.bjchip:not(.call), .bjfly { background: radial-gradient(circle, var(--c) 0 47%, var(--e) 47% 50%, var(--c) 50% 64%, transparent 64.5%), repeating-conic-gradient(from 8deg, var(--e) 0 16deg, var(--c) 16deg 45deg); box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .25), inset 0 3px 6px rgba(255, 255, 255, .25), 0 3px 0 color-mix(in srgb, var(--c) 55%, #000), 0 8px 14px -6px rgba(0, 0, 0, .8); color: var(--t); }
.bjchip:not(.call)::before { inset: 21%; border: 1.5px dashed color-mix(in srgb, var(--e) 70%, transparent); }
.bjchip span { font-size: 15px; text-shadow: 0 1px 0 rgba(0, 0, 0, .25); }
.bjchip.c10 span { text-shadow: none; }
.bjseat .bjspot .bjstack i { height: 12px; border-radius: 50%; background: repeating-linear-gradient(90deg, var(--c) 0 6px, var(--e) 6px 9px); box-shadow: 0 1px 0 rgba(0, 0, 0, .5), 0 3px 4px -1px rgba(0, 0, 0, .5); }
.bjseat .bjspot .bjstack i::before { content: ""; position: absolute; left: 0; right: 0; top: -2.4px; height: 11px; border-radius: 50%; background: radial-gradient(ellipse, var(--c) 0 46%, var(--e) 46% 52%, var(--c) 52% 66%, transparent 67%), repeating-conic-gradient(var(--e) 0 18deg, var(--c) 18deg 45deg); }

/* Bataille navale : les derniers tirs (sans barre de défilement) et l'historique complet */
.nvlog ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; max-height: none; overflow: visible; background: none; box-shadow: none; padding: 0; }
.nvlog li, .nvlogm li { display: grid; grid-template-columns: 18px auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; row-gap: 2px; align-items: center; padding: 8px 10px; border-radius: 12px; background: rgba(4, 18, 26, .55) !important; box-shadow: inset 0 0 0 1px rgba(223, 233, 239, .1) !important; font-size: 13px; line-height: 1.2; }
.nvlog li + li { border-top: 0; }
.nvlog li:first-child { box-shadow: inset 0 0 0 1.5px rgba(127, 224, 196, .45), 0 8px 18px -10px rgba(0, 0, 0, .8) !important; }
.nvlog li .nvli-ic, .nvlogm li .nvli-ic { grid-row: 1 / 3; width: 18px; height: 18px; }
.nvlog li .nvli-ic svg, .nvlogm li .nvli-ic svg { width: 100%; height: 100%; display: block; }
.nvlog li .nvli-n, .nvlogm li .nvli-n { display: none; }
.nvlog li b, .nvlogm li b { font-size: 12px; opacity: .75; font-weight: 600; max-width: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nvlog li .nvli-c, .nvlogm li .nvli-c { justify-self: end; font-weight: 700; font-size: 13px; }
.nvlog li .nvli-r, .nvlogm li .nvli-r { grid-column: 2 / 4; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nvlog li.miss .nvli-r { color: #bfe3f5; } .nvlog li.hit .nvli-r, .nvlogm li.hit .nvli-r { color: #ffb08a; } .nvlog li.sunk .nvli-r, .nvlogm li.sunk .nvli-r { color: #ff9c86; }
.nvlog li.nvli-empty { grid-column: 1 / -1; display: block; text-align: center; opacity: .65; }
.nvlogh { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.nvlogall { font: 600 12.5px/1 var(--body, inherit); color: #bfe8d6; padding: 6px 10px; border-radius: 999px; background: rgba(127, 224, 196, .1); box-shadow: inset 0 0 0 1px rgba(127, 224, 196, .35); }
.nvlogall small { opacity: .7; margin-left: 4px; } .nvlogall:hover { background: rgba(127, 224, 196, .2); }
.nvlogm { width: min(720px, calc(100vw - 32px)); max-height: min(78vh, 720px); display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 12px; padding: 18px; background: #0b2230; color: var(--chalk); border-radius: 18px; box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(127, 224, 196, .25); }
.nvlogm-h { display: flex; justify-content: space-between; align-items: center; } .nvlogm-h b { font-size: 24px; }
.nvlogm ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; overflow: auto; scrollbar-width: none; }
.nvlogm ul::-webkit-scrollbar { display: none; }
@media (max-width: 760px) { .nvlog ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .nvlog li { padding: 7px 8px; font-size: 12px; } .nvlog li .nvli-r { font-size: 12px; } }
/* bateau coulé : éclair, onde de choc, le bateau se brise et sombre */
.nvsink { position: absolute; inset: 0; z-index: 35; pointer-events: none; overflow: hidden; border-radius: inherit; }
.nvsink .sk-flash { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(255, 236, 190, .95), rgba(255, 140, 60, .45) 35%, transparent 70%); opacity: 0; }
.nvsink.bad .sk-flash { background: radial-gradient(circle at 50% 50%, rgba(255, 200, 170, .9), rgba(200, 40, 30, .45) 35%, transparent 70%); }
.nvsink .sk-wave { position: absolute; left: 50%; top: 50%; width: 120%; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255, 255, 255, .7), 0 0 30px 6px rgba(255, 200, 120, .35); }
.nvsink .sk-ship { position: absolute; left: 50%; top: 46%; width: calc(var(--n) * 13%); max-width: 78%; aspect-ratio: calc(var(--n) * 1) / 1; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .6)); }
.nvsink .sk-half { position: absolute; inset: 0; } .nvsink .sk-half svg { width: 100%; height: 100%; display: block; }
.nvsink .sk-half.a { clip-path: polygon(0 0, 52% 0, 46% 100%, 0 100%); transform-origin: 30% 60%; } .nvsink .sk-half.b { clip-path: polygon(52% 0, 100% 0, 100% 100%, 46% 100%); transform-origin: 70% 60%; }
.nvsink .sk-foam { position: absolute; left: 50%; top: 58%; width: 60%; height: 16%; border-radius: 50%; background: radial-gradient(ellipse, rgba(240, 250, 255, .9), rgba(200, 235, 250, .3) 60%, transparent 70%); opacity: 0; }
.nvsink .sk-smoke i { position: absolute; left: 50%; top: 48%; width: 18%; aspect-ratio: 1; border-radius: 50%; background: rgba(60, 60, 64, .55); filter: blur(4px); animation: sksmoke 1.6s ease-out forwards; }
.nvsink .sk-smoke i:nth-child(2) { left: 42%; animation-delay: .15s; } .nvsink .sk-smoke i:nth-child(3) { left: 57%; animation-delay: .3s; }
@keyframes sksmoke { from { transform: translate(-50%, 0) scale(.3); opacity: 0; } 25% { opacity: .9; } to { transform: translate(-50%, -120%) scale(1.6); opacity: 0; } }
.nvsink .sk-ship { top: 28%; } .nvlogm-h .btn { color: var(--chalk); background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }

/* ================= ÉTAPE 20 : un peu de vie partout (discret, jamais fatigant, coupé si « réduire les animations ») ================= */
/* le tapis vert : deux lueurs qui dérivent très lentement, un grain qui glisse, de petites poussières qui flottent */
.felt .drift { position: absolute; left: -20%; top: -10%; width: 70vmax; height: 70vmax; border-radius: 50%; background: radial-gradient(closest-side, rgba(70, 150, 112, .16), transparent 70%); animation: feltdrift 46s ease-in-out infinite alternate; will-change: transform; }
.felt .drift.d2 { left: auto; right: -25%; top: auto; bottom: -30%; width: 80vmax; height: 80vmax; background: radial-gradient(closest-side, rgba(214, 176, 102, .07), transparent 70%); animation-duration: 58s; animation-direction: alternate-reverse; }
.felt .grain { animation: feltgrain 90s linear infinite; }
.felt .motes i { position: absolute; bottom: -10px; width: 3px; height: 3px; border-radius: 50%; background: rgba(240, 225, 180, .35); filter: blur(.4px); animation: feltmote 26s linear infinite; opacity: 0; }
.felt .motes i:nth-child(1) { left: 6%; animation-delay: -2s; } .felt .motes i:nth-child(2) { left: 14%; animation-delay: -17s; animation-duration: 31s; } .felt .motes i:nth-child(3) { left: 22%; animation-delay: -9s; width: 2px; height: 2px; }
.felt .motes i:nth-child(4) { left: 31%; animation-delay: -23s; animation-duration: 34s; } .felt .motes i:nth-child(5) { left: 39%; animation-delay: -5s; width: 4px; height: 4px; opacity: .5; } .felt .motes i:nth-child(6) { left: 47%; animation-delay: -13s; animation-duration: 29s; }
.felt .motes i:nth-child(7) { left: 55%; animation-delay: -20s; width: 2px; height: 2px; } .felt .motes i:nth-child(8) { left: 63%; animation-delay: -7s; animation-duration: 36s; } .felt .motes i:nth-child(9) { left: 71%; animation-delay: -15s; }
.felt .motes i:nth-child(10) { left: 79%; animation-delay: -25s; animation-duration: 33s; width: 4px; height: 4px; } .felt .motes i:nth-child(11) { left: 87%; animation-delay: -11s; width: 2px; height: 2px; } .felt .motes i:nth-child(12) { left: 94%; animation-delay: -3s; animation-duration: 28s; }
.felt .motes i:nth-child(13) { left: 18%; animation-delay: -29s; animation-duration: 40s; } .felt .motes i:nth-child(14) { left: 67%; animation-delay: -33s; animation-duration: 38s; }
@keyframes feltdrift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(45vw, 30vh, 0) scale(1.15); } }
@keyframes feltgrain { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-220px, -220px, 0); } }
@keyframes feltmote { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 10% { opacity: .9; } 85% { opacity: .7; } 100% { transform: translate3d(40px, -105vh, 0); opacity: 0; } }
body.in-game .felt .motes { display: none; } /* (pendant une partie : rien qui distrait) */
/* le petit carreau doré devant chaque titre de section brille de temps en temps */
.eyebrow::before { animation: eyeglint 5s ease-in-out infinite; }
@keyframes eyeglint { 0%, 80%, 100% { box-shadow: 0 0 0 rgba(230, 190, 98, 0); filter: none; } 88% { box-shadow: 0 0 10px 2px rgba(230, 190, 98, .7); filter: brightness(1.4); } }
/* accueil : « on joue. » s'allume lettre après lettre, les tickets flottent à peine */
.hero h1 em .ch { animation: herogold 7s ease-in-out infinite; }
.hero h1 em .ch:nth-child(2) { animation-delay: .1s; } .hero h1 em .ch:nth-child(3) { animation-delay: .2s; } .hero h1 em .ch:nth-child(4) { animation-delay: .3s; } .hero h1 em .ch:nth-child(5) { animation-delay: .4s; } .hero h1 em .ch:nth-child(6) { animation-delay: .5s; } .hero h1 em .ch:nth-child(7) { animation-delay: .6s; } .hero h1 em .ch:nth-child(8) { animation-delay: .7s; }
@keyframes herogold { 0%, 70%, 100% { text-shadow: none; } 78% { text-shadow: 0 0 24px rgba(230, 190, 98, .55), 0 0 2px rgba(255, 240, 200, .8); } }
.tix > * { animation: tixfloat 7s ease-in-out infinite; }
.tix > *:nth-child(2) { animation-delay: -1.4s; } .tix > *:nth-child(3) { animation-delay: -2.8s; } .tix > *:nth-child(4) { animation-delay: -4.2s; } .tix > *:nth-child(5) { animation-delay: -5.6s; }
@keyframes tixfloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
/* cartes en carton et boutons : un reflet passe au survol */
.paper { position: relative; }
.btn:not(.ghost):not(.xs) { background-image: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%); background-size: 250% 100%; background-position: 120% 0; background-repeat: no-repeat; transition: background-position .7s var(--ease-out), transform .2s var(--ease-out), box-shadow .2s; }
.btn:not(.ghost):not(.xs):hover { background-position: -40% 0; }
/* classement : le podium respire, la couronne du premier scintille */
.pod .who .av { animation: podfloat 4.6s ease-in-out infinite; }
.pod.p2 .who .av { animation-delay: -1.5s; } .pod.p3 .who .av { animation-delay: -3s; }
.pod.p1 .who .av { box-shadow: 0 0 0 3px #e6be62, 0 0 0 0 rgba(230, 190, 98, .5); animation: podfloat 4.6s ease-in-out infinite, podglow 2.8s ease-in-out infinite; }
.pod .crown { animation: crownbob 3.2s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes podfloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@keyframes podglow { 0%, 100% { box-shadow: 0 0 0 3px #e6be62, 0 0 0 0 rgba(230, 190, 98, .45); } 50% { box-shadow: 0 0 0 3px #e6be62, 0 0 22px 6px rgba(230, 190, 98, .35); } }
@keyframes crownbob { 0%, 100% { rotate: -4deg; filter: none; } 50% { rotate: 4deg; filter: drop-shadow(0 0 6px rgba(255, 220, 140, .8)); } }
@media (prefers-reduced-motion: reduce) {
  .felt .drift, .felt .grain, .felt .motes i, .eyebrow::before, .hero h1 em .ch, .tix > *, .pod .who .av, .pod .crown { animation: none !important; }
  .felt .motes { display: none; }
}

/* Tchats (étape 20) : bulles claires qui se détachent du tapis, arrivée animée, « en train d'écrire », heure discrète */
.cp-msgs { background: radial-gradient(120% 60% at 50% 0%, rgba(255, 255, 255, .03), transparent 70%); }
.cp-bub { position: relative; padding: 8px 12px 6px; border-radius: 18px 18px 18px 6px; background: #f1ead9; color: #1f1a12; box-shadow: 0 6px 14px -10px rgba(0, 0, 0, .8); }
.cp-bub b { color: #8a5e1c; }
.cp-bub small { color: #6b604c; opacity: .8; }
.cp-m.me .cp-bub { border-radius: 18px 18px 6px 18px; background: linear-gradient(160deg, #f0cf7c, #d9a948); color: #1d1406; }
.cp-m.me .cp-bub small { color: #5a4214; opacity: .8; }
.cp-m.cont .cp-bub { border-top-left-radius: 8px; } .cp-m.me.cont .cp-bub { border-top-left-radius: 18px; border-top-right-radius: 8px; }
.cp-m.more .cp-bub { border-bottom-left-radius: 18px; } .cp-m.me.more .cp-bub { border-bottom-right-radius: 18px; }
.cp-m.new { animation: msgin .32s cubic-bezier(.2, .9, .3, 1.2) both; transform-origin: 0 100%; }
.cp-m.me.new { transform-origin: 100% 100%; }
@keyframes msgin { from { opacity: 0; transform: translateY(10px) scale(.92); } to { opacity: 1; transform: none; } }
.cp-typing { display: flex; align-items: center; gap: 8px; padding: 0 16px 6px; font-size: 12.5px; color: var(--chalk-3); }
.cp-typing .dots { display: inline-flex; gap: 3px; padding: 7px 10px; border-radius: 14px; background: #f1ead9; }
.cp-typing .dots i { width: 6px; height: 6px; border-radius: 50%; background: #8a7a5c; animation: typedot 1.1s ease-in-out infinite; }
.cp-typing .dots i:nth-child(2) { animation-delay: .15s; } .cp-typing .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes typedot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.cp-who .av { box-shadow: 0 0 0 2px rgba(0, 0, 0, .3); }
@media (prefers-reduced-motion: reduce) { .cp-m.new, .cp-typing .dots i { animation: none; } }

/* menu des sons (étape 20) : deux blocs lisibles, de vrais boutons */
.volpop { width: 300px; gap: 12px; padding: 14px; }
.volpop .vblock { display: grid; gap: 8px; padding: 12px; border-radius: 12px; background: rgba(26, 22, 17, .05); box-shadow: inset 0 0 0 1px rgba(26, 22, 17, .08); }
.volpop .vblock b { font: 700 15px/1 var(--body); align-items: center; gap: 8px; justify-content: flex-start; }
.volpop .vblock b span[id] { margin-left: auto; font: 700 13px/1 var(--body); color: var(--ink); background: rgba(26, 22, 17, .08); padding: 4px 8px; border-radius: 999px; }
.volpop .vic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--ink); color: var(--brass); }
.volpop .vic svg { width: 15px; height: 15px; }
.volpop input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; }
.volpop .vtog { justify-self: stretch; height: 38px; border-radius: 10px; font: 700 14px/1 var(--body); background: var(--ink); color: var(--paper); transition: transform .15s, background .2s; }
.volpop .vtog:hover { background: #2b241a; transform: translateY(-1px); }
.volpop .vsep { display: none; }

/* langue : drapeau dans la barre du haut, petite fenêtre de choix */
.langbtn .flag { width: 22px; height: 15px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35); display: block; }
.mmenu .foot .flag { width: 18px; height: 12px; border-radius: 2px; }
.langpop { position: fixed; z-index: 56; width: 220px; padding: 12px; border-radius: 16px; background: var(--paper); color: var(--ink); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8); display: grid; gap: 6px; }
.langpop > b { font: 700 14px/1 var(--body); padding: 2px 4px 6px; }
.langpop .lp-opt { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 10px; font-weight: 600; text-align: left; }
.langpop .lp-opt:hover { background: rgba(26, 22, 17, .06); } .langpop .lp-opt.on { background: rgba(26, 22, 17, .09); }
.langpop .lp-opt .flag { width: 26px; height: 18px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); flex: none; }
.langpop .lp-opt svg:last-child:not(.flag) { margin-left: auto; width: 16px; height: 16px; }

/* ===== Étape 21 : sécurité des comptes ===== */
/* solidité du mot de passe : barre qui se remplit, du rouge au vert */
.pmeter { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; margin-top: -6px; font-size: 13px; font-weight: 600; }
.pmeter.off, .pmeter[hidden] { display: none; }
.pmeter i { height: 6px; border-radius: 99px; background: color-mix(in srgb, currentColor 14%, transparent); overflow: hidden; }
.pmeter b { display: block; height: 100%; border-radius: inherit; background: #c9452f; transition: width .35s var(--ease-out), background .35s; }
.pmeter[data-s="1"] b { background: #d4822e; } .pmeter[data-s="2"] b { background: #c9a12e; }
.pmeter[data-s="3"] b { background: #5aa356; } .pmeter[data-s="4"] b { background: #2f9a5d; }
.pmeter span { opacity: .8; }
.tsbox { min-height: 65px; }
.gone { display: none !important; }
.forgot { justify-self: end; margin-top: -6px; color: inherit; opacity: .75; }
.okline { display: flex; gap: 8px; align-items: flex-start; color: #2c7a4b; font-weight: 600; margin: 0; }
.okline svg { flex: none; width: 18px; height: 18px; margin-top: 2px; }
#tf { display: grid; gap: 14px; }
#tf[hidden] { display: none; }
.tag.okt { background: rgba(47, 154, 93, .18); color: #5fcf8e; box-shadow: none; }
.tag.warnt { background: rgba(214, 176, 102, .18); color: var(--brass); box-shadow: none; }
.paper .tag.okt { color: #23784a; }
/* double authentification : QR code sur fond blanc (lisible par tous les téléphones), codes de secours */
.qrbox { justify-self: center; width: min(200px, 60vw); padding: 10px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.qrbox svg { display: block; width: 100%; height: auto; }
.steps2 { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14.5px; }
.bkcodes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 14px; border-radius: 14px; background: var(--paper-2); }
.bkcodes code { font: 600 16px/1.3 var(--mono, "Geist Mono", monospace); text-align: center; letter-spacing: .04em; color: var(--ink); }
/* mes appareils connectés */
.devlist { display: grid; gap: 8px; }
.dev { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); }
.dev.cur { box-shadow: inset 0 0 0 1px rgba(95, 207, 142, .35); }
.dev .ico svg { width: 18px; height: 18px; opacity: .7; }
.dev .sub { font-size: 12.5px; color: var(--chalk-2, rgba(236, 229, 212, .7)); }
#tf p > svg, #p-2fa p > svg, .modal .muted > svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: 2px; }
/* Quiz : niveau d'une question proposée au maître du jeu */
.qs .qlvl { justify-self: start; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: rgba(214, 176, 102, .16); color: var(--brass); }
.qs .qlvl.l1 { background: rgba(95, 207, 142, .16); color: #5fcf8e; }
.qs .qlvl.l3 { background: rgba(229, 64, 58, .16); color: #ff8a80; }

/* ===== Étape 22 : Black Rat, une table simple ===== */
/* plus de salle décorée : un fond sombre et chaud, une lumière douce derrière le croupier, et le tapis qui prend la place */
.bjtable { background: radial-gradient(60% 34% at 50% 0%, color-mix(in srgb, var(--felt0, #2a9a63) 22%, #1a120c) 0%, transparent 70%), radial-gradient(120% 60% at 50% 100%, #0d0806, transparent 70%), linear-gradient(180deg, #1c130d, #0e0907); }
.bjroom .vign { box-shadow: inset 0 0 120px 20px rgba(0, 0, 0, .55); }
.bjsvg .p0 { font-family: var(--display, "Bricolage Grotesque"), serif; font-weight: 800; font-variation-settings: "wdth" 85; fill: #f2d58a; opacity: .9; letter-spacing: .01em; }
.bjsvg .p1 { fill: #f4dc98; font-weight: 700; letter-spacing: .08em; opacity: .95; }
.bjsvg .p2 { fill: #f4dc98; font-weight: 600; letter-spacing: .14em; opacity: .7; }
/* la plaque « mise min / max » */
/* le croupier : tout le corps éclairé pareil (rien de sombre ne passe plus devant lui), une ombre légère au sol */
.bjdealer.house:not(.hands) .dav { filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .35)); }
.bjdealer.house.hands .dav { filter: none; }

/* ===== Étape 22 : le tapis vert bouge bien plus (mais jamais au point de gêner la lecture) ===== */
/* trois grandes lueurs qui se promènent nettement, un reflet de lumière qui balaie le tapis, des poussières dorées qui flottent */
.felt .drift { background: radial-gradient(closest-side, rgba(86, 190, 138, .34), rgba(60, 150, 108, .12) 55%, transparent 75%); animation: feltdrift2 19s ease-in-out infinite alternate; }
.felt .drift.d2 { background: radial-gradient(closest-side, rgba(226, 190, 112, .2), transparent 72%); animation: feltdrift3 23s ease-in-out infinite alternate; }
.felt .drift.d3 { left: 30%; top: 40%; width: 55vmax; height: 55vmax; background: radial-gradient(closest-side, rgba(40, 170, 150, .22), transparent 72%); animation: feltdrift4 27s ease-in-out infinite alternate; }
.felt .sheen { position: absolute; top: -50%; left: -60%; width: 45%; height: 200%; background: linear-gradient(90deg, transparent, rgba(255, 248, 220, .07) 40%, rgba(255, 248, 220, .12) 50%, rgba(255, 248, 220, .07) 60%, transparent); transform: rotate(18deg); animation: feltsheen 13s ease-in-out infinite; will-change: transform; }
.felt .motes i { width: 4px; height: 4px; background: rgba(250, 232, 180, .75); box-shadow: 0 0 8px 2px rgba(240, 210, 140, .35); filter: none; animation-duration: 15s; }
.felt .motes i:nth-child(n+15) { width: 3px; height: 3px; animation-duration: 19s; }
.felt .motes i:nth-child(15) { left: 3%; animation-delay: -4s; } .felt .motes i:nth-child(16) { left: 26%; animation-delay: -12s; } .felt .motes i:nth-child(17) { left: 35%; animation-delay: -1s; }
.felt .motes i:nth-child(18) { left: 51%; animation-delay: -8s; } .felt .motes i:nth-child(19) { left: 59%; animation-delay: -16s; } .felt .motes i:nth-child(20) { left: 75%; animation-delay: -3s; }
.felt .motes i:nth-child(21) { left: 83%; animation-delay: -10s; } .felt .motes i:nth-child(22) { left: 97%; animation-delay: -6s; }
@keyframes feltdrift2 { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(38vw, 22vh, 0) scale(1.25); } 100% { transform: translate3d(70vw, 6vh, 0) scale(.95); } }
@keyframes feltdrift3 { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-40vw, -28vh, 0) scale(1.2); } 100% { transform: translate3d(-65vw, -8vh, 0) scale(1); } }
@keyframes feltdrift4 { 0% { transform: translate3d(-30vw, -30vh, 0) scale(.9); } 100% { transform: translate3d(20vw, 10vh, 0) scale(1.2); } }
@keyframes feltsheen { 0% { transform: translate3d(0, 0, 0) rotate(18deg); opacity: 0; } 15% { opacity: 1; } 70% { opacity: 1; } 100% { transform: translate3d(320%, 0, 0) rotate(18deg); opacity: 0; } }
body.in-game .felt .sheen, body.in-game .felt .drift { animation-play-state: paused; } /* (pendant une partie : rien qui distrait) */
@media (prefers-reduced-motion: reduce) { .felt .sheen, .felt .drift.d3 { animation: none !important; display: none; } }
@media (max-width: 640px) { .felt .motes i:nth-child(n+15) { display: none; } } /* (téléphone : moins de poussières, plus léger) */
/* Suggestions : J'aime / J'aime pas */
.sug { grid-template-columns: 64px minmax(0, 1fr); }
.votes2 { display: grid; gap: 6px; align-content: start; }
.v2 { height: 48px; border-radius: 12px; display: grid; grid-template-columns: auto auto; place-items: center; place-content: center; gap: 6px; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--chalk-2); transition: all .3s var(--ease-out); }
.v2 svg { width: 17px; height: 17px; transition: transform .4s var(--ease-out); }
.v2 b { font: 800 17px/1 var(--display); font-variation-settings: "wdth" 80; }
.v2:hover { box-shadow: inset 0 0 0 1px var(--brass); color: var(--chalk); }
.v2.up.on { background: var(--brass); color: var(--ink); box-shadow: none; }
.v2.down.on { background: #b3473b; color: #fff4ea; box-shadow: none; }
@media (max-width: 640px) { .v2 { height: 42px; } }
/* Tchats : l'heure sur chaque message (même regroupés), « Vu » sous mon dernier message lu */
.cp-m.more .cp-bub small { display: block; }
.cp-seen { align-self: flex-end; display: flex; align-items: center; gap: 4px; margin: 2px 4px 0 0; font-size: 11.5px; font-weight: 600; color: var(--chalk-3); }
.cp-seen .cp-sav { display: inline-flex; margin-left: -3px; } .cp-seen .cp-sav:first-of-type { margin-left: 2px; }
.cp-seen .cp-sav .av { box-shadow: 0 0 0 1.5px var(--table-2, #123a2b); }
/* page de connexion : l'éventail des jeux du site, en plus petit (il tourne comme sur l'accueil) */
.auth .pitch .posters.mini { height: 340px; margin: -10px 0 -20px; }
.auth .pitch .posters.mini .poster { scale: .74; }
@media (max-width: 900px) { .auth .pitch .posters.mini { display: none; } }

/* ===== Étape 23 : le mode invité ===== */
/* badge « Invité » sur les avatars (partout où les autres le voient) et à côté de son pseudo */
.av.guest { overflow: visible; box-shadow: inset 0 0 0 1.5px rgba(236, 229, 212, .45); }
.av.guest .gb { position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%); padding: 1px 4px; border-radius: 5px; background: #e6dcc6; color: #2a2318; font: 700 8.5px/1.2 var(--body, "Geist"), sans-serif; letter-spacing: .02em; white-space: nowrap; pointer-events: none; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
.gtag { margin-left: 6px; padding: 2px 7px; border-radius: 6px; background: rgba(230, 220, 198, .14); color: #e6dcc6; font-size: 11.5px; font-weight: 700; }
/* boutons réservés aux comptes : grisés avec un petit cadenas */
.ic-btn.locked { opacity: .55; }
.ic-btn.locked .lk { position: absolute; right: 5px; bottom: 5px; width: 15px; height: 15px; border-radius: 50%; display: grid; place-items: center; background: #3a3328; color: #e6dcc6; }
.ic-btn.locked .lk svg { width: 9px; height: 9px; }
.nav-r .guestgo { white-space: nowrap; }
@media (max-width: 700px) { .nav-r .guestgo { display: none; } } /* (téléphone : le bouton est sur l'accueil et la page de connexion) */
/* le petit bandeau « tu joues en invité », qu'on peut fermer ; jamais pendant une partie */
.guestbar { position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 24px); padding: 8px 8px 8px 14px; border-radius: 14px; background: rgba(15, 30, 24, .94); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .35), 0 14px 30px -10px rgba(0, 0, 0, .7); font-size: 13.5px; color: var(--chalk); }
.guestbar > span { display: flex; align-items: center; gap: 7px; } .guestbar > span svg { width: 16px; height: 16px; color: var(--brass); flex: none; }
.guestbar .link { color: var(--brass); font-weight: 700; white-space: nowrap; }
.guestbar .x { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: var(--chalk-2); } .guestbar .x svg { width: 15px; height: 15px; }
body.in-game .guestbar { display: none; }
.guestbox { display: grid; gap: 6px; margin-top: 10px; } .guestbox .tiny { margin: 0; }
/* pour un invité : pas de vocal, pas de menu « volume / signaler » sur les autres joueurs */
body.guest .pbadge, body.guest .vcslot { display: none !important; }
/* Admin › Comptes : l'interrupteur du mode invité */
.guestsw { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px; margin-bottom: 14px; }
.guestsw > div { display: grid; gap: 3px; } .guestsw .dim { font-size: 13px; }
@media (max-width: 640px) { .guestbar { left: 12px; right: 12px; transform: none; max-width: none; font-size: 12.5px; gap: 6px; } .guestbar > span { flex: 1; min-width: 0; } }

/* Black Rat, étape 24 : la salle autour de la table (public/bjrooms.js) — mur du fond et sol, calés sur le bord de la table */
.bjroom .bjwall { position: absolute; left: 0; right: 0; top: 0; height: var(--wallH, 36%); overflow: hidden; }
.bjroom .bjfloor { position: absolute; left: 0; right: 0; top: var(--wallH, 36%); bottom: 0; overflow: hidden; }
.bjroom .bjwall .bjsc, .bjroom .bjfloor .bjsc { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bjroom .vign { z-index: 1; box-shadow: inset 0 0 90px 10px rgba(0, 0, 0, .45); background: none; }
.bjroom::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 110px; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, .32), transparent); }
.bjtable[data-small="1"] .bjroom::after { height: 90px; }
.dp-art .bjsc { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dp-art .bjsc *, .bjthumb * { animation: none !important; }

/* Quiz, étape 25 : les thèmes au choix (réglages de la partie) */
.thchips { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 6px; }
.thchip { position: relative; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 10px; border-radius: 11px; text-align: left; font-size: 13.5px; font-weight: 600; line-height: 1.15; color: var(--ink-3, #6b6257); background: transparent; box-shadow: inset 0 0 0 1.5px rgba(26, 22, 17, .16); transition: background .2s, color .2s, box-shadow .2s; }
.thchip svg { flex: none; width: 17px; height: 17px; opacity: .55; }
.thchip span { flex: 1; min-width: 0; }
.thchip small { flex: none; font-size: 11.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: rgba(26, 22, 17, .07); }
.thchip.on { color: var(--paper); background: var(--ink); box-shadow: none; }
.thchip.on svg { opacity: 1; color: #f2d58a; }
.thchip.on small { background: rgba(255, 255, 255, .14); }
button.thchip:not(.on) span { text-decoration: line-through; text-decoration-color: rgba(26, 22, 17, .35); }
button.thchip:hover { box-shadow: inset 0 0 0 1.5px rgba(26, 22, 17, .4); }
.thchips.ro { display: flex; flex-wrap: wrap; }
.thchips.ro .thchip { min-height: 32px; padding: 4px 10px; font-size: 13px; }
.thall { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.thall .thpool { margin-left: auto; font-size: 12.5px; color: var(--ink-2); }
@media (max-width: 560px) { .thchips { grid-template-columns: 1fr 1fr; } .thchip { font-size: 12.5px; padding: 6px 8px; gap: 6px; } .thall .thpool { margin-left: 0; width: 100%; } }

/* Quiz, étape 25 : l'image de la réponse, à côté du texte (cadre fixe : rien ne saute pendant le chargement) */
.qreveal .qrt { display: grid; gap: 8px; justify-items: start; min-width: 0; }
.qreveal.wimg { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 18px; justify-items: stretch; }
.qrimg { display: block; width: 210px; aspect-ratio: 400 / 270; border-radius: 12px; overflow: hidden; background: rgba(255, 255, 255, .06); box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .8), inset 0 0 0 1px rgba(255, 255, 255, .14); }
.qrimg img { display: block; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: scale(1.04); transition: opacity .45s ease, transform .7s var(--ease-out, ease); }
.qrimg.in img { opacity: 1; transform: none; }
@media (max-width: 560px) { .qreveal.wimg { column-gap: 12px; } .qrimg { width: 124px; border-radius: 10px; } }
@media (prefers-reduced-motion: reduce) { .qrimg img { transform: none; transition: opacity .2s; } }

/* Profil (étape 26) : supprimer mon compte */
.sheet.danger-zone { box-shadow: inset 0 0 0 1px rgba(255, 106, 85, .35); }
.btn.ghost.danger { --bg: transparent; --fg: #ff8a78; box-shadow: inset 0 0 0 1.5px rgba(255, 106, 85, .55); }

/* Color Rats (étape 27) : plus de lampe sur le tapis ; le joueur dont c'est le tour a un halo doux centré sur son avatar,
   en plus de l'anneau du chrono, du léger agrandissement et de son nom sur fond doré */
.gtable .seat .sav::before { content: ""; position: absolute; left: 50%; top: 50%; width: 190%; height: 190%; transform: translate(-50%, -50%) scale(.6); border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 214, 130, .55), rgba(255, 214, 130, .18) 55%, transparent); opacity: 0; transition: opacity .35s, transform .45s var(--ease-out, ease); pointer-events: none; z-index: -1; }
.gtable .seat.turn .sav::before { opacity: 1; transform: translate(-50%, -50%) scale(1); animation: turnglow 1.8s ease-in-out infinite alternate; }
@keyframes turnglow { from { opacity: .75; } to { opacity: 1; } }
#g-me.turn { box-shadow: inset 0 0 0 2px var(--brass), 0 0 28px -4px rgba(255, 210, 120, .55); }
@media (prefers-reduced-motion: reduce) { .gtable .seat.turn .sav::before { animation: none; } }

/* ---- panneau des réglages (étape 27) : groupes, lignes compactes, avancés repliés ---- */
.sx { container-type: inline-size; display: grid; gap: 14px; min-width: 0; }
.sx .scols { display: grid; gap: 14px; }
@container (min-width: 640px) { .sx .scols.scols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 30px; } }
.sx .scol { display: grid; gap: 14px; align-content: start; min-width: 0; }
.sx .scol:empty { display: none; }
.sx, .sx .scols, .sx .scol, .sgrp, .sgb { grid-template-columns: minmax(0, 1fr); } /* (un texte sur une ligne ne doit pas élargir la colonne) */
.sgb { display: grid; min-width: 0; }
.sgrp { display: grid; min-width: 0; }
.sghead { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 15.5px/1.2 var(--display); letter-spacing: -.005em; color: var(--ink); }
.sghead::before { content: ""; width: 7px; height: 7px; border-radius: 1.5px; transform: rotate(45deg); background: var(--brass); flex: none; }
.sgrp > small { margin: 3px 0 6px 15px; color: var(--ink-2); font-size: 12.5px; line-height: 1.3; }
.sx .optrow { flex-wrap: wrap; gap: 6px 12px; min-height: 50px; padding: 7px 0; border-bottom: 1px dashed rgba(26, 22, 17, .13); }
.sx .sgb > .optrow:not(:has(~ .optrow:not([hidden]))) { border-bottom: 0; } /* (la dernière ligne visible du groupe) */
.sx .sl { flex: 1 1 150px; min-width: 0; }
.sx .optrow b { font-size: 14.5px; font-weight: 650; }
.sx .optrow .sl small { display: block; margin-top: 1px; font-size: 12.5px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx .optrow.col { display: grid; gap: 8px; min-height: 0; padding: 6px 0 8px; }
.sx .optrow .val { font-size: 13.5px; }
.sx .toggle { width: 44px; height: 26px; border-radius: 13px; }
.sx .toggle::after { left: 3px; top: 3px; width: 20px; height: 20px; }
.sx .toggle[aria-checked="true"]::after { transform: translateX(18px); }
.sx .stepper { padding: 3px; gap: 2px; border-radius: 11px; }
.sx .stepper button { width: 32px; height: 32px; border-radius: 9px; font-size: 19px; }
.sx .stepper output { min-width: 34px; font-size: 20px; }
.sx .seg { padding: 3px; gap: 2px; border-radius: 11px; }
.sx .seg button { height: 32px; padding: 0 11px; border-radius: 8px; font-size: 13px; }
.sx .seg .ind { top: 3px; bottom: 3px; border-radius: 8px; }
.sx .mchips { gap: 5px; }
.sx .mchip { height: 30px; padding: 0 10px; border-radius: 9px; font-size: 13px; }
.sx .thchips { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 5px; }
.sx .thchip { min-height: 32px; padding: 4px 9px; border-radius: 9px; font-size: 13px; gap: 7px; }
.sx .thchip svg { width: 15px; height: 15px; }
.sx .thall { margin-top: 4px; }
.sx .decopick { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; }
.sx .dp { gap: 4px; padding: 4px 4px 6px; border-radius: 11px; }
.sx .dp b { font-size: 11.5px; line-height: 1.15; }
.sx .dp-art { border-radius: 8px; }
.sgrp.adv { padding: 0 12px; border-radius: 12px; background: rgba(26, 22, 17, .045); }
.sgrp.adv summary { display: flex; align-items: center; gap: 10px; min-height: 44px; list-style: none; cursor: pointer; }
.sgrp.adv summary::-webkit-details-marker { display: none; }
.sgrp.adv summary .sghead { flex: none; }
.sgrp.adv summary small { flex: 1; min-width: 0; color: var(--ink-2); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sgrp.adv summary svg { flex: none; width: 18px; height: 18px; color: var(--ink-2); transition: transform .3s var(--ease-out); }
.sgrp.adv[open] summary svg { transform: rotate(180deg); }
.sgrp.adv[open] summary small { visibility: hidden; }
.sgrp.adv .sgb { border-top: 1px dashed rgba(26, 22, 17, .13); padding-bottom: 4px; }
.sgrp.adv summary:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; border-radius: 8px; }
@media (max-width: 600px) {
  .sx .decopick { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 116px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: 4px; }
  .sx .dp { scroll-snap-align: start; }
  .sx .optrow .sl small { white-space: normal; }
}
/* la fenêtre « Nouvelle partie » : en-tête fixe, réglages qui défilent, « Créer la partie » toujours visible en bas */
.modal.setmodal { width: min(880px, 100%); max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); padding: 0; gap: 0; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
.setmodal .smhead { display: grid; gap: 6px; padding: 22px 64px 10px 28px; }
.setmodal .smhead h3 { font-size: 28px; }
.setmodal .smbody { display: grid; gap: 12px; align-content: start; overflow-y: auto; overscroll-behavior: contain; padding: 6px 28px 16px; }
.setmodal .smbody .note { padding: 8px 12px; font-size: 13px; }
.setmodal .smfoot { display: flex; align-items: center; gap: 14px; padding: 12px 28px 16px; border-top: 1px solid rgba(26, 22, 17, .12); box-shadow: 0 -14px 22px -18px rgba(26, 22, 17, .4); }
.setmodal .smfoot .note { flex: 1; min-width: 0; padding: 8px 12px; font-size: 12.5px; }
.setmodal .smfoot .note svg { width: 16px; height: 16px; }
.setmodal .smfoot .acts { margin: 0; flex-wrap: nowrap; flex: none; }
@media (max-width: 600px) {
  .scrim:has(.setmodal) { padding: 8px; }
  .modal.setmodal { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
  .setmodal .smhead { padding: 16px 60px 6px 18px; }
  .setmodal .smhead h3 { font-size: 24px; }
  .setmodal .smbody { padding: 2px 18px 12px; }
  .setmodal .smfoot { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .setmodal .smfoot .acts .btn { flex: 1; }
}
/* salon : « Lancer la partie » / « Quitter » restent visibles en bas de l'écran aussi sur ordinateur (réglages longs du Quiz) */
@media (min-width: 901px) {
  .lacts { position: sticky; z-index: 5; bottom: 14px; padding: 10px; border-radius: 20px; background: rgba(10, 29, 23, .86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px var(--line-2), 0 20px 40px -16px #000; }
}
.gtable .seat.turn .sinfo { position: relative; z-index: 3; margin-top: 5px; } /* (le nom passe devant l'anneau du chrono) */

/* ---- étape 28 : barre du haut des jeux, nom et code parfaitement centrés (Quitter | titre | le reste) ---- */
.gbar, .lbar, .qbar, .bjbar, .nvbar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 12px; }
.gbar > :first-child, .lbar > :first-child, .qbar > :first-child, .bjbar > :first-child, .nvbar > :first-child { justify-self: start; }
.gname, .lphase, .qtitle, .bjname, .nvname { grid-column: 2; margin: 0; justify-content: center; text-align: center; min-width: 0; }
.barend { grid-column: 3; justify-self: end; display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; }
.barend .nvstatus { margin-left: 0; }
@media (max-width: 640px) {
  .bjname { align-items: center; }
  .nvbar .barend { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
}
/* ---- étape 28 : le cadre vert du menu du haut grandit avec son contenu (vocal compris), rien ne dépasse ---- */
:root { --nav-base: 68px; }
.nav-in { height: auto; min-height: var(--nav-base); padding-block: 6px; }
.nav-r { flex: 0 1 auto; min-width: 0; flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
.vcdock { flex-wrap: wrap; justify-content: center; max-width: 100%; }
.vcpop.paper { position: fixed; } /* (la règle « .paper { position: relative } » plus haut la faisait tomber en bas de la page) */
/* étape 28 : le pseudo d'un joueur ouvre son profil */
:is(.seat .sinfo b, .lseat > b, .lseat .lnm > b, .desk .dn, .bjplate b, .nvside > b, .ranking li > b, .who > b, .mates > span) { cursor: pointer; }
:is(.seat .sinfo b, .lseat > b, .lseat .lnm > b, .desk .dn, .bjplate b, .nvside > b, .ranking li > b, .who > b):hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
/* étape 28 : le projecteur de l'écran d'entrée et de l'ouverture n'est plus découpé (avant : un trapèze coupé net en bas).
   Un cône de lumière aux bords doux (dégradé conique) + une flaque de lumière derrière le logo, qui s'éteignent
   doucement vers le bas (masque en dégradé) : aucune coupure, même pendant l'animation. */
.gate .spot, .intro .spot {
  --a: .11; top: -14vh; width: min(130vw, 1100px); height: 112vh; clip-path: none;
  background:
    radial-gradient(34% 30% at 50% 50%, rgba(255, 226, 160, calc(var(--a) * 1.15)), rgba(255, 226, 160, 0) 100%),
    conic-gradient(from 180deg at 50% 0%, rgba(255, 226, 160, var(--a)) 0deg, rgba(255, 226, 160, calc(var(--a) * .55)) 11deg, rgba(255, 226, 160, 0) 24deg, rgba(255, 226, 160, 0) 336deg, rgba(255, 226, 160, calc(var(--a) * .55)) 349deg, rgba(255, 226, 160, var(--a)) 360deg);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 38%, rgba(0, 0, 0, .55) 62%, transparent 88%);
  mask-image: linear-gradient(180deg, #000 0%, #000 38%, rgba(0, 0, 0, .55) 62%, transparent 88%);
}
.intro .spot { --a: .17; transform-origin: 50% 0; }
/* ---- étape 28 : accueil ---- */
.marquee .tr { padding-right: 44px; } /* (deux copies + un écart en fin de piste : le décalage de 50 % tombe pile sur une boucle, plus de saut) */
.marquee .tr { will-change: transform; backface-visibility: hidden; }
.eyebrow { padding-left: 2px; } /* (le petit carreau tourné dépassait de 1,5 px et l'accueil le coupait) */
/* « Une idée de jeu ? » / « Donne ton avis » : un dessin qui vit doucement, un bouton clair */
.duo a { min-height: 250px; padding: 30px 30px 26px; align-content: stretch; grid-template-rows: auto 1fr auto; gap: 18px; isolation: isolate; box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .9); }
.duo a:nth-child(1) { background: radial-gradient(120% 90% at 100% 0%, #f1d27e, var(--brass) 55%, #b98f3e); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 30px 60px -36px rgba(0, 0, 0, .9); }
.duo a:nth-child(2) { background: radial-gradient(120% 90% at 100% 0%, #1f5444, var(--table-3) 60%); }
.duo a::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .16) 50%, transparent 60%) no-repeat; background-size: 250% 100%; background-position: 130% 0; transition: background-position .9s var(--ease-out); }
.duo a:hover::after { background-position: -30% 0; }
.duo h3 { font-size: clamp(28px, 3vw, 40px); }
.duo p { margin-top: 8px; font-size: 15px; }
.duo .go { width: auto; height: 44px; padding: 0 8px 0 18px; border-radius: 999px; justify-self: start; display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14.5px; }
.duo .go svg { width: 28px; height: 28px; padding: 6px; border-radius: 50%; background: rgba(0, 0, 0, .14); transition: transform .5s var(--ease-out); }
.duo a:hover .go { transform: none; }
.duo a:hover .go svg { transform: rotate(-45deg); }
.duo-idea .go { background: rgba(26, 22, 17, .1); }
.duo-avis .go { background: rgba(236, 229, 212, .08); box-shadow: inset 0 0 0 1px var(--line-2); }
.duo-art { position: relative; height: 54px; display: flex; align-items: center; gap: 6px; }
.duo-art .bulb { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: rgba(26, 22, 17, .12); color: var(--ink); animation: bulbglow 3.6s ease-in-out infinite; }
.duo-art .bulb svg { width: 28px; height: 28px; }
.duo-art .spark { position: absolute; left: 27px; top: 27px; width: 6px; height: 6px; border-radius: 1.5px; background: #fff6d8; transform: rotate(45deg); opacity: 0; animation: sparkup 3.6s ease-out infinite; }
.duo-art .spark.s2 { animation-delay: 1.2s; } .duo-art .spark.s3 { animation-delay: 2.4s; }
@keyframes bulbglow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 246, 216, 0); } 50% { box-shadow: 0 0 26px 4px rgba(255, 246, 216, .55); } }
@keyframes sparkup { 0% { opacity: 0; transform: translate(0, 0) rotate(45deg) scale(.4); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx, 34px), -34px) rotate(45deg) scale(1); } }
.duo-art .spark.s1 { --dx: 36px; } .duo-art .spark.s2 { --dx: 22px; } .duo-art .spark.s3 { --dx: 44px; }
.duo-art .star { width: 30px; height: 30px; color: rgba(236, 229, 212, .25); animation: starfill 4.5s ease-in-out infinite; animation-delay: calc(var(--i) * .18s); }
.duo-art .star svg { width: 100%; height: 100%; }
@keyframes starfill { 0%, 12% { color: rgba(236, 229, 212, .22); transform: none; } 22%, 78% { color: var(--brass); transform: scale(1.12); } 30%, 72% { transform: none; } 90%, 100% { color: rgba(236, 229, 212, .22); } }
@media (prefers-reduced-motion: reduce) { .duo-art .bulb, .duo-art .spark, .duo-art .star { animation: none; } .duo-art .star { color: var(--brass); } }
/* (étape 146, demande de Nico) « Une idée de jeu ? » en carton crème, comme les autres cartes ; le laiton reste en accent */
.duo a.duo-idea { color: var(--ink); background: radial-gradient(120% 90% at 100% 0%, #fffaf0, var(--paper) 55%, var(--paper-2));
  box-shadow: inset 0 0 0 1px rgba(180, 141, 69, .35), inset 0 1px 0 #fff, 0 30px 60px -36px rgba(0, 0, 0, .9); }
.duo-idea p { color: var(--ink-2); opacity: 1; }
.duo-idea .duo-art .bulb { color: #2a1d06; background: radial-gradient(circle at 35% 30%, #f6dc95, var(--brass) 60%, var(--brass-2)); animation-name: bulbglow2; }
.duo-idea .duo-art .spark { background: var(--brass); }
.duo-idea .go { background: var(--brass); color: #2a1d06; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 3px 0 var(--brass-2); }
.duo-idea .go svg { background: rgba(42, 29, 6, .14); }
@keyframes bulbglow2 { 0%, 100% { box-shadow: 0 3px 0 #8f6a2c, 0 0 0 0 rgba(214, 176, 102, 0); } 50% { box-shadow: 0 3px 0 #8f6a2c, 0 0 24px 4px rgba(214, 176, 102, .55); } }
/* ---- étape 28 : classement (podium, top 10 à déplier, ma place, explications en bas) ---- */
.lb-more { margin-top: 18px; border-radius: 16px; background: rgba(16, 44, 35, .4); box-shadow: inset 0 0 0 1px var(--line); }
.lb-more summary { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 18px; list-style: none; cursor: pointer; font-weight: 700; }
.lb-more summary::-webkit-details-marker { display: none; }
.lb-more summary small { flex: 1; color: var(--chalk-3); font-weight: 500; font-size: 13px; }
.lb-more summary svg { width: 20px; height: 20px; color: var(--chalk-3); transition: transform .3s var(--ease-out); }
.lb-more[open] summary svg { transform: rotate(180deg); }
.lb-more summary:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; border-radius: 16px; }
.lb-more .lb { padding: 0 10px 10px; }
.lb-mine { margin-top: 22px; display: grid; gap: 8px; }
.lb-mine-h { font-weight: 700; color: var(--brass); display: inline-flex; align-items: center; gap: 8px; }
.lb-mine-h::before { content: ""; width: 7px; height: 7px; border-radius: 1.5px; transform: rotate(45deg); background: currentColor; }
.lb-mine .lb-row.me { background: rgba(214, 176, 102, .14); }
.lb-mine.none p { margin: 0; }
.lb-row.me { background: rgba(214, 176, 102, .14); box-shadow: inset 0 0 0 1.5px var(--brass), 0 0 24px -8px rgba(214, 176, 102, .6); }
.pod.me .who b { color: var(--brass); }
.pod.me .who .av { box-shadow: 0 0 0 3px var(--brass); }
.lb-foot { margin-top: 34px; display: grid; gap: 10px; }
.lb-foot .lb-since { margin: 0; font-size: 13.5px; }
/* ---- étape 28 : la courbe des rats ---- */
.ratpop { width: min(320px, calc(100vw - 24px)); }
.rp-chart { display: grid; gap: 8px; padding: 12px 12px 8px; border-radius: 14px; background: rgba(26, 22, 17, .05); box-shadow: inset 0 0 0 1px rgba(26, 22, 17, .08); }
.rp-ch-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 700; font-size: 13.5px; }
.rp-ch-h .seg { padding: 2px; gap: 2px; border-radius: 9px; }
.rp-ch-h .seg button { height: 26px; padding: 0 9px; font-size: 12px; border-radius: 7px; }
.rp-ch-h .seg .ind { top: 2px; bottom: 2px; border-radius: 7px; }
.rp-plot { position: relative; min-height: 120px; display: grid; }
.rp-wait { place-self: center; color: var(--ink-2); }
.rp-none { margin: 0; place-self: center; text-align: center; font-size: 13px; color: var(--ink-2); }
.rp-svg { width: 100%; height: auto; display: block; overflow: visible; touch-action: pan-y; cursor: crosshair; }
.rp-svg.up { color: #2f8461; } .rp-svg.down { color: #b4553f; }
.rp-svg .rp-line { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; }
.rp-svg .rp-dot { fill: currentColor; stroke: var(--paper); stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.rp-svg .rp-base { stroke: rgba(26, 22, 17, .15); stroke-width: 1; }
.rp-svg .rp-ax { font: 500 10px/1 var(--body); fill: var(--ink-2); }
.rp-svg .rp-cur { stroke: rgba(26, 22, 17, .35); stroke-width: 1; stroke-dasharray: 3 3; }
.rp-tip { position: absolute; top: -6px; padding: 4px 8px; border-radius: 8px; background: var(--ink); color: var(--paper); font-size: 12px; white-space: nowrap; pointer-events: none; transform: translateY(-100%); }
.rp-tip b { font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .rp-svg .rp-line { stroke-dasharray: none; } }
/* ---- étape 28 : badges des rôles de l'équipe (chacun sa couleur, lisibles sur le tapis et sur le carton) ---- */
.role.modo { background: #3c6fd6; color: #fff; }
.role.supp { background: #2f9e74; color: #fff; }
.role.gerant { background: rgba(61, 224, 166, .12); }
.paper .role.gerant, .chatp .role.gerant { color: #1f7a55; box-shadow: inset 0 0 0 1.5px #2f9e74; background: rgba(47, 158, 116, .1); }
.cp-bub b .role { height: 16px; padding: 0 5px; margin-left: 6px; font-size: 9px; letter-spacing: .06em; vertical-align: 1px; border-radius: 4px; }

/* ---- étape 28 : la fenêtre des tchats, crème comme les fenêtres d'écriture (suggestions, avis), déplaçable ---- */
.chatp { background: var(--paper); color: var(--ink); box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 30px 70px rgba(0, 0, 0, .6), 0 0 0 1px rgba(26, 22, 17, .12); }
.chatp.dragging { box-shadow: 0 40px 90px rgba(0, 0, 0, .7), 0 0 0 2px var(--brass); }
.chatp .cp-h { border-bottom-color: rgba(26, 22, 17, .1); cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; }
.chatp.dragging .cp-h { cursor: grabbing; }
.cp-grip { width: 10px; height: 18px; flex: none; margin-right: -2px; background-image: radial-gradient(circle, rgba(26, 22, 17, .35) 1.2px, transparent 1.6px); background-size: 5px 6px; }
.chatp .cp-x { background: rgba(26, 22, 17, .06); color: var(--ink); } .chatp .cp-x:hover { background: rgba(26, 22, 17, .12); }
.chatp .cp-x.live { background: rgba(47, 158, 116, .18); color: #1f7a55; }
.chatp .btn.xs { --fg: var(--ink); box-shadow: inset 0 0 0 1px rgba(26, 22, 17, .22); }
.chatp .cp-item:hover { background: rgba(26, 22, 17, .06); }
.chatp .cp-ico { background: rgba(214, 176, 102, .22); color: #8a5e1c; }
.chatp .dim { color: rgba(26, 22, 17, .55); }
.chatp .cp-load { background: linear-gradient(90deg, rgba(26, 22, 17, .04), rgba(26, 22, 17, .1), rgba(26, 22, 17, .04)); background-size: 200% 100%; }
.chatp .cp-msgs { background: linear-gradient(180deg, rgba(26, 22, 17, .035), transparent 40%); }
.chatp .cp-bub { background: #fffaf0; color: #1f1a12; box-shadow: 0 0 0 1px rgba(26, 22, 17, .1), 0 6px 14px -12px rgba(0, 0, 0, .6); }
.chatp .cp-who .av { box-shadow: 0 0 0 2px var(--paper); }
.chatp .cp-day { color: var(--ink-2); background: rgba(26, 22, 17, .06); }
.chatp .cp-typing { color: var(--ink-2); } .chatp .cp-typing .dots { background: #fffaf0; box-shadow: 0 0 0 1px rgba(26, 22, 17, .1); }
.chatp .cp-seen { color: var(--ink-2); } .chatp .cp-seen .cp-sav .av { box-shadow: 0 0 0 1.5px var(--paper); }
.chatp .cp-form { border-top-color: rgba(26, 22, 17, .1); }
.chatp .inp { background: rgba(26, 22, 17, .05); box-shadow: inset 0 0 0 1px rgba(26, 22, 17, .16); color: var(--ink); }
.chatp .inp::placeholder { color: rgba(26, 22, 17, .42); }
.chatp .inp:focus { box-shadow: inset 0 0 0 2px var(--ink); background: #fffaf0; }
.chatp .cp-title { color: var(--ink); }
/* les catégories : des onglets, une catégorie par page */
.cp-tabs { display: flex; gap: 4px; padding: 8px 10px 0; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid rgba(26, 22, 17, .1); }
.cp-tabs::-webkit-scrollbar { display: none; }
.cp-tabs button { position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 11px; border-radius: 10px 10px 0 0; font-size: 13.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; transition: color .2s, background .2s; }
.cp-tabs button:hover { color: var(--ink); background: rgba(26, 22, 17, .04); }
.cp-tabs button.on { color: var(--ink); }
.cp-tabs button.on::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--brass); }
.cp-tabs .cp-un { min-width: 18px; height: 18px; line-height: 18px; font-size: 10px; padding: 0 5px; }
.chatp { grid-template-rows: auto auto 1fr auto; }
.chatp:has(.cp-msgs) { grid-template-rows: auto 1fr auto auto; }
.cp-lead { margin: 2px 6px 4px; font-size: 13px; color: var(--ink-2); }
.cp-item.big { padding: 10px; gap: 12px; }
.cp-item.big .cp-ico { width: 40px; height: 40px; border-radius: 12px; font: 800 13px/1 var(--body); letter-spacing: .04em; }
.cp-item.big .cp-ico svg { width: 20px; height: 20px; }
.cp-ico.lang { background: rgba(26, 22, 17, .08); color: var(--ink); }
.cp-ico.game { background: color-mix(in srgb, var(--acc) 20%, transparent); color: color-mix(in srgb, var(--acc) 70%, #1a1611); }
.cp-it { display: grid; gap: 2px; min-width: 0; flex: 1; }
.cp-it b { font-size: 15px; } .cp-it small { font-size: 12.5px; color: var(--ink-2); }
.cp-gacts { padding: 2px 4px 6px; justify-content: flex-end; }
.cp-gacts .btn svg { width: 14px; height: 14px; }
/* l'équipe : supprimer un message (au survol, ou toujours visible au doigt) */
.cp-m { position: relative; }
.cp-del { align-self: center; flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: #b4553f; opacity: 0; transition: opacity .2s, background .2s; }
.cp-del svg { width: 14px; height: 14px; }
.cp-m:hover .cp-del, .cp-del:focus-visible { opacity: 1; } .cp-del:hover { background: rgba(180, 85, 63, .12); }
@media (hover: none) { .cp-del { opacity: .7; } }
/* ---- étape 28 : page Amis (recherche, en ligne / hors ligne, rejoindre) ---- */
.fsearch { position: relative; margin: 34px 0 -8px; max-width: 460px; }
.fsearch .fs-ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--chalk-3); display: grid; pointer-events: none; }
.fsearch .fs-ic svg { width: 18px; height: 18px; }
.fsearch .inp { padding-left: 42px; }
.fsearch .inp::-webkit-search-cancel-button { filter: invert(1) opacity(.6); }
.fsub { display: flex; align-items: center; gap: 8px; margin: 18px 4px 8px; font-size: 13.5px; font-weight: 700; color: var(--chalk-3); }
.fsub b { font-weight: 600; opacity: .8; }
.fsub.on { color: var(--mint); }
.fsub.on i { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 3px rgba(61, 224, 166, .2); }
.fr.friend { cursor: pointer; transition: background .2s; }
.fr.friend:hover { background: rgba(22, 58, 47, .8); }
.fr.friend:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.fr .fjoin { background: var(--brass); color: var(--ink); box-shadow: none; }
.fr .fmore { width: 34px; padding: 0; justify-content: center; letter-spacing: .05em; }
.fnone { margin: 10px 4px; }
.vcpop .pop-col { display: grid; gap: 6px; }
.vcpop .pop-col .btn { justify-content: flex-start; }
/* ---- étape 28 : profil, colonne de droite en onglets ---- */
.ptabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 16px; background: rgba(0, 0, 0, .22); box-shadow: inset 0 0 0 1px var(--line); }
.ptabs button { display: grid; justify-items: center; gap: 4px; padding: 9px 4px 8px; border-radius: 12px; color: var(--chalk-2); font-size: 12.5px; font-weight: 600; line-height: 1.15; text-align: center; transition: background .2s, color .2s; min-width: 0; }
.ptabs button svg { width: 18px; height: 18px; }
.ptabs button span { max-width: 100%; overflow-wrap: anywhere; }
.ptabs button:hover { color: var(--chalk); background: rgba(236, 229, 212, .06); }
.ptabs button.on { color: var(--ink); background: var(--paper); box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .7); }
.ptabs button:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.ptabs-col > .sheet.pt-off { display: none !important; }
.ptabs-col .sheet { padding: 22px; }
.ptabs-col .sheet p, .ptabs-col .sheet small { overflow-wrap: anywhere; }
.ptabs-col .sheet .btn { max-width: 100%; height: auto; min-height: 40px; padding-block: 8px; white-space: normal; text-align: left; line-height: 1.25; }
.ptabs-col .row-c { flex-wrap: wrap; }
.dev { grid-template-columns: auto minmax(0, 1fr) auto; }
.dev > div { min-width: 0; } .dev b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev .sub { overflow-wrap: anywhere; }
.plang { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.plang .lp-opt { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border-radius: 12px; font-weight: 600; color: var(--chalk); box-shadow: inset 0 0 0 1px var(--line-2); }
.plang .lp-opt.on { background: rgba(214, 176, 102, .16); box-shadow: inset 0 0 0 1.5px var(--brass); }
.plang .lp-opt svg, .plang .lp-opt img { width: 24px; height: auto; border-radius: 3px; }
@media (max-width: 420px) { .ptabs button { font-size: 11.5px; } .ptabs-col .sheet { padding: 18px; } }
/* ---- étape 28 : le Support en crème (comme les fenêtres des suggestions et des avis) ---- */
.paper.suplist, .paper.supconv { border-radius: 20px; }
.paper .supit { box-shadow: inset 0 0 0 1px rgba(26, 22, 17, .14); color: var(--ink); }
.paper .supit:hover { background: rgba(26, 22, 17, .05); }
.paper .supit.on { background: rgba(214, 176, 102, .2); box-shadow: inset 0 0 0 1.5px var(--brass-2, #b8913f); }
.paper .supit small, .paper .supt, .paper .supwho small { color: var(--ink-2); }
.paper .supb { background: #fffaf0; box-shadow: inset 0 0 0 1px rgba(26, 22, 17, .12); color: var(--ink); }
.paper .supm.me .supb { background: linear-gradient(160deg, #f6dd98, #e9c46e); box-shadow: none; }
.paper .supm.staff .supb { box-shadow: inset 0 0 0 1.5px rgba(47, 158, 116, .55); }
.paper .supwho { color: #1f7a55; }
.paper .supst.st-wait { background: rgba(184, 145, 63, .18); color: #7a5512; }
.paper .supst.st-doing { background: rgba(60, 111, 214, .14); color: #2a55a8; }
.paper .supst.st-done { background: rgba(47, 158, 116, .16); color: #1f7a55; }
.paper .suph .dim { color: rgba(26, 22, 17, .55); }
.paper.supconv .note { background: rgba(26, 22, 17, .06); color: var(--ink-2); }
.paper .supform .btn.xs { --fg: var(--ink); }
/* ---- étape 28 : la fenêtre « Signaler un bug », plus propre ---- */
.modal.bugmodal { width: min(540px, 100%); gap: 16px; }
/* (étape 146) le bandeau vert « tapis » en haut des fenêtres du soutien et du bug */
.modal.has-band { overflow: hidden; padding-top: 0; /* (étape 148) le haut du fond est vert : plus de coins crème qui dépassent autour du bandeau */
  background: linear-gradient(180deg, #17402f 0, #17402f 70px, var(--paper) 70px); box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .95), 0 8px 18px -10px rgba(0, 0, 0, .5); }
.mband { position: relative; margin: 0 -30px 4px; padding: 26px 64px 26px 30px; display: flex; align-items: center; gap: 16px; color: var(--chalk);
  background: radial-gradient(120% 160% at 0% 0%, #1f5444, var(--table-2) 55%, var(--table)); }
.mband { z-index: 1; box-shadow: 0 12px 20px -14px rgba(0, 0, 0, .55); } /* (étape 148) une séparation nette : un filet doré qui s'efface sur les bords, et une ombre douce sur le crème */
.mband::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, rgba(214, 176, 102, 0), var(--brass) 18%, #f3d995 50%, var(--brass) 82%, rgba(214, 176, 102, 0)); }
.mband h3 { color: var(--chalk); font-size: clamp(26px, 4.4vw, 34px); }
.mband p { margin: 5px 0 0; color: var(--chalk-2); font-size: 14px; line-height: 1.45; }
.modal.has-band > .x { color: var(--chalk-2); z-index: 2; } .modal.has-band > .x:hover { background: rgba(236, 229, 212, .12); color: var(--chalk); }
.bugmodal .bg-ico { color: #2a1d06; background: radial-gradient(circle at 35% 30%, #f6dc95, var(--brass) 60%, var(--brass-2)); box-shadow: 0 4px 0 #8f6a2c, 0 14px 26px -12px rgba(0, 0, 0, .7); }
.bugmodal .bg-step { position: relative; }
.bugmodal .bg-step:has(+ .bg-step)::before { content: ""; position: absolute; left: 12px; top: 34px; bottom: -12px; border-left: 2px dotted rgba(180, 141, 69, .5); }
.bugmodal .bg-n { color: #2a1d06; background: var(--brass); box-shadow: 0 2px 0 var(--brass-2); }
.bugmodal .imgpick .ip-add { border: 1.5px dashed rgba(180, 141, 69, .6); box-shadow: none; background: rgba(214, 176, 102, .08); }
@media (max-width: 520px) { .mband { padding: 22px 56px 22px 20px; margin-inline: -30px; } }
.bg-head { display: flex; align-items: center; gap: 14px; padding-right: 36px; }
.bg-ico { width: 52px; height: 52px; flex: none; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(160deg, #f6dd98, #d9a948); color: var(--ink); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .12); }
.bg-ico svg { width: 26px; height: 26px; }
.bg-head h3 { font-size: 28px; }
.bg-head p { margin: 4px 0 0; font-size: 14px; }
.bg-step { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; }
.bg-n { width: 26px; height: 26px; margin-top: 2px; border-radius: 50%; display: grid; place-items: center; font: 700 13px/1 var(--body); color: var(--paper); background: var(--ink); }
.bg-step .field { gap: 6px; }
.bg-step label { display: flex; align-items: baseline; gap: 8px; }
.bg-step label small { font-weight: 500; color: rgba(26, 22, 17, .5); }
.bg-c { margin-left: auto; font-size: 12px; font-weight: 500; color: rgba(26, 22, 17, .5); font-variant-numeric: tabular-nums; }
.bg-drop { position: relative; display: grid; place-items: center; min-height: 92px; border-radius: 14px; cursor: pointer; overflow: hidden; background: rgba(26, 22, 17, .03); box-shadow: inset 0 0 0 1.5px rgba(26, 22, 17, .18); background-image: repeating-linear-gradient(90deg, rgba(26, 22, 17, .2) 0 6px, transparent 6px 12px), repeating-linear-gradient(90deg, rgba(26, 22, 17, .2) 0 6px, transparent 6px 12px), repeating-linear-gradient(0deg, rgba(26, 22, 17, .2) 0 6px, transparent 6px 12px), repeating-linear-gradient(0deg, rgba(26, 22, 17, .2) 0 6px, transparent 6px 12px); background-size: 100% 1.5px, 100% 1.5px, 1.5px 100%, 1.5px 100%; background-position: 0 0, 0 100%, 0 0, 100% 0; background-repeat: no-repeat; box-shadow: none; transition: background-color .2s; }
.bg-drop:hover { background-color: rgba(214, 176, 102, .12); }
.bg-drop:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.bg-dz { display: grid; justify-items: center; gap: 2px; padding: 14px; text-align: center; color: var(--ink-2); }
.bg-dz svg { width: 22px; height: 22px; margin-bottom: 4px; color: var(--ink); }
.bg-dz b { color: var(--ink); font-size: 14.5px; } .bg-dz small { font-size: 12.5px; }
.bg-drop.has .bg-dz { display: none; }
.bg-drop img { display: block; max-width: 100%; max-height: 180px; border-radius: 10px; margin: 8px; }
.bg-imgrow { display: flex; align-items: center; gap: 10px; min-height: 0; }
.bg-imgrow:empty { display: none; }
.bg-meta { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(26, 22, 17, .05); font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.bg-meta svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }
@media (max-width: 520px) { .bg-step { grid-template-columns: minmax(0, 1fr); } .bg-n { display: none; } .bg-head h3 { font-size: 24px; } }
/* ---- étape 28 : administration ---- */
.asearch { position: relative; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 14px; }
.asearch .fs-ic { position: absolute; left: 14px; top: 23px; transform: translateY(-50%); color: var(--chalk-3); display: grid; pointer-events: none; }
.asearch .fs-ic svg { width: 18px; height: 18px; }
.asearch .inp { flex: 1 1 260px; max-width: 420px; padding-left: 42px; }
.amore-m { z-index: 60; }
.amore[open] > .amore-m { box-shadow: inset 0 0 0 1px var(--line-2), 0 24px 50px -10px #000; }
.logq { font-style: italic; overflow-wrap: anywhere; }
.logcopy { margin-top: 6px; justify-self: start; }
.bmlist { display: grid; gap: 8px; max-height: 52vh; overflow-y: auto; padding: 2px; }
.bmi { padding: 10px 12px; border-radius: 12px; background: rgba(26, 22, 17, .05); box-shadow: inset 0 0 0 1px rgba(26, 22, 17, .1); }
.bmi small { color: var(--ink-2); font-size: 12px; } .bmi p { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ======== étape 29 : le mode classé ======== */
.rk-emb { display: block; flex: none; overflow: visible; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35)); }
/* la fiche d'un rang : emblème, nom, points, barre vers le palier suivant, victoires / défaites */
.rk-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; min-width: 0; }
.rk-ce { display: grid; place-items: center; }
.rk-cb { display: grid; gap: 4px; min-width: 0; }
.rk-name { font: 800 22px/1.1 var(--display); font-variation-settings: "wdth" 80; }
.rk-card.big .rk-name { font-size: 28px; }
.rk-pts { font-size: 14px; opacity: .85; } .rk-pts b { font-size: 18px; }
.rk-prog { position: relative; height: 8px; border-radius: 99px; background: rgba(128, 128, 128, .22); overflow: hidden; margin-top: 4px; }
.rk-prog span { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, var(--brass), #f2d58a); transform-origin: left; }
.rk-prog.top span { background: linear-gradient(90deg, #b3261e, #ffd76e); }
.rk-pt { font-size: 12.5px; opacity: .75; }
.rk-wl { font-size: 13px; opacity: .8; }
.rk-shield { display: inline-flex; gap: 6px; align-items: center; font-size: 12.5px; color: #7fa6ff; font-weight: 600; }
.rk-shield svg { width: 14px; height: 14px; flex: none; }
.paper .rk-shield { color: #2a55a8; }
/* page du jeu : le bloc « Mode classé » */
.rk-hub { margin-top: 44px; display: grid; gap: 18px; }
.rk-hh { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.rk-badge { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--ink); color: #f2d58a; font-weight: 700; font-size: 13.5px; }
.rk-badge svg { width: 16px; height: 16px; }
.rk-season { display: inline-flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 13.5px; }
.rk-season > b { font: 800 18px/1 var(--display); font-variation-settings: "wdth" 80; }
.rk-season > span { opacity: .75; }
.rk-hb { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; align-items: center; }
.rk-go { display: grid; gap: 10px; justify-items: start; }
.rk-play { height: 56px; padding: 0 28px; font-size: 17px; }
.rk-cancel { display: none; }
.rk-hub[data-rqstate="search"] .rk-play, .rk-hub[data-rqstate="join"] .rk-play, .rk-hub[data-rqstate="found"] .rk-play { display: none; }
.rk-hub[data-rqstate="search"] .rk-cancel, .rk-hub[data-rqstate="join"] .rk-cancel { display: inline-flex; }
.rk-note { margin: 0; }
.paper .rk-note { background: rgba(214, 176, 102, .18); color: var(--ink-2); } .paper .rk-note b { color: var(--ink); }
@media (max-width: 760px) { .rk-hb { grid-template-columns: minmax(0, 1fr); } .rk-play { width: 100%; justify-content: center; } .rk-go { justify-items: stretch; } }
/* le badge « Classé » dans la barre du haut de la table */
.rk-tag { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px; background: linear-gradient(160deg, #ffd76e, #c8952e); color: #3a2506; font: 700 11.5px/1 var(--body); letter-spacing: .02em; align-self: center; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25), 0 4px 12px -4px rgba(255, 200, 90, .7); }
.rk-tag svg { width: 12px; height: 12px; }
/* écran de fin d'une partie classée */
.rk-end { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; padding: 14px 16px; border-radius: 16px; background: rgba(26, 22, 17, .06); }
.rk-end.win { background: linear-gradient(160deg, rgba(214, 176, 102, .28), rgba(214, 176, 102, .08)); }
.rk-eb { display: grid; gap: 4px; min-width: 0; }
.rk-delta { font: 800 30px/1 var(--display); font-variation-settings: "wdth" 80; }
.rk-delta.plus { color: #1f7a55; } .rk-delta.minus { color: #b4553f; }
.rk-fxhost { display: grid; justify-items: center; gap: 4px; min-width: 120px; perspective: 600px; }
.rk-fx { position: relative; width: 120px; height: 112px; transform-style: preserve-3d; }
.rk-fx .rk-a, .rk-fx .rk-b { position: absolute; inset: 0; display: grid; place-items: center; backface-visibility: hidden; }
.rk-fx .rk-burst { position: absolute; inset: -30px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 226, 150, .9), rgba(255, 200, 90, .35) 40%, transparent 70%); opacity: 0; pointer-events: none; }
.rk-fx.down .rk-burst { background: radial-gradient(circle, rgba(140, 160, 200, .6), transparent 70%); }
.rk-fxt { font: 800 15px/1.1 var(--display); text-align: center; }
.rk-fx.up ~ .rk-fxt { color: #8a5e1c; }
.rk-fxl { font-size: 12.5px; opacity: .75; }
@media (max-width: 480px) { .rk-end { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; } }
/* la file d'attente : la pastille (on peut se promener sur le site) et « Adversaire trouvé » */
.rqchip { position: fixed; z-index: 74; left: max(16px, env(safe-area-inset-left, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 14px; border-radius: 18px; background: var(--paper); color: var(--ink); box-shadow: 0 20px 44px -14px rgba(0, 0, 0, .8), 0 0 0 1px rgba(214, 176, 102, .5); max-width: calc(100vw - 32px); }
.rqchip[hidden] { display: none; }
.rqchip b { display: block; font-size: 14px; } .rqchip small { font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rqchip .btn.xs { --fg: var(--ink); box-shadow: inset 0 0 0 1px rgba(26, 22, 17, .25); }
.rq-spin { width: 22px; height: 22px; flex: none; border-radius: 50%; border: 3px solid rgba(214, 176, 102, .3); border-top-color: var(--brass); animation: rqspin .9s linear infinite; }
@keyframes rqspin { to { transform: rotate(360deg); } }
.rqfound { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 16px; background: rgba(4, 12, 9, .6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.rqf-card { width: min(400px, 100%); display: grid; gap: 14px; padding: 26px; }
.rqf-card h3 { font: 800 30px/1 var(--display); font-variation-settings: "wdth" 78; }
.rqf-opp { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 14px; background: rgba(26, 22, 17, .06); }
.rqf-opp b { display: block; font-size: 18px; overflow-wrap: anywhere; } .rqf-opp small { color: var(--ink-2); }
.rqf-bar { height: 6px; border-radius: 99px; background: rgba(26, 22, 17, .1); overflow: hidden; }
.rqf-bar span { display: block; height: 100%; background: linear-gradient(90deg, #b4553f, var(--brass)); transform-origin: left; }
.rqf-t { margin: 0; font-size: 13.5px; color: var(--ink-2); }
.rq-wait { font-variant-numeric: tabular-nums; opacity: .7; }
/* classement : saison, podium avec emblèmes, lignes, historique, explication */
.lb-seasonbar { display: flex; justify-content: flex-start; margin: -6px 0 18px; }
.lb-seasonbar .rk-season { padding: 8px 14px; border-radius: 999px; background: rgba(16, 44, 35, .55); box-shadow: inset 0 0 0 1px var(--line); }
.rk-podium .col { gap: 6px; }
.pod-rk { display: grid; place-items: center; }
.rk-podium .w { text-align: center; line-height: 1.2; font-size: 12.5px; }
.rk-row { grid-template-columns: 56px minmax(0, 1fr) auto; }
.rk-cell { display: flex; align-items: center; gap: 10px; }
.how-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.how-c { padding: 22px; display: grid; gap: 10px; align-content: start; }
.how-c h3 { font: 800 20px/1.1 var(--display); font-variation-settings: "wdth" 80; margin: 0; }
.how-c p, .how-c ul { margin: 0; font-size: 14.5px; line-height: 1.5; } .how-c ul { padding-left: 18px; display: grid; gap: 6px; }
.how-tiers { grid-column: 1 / -1; }
.tier-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.tier { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: rgba(0, 0, 0, .18); }
.tier > span { grid-row: 1 / 3; } .tier small { color: var(--chalk-3); font-size: 12px; }
@media (max-width: 760px) { .how-grid { grid-template-columns: minmax(0, 1fr); } }
.rk-hgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.rk-hcol { padding: 20px; display: grid; gap: 14px; align-content: start; }
.rk-hcol.soon { opacity: .7; }
.rk-hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 260px; overflow-y: auto; }
.rk-hist li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: baseline; padding: 7px 10px; border-radius: 10px; background: rgba(128, 128, 128, .12); font-size: 13.5px; }
.rk-hist small { opacity: .7; }
.rk-none { margin: 0; font-size: 13.5px; }
/* profil : les onglets du mode classé (le rang ne se voit qu'en cliquant) */
.rk-ptabs { display: grid; gap: 14px; }
.rk-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.rk-tabs button { height: 34px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(128, 128, 128, .4); color: inherit; opacity: .8; transition: all .2s; }
.rk-tabs button:hover { opacity: 1; }
.rk-tabs button.on { opacity: 1; background: var(--acc, var(--brass)); color: #1a1611; box-shadow: none; }
.rk-pbody { min-height: 40px; }
.rk-phist { display: grid; gap: 8px; margin-top: 14px; } .rk-phist > b { font-size: 14px; }
.rk-psec .rk-ptabs { padding: 22px; border-radius: var(--r); background: linear-gradient(180deg, rgba(22, 58, 47, .72), rgba(16, 44, 35, .72)); box-shadow: inset 0 0 0 1px var(--line); }
/* régie : le mode classé */
.rk-adm { padding: 22px; display: grid; gap: 14px; margin-bottom: 14px; }
.rk-adm-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.rk-adm-h h3 { margin: 4px 0; }
.rk-adm-s { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.rk-adm-s .field { flex: 1 1 260px; max-width: 360px; }
@media (prefers-reduced-motion: reduce) { .rq-spin { animation: none; } }

/* ---- étape 30 : barre du haut des jeux — le nom, le badge « Classé » (en classé), le code : trois lignes centrées ---- */
.gname, .lphase, .qtitle, .bjname, .nvname { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; line-height: 1.05; }
.gname .mono, .lphase .mono, .qtitle .mono, .bjname .mono, .nvname .mono { font-size: 11px; letter-spacing: .14em; opacity: .7; }
.gname .rk-tag { margin: 1px 0; }
@media (max-width: 640px) { .gname b, .nvname b { font-size: 20px; } .lphase b, .qtitle b { font-size: 21px; } }

/* ---- étape 30 : menu des sons — « Changer de musique » et le son de survol ---- */
.volpop { max-height: calc(100dvh - 90px); overflow-y: auto; }
.volpop .vrow { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.volpop .vtog.alt { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.volpop .vtog.alt svg { width: 15px; height: 15px; }
.mlist { display: grid; gap: 4px; margin-top: 8px; }
.mlist small { font-size: 12px; color: var(--ink-2); }
.mtrack { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; text-align: left; font-size: 13.5px; font-weight: 600; color: var(--ink); background: rgba(26, 22, 17, .05); transition: background .2s; }
.mtrack:hover { background: rgba(26, 22, 17, .1); }
.mtrack.on { background: rgba(214, 176, 102, .28); box-shadow: inset 0 0 0 1.5px var(--brass); }
.mtrack .mt-ic { width: 26px; height: 26px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--paper); }
.mtrack .mt-ic svg { width: 13px; height: 13px; }
.mtrack.on .mt-ic { background: var(--brass); color: var(--ink); animation: mtpulse 1.6s ease-in-out infinite; }
@keyframes mtpulse { 50% { box-shadow: 0 0 0 5px rgba(214, 176, 102, .25); } }
.hvpick { display: grid; gap: 6px; margin-top: 10px; }
.hvpick small { font-size: 12px; color: var(--ink-2); }
.hvlist { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.hvb { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 9px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); box-shadow: inset 0 0 0 1px rgba(26, 22, 17, .15); text-align: left; }
.hvb svg { width: 11px; height: 11px; flex: none; }
.hvb.on { color: var(--ink); background: rgba(214, 176, 102, .25); box-shadow: inset 0 0 0 1.5px var(--brass); }
@media (prefers-reduced-motion: reduce) { .mtrack.on .mt-ic { animation: none; } }

/* ---- étape 30 : tchats — les 4 onglets tiennent toujours (plus de « Mes groupes » coupé), invitations, noms longs ---- */
.cp-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; overflow: visible; padding: 6px 8px 0; }
.cp-tabs button { height: auto; min-height: 40px; padding: 6px 4px 8px; justify-content: center; text-align: center; white-space: normal; line-height: 1.15; font-size: 12.5px; flex-wrap: wrap; gap: 4px; border-radius: 10px 10px 0 0; }
.cp-tabs button.on::after { left: 10%; right: 10%; }
.cp-item b, .cp-it b, .gf-n { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cp-it { overflow: hidden; }
.gb-name { overflow-wrap: anywhere; }
.cp-inv-list { display: grid; gap: 6px; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dashed rgba(26, 22, 17, .15); }
.cp-inv-list > small { font-size: 12px; font-weight: 700; color: #8a5e1c; padding: 0 4px; }
.cp-invite { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 8px; border-radius: 12px; background: rgba(214, 176, 102, .16); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .45); animation: invin .4s ease-out both; }
.cp-invite .btn.xs { padding: 0 8px; }
@keyframes invin { from { opacity: 0; transform: translateY(-6px); } }
@media (max-width: 380px) { .cp-invite { grid-template-columns: auto minmax(0, 1fr); } .cp-invite .btn { grid-column: span 1; } }

/* ---- étape 30 : fenêtre d'appel déplaçable et redimensionnable ; tailles « Petit » et « Très grand » ---- */
@media (min-width: 641px) {
  .callbox { resize: both; overflow: hidden; min-width: 320px; min-height: 200px; max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); transform: none; }
  .callbox .cb-h { cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; }
  .callbox.dragging { box-shadow: 0 40px 90px rgba(0, 0, 0, .7), 0 0 0 2px var(--brass); }
  .callbox.dragging .cb-h { cursor: grabbing; }
}
.callbox.sized, .callbox.large { grid-template-rows: auto minmax(0, 1fr) auto; }
.callbox.sized .cb-tiles, .callbox.large .cb-tiles { max-height: none; min-height: 0; height: 100%; align-content: center; }
.callbox.large { z-index: 90; }
.callbox.large:not(.stage) .cb-tiles { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.callbox.large.stage .cb-tiles { grid-template-columns: minmax(0, 1fr) 210px; height: 100%; }
.callbox.large .cb-acts { gap: 14px; padding: 6px 0 4px; }
.callbox.large .vcb { width: 52px; height: 52px; border-radius: 50%; } .callbox.large .vcb svg { width: 22px; height: 22px; }
.callbox.large .vcb.leave { width: 76px; border-radius: 999px; }
.callbox.large .cb-t .av { width: 96px !important; height: 96px !important; font-size: 40px !important; }
.cb-sz { display: inline-flex; gap: 2px; padding: 2px; border-radius: 10px; background: rgba(236, 229, 212, .07); }
.cb-szb { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 9px; border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--chalk-2); white-space: nowrap; }
.cb-szb svg { width: 14px; height: 14px; }
.cb-szb.on { background: rgba(236, 229, 212, .16); color: var(--chalk); }
@media (max-width: 640px) {
  .callbox.large { inset: 0; left: 0; top: 0; width: auto; height: 100dvh; border-radius: 0; z-index: 140; padding-top: calc(12px + env(safe-area-inset-top, 0px)); padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
  .callbox.large.stage .cb-tiles { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .cb-szb { padding: 0 7px; }
}

/* ---- étape 30 : compteur de rats de taille fixe (les grands nombres sont abrégés) ; la barre du haut ne bouge plus ---- */
.ratpill { width: 104px; flex: none; justify-content: flex-start; overflow: hidden; }
.ratpill b { flex: 1; min-width: 0; text-align: center; white-space: nowrap; overflow: visible; text-overflow: clip; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .ratpill { width: 88px; } .ratpill b { font-size: 14.5px; } }
@media (max-width: 360px) { .ratpill { width: 78px; } }
.bjwallet[hidden] { display: none; }

/* ---- étape 30 : emblèmes animés (un reflet qui passe ; les plus hauts rangs respirent) ---- */
.rk-emb .rk-sh { animation: rksheen 5.5s ease-in-out infinite; transform-box: view-box; }
@keyframes rksheen { 0%, 62% { transform: translateX(0) rotate(20deg); } 82%, 100% { transform: translateX(200px) rotate(20deg); } }
.rk-emb.rk-hi { animation: rkpulse 3.2s ease-in-out infinite; transform-origin: 50% 55%; }
@keyframes rkpulse { 0%, 100% { transform: scale(1); filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35)); } 50% { transform: scale(1.04); filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35)) drop-shadow(0 0 12px rgba(255, 215, 120, .55)); } }
.rk-emb.rk-roi { animation-duration: 2.6s; }
/* transition en plein écran : changement de rang */
.rkt { position: fixed; inset: 0; z-index: 170; display: grid; place-items: center; padding: 16px; overflow: hidden; cursor: pointer; }
.rkt-bg { position: absolute; inset: 0; background: radial-gradient(60% 55% at 50% 45%, rgba(40, 30, 10, .82), rgba(4, 10, 8, .95)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.rkt.down .rkt-bg { background: radial-gradient(60% 55% at 50% 45%, rgba(20, 28, 40, .85), rgba(4, 8, 12, .96)); }
.rkt-rays { position: absolute; left: 50%; top: 45%; width: 160vmax; height: 160vmax; margin: -80vmax 0 0 -80vmax; background: repeating-conic-gradient(from 0deg, rgba(255, 215, 120, .16) 0 8deg, transparent 8deg 22deg); animation: rktspin 18s linear infinite; mask-image: radial-gradient(circle, #000 0 20%, transparent 55%); -webkit-mask-image: radial-gradient(circle, #000 0 20%, transparent 55%); }
@keyframes rktspin { to { transform: rotate(360deg); } }
.rkt-p { position: absolute; left: 50%; top: 45%; width: 9px; height: 9px; border-radius: 2px; background: #ffd76e; transform: rotate(var(--a)) translateY(0); opacity: 0; animation: rktp 1.8s cubic-bezier(.2, .7, .3, 1) calc(1.3s + var(--d)) both; }
.rkt-p:nth-child(3n) { background: #fff3c4; } .rkt-p:nth-child(3n+1) { background: #e9a83a; width: 6px; height: 12px; }
@keyframes rktp { 0% { opacity: 0; transform: rotate(var(--a)) translateY(0) scale(.4); } 15% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-42vmin) scale(1); } }
.rkt-c { position: relative; display: grid; justify-items: center; gap: 10px; text-align: center; color: var(--chalk); }
.rkt-c > small { font-size: 14px; font-weight: 700; letter-spacing: .04em; color: #f2d58a; }
.rkt.down .rkt-c > small { color: #a9c0e6; }
.rkt-e { position: relative; width: 200px; height: 190px; display: grid; place-items: center; }
.rkt-e > span { position: absolute; inset: 0; display: grid; place-items: center; }
.rkt-n { font: 800 clamp(34px, 7vw, 58px)/1 var(--display); font-variation-settings: "wdth" 78; letter-spacing: -.02em; }
.rkt.up .rkt-n { color: #ffe3a3; text-shadow: 0 0 30px rgba(255, 200, 90, .5); }
.rkt-f { font-size: 13.5px; color: var(--chalk-3); }
.rkt-ok { margin-top: 6px; }
@media (prefers-reduced-motion: reduce) { .rkt-rays, .rkt-p, .rk-emb .rk-sh, .rk-emb.rk-hi { animation: none; } .rkt-p { display: none; } }
/* recherche d'une partie classée : un petit radar qui tourne */
.rqchip { gap: 14px; padding: 10px 10px 10px 12px; animation: rqin .45s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes rqin { from { opacity: 0; transform: translateY(20px) scale(.95); } }
.rq-radar { position: relative; width: 38px; height: 38px; flex: none; border-radius: 50%; background: radial-gradient(circle, rgba(214, 176, 102, .25), rgba(214, 176, 102, .05)); display: grid; place-items: center; overflow: hidden; }
.rq-radar::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(214, 176, 102, .55), transparent 30%); animation: rktspin 1.6s linear infinite; }
.rq-radar i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(214, 176, 102, .6); animation: rqping 2s ease-out infinite; }
.rq-radar i + i { animation-delay: 1s; }
@keyframes rqping { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.2); opacity: 0; } }
.rq-radar b { position: relative; color: #8a5e1c; display: grid; } .rq-radar svg { width: 17px; height: 17px; }
@media (prefers-reduced-motion: reduce) { .rq-radar::before, .rq-radar i, .rqchip { animation: none; } }
/* le bloc « Mode classé » de la page du jeu : une lueur qui se promène */
.rk-hub { position: relative; overflow: hidden; isolation: isolate; }
.rk-hub-glow { position: absolute; z-index: -1; width: 380px; height: 380px; right: -120px; top: -160px; border-radius: 50%; background: radial-gradient(circle, rgba(214, 176, 102, .32), transparent 65%); animation: hubglow 9s ease-in-out infinite alternate; pointer-events: none; }
@keyframes hubglow { to { transform: translate(-160px, 120px) scale(1.2); } }
.rk-play { position: relative; overflow: hidden; }
.rk-play::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%); transform: translateX(-120%); animation: playsheen 3.4s ease-in-out infinite; }
@keyframes playsheen { 60%, 100% { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .rk-hub-glow, .rk-play::after { animation: none; } }
/* écran de victoire en classé : des éclats autour de l'emblème */
.rk-end { position: relative; }
.rk-end.celebrate .rk-fxhost .rk-emb, .rk-end.celebrate > .rk-fxhost > .rk-emb { animation: rkwin 1.6s ease-in-out 3; }
@keyframes rkwin { 50% { transform: scale(1.1); filter: drop-shadow(0 0 18px rgba(255, 210, 110, .9)); } }
.rk-sparks { position: absolute; left: 64px; top: 50%; width: 0; height: 0; pointer-events: none; }
.rk-sparks i { position: absolute; width: 7px; height: 7px; border-radius: 2px; background: #e9b44c; opacity: 0; animation: rkspark 1.4s ease-out calc(.3s + var(--d)) 2 both; transform: rotate(var(--a)); }
@keyframes rkspark { 0% { opacity: 0; transform: rotate(var(--a)) translateY(0) scale(.4); } 20% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-70px) scale(1); } }
.rk-delta.plus { text-shadow: 0 0 18px rgba(47, 158, 116, .25); }
/* classement : les blocs arrivent en douceur ; un rang s'agrandit au clic */
.rk-anim { animation: rkblock .7s cubic-bezier(.2, .8, .3, 1) both; }
.how-grid > .rk-anim:nth-child(2), .rk-hgrid > .rk-anim:nth-child(2) { animation-delay: .1s; } .how-grid > .rk-anim:nth-child(3), .rk-hgrid > .rk-anim:nth-child(3) { animation-delay: .2s; } .rk-hgrid > .rk-anim:nth-child(n+4) { animation-delay: .3s; }
@keyframes rkblock { from { opacity: 0; transform: translateY(18px); } }
.rk-hcol, .how-c { transition: transform .35s var(--ease-out), box-shadow .35s; }
.rk-hcol:hover, .how-c:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px var(--line-2), 0 24px 40px -26px #000; }
button.tier { color: inherit; text-align: left; cursor: zoom-in; transition: transform .25s var(--ease-out), background .25s; animation: rkblock .6s cubic-bezier(.2, .8, .3, 1) calc(.25s + var(--i) * .05s) both; }
button.tier:hover { transform: translateY(-2px) scale(1.02); background: rgba(214, 176, 102, .14); }
button.tier:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.modal.tzmodal { width: min(560px, 100%); }
@media (prefers-reduced-motion: reduce) { .rk-anim, button.tier, .rk-sparks i { animation: none; } }

/* ---- étape 30 : suggestions, avis, amis — les blocs arrivent en douceur et se soulèvent un peu au survol ---- */
.pg-anim > * { animation: rkblock .6s cubic-bezier(.2, .8, .3, 1) both; }
.pg-anim > *:nth-child(2) { animation-delay: .06s; } .pg-anim > *:nth-child(3) { animation-delay: .12s; } .pg-anim > *:nth-child(4) { animation-delay: .18s; } .pg-anim > *:nth-child(5) { animation-delay: .24s; } .pg-anim > *:nth-child(n+6) { animation-delay: .3s; }
.sug, .rev, .fr, .codecard, #af.sheet { transition: transform .35s var(--ease-out), box-shadow .35s; }
.sug:hover, .rev:hover, .fr:hover { transform: translateY(-2px); }
.codecard:hover, #af.sheet:hover { transform: translateY(-3px); box-shadow: 0 30px 50px -30px #000; }
.codecard .deco { animation: codefloat 6s ease-in-out infinite; }
@keyframes codefloat { 50% { transform: translateY(-6px) rotate(-2deg); } }
@media (prefers-reduced-motion: reduce) { .pg-anim > *, .codecard .deco { animation: none; } }

/* crédits des musiques (Mentions légales) */
.legalbox .credlist { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 6px; font-size: 14.5px; line-height: 1.5; }

/* ---- étape 31 : emblèmes vivants — la souris bouge un peu, les décors aussi (plus le rang est haut, plus c'est riche) ---- */
.rk-emb .rk-eyes, .rk-emb .rk-ear, .rk-emb .rk-wh, .rk-emb .rk-wing, .rk-emb .rk-bwing, .rk-emb .rk-laurel, .rk-emb .rk-gem, .rk-emb .rk-crown { transform-box: fill-box; }
.rk-emb.rk-a1 .rk-eyes { transform-origin: center; animation: rkblink 4.8s ease-in-out infinite; animation-delay: var(--rkd, 0s); }
@keyframes rkblink { 0%, 90%, 100% { transform: scaleY(1); } 93% { transform: scaleY(.1); } 96% { transform: scaleY(1); } }
.rk-emb.rk-a2 .rk-ear.l { transform-origin: 80% 90%; animation: rkearl 6s ease-in-out infinite; animation-delay: var(--rkd, 0s); }
.rk-emb.rk-a2 .rk-ear.r { transform-origin: 20% 90%; animation: rkearr 6s ease-in-out infinite; animation-delay: calc(var(--rkd, 0s) - 1.3s); }
@keyframes rkearl { 0%, 80%, 100% { transform: rotate(0); } 84% { transform: rotate(-14deg); } 88% { transform: rotate(4deg); } 92% { transform: rotate(-6deg); } }
@keyframes rkearr { 0%, 80%, 100% { transform: rotate(0); } 84% { transform: rotate(14deg); } 88% { transform: rotate(-4deg); } 92% { transform: rotate(6deg); } }
.rk-emb.rk-a3 .rk-wing.l { transform-origin: 100% 40%; animation: rkflapl 2.8s ease-in-out infinite; animation-delay: var(--rkd, 0s); }
.rk-emb.rk-a3 .rk-wing.r { transform-origin: 0% 40%; animation: rkflapr 2.8s ease-in-out infinite; animation-delay: var(--rkd, 0s); }
@keyframes rkflapl { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-10deg) scaleY(.94); } }
@keyframes rkflapr { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(10deg) scaleY(.94); } }
.rk-emb.rk-a4 .rk-laurel.l { transform-origin: 100% 0%; animation: rkswayl 5s ease-in-out infinite; animation-delay: var(--rkd, 0s); }
.rk-emb.rk-a4 .rk-laurel.r { transform-origin: 0% 0%; animation: rkswayr 5s ease-in-out infinite; animation-delay: var(--rkd, 0s); }
@keyframes rkswayl { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-3deg); } }
@keyframes rkswayr { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(3deg); } }
.rk-emb.rk-a4 .rk-wh { transform-origin: center; animation: rkwhisk 3.4s ease-in-out infinite; animation-delay: var(--rkd, 0s); }
@keyframes rkwhisk { 0%, 70%, 100% { transform: none; } 76% { transform: translateY(-.6px) scaleX(1.06); } 82% { transform: translateY(.4px) scaleX(.97); } }
.rk-emb.rk-a5 .rk-gem { transform-origin: center; animation: rkgem 3s ease-in-out infinite; animation-delay: var(--rkd, 0s); }
@keyframes rkgem { 0%, 100% { transform: scale(1); filter: none; } 50% { transform: scale(1.12); filter: drop-shadow(0 0 4px #fff); } }
.rk-emb.rk-a7 .rk-bwing.l { transform-origin: 100% 30%; animation: rkflapl 3.2s ease-in-out infinite; animation-delay: var(--rkd, 0s); }
.rk-emb.rk-a7 .rk-bwing.r { transform-origin: 0% 30%; animation: rkflapr 3.2s ease-in-out infinite; animation-delay: var(--rkd, 0s); }
.rk-emb.rk-a8 .rk-crown { transform-origin: 50% 100%; animation: rkcrown 3.6s ease-in-out infinite; animation-delay: var(--rkd, 0s); }
@keyframes rkcrown { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-2px) rotate(-3deg); } 60% { transform: translateY(-1px) rotate(3deg); } }
@media (prefers-reduced-motion: reduce) { .rk-emb .rk-eyes, .rk-emb .rk-ear, .rk-emb .rk-wh, .rk-emb .rk-wing, .rk-emb .rk-bwing, .rk-emb .rk-laurel, .rk-emb .rk-gem, .rk-emb .rk-crown { animation: none !important; } }

/* ---- étape 31 : page du jeu, bloc « Mode classé » plus vivant ---- */
.rk-hub > * { animation: rkblock .7s cubic-bezier(.2, .8, .3, 1) both; }
.rk-hub > :nth-child(3) { animation-delay: .08s; } .rk-hub > :nth-child(4) { animation-delay: .16s; }
.rk-hub .rk-card.big { transition: transform .35s var(--ease-out); }
.rk-hub .rk-card.big:hover { transform: translateY(-2px); }
.rk-hub .rk-card.big:hover .rk-emb { transform: scale(1.06) rotate(-3deg); transition: transform .4s var(--ease-out); }
.rk-play { box-shadow: 0 0 0 0 rgba(214, 176, 102, .6); animation: rkplay 2.4s ease-in-out infinite; transition: transform .25s var(--ease-out); }
.rk-play:hover { transform: translateY(-2px) scale(1.03); }
@keyframes rkplay { 0%, 100% { box-shadow: 0 0 0 0 rgba(214, 176, 102, .55); } 50% { box-shadow: 0 0 0 10px rgba(214, 176, 102, 0); } }
.act-card { transition: transform .35s var(--ease-out), box-shadow .35s; }
.act-card:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -28px #000; }
@media (prefers-reduced-motion: reduce) { .rk-hub > *, .rk-play { animation: none; } }

/* ---- étape 31 : « Très grand » = l'appel sur tout l'écran (plein écran du navigateur, ou toute la fenêtre si le navigateur ne le permet pas) ---- */
.callbox.large { position: fixed; inset: 0; left: 0; top: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; border-radius: 0; resize: none; z-index: 140; padding-top: calc(12px + env(safe-area-inset-top, 0px)); padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
.callbox.large .cb-h { cursor: default; }
.callbox:fullscreen { width: 100vw; height: 100vh; border-radius: 0; }

/* ---- étape 31 : profil simplifié (pseudo d'affichage, @pseudo permanent, en ligne, grade, membre depuis, description) ---- */
.prof-id { display: grid; gap: 6px; min-width: 0; align-content: center; }
.prof-id h2, .prof-id h3 { margin: 0; overflow-wrap: anywhere; line-height: 1; }
.prof-handle { font: 600 14px/1.2 var(--mono); color: var(--ink-2); letter-spacing: .02em; overflow-wrap: anywhere; }
.prof-tags { gap: 6px; flex-wrap: wrap; }
.tag.onl { display: inline-flex; align-items: center; gap: 6px; color: #1f7a55; }
.tag.onl i { width: 8px; height: 8px; border-radius: 50%; background: #2f9e74; box-shadow: 0 0 0 3px rgba(47, 158, 116, .2); }
.pm-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; }
.pm-bio { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; padding: 12px 14px; border-radius: 12px; background: rgba(26, 22, 17, .05); }
@media (max-width: 420px) { .pm-head { grid-template-columns: minmax(0, 1fr); justify-items: start; } }

/* ---- étape 31 : régie — recherches, historique classé ---- */
.logf .logq { flex: 1 1 220px; }
.modal.rkhmodal { width: min(820px, 100%); }
.rkh-sum { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(26, 22, 17, .05); margin-bottom: 10px; }
.rk-adm .asearch { margin: 0; }
.fh { font-weight: 500; color: var(--chalk-3); font-size: 12px; }

/* ---- étape 31 : barre du haut plus grande et stable ; les catégories en trop passent dans « Plus » ---- */
:root { --nav-base: 72px; }
.nav-in { height: var(--nav-base); min-height: 0; padding-block: 0; max-width: calc(var(--wrap) + 140px); flex-wrap: nowrap; }
@media (min-width: 1325px) { .nav-in { margin-left: auto; margin-right: auto; } }
.links { flex: 1 1 0; min-width: 0; justify-content: center; margin: 0; overflow: hidden; }
.links > a { flex: none; white-space: nowrap; }
.links > a.ovf { display: none; }
.nav-r { flex: none; flex-wrap: nowrap; }
.vcdock { flex-wrap: nowrap; }
.nmore { position: relative; flex: none; }
.nmore[hidden] { display: none; }
.nmore > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding: 10px 12px; border-radius: 11px; font-size: 14.5px; font-weight: 500; color: var(--chalk-2); }
.nmore > summary::-webkit-details-marker { display: none; }
.nmore > summary svg { width: 15px; height: 15px; transition: transform .25s; }
.nmore[open] > summary svg { transform: rotate(180deg); }
.nmore.on > summary, .nmore > summary:hover { color: var(--chalk); }
.nmore-m { position: fixed; z-index: 60; margin-top: 8px; display: grid; gap: 2px; min-width: 180px; padding: 6px; border-radius: 14px; background: var(--paper); box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .8); }
.nmore-m a { padding: 10px 12px; border-radius: 10px; color: var(--ink); font-weight: 600; }
.nmore-m a:hover, .nmore-m a.on { background: rgba(26, 22, 17, .07); }
@media (max-width: 640px) { .nav-r > #langbtn { display: none; } } /* (la langue reste dans le menu ☰ : la barre ne déborde jamais) */
/* la page « Boutique » */
.shop-hero { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; align-items: center; min-height: min(620px, calc(100vh - var(--nav-h) - 80px)); }
.shop-art svg { width: 100%; max-width: 440px; height: auto; display: block; margin: 0 auto; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .55)); }
.shop-art .shop-coin { animation: shopcoin 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.shop-art .shop-coin.c2 { animation-delay: -1.4s; }
@keyframes shopcoin { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-10px) rotate(12deg); } }
.shop-art .shop-box { animation: shopbox 4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes shopbox { 0%, 100% { transform: none; } 50% { transform: scale(1.04) translateY(-3px); } }
.shop-txt { display: grid; gap: 18px; justify-items: start; }
@media (max-width: 760px) { .shop-hero { grid-template-columns: minmax(0, 1fr); gap: 20px; min-height: 0; padding-top: 10px; } .shop-art svg { max-width: 300px; } }
@media (prefers-reduced-motion: reduce) { .shop-art .shop-coin, .shop-art .shop-box { animation: none; } }

/* ---- étape 31 : les rares textes écrits par le style, en anglais aussi ---- */
html[lang="en"] .tok.voted::before { content: "Your vote"; }
html[lang="en"] .cb-t:has(.vc-muted) small::after { content: " (mic off)"; }

/* ---- étape 32 : l'adresse e-mail du profil, avec son état ---- */
.mailrow { display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; background: rgba(26, 22, 17, .05); }
.mailaddr { font-size: 15.5px; overflow-wrap: anywhere; }
.mailst { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.mailst i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; flex: none; }
.mailst i svg { width: 13px; height: 13px; }
.mailrow.ok .mailst { color: #1f7a55; }
.mailrow.ok .mailst i { background: #2f9e74; color: #fff; }
.mailrow.wait .mailst { color: #9a5b0c; font-weight: 500; }
.mailrow.wait .mailst i { background: #f0b545; color: #3a2405; }

/* ---- étape 32 : Black Rat sans le bloc « Tes rats » ---- */
.bjhero { grid-template-columns: minmax(0, 1fr); }
.bp-note { margin: 0; font-size: 13.5px; color: var(--chalk-3); }

/* ---- étape 32 : plusieurs images jointes ---- */
.imgpick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.imgpick .ip-list { display: contents; }
.ip-it { position: relative; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: rgba(26, 22, 17, .08); flex: none; }
.ip-it img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ip-rm { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(20, 16, 12, .78); color: #fff; font: 700 15px/1 var(--sans, sans-serif); cursor: pointer; display: grid; place-items: center; }
.ip-rm:hover { background: var(--danger); }
.ip-add { width: 64px; height: 64px; border-radius: 10px; border: 2px dashed rgba(26, 22, 17, .28); display: grid; place-items: center; align-content: center; gap: 1px; cursor: pointer; text-align: center; color: var(--ink-2); flex: none; }
.ip-add[hidden] { display: none; }
.ip-add svg { width: 18px; height: 18px; }
.ip-add span { font-size: 9.5px; font-weight: 700; line-height: 1.1; }
.ip-add small { font-size: 9px; opacity: .7; }
.ip-add:hover { border-color: var(--ink-2); background: rgba(26, 22, 17, .04); }
.ip-s { font-size: 12px; color: var(--ink-2); flex-basis: 100%; }
.ip-s:empty { display: none; }
.supimgs { flex: 1 1 auto; }
.modal.galmodal { width: min(860px, 100%); }
.imggal { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.imggal.one { grid-template-columns: minmax(0, 1fr); }
.imggal a { display: block; border-radius: 12px; overflow: hidden; background: #111; }
.imggal img { width: 100%; height: 100%; max-height: 70vh; object-fit: contain; display: block; }

/* ---- étape 32 : tchat — répondre, mentions ---- */
.cp-m { position: relative; }
.cp-rep { position: absolute; top: 2px; right: -4px; width: 28px; height: 28px; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--paper, #f3ecdc); color: var(--ink-2); box-shadow: 0 4px 12px -4px rgba(0, 0, 0, .35); cursor: pointer; opacity: 0; transform: scale(.85); transition: opacity .15s, transform .15s; }
.cp-m.me .cp-rep { right: auto; left: -4px; }
.cp-rep svg { width: 15px; height: 15px; }
.cp-m:hover .cp-rep, .cp-rep:focus-visible { opacity: 1; transform: none; }
@media (hover: none) { .cp-rep { display: none; } }
.cp-re { display: grid; gap: 1px; text-align: left; width: 100%; margin: 2px 0 6px; padding: 5px 9px; border: 0; border-left: 3px solid #c9a24a; border-radius: 8px; background: rgba(26, 22, 17, .07); color: inherit; font: inherit; cursor: pointer; }
.cp-re b { font-size: 11.5px; }
.cp-re span { font-size: 12px; opacity: .75; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-at { font-weight: 700; color: #2f6fb8; background: rgba(47, 111, 184, .1); border-radius: 5px; padding: 0 3px; }
.cp-at.me { color: #8a4a00; background: rgba(240, 181, 69, .35); }
.cp-m.at-me .cp-bub { box-shadow: inset 3px 0 0 #e0a83a; }
.cp-m.flash .cp-bub { animation: cpflash 1.6s ease-out; }
@keyframes cpflash { 0%, 30% { background-color: rgba(240, 181, 69, .55); } 100% { background-color: transparent; } }
.cp-reply { display: flex; align-items: center; gap: 8px; padding: 7px 10px; margin: 0 10px; border-radius: 10px 10px 0 0; background: rgba(26, 22, 17, .07); font-size: 13px; }
.cp-reply[hidden], .cp-sugg[hidden] { display: none; }
.cp-rr svg { width: 15px; height: 15px; display: block; }
.cp-rt { flex: 1; min-width: 0; display: grid; }
.cp-rt small { opacity: .7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-sugg { margin: 0 10px 6px; padding: 4px; border-radius: 12px; background: var(--paper, #f3ecdc); box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .45); display: grid; gap: 2px; max-height: 220px; overflow: auto; }
.cp-sg { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.cp-sg.on, .cp-sg:hover { background: rgba(26, 22, 17, .08); }
@media (prefers-reduced-motion: reduce) { .cp-m.flash .cp-bub { animation: none; } }

/* ---- étape 32 : rats gagnés ou perdus par jeu (profil) ---- */
.rk-prats { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; border-radius: 12px; background: rgba(26, 22, 17, .05); margin-bottom: 10px; }
.rk-prats b { font-size: 17px; }
.rk-prats.pos b { color: #1f7a55; }
.rk-prats.neg b { color: #b23a2a; }
.rk-prats small { color: var(--ink-2); font-size: 12.5px; }

/* ---- étape 32 : joueurs par jeu ---- */
.gtile { position: relative; }
.gcount { position: absolute; top: 12px; right: 12px; z-index: 3; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(10, 20, 16, .72); color: #e8f5ec; font: 600 12px/1 var(--sans, sans-serif); backdrop-filter: blur(4px); }
.gcount[hidden] { display: none; }
.gcount i { width: 7px; height: 7px; border-radius: 50%; background: #3ddc97; box-shadow: 0 0 0 0 rgba(61, 220, 151, .6); animation: gcpulse 2.4s ease-out infinite; }
@keyframes gcpulse { 0% { box-shadow: 0 0 0 0 rgba(61, 220, 151, .55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(61, 220, 151, 0); } }
.rk-qn { display: block; font-size: 12.5px; color: var(--ink-2); }
.rk-qn.on { color: #1f7a55; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .gcount i { animation: none; } }

/* ---- étape 32 : mode maintenance ---- */
.maintscr { z-index: 10000; cursor: default; }
.maintscr .ms-txt { margin: 6px 0 0; font: 700 clamp(18px, 3.4vw, 24px)/1.3 var(--display); color: var(--chalk); text-align: center; max-width: 30ch; }
.maintscr .ms-slot { margin: 0; color: #f2d58a; font-weight: 600; text-align: center; }
.maintscr .ms-slot:empty { display: none; }
.maintscr .ms-staff { margin-top: 18px; border: 0; background: transparent; color: var(--chalk-3); font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.maintscr .ms-staff svg { width: 14px; height: 14px; }
body.in-maint { overflow: hidden; }
.maintbar { position: fixed; left: 50%; transform: translateX(-50%); top: calc(var(--nav-h, 72px) + 10px); z-index: 70; display: flex; align-items: center; gap: 10px; width: min(760px, calc(100vw - 24px)); padding: 10px 14px; border-radius: 14px; background: #2a1f0a; color: #f6e7c1; box-shadow: 0 16px 40px -14px rgba(0, 0, 0, .7); border: 1px solid rgba(242, 213, 138, .35); font-size: 14px; animation: mbin .4s ease-out; }
.maintbar.staff { background: #0f2a20; border-color: rgba(61, 220, 151, .35); color: #dff5ea; top: auto; bottom: 14px; }
.maintbar .mb-ic svg { width: 18px; height: 18px; display: block; }
.maintbar span:nth-child(2) { flex: 1; }
.maintbar .mb-x { border: 0; background: transparent; color: inherit; cursor: pointer; opacity: .7; }
@keyframes mbin { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
.maintsw.live { box-shadow: inset 4px 0 0 var(--danger); }
.maintsw.plan { box-shadow: inset 4px 0 0 #e8a53a; }
@media (prefers-reduced-motion: reduce) { .maintbar { animation: none; } }

/* ---- étape 32 : les encarts ---- */
.ins { position: relative; display: grid; gap: 8px; padding: 14px; border-radius: 16px; background: var(--paper, #f3ecdc); color: var(--ink); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .7); overflow: hidden; animation: insin .6s cubic-bezier(.16, 1, .3, 1) both; }
.ins.click { cursor: pointer; transition: transform .25s, box-shadow .25s; }
.ins.click:hover { transform: translateY(-3px); box-shadow: 0 24px 46px -18px rgba(0, 0, 0, .75); }
.ins::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .35) 50%, transparent 65%); transform: translateX(-120%); animation: inssheen 7s ease-in-out 1.2s infinite; }
@keyframes insin { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes inssheen { 0%, 80% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.ins-t { font: 800 16px/1.2 var(--display); }
.ins p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); white-space: pre-wrap; }
.ins-img { display: block; margin: -14px -14px 2px; aspect-ratio: 16 / 10; background: rgba(26, 22, 17, .08); overflow: hidden; }
.ins-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ins-ad { position: absolute; top: 8px; left: 8px; z-index: 2; padding: 3px 8px; border-radius: 6px; background: rgba(20, 16, 12, .82); color: #fff; font: 700 11px/1.2 var(--sans, sans-serif); letter-spacing: .02em; }
.ins-kind { justify-self: start; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: rgba(201, 162, 74, .2); color: #7a5b17; font-size: 11.5px; font-weight: 700; }
.ins-kind svg { width: 13px; height: 13px; }
.ins-kind.warn { background: rgba(214, 74, 58, .16); color: #a3352a; }
.ins:has(.ins-img) .ins-kind { position: absolute; top: 8px; left: 8px; z-index: 2; background: rgba(243, 236, 220, .92); }
.ins-notice { box-shadow: inset 0 0 0 2px rgba(214, 74, 58, .45), 0 18px 40px -18px rgba(0, 0, 0, .7); }
.ins-more { font-weight: 700; font-size: 13px; color: #2f6fb8; display: inline-flex; align-items: center; gap: 4px; }
.ins-more svg { width: 14px; height: 14px; }
.ins-cd { font: 800 20px/1.1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.ins-date { color: var(--ink-2); font-size: 12px; }
.ins-pl { display: flex; align-items: center; gap: 10px; }
.ins-pl b { font: 800 18px/1.1 var(--display); }
.ins-spotlight .ins-pl .av { box-shadow: 0 0 0 3px #e9b44c; }
.ins-poll { display: grid; gap: 6px; }
.ins-opt { text-align: left; padding: 8px 10px; border-radius: 10px; border: 1px solid rgba(26, 22, 17, .2); background: transparent; color: var(--ink); font: 600 13px/1.2 var(--sans, sans-serif); cursor: pointer; }
.ins-opt:hover { background: rgba(26, 22, 17, .06); border-color: rgba(26, 22, 17, .4); }
.ins-bar { position: relative; display: flex; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: 9px; background: rgba(26, 22, 17, .06); overflow: hidden; font-size: 13px; }
.ins-bar i { position: absolute; inset: 0 auto 0 0; background: rgba(61, 165, 122, .25); transition: width .8s cubic-bezier(.16, 1, .3, 1); }
.ins-bar.mine i { background: rgba(61, 165, 122, .45); }
.ins-bar span, .ins-bar b { position: relative; }
.ins-poll small { color: var(--ink-2); font-size: 12px; }
/* grand écran : dans l'espace vide sur les côtés ; sinon en bas de la page */
.ins-side { position: fixed; top: calc(var(--nav-h, 72px) + 120px); width: clamp(200px, calc((100vw - var(--wrap)) / 2 - 56px), 260px); display: grid; gap: 14px; z-index: 5; max-height: calc(100vh - var(--nav-h, 72px) - 150px); overflow: auto; scrollbar-width: none; }
.ins-side.left { left: max(16px, calc((100vw - var(--wrap)) / 2 - 290px)); }
.ins-side.right { right: max(16px, calc((100vw - var(--wrap)) / 2 - 290px)); }
.ins-foot { display: none; margin: 40px 0 10px; }
.ins-foot .wrap { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
@media (max-width: 1659px) { .ins-side { display: none; } .ins-foot { display: block; } }
body.in-game .ins-side { display: none; }
.modal.insmodal { width: min(620px, 100%); }
.ins-big { width: 100%; border-radius: 12px; display: block; }
.ins-models { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.ins-model { display: grid; gap: 6px; align-content: start; text-align: left; padding: 14px; border-radius: 14px; border: 1px solid rgba(26, 22, 17, .14); background: var(--paper, #f3ecdc); color: var(--ink); font: inherit; cursor: pointer; transition: transform .2s; }
.ins-model:hover { transform: translateY(-2px); }
.ins-model small { color: var(--ink-2); font-size: 12.5px; line-height: 1.4; }
.ins-model .btn { justify-self: start; margin-top: 4px; }
.ins-st.on { background: rgba(61, 165, 122, .2); color: #1f7a55; }
.ins-st.wait { background: rgba(232, 165, 58, .22); color: #8a5a10; }
.ins-pages { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.modal.insedit { width: min(640px, 100%); }
@media (prefers-reduced-motion: reduce) { .ins, .ins::after { animation: none; } }

/* ---- étape 33 : « Reprendre la partie / Retour au salon » flotte sous la barre (elle ne bouge plus jamais) ---- */
.nav-in { position: relative; }
.nav-r > .resume { position: absolute; top: calc(100% + 10px); right: 14px; z-index: 6; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .7); }
@media (max-width: 560px) { .nav-r > .resume { right: 10px; top: calc(100% + 8px); } .nav-r > .resume span { display: inline; } .nav-r > .resume { padding: 0 12px; height: 34px; font-size: 12.5px; } }

/* ---- étape 33 : la courbe des rats tient toujours dans sa fenêtre (4 boutons au-dessus, qui passent à la ligne) ---- */
.ratpop { overflow-x: hidden; }
.ratpop { transform-origin: 50% 0; } /* (étape 123 : centrée sous le cadre des monnaies, elle grandit depuis le milieu) */
.rp-chart { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.rp-ch-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; }
.rp-ch-h .seg { flex-wrap: wrap; max-width: 100%; }
.rp-ch-h .seg button { padding: 5px 8px; font-size: 11.5px; }
.rp-plot { grid-template-columns: minmax(0, 1fr); min-width: 0; overflow: hidden; }
.rp-svg { width: 100%; max-width: 100%; height: auto; max-height: 150px; }

/* ---- étape 33 : « Répondre » collé en haut à droite de la bulle ---- */
.cp-bub { position: relative; }
.cp-bub .cp-rep, .cp-m.me .cp-bub .cp-rep { top: -10px; right: -10px; left: auto; width: 26px; height: 26px; }
.cp-sg small { margin-left: auto; color: var(--ink-2); font-size: 11.5px; }

/* ---- étape 33 : les encarts — au milieu de l'espace libre, défilent avec la page, plus grands, bien à part ---- */
:root { --ins-side: calc((100vw - var(--wrap) * var(--rgz, 1)) / 2); --ins-w: clamp(240px, calc(var(--ins-side) - 100px), 320px); }
.ins-side { position: absolute; top: calc(var(--nav-h, 72px) + 110px); width: var(--ins-w); max-height: none; overflow: visible; gap: 22px; z-index: 4; }
.ins-side.left { left: calc((var(--ins-side) - var(--ins-w)) / 2); right: auto; }
.ins-side.right { right: calc((var(--ins-side) - var(--ins-w)) / 2); left: auto; }
@media (max-width: 1659px) { .ins-side { display: grid; } }
@media (max-width: 1759px) { .ins-side { display: none; } .ins-foot { display: block; } }
.ins { padding: 0 0 16px; gap: 10px; border-radius: 18px; background: linear-gradient(180deg, #f6efde, #ece2c8); outline: 1px dashed rgba(242, 213, 138, .5); outline-offset: 6px; box-shadow: 0 26px 50px -22px rgba(0, 0, 0, .8); animation: insin .7s cubic-bezier(.16, 1, .3, 1) both, insfloat 7s ease-in-out 1s infinite; }
.ins-side .ins:nth-child(2) { animation-delay: .12s, 2.2s; } .ins-side .ins:nth-child(3) { animation-delay: .24s, 3.4s; }
@keyframes insfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.ins.click:hover { transform: translateY(-4px); }
.ins > :not(.ins-lab):not(.ins-img) { margin-inline: 16px; }
.ins-lab { display: flex; align-items: center; gap: 7px; padding: 8px 14px; background: #1a1611; color: #f2d58a; font: 700 12px/1.1 var(--body); letter-spacing: .02em; border-radius: 18px 18px 0 0; }
.ins-lab svg { width: 14px; height: 14px; flex: none; }
.ins-lab.ad { background: #2a2a2a; color: #fff; }
.ins-img { margin: 0; aspect-ratio: 16 / 10; }
.ins-ad, .ins .ins-kind { display: none; }
.ins-t { font-size: 18px; margin-top: 2px; }
.ins p { font-size: 14px; }
.ins-cd { font-size: 23px; }
.ins-foot .ins { animation: insin .7s cubic-bezier(.16, 1, .3, 1) both; }
@media (prefers-reduced-motion: reduce) { .ins { animation: none; } }

/* ---- étape 33 : inviter des amis ---- */
.modal.invmodal { width: min(480px, 100%); }
.inv-list { display: grid; gap: 4px; max-height: min(52vh, 420px); overflow: auto; margin: 0 -6px; padding: 0 6px; }
.inv-row { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: 12px; }
.inv-row:hover { background: rgba(26, 22, 17, .05); }
.inv-n { flex: 1; min-width: 0; display: grid; }
.inv-n small { color: var(--ink-2); font-size: 12px; }
.inv-n small.on { color: #1f7a55; font-weight: 600; }
.inv-st { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: rgba(26, 22, 17, .07); }
.inv-st svg { width: 13px; height: 13px; }
.inv-st.accepted { background: rgba(61, 165, 122, .2); color: #1f7a55; }
.inv-st.refused { background: rgba(214, 74, 58, .15); color: #a3352a; }
.btn.xs.on { background: var(--brass); color: var(--ink); }
.btn.ginvite { background: var(--brass); color: var(--ink); }

/* ---- étape 33 : les onglets des jeux dans le profil ---- */
.rkp { display: grid; gap: 16px; }
.rkp-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; padding: 16px; border-radius: 18px; background: radial-gradient(120% 140% at 0% 0%, rgba(242, 213, 138, .28), rgba(26, 22, 17, .04) 60%); box-shadow: inset 0 0 0 1px rgba(26, 22, 17, .08); }
.rkp-emb { filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .35)); }
.rkp-id { display: grid; gap: 6px; min-width: 0; }
.rkp-season { font-size: 12px; font-weight: 700; color: #8a6a1e; }
.rkp-rank { font: 800 24px/1.05 var(--display); }
.rkp-pts { color: var(--ink-2); font-size: 14px; } .rkp-pts b { color: var(--ink); font-size: 18px; }
.rkp-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.rkp-st { display: grid; gap: 2px; padding: 12px; border-radius: 14px; background: rgba(26, 22, 17, .05); box-shadow: inset 0 0 0 1px rgba(26, 22, 17, .06); transition: transform .2s; }
.rkp-st:hover { transform: translateY(-2px); }
.rkp-ic { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: rgba(242, 213, 138, .45); color: #6b4f12; margin-bottom: 4px; }
.rkp-ic svg { width: 16px; height: 16px; }
.rkp-st b { font: 800 20px/1.1 var(--display); }
.rkp-st small { color: var(--ink-2); font-size: 12px; line-height: 1.3; }
.rkp-st.pos b { color: #1f7a55; } .rkp-st.neg b { color: #b23a2a; }
.rkp-hist { display: grid; gap: 8px; }
.rkp-seasons { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.rkp-se { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(26, 22, 17, .04); }
.rkp-se span { flex: 1; min-width: 0; display: grid; }
.rkp-se small { color: var(--ink-2); font-size: 12px; }
.rkp-se em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--ink-2); }
@media (max-width: 520px) { .rkp-hero { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; } .rkp-emb svg { width: 110px; height: 110px; } }

/* ---- étape 34 : les boutons de la courbe des rats tiennent toujours dans leur fond gris (français comme anglais) ---- */
.rp-ch-h { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.rp-ch-h .seg { display: grid; grid-auto-flow: column; grid-auto-columns: auto; width: 100%; max-width: 100%; overflow: hidden; box-sizing: border-box; }
.rp-ch-h .seg button { min-width: 0; height: auto; min-height: 28px; padding: 4px 6px; font-size: 11.5px; line-height: 1.15; white-space: normal; text-align: center; }

/* ---- étape 34 : profil — le mode classé juste sous la carte du haut, sur carton crème : tout se lit bien ---- */
.prof-left { display: grid; gap: 18px; align-content: start; min-width: 0; }
.paper.rk-psec { display: grid; gap: 14px; padding: 22px; }
.paper.rk-psec h2 { margin: 0; color: var(--ink); }
.rk-psec .rk-ptabs { padding: 0; background: none; box-shadow: none; }
.rk-tabs button { color: var(--ink); opacity: 1; box-shadow: inset 0 0 0 1px rgba(26, 22, 17, .22); }
.rk-tabs button.on { color: #1a1611; }
.rkp-hero { background: radial-gradient(120% 140% at 0% 0%, rgba(242, 213, 138, .45), rgba(26, 22, 17, .05) 62%); }
.rkp-season { color: #7a5a12; font-size: 12.5px; }
.rkp-rank { color: var(--ink); }
.rkp-pts { color: #4a4134; font-size: 15px; } .rkp-pts b { color: var(--ink); }
.rkp-hero .rk-pt { color: #4a4134; font-size: 13px; }
.rkp-hero .rk-prog { background: rgba(26, 22, 17, .14); }
.rkp-st { background: #fffaf0; box-shadow: inset 0 0 0 1px rgba(26, 22, 17, .12); }
.rkp-st b { color: var(--ink); }
.rkp-st small { color: #4a4134; font-size: 12.5px; }
.rkp-ic { background: rgba(214, 176, 102, .4); color: #5a420e; }
.rkp-hist > b { color: var(--ink); }
.rkp-hist > p, .rkp-se small, .rkp-se em { color: #4a4134; }
.rkp-se { background: #fffaf0; box-shadow: inset 0 0 0 1px rgba(26, 22, 17, .1); }
.rkp-se b { color: var(--ink); }
.modal .rkp-st, .modal .rkp-se { background: rgba(26, 22, 17, .05); }

/* ---- étape 34 : encarts — un effet sobre (un reflet très doux de temps en temps, une bordure qui luit à peine), et le mode modification des admins ---- */
.ins { animation: insin .7s cubic-bezier(.16, 1, .3, 1) both; outline: 1px solid rgba(242, 213, 138, .32); outline-offset: 5px; transition: outline-color .4s, box-shadow .4s; }
.ins-side .ins:nth-child(2), .ins-side .ins:nth-child(3) { animation-delay: .12s; }
.ins:hover { outline-color: rgba(242, 213, 138, .6); }
.ins.click:hover { transform: none; box-shadow: 0 30px 56px -22px rgba(0, 0, 0, .85); }
.ins::after { background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .22) 50%, transparent 60%); animation: inssheen 16s ease-in-out 3s infinite; }
@keyframes inssheen { 0%, 92% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.ins-side.ins-free { position: absolute; display: grid; }
.ins-ed { position: absolute; top: 8px; right: 8px; z-index: 5; padding: 4px 10px; border-radius: 8px; border: 0; background: rgba(20, 16, 12, .85); color: #f2d58a; font: 700 12px/1.2 var(--body); cursor: pointer; opacity: 0; transition: opacity .2s; }
.ins:hover .ins-ed, .ins-ed:focus-visible { opacity: 1; }
.ins.editing { cursor: move; outline: 2px dashed #f2d58a; outline-offset: 4px; user-select: none; touch-action: none; }
.ins.editing .ins-ed { display: none; }
.ins.editing::after { display: none; }
.ins-bar-ed { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 16px; cursor: default; }
.ins-grip { position: absolute; right: 2px; bottom: 2px; width: 18px; height: 18px; cursor: nwse-resize; background: linear-gradient(135deg, transparent 50%, rgba(26, 22, 17, .55) 50%); border-radius: 0 0 14px 0; }
@media (max-width: 1759px) { .ins-side.ins-free { display: none; } }
@media (prefers-reduced-motion: reduce) { .ins::after { animation: none; } }

.ins > .ins-ed, .ins > .ins-grip { margin: 0; }

/* ---- étape 34 (correction) : les boutons du mode modification des encarts, bien lisibles sur le carton crème ---- */
.ins-bar-ed { padding-top: 4px; }
.ins-bar-ed .btn { height: 32px; padding: 0 12px; border-radius: 9px; font: 700 13px/1 var(--body); box-shadow: none; text-shadow: none; }
.ins-bar-ed .btn[data-e="save"] { background: #1a1611; color: #f2d58a; border: 1px solid #1a1611; }
.ins-bar-ed .btn[data-e="save"]:hover { background: #2e261b; }
.ins-bar-ed .btn.ghost { background: #fffaf0; color: #1a1611; border: 1px solid rgba(26, 22, 17, .35); }
.ins-bar-ed .btn.ghost:hover { background: #f1e6cc; border-color: rgba(26, 22, 17, .6); }

/* ---- étape 34 b : encarts de l'accueil, entre la banderole et « Les jeux » ---- */
#ins-band:empty { display: none; }
.ins-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 340px)); justify-content: center; gap: 22px; margin-top: 34px; }
.ins-band .ins { animation-delay: .1s; }
@media (max-width: 600px) { .ins-band { grid-template-columns: minmax(0, 1fr); margin-top: 24px; } }

/* ---- étape 34 c : sondage — on peut cliquer sur une autre réponse pour changer d'avis ---- */
button.ins-bar { width: 100%; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
button.ins-bar:hover { background: rgba(26, 22, 17, .1); }
button.ins-bar.mine { box-shadow: inset 0 0 0 1.5px rgba(31, 122, 85, .6); }
button.ins-bar.mine span::before { content: "✓ "; color: #1f7a55; font-weight: 800; }

/* ---- étape 34 d : la fenêtre du tchat se redimensionne par son coin (pas sur téléphone : plein écran) ---- */
.chatp { resize: both; min-width: 300px; min-height: 360px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); }
.chatp::after { content: ""; position: absolute; right: 3px; bottom: 3px; width: 12px; height: 12px; pointer-events: none; background: linear-gradient(135deg, transparent 55%, rgba(26, 22, 17, .35) 55%, rgba(26, 22, 17, .35) 65%, transparent 65%, transparent 75%, rgba(26, 22, 17, .35) 75%, rgba(26, 22, 17, .35) 85%, transparent 85%); }
@media (max-width: 640px) { .chatp { resize: none; min-width: 0; min-height: 0; max-width: none; max-height: none; } .chatp::after { display: none; } }

/* ---- étape 34 e : le coin pour changer la taille du tchat, bien visible ---- */
.chatp::after { right: 0; bottom: 0; width: 22px; height: 22px; border-radius: 10px 0 18px 0; background:
  linear-gradient(135deg, transparent 46%, #6b4f12 46%, #6b4f12 54%, transparent 54%, transparent 64%, #6b4f12 64%, #6b4f12 72%, transparent 72%, transparent 82%, #6b4f12 82%, #6b4f12 90%, transparent 90%),
  rgba(214, 176, 102, .55); box-shadow: -1px -1px 0 rgba(26, 22, 17, .12); z-index: 3; }
.chatp:hover::after { background:
  linear-gradient(135deg, transparent 46%, #3d2c07 46%, #3d2c07 54%, transparent 54%, transparent 64%, #3d2c07 64%, #3d2c07 72%, transparent 72%, transparent 82%, #3d2c07 82%, #3d2c07 90%, transparent 90%),
  rgba(214, 176, 102, .85); }

/* ---- étape 34 f : une mention se voit sur la bonne discussion (« @ » doré) et sur son onglet ---- */
.cp-un.at { background: #e0a83a; color: #2a1c02; font-weight: 800; animation: cpat 1.8s ease-in-out 3; }
@keyframes cpat { 0%, 100% { box-shadow: 0 0 0 0 rgba(224, 168, 58, .6); } 50% { box-shadow: 0 0 0 5px rgba(224, 168, 58, 0); } }
@media (prefers-reduced-motion: reduce) { .cp-un.at { animation: none; } }

/* ---- étape 34 g : la poubelle sur mes propres messages (équipe) se place à gauche de la bulle ---- */
.cp-m.me .cp-del { order: -1; }

/* ---- étape 35 : protections ---- */
.blk-list { display: grid; gap: 6px; }
.blk-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, .06); }
.cp-m.cp-hidden { opacity: .6; font-style: italic; padding: 2px 0 2px 36px; }
.note.warn { background: rgba(214, 74, 58, .14); }
.note.warn a { color: inherit; text-decoration: underline; font-weight: 700; }

/* ---- étape 36 : le tchat de la partie (tous les jeux) ---- */
.gtalk { position: fixed; z-index: 70; right: calc(12px + env(safe-area-inset-right, 0px)); top: calc(var(--nav-h, 64px) + 12px); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); width: 300px;
  display: flex; flex-direction: column; background: var(--paper); color: var(--ink); border-radius: 16px; overflow: hidden;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 30px 60px -30px rgba(0, 0, 0, .9), 0 8px 18px -10px rgba(0, 0, 0, .5);
  transform: translateX(calc(100% + 30px)); visibility: hidden; transition: transform .3s cubic-bezier(.2, .8, .2, 1), visibility 0s .3s; }
.gtalk.on { transform: none; visibility: visible; transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.gt-h { display: flex; align-items: center; gap: 8px; padding: 12px 12px 10px 14px; border-bottom: 1px solid rgba(60, 40, 20, .14); }
.gt-h svg { width: 18px; height: 18px; opacity: .7; flex: none; }
.gt-h b { flex: 1; font-family: var(--display, inherit); font-size: 15.5px; }
.gt-x { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: none; border: 0; color: inherit; cursor: pointer; }
.gt-x:hover { background: rgba(60, 40, 20, .08); }
.gt-x svg { width: 17px; height: 17px; }
.gt-msgs { flex: 1; overflow-y: auto; padding: 10px 12px; display: grid; align-content: start; gap: 8px; overscroll-behavior: contain; }
.gt-empty { margin: auto 0; text-align: center; color: rgba(40, 28, 16, .55); font-size: 13.5px; padding: 20px 6px; }
.gt-m { background: rgba(255, 255, 255, .6); border-radius: 12px; padding: 7px 10px; box-shadow: 0 1px 0 rgba(60, 40, 20, .08); max-width: 100%; }
.gt-m.me { background: #f3e2b6; }
.gt-m p { margin: 2px 0 0; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; white-space: pre-wrap; }
.gt-mh { display: flex; align-items: baseline; gap: 8px; }
.gt-mh b, .gt-n { font-weight: 700; font-size: 13px; color: #6b4a1c; }
.gt-n { background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.gt-n:hover { text-decoration: underline; }
.gt-mh time { margin-left: auto; font-size: 11.5px; color: rgba(40, 28, 16, .5); }
.gt-hid { background: none; box-shadow: none; padding: 2px 4px; }
.gt-hid small { color: rgba(40, 28, 16, .5); font-style: italic; }
.gt-f { display: flex; gap: 6px; padding: 10px; border-top: 1px solid rgba(60, 40, 20, .14); }
.gt-f[hidden], .gt-ro[hidden] { display: none; }
.gt-f .inp { flex: 1; min-width: 0; height: 38px; }
.gt-f .btn { flex: none; width: 40px; height: 38px; padding: 0; display: grid; place-items: center; }
.gt-f .btn svg { width: 17px; height: 17px; }
.gt-ro { margin: 0; padding: 10px 14px 12px; font-size: 12.5px; color: rgba(40, 28, 16, .6); border-top: 1px solid rgba(60, 40, 20, .14); }
.gtalk-btn { position: fixed; z-index: 69; right: 0; top: calc(var(--nav-h, 64px) + 86px); display: flex; align-items: center; gap: 7px; padding: 9px 12px 9px 13px; border: 0; border-radius: 14px 0 0 14px;
  background: var(--paper); color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .7); }
.gtalk-btn[hidden] { display: none; }
.gtalk-btn svg { width: 17px; height: 17px; }
.gtalk-btn .badge { position: static; min-width: 18px; height: 18px; font-size: 11px; }
.gtalk-btn:hover { padding-right: 16px; }
@media (max-width: 700px) {
  .gtalk { left: calc(8px + env(safe-area-inset-left, 0px)); right: calc(8px + env(safe-area-inset-right, 0px)); top: auto; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); width: auto; height: min(62vh, 480px); transform: translateY(calc(100% + 30px)); }
  .gtalk-btn { top: auto; bottom: calc(118px + env(safe-area-inset-bottom, 0px)); padding: 9px 10px 9px 11px; }
  .gtalk-btn span { display: none; }
}
@media (min-width: 701px) { body.gtalk-lobby .gtalk { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } } /* (salon : « Lancer la partie » reste visible) */
/* (étape 39 : le tchat de la partie s'ouvre par-dessus, à droite : il ne décale plus jamais le jeu) */
@media (prefers-reduced-motion: reduce) { .gtalk, .gtalk.on { transition: none; } }

/* ---- étape 37 : supprimer un message dans un tchat de partie ---- */
.gt-del, .ldel-b { width: 24px; height: 24px; display: inline-grid; place-items: center; border: 0; border-radius: 7px; background: none; color: inherit; opacity: 0; cursor: pointer; padding: 0; flex: none; transition: opacity .15s; }
.gt-del svg, .ldel-b svg { width: 14px; height: 14px; }
.gt-m:hover .gt-del, .gt-del:focus-visible, .msg:hover .ldel-b, .ldel-b:focus-visible { opacity: .7; }
.gt-del:hover, .ldel-b:hover { opacity: 1 !important; background: rgba(200, 60, 50, .15); color: #b0372c; }
.gt-mh time + .gt-del { margin-left: 4px; }
.ldel-b { margin-left: 6px; vertical-align: middle; }
@media (hover: none) { .gt-del, .ldel-b { opacity: .55; } }
.msg .ldel { font-style: italic; opacity: .6; }

/* ---- étape 37 : signaler, choisir les messages à joindre ---- */
.rp-msgs { display: grid; gap: 6px; max-height: 220px; overflow-y: auto; padding: 2px; overscroll-behavior: contain; }
.rp-pick { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; background: rgba(60, 40, 20, .06); cursor: pointer; font-size: 14px; line-height: 1.35; }
.rp-pick:has(input:checked) { background: rgba(214, 176, 102, .28); box-shadow: inset 0 0 0 1.5px rgba(150, 110, 40, .5); }
.rp-pick input { width: 18px; height: 18px; margin: 1px 0 0; flex: none; accent-color: var(--ink); }
.rp-pick > span { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.rp-pick small { color: rgba(40, 28, 16, .55); font-size: 11.5px; }
.vc-chk input { pointer-events: auto; }

/* ---- étape 37 : la fiche d'un joueur, de partout ---- */
body:has(.callbox.large) .scrim, body:has(.callbox.big) .scrim, body:has(.callbox.full) .scrim { z-index: 150; }
.pmodal .pm-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.pmodal .pm-staff { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: rgba(40, 90, 160, .08); box-shadow: inset 0 0 0 1px rgba(40, 90, 160, .18); }
.pm-staff-h { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #2a4f86; margin-right: 4px; }
.pm-staff-h svg { width: 15px; height: 15px; }
.pm-groups { display: grid; gap: 6px; max-height: 260px; overflow-y: auto; }
.pm-grp { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(60, 40, 20, .06); }
.pm-grp b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-name { background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px; color: inherit; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-name:hover, .cb-name:focus-visible { text-decoration: underline; }

/* ---- étape 37 : statistiques de visites (régie) ---- */
.vs-wrap { display: grid; gap: 16px; --vs: #13865c; }
.vs-top { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; }
.vs-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.vs-tile { display: grid; gap: 2px; text-align: left; padding: 12px 14px; border-radius: 14px; border: 0; background: var(--paper); color: var(--ink); font: inherit; cursor: pointer; box-shadow: 0 8px 18px -12px rgba(0, 0, 0, .8); }
.vs-tile span { font-size: 13px; color: rgba(26, 22, 17, .7); }
.vs-tile b { font-family: var(--display); font-size: 28px; line-height: 1.1; }
.vs-tile small { font-size: 11.5px; color: rgba(26, 22, 17, .55); }
.vs-tile.on { box-shadow: inset 0 0 0 2px var(--vs), 0 8px 18px -12px rgba(0, 0, 0, .8); }
.vs-tile.vs-sum { cursor: default; background: rgba(243, 236, 220, .82); }
.vs-card { display: grid; gap: 10px; min-width: 0; align-content: start; }
.vs-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; }
.vs-h h4 { margin: 0; font-size: 16px; }
.vs-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 14px; }
.vs-empty { margin: 0; color: rgba(26, 22, 17, .55); font-size: 14px; }
.vs-note { margin: 0; font-size: 12.5px; color: rgba(26, 22, 17, .6); }
.vs-hb { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.vs-hb li { display: grid; grid-template-columns: minmax(90px, 38%) 1fr auto; align-items: center; gap: 10px; font-size: 13.5px; }
.vs-hl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-ht { height: 12px; display: block; }
.vs-ht i { display: block; height: 100%; width: var(--w); background: var(--vs); border-radius: 0 4px 4px 0; transform-origin: left; animation: vsGrow .7s var(--ease-out) both; }
.vs-hb b { font-size: 13px; min-width: 3ch; text-align: right; }
.vs-vb { position: relative; display: grid; grid-template-rows: 180px auto; padding-left: 40px; }
.vs-hours .vs-vb { grid-template-rows: 130px auto; }
.vs-grid { position: absolute; left: 0; right: 0; top: 0; height: 180px; pointer-events: none; }
.vs-hours .vs-grid { height: 130px; }
.vs-grid span { position: absolute; left: 0; right: 0; bottom: calc(var(--y) * 100%); border-top: 1px solid rgba(26, 22, 17, .1); }
.vs-grid small { position: absolute; left: 0; top: -8px; font-size: 10.5px; color: rgba(26, 22, 17, .5); width: 36px; text-align: right; transform: translateX(-4px); }
.vs-cols { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 2px; align-items: end; height: 100%; }
.vs-col { height: 100%; display: flex; align-items: flex-end; cursor: default; outline: none; border-radius: 3px; }
.vs-col i { display: block; width: 100%; height: var(--h); min-height: 1px; background: var(--vs); border-radius: 4px 4px 0 0; transform-origin: bottom; animation: vsRise .6s var(--ease-out) both; }
.vs-col:hover i, .vs-col:focus-visible i { filter: brightness(1.18); }
.vs-col:focus-visible { box-shadow: 0 0 0 2px rgba(19, 134, 92, .4); }
.vs-col.hi i { background: #0d5f41; }
.vs-xl { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 2px; margin-top: 6px; }
.vs-xl small { font-size: 10.5px; color: rgba(26, 22, 17, .55); white-space: nowrap; overflow: visible; }
.vs-table summary, .vs-how summary { cursor: pointer; font-weight: 700; font-size: 14px; }
.vs-table .tbl-wrap { max-height: 320px; overflow: auto; margin-top: 8px; }
.vs-how ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 8px; font-size: 14px; line-height: 1.5; }
.vs-tip { position: fixed; z-index: 200; pointer-events: none; padding: 6px 10px; border-radius: 9px; background: #1a1611; color: #f3ecdc; font-size: 12.5px; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .7); max-width: 260px; }
.vs-tip[hidden] { display: none; }
@keyframes vsGrow { from { transform: scaleX(0); } }
@keyframes vsRise { from { transform: scaleY(0); } }
@media (prefers-reduced-motion: reduce) { .vs-ht i, .vs-col i { animation: none; } }
@media (max-width: 600px) { .vs-vb { grid-template-rows: 140px auto; } .vs-grid { height: 140px; } .vs-tile b { font-size: 23px; } .vs-hb li { grid-template-columns: minmax(80px, 40%) 1fr auto; } }
.vs-card.sheet { background: var(--paper); color: var(--ink); box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 18px 40px -26px rgba(0, 0, 0, .9); }
.vs-card .dim { color: rgba(26, 22, 17, .6); }
.vs-card .tbl th, .vs-card .tbl td { color: var(--ink); border-color: rgba(26, 22, 17, .1); }
.vs-top .dim { color: var(--chalk); opacity: .75; }

/* ---- étape 38 : compteur de rats (jusqu'à 99 999 en entier) ---- */
.ratpill b.long { font-size: 14.5px; letter-spacing: -.02em; }
@media (max-width: 640px) { .ratpill b.long { font-size: 12.5px; } }
@media (max-width: 360px) { .ratpill b.long { font-size: 11.5px; } }

/* ---- étape 38 : lecteur de l'enregistrement d'un signalement ---- */
.aplayer { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: rgba(26, 22, 17, .06); box-shadow: inset 0 0 0 1px rgba(26, 22, 17, .08); }
.ap-play { width: 46px; height: 46px; flex: none; border-radius: 50%; border: 0; display: grid; place-items: center; background: var(--ink); color: var(--paper); cursor: pointer; transition: transform .15s; }
.ap-play:hover { transform: scale(1.06); }
.ap-play svg { width: 20px; height: 20px; }
.ap-mid { flex: 1; min-width: 0; display: grid; gap: 4px; }
.ap-seek { width: 100%; accent-color: #13865c; }
.ap-times { display: flex; justify-content: space-between; font-size: 12px; color: rgba(26, 22, 17, .6); }
.ap-vol { display: flex; align-items: center; gap: 6px; flex: none; color: rgba(26, 22, 17, .7); }
.ap-vol svg { width: 17px; height: 17px; }
.ap-vol input { width: 80px; accent-color: #13865c; }
@media (max-width: 480px) { .ap-vol input { width: 56px; } }
@supports (-webkit-touch-callout: none) { .ap-vol { display: none; } } /* (iPhone : le volume se règle avec les boutons du téléphone) */

/* ---- étape 38 : la régie, menu sur le côté (tiroir sur téléphone) ---- */
.alayout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 26px; align-items: start; }
.anav { position: sticky; top: calc(var(--nav-h) + 16px); max-height: calc(100dvh - var(--nav-h) - 32px); overflow-y: auto; display: grid; gap: 8px; padding: 10px; border-radius: 20px; background: rgba(9, 26, 20, .55); box-shadow: inset 0 0 0 1px var(--line), 0 24px 50px -30px rgba(0, 0, 0, .9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); scrollbar-width: thin; }
.anav-h, .anav-open, .anav-scrim { display: none; }
.ag { border-radius: 14px; }
.ag > summary { list-style: none; display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 12px; cursor: pointer; color: var(--chalk); font-size: 13.5px; font-weight: 700; user-select: none; transition: background .2s; }
.ag > summary::-webkit-details-marker { display: none; }
.ag > summary:hover { background: rgba(236, 229, 212, .06); }
.ag-ic { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: color-mix(in srgb, var(--c) 22%, transparent); color: var(--c); flex: none; }
.ag-ic svg { width: 15px; height: 15px; }
.ag-t { flex: 1; min-width: 0; }
.ag > summary > svg { width: 15px; height: 15px; opacity: .55; transition: transform .25s var(--ease-out); }
.ag[open] > summary > svg { transform: rotate(180deg); }
.ag-n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--danger); color: #fff; font-size: 11.5px; display: grid; place-items: center; }
.ag-n[hidden] { display: none; }
.ag-items { display: grid; gap: 2px; padding: 2px 0 6px 12px; margin-left: 13px; border-left: 1.5px solid color-mix(in srgb, var(--c) 35%, transparent); }
.ag[open] .ag-items { animation: agOpen .3s var(--ease-out); }
.aitem { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 11px; background: none; color: rgba(236, 229, 212, .82); font: inherit; font-size: 14px; text-align: left; cursor: pointer; transition: background .18s, color .18s, transform .18s; }
.aitem:hover { background: rgba(236, 229, 212, .07); color: var(--chalk); transform: translateX(2px); }
.aitem:focus-visible { outline: 2px solid var(--brass); outline-offset: 1px; }
.aitem.on { background: var(--paper); color: var(--ink); font-weight: 700; box-shadow: 0 8px 18px -12px rgba(0, 0, 0, .9); }
.aitem.on::before { content: ""; position: absolute; left: -14px; top: 9px; bottom: 9px; width: 3px; border-radius: 2px; background: var(--c); }
.ai-ic { width: 18px; height: 18px; display: grid; place-items: center; flex: none; opacity: .85; }
.ai-ic svg { width: 17px; height: 17px; }
.aitem.on .ai-ic { color: color-mix(in srgb, var(--c) 75%, #1a1611); opacity: 1; }
.ai-t { flex: 1; min-width: 0; }
.aitem .abadge { position: static; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--danger); color: #fff; font-size: 11.5px; display: grid; place-items: center; animation: abPulse 2.4s ease-in-out infinite; }
.aitem .abadge[hidden] { display: none; }
.amain { min-width: 0; display: grid; gap: 18px; }
.ahead { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 18px; background: linear-gradient(120deg, color-mix(in srgb, var(--c) 20%, rgba(9, 26, 20, .6)), rgba(9, 26, 20, .35)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent); }
.ah-ic { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 14px; background: color-mix(in srgb, var(--c) 28%, transparent); color: var(--c); }
.ah-ic svg { width: 24px; height: 24px; }
.ahead small { color: var(--c); font-weight: 700; font-size: 12.5px; }
.ahead h2 { margin: 0; font-size: 24px; line-height: 1.15; }
.ahead p { margin: 2px 0 0; font-size: 13.5px; color: rgba(236, 229, 212, .72); }
@keyframes agOpen { from { opacity: 0; transform: translateY(-4px); } }
@keyframes abPulse { 50% { box-shadow: 0 0 0 4px rgba(255, 106, 85, .18); } }
@media (prefers-reduced-motion: reduce) { .ag[open] .ag-items, .aitem .abadge { animation: none; } .aitem:hover { transform: none; } }
@media (max-width: 900px) {
  .alayout { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .anav-open { display: inline-flex; justify-self: start; gap: 8px; }
  .anav-open svg { width: 17px; height: 17px; }
  .anav { position: fixed; z-index: 95; top: 0; left: 0; bottom: 0; width: min(310px, 86vw); max-height: none; border-radius: 0 22px 22px 0; padding: calc(14px + env(safe-area-inset-top, 0px)) 12px calc(14px + env(safe-area-inset-bottom, 0px)); background: rgba(9, 26, 20, .97); transform: translateX(-105%); transition: transform .3s var(--ease-out); align-content: start; }
  .anav-on .anav { transform: none; }
  .anav-h { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 8px; }
  .anav-h b { font-family: var(--display); font-size: 20px; }
  .anav-x { width: 36px; height: 36px; display: grid; place-items: center; border: 0; border-radius: 10px; background: rgba(236, 229, 212, .08); color: var(--chalk); cursor: pointer; }
  .anav-x svg { width: 18px; height: 18px; }
  .anav-scrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 94; background: rgba(4, 12, 9, .6); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
  body.anav-lock { overflow: hidden; }
  .ahead { padding: 12px 14px; } .ahead h2 { font-size: 20px; } .ah-ic { width: 38px; height: 38px; }
}

/* ---- étape 39 : menu des sons (boutons « Changer de musique » / « Changer le son de survol ») ---- */
.volpop .vrow .vtog { height: auto; min-height: 40px; padding: 7px 10px; line-height: 1.2; font-size: 13px; text-align: center; }
.volpop .vtog.alt { gap: 7px; }
.volpop .vtog.alt svg { flex: none; width: 15px; height: 15px; margin: 0; }
.volpop .vrow + .vtog, .volpop .vblock > .vrow { margin-top: 2px; }
.hvpick[hidden] { display: none; }

/* ---- étape 39 : la saison suivante, annoncée ---- */
.rk-season { align-items: center; }
.rk-sep { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .45; flex: none; }
.rk-next b { color: var(--brass); font-weight: 800; }

/* ---- étape 39 : salon (réglages sous les joueurs) ---- */
.wrap.lobby .grid-side { grid-template-columns: minmax(0, 1fr); gap: 22px; }
.wrap.lobby .lset { max-width: none; }

/* ---- étape 39 : ce qui se passe en partie, bien lisible ---- */
.gtable .gstatus { align-items: center; gap: 10px; padding: 6px 16px 12px; }
.gs-txt { display: inline-flex; align-items: center; padding: 8px 16px; border-radius: 999px; background: rgba(6, 18, 14, .62); box-shadow: inset 0 0 0 1px rgba(242, 213, 138, .2), 0 8px 18px -12px rgba(0, 0, 0, .9); color: var(--chalk); font: 700 16px/1.25 var(--body); text-align: center; }
.gs-txt.mine { background: linear-gradient(180deg, #f2d58a, #d6b066); color: #1a1611; box-shadow: 0 0 0 3px rgba(242, 213, 138, .22), 0 10px 22px -10px rgba(214, 176, 102, .8); animation: gsMine 2.6s ease-in-out infinite; }
.gs-col { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; background: rgba(6, 18, 14, .62); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); color: var(--chalk); }
.gs-col i { width: 30px; height: 30px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px rgba(255, 255, 255, .85), 0 0 18px var(--c); transition: background .4s; }
.gs-col small { font-size: 11.5px; opacity: .7; }
.gs-col b { font: 800 15px/1 var(--display); }
.gs-col.chg i { animation: gsCol .9s var(--ease-out); }
@keyframes gsCol { 0% { transform: scale(.4) rotate(-90deg); } 60% { transform: scale(1.25); box-shadow: 0 0 0 3px #fff, 0 0 30px var(--c); } 100% { transform: none; } }
@keyframes gsMine { 50% { box-shadow: 0 0 0 6px rgba(242, 213, 138, .12), 0 10px 26px -8px rgba(214, 176, 102, .9); } }
@media (max-width: 600px) { .gs-txt { font-size: 14.5px; padding: 7px 13px; } .gs-col small { display: none; } .gs-col i { width: 24px; height: 24px; } }
.lhint { font-size: 15.5px; color: var(--chalk); }
.lhint:not(:empty) > * , .lhint:not(:empty) { text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.nvstatus { font-size: 15px; }
.bjstatus { font-size: 16px; }
.st-flash { animation: stFlash .9s var(--ease-out); }
@keyframes stFlash { 0% { filter: brightness(1.6); transform: scale(1.04); } 100% { filter: none; transform: none; } }
.bjstatus.st-flash { animation-name: stFlashBj; }
@keyframes stFlashBj { 0% { filter: brightness(1.6); } 100% { filter: none; } }
@media (prefers-reduced-motion: reduce) { .gs-txt.mine, .gs-col.chg i, .st-flash { animation: none; } }

/* ---- étape 39 : fin de partie animée (tous les jeux) ---- */
.endbox .endcard .ranking > li, .endbox .endcard .lroles > *, .endbox .endcard .nvstats > * { animation: endIn .5s var(--ease-out) both; }
.endbox .endcard .ranking > li:nth-child(1) { animation-delay: .35s; } .endbox .endcard .ranking > li:nth-child(2) { animation-delay: .5s; }
.endbox .endcard .ranking > li:nth-child(3) { animation-delay: .65s; } .endbox .endcard .ranking > li:nth-child(4) { animation-delay: .8s; }
.endbox .endcard .ranking > li:nth-child(n+5) { animation-delay: .95s; }
.endbox .endcard .endstamp { animation: stampIn .7s .25s cubic-bezier(.3, 1.6, .5, 1) both; }
.endbox .endcard.res-win { isolation: isolate; }
.endbox .endcard.res-win::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: radial-gradient(ellipse at 50% 0%, rgba(242, 213, 138, .45), transparent 60%); animation: winGlow 2.4s ease-in-out 2; }
.confetti-layer { position: fixed; z-index: 120; pointer-events: none; overflow: hidden; border-radius: 22px; }
.confetto { position: absolute; top: 0; width: 8px; height: 12px; border-radius: 2px; }
@keyframes endIn { from { opacity: 0; transform: translateY(10px); } }
@keyframes stampIn { from { opacity: 0; transform: scale(1.8) rotate(-14deg); } }
@keyframes winGlow { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .endbox .endcard .ranking > li, .endbox .endcard .endstamp, .endbox .endcard.res-win::before { animation: none; } }

/* ---- étape 39 : « Comment on joue » (liste animée + cartes illustrées) ---- */
.howto { display: grid; gap: 22px; }
.how-list .rules-list li { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); transition-delay: calc(var(--i) * 70ms); }
.howto.on .how-list .rules-list li { opacity: 1; transform: none; }
.how-cards-h { margin: 6px 0 -6px; font-size: 22px; }
.gcgrid .rolec { opacity: 0; transform: translateY(16px) scale(.97); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out), box-shadow .3s; transition-delay: calc(var(--i) * 80ms + 150ms); }
.howto.on .gcgrid .rolec { opacity: 1; transform: none; }
.howto.on .gcgrid .rolec:hover { transform: translateY(-6px) rotate(-1deg); transition-delay: 0s; }
.rolec.gc .gc-art { width: auto; min-width: 92px; height: 104px; display: grid; place-items: center; }
.gc-art .pc { transform: rotate(-6deg); box-shadow: 0 10px 18px -8px rgba(0, 0, 0, .6); }
.gc-ic { width: 84px; height: 84px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .28), rgba(255, 255, 255, .06)); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .22); color: #fff; position: relative; }
.gc-ic > svg { width: 44px; height: 44px; }
.gc-ic.wide > svg { width: 62px; height: auto; }
.gc-ic.gc-bubble { border-radius: 22px 22px 22px 6px; width: 96px; height: 72px; }
.gc-word { font: 900 30px/1 var(--display); letter-spacing: -.02em; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.gc-word.q { font-size: 46px; }
.gc-bj { display: flex; }
.gc-bj > * { width: 40px; flex: none; transform: rotate(-8deg); box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .6); border-radius: 5px; }
.gc-bj > * + * { margin-left: -16px; transform: rotate(8deg) translateY(4px); }
.gc-bj.split > * + * { margin-left: 6px; }
.gc-plus { position: absolute; right: 2px; top: 4px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: #1f7a48; font: 900 20px/1 var(--display); }
span.gc-fun { display: grid; place-items: center; } /* (étape 41 : la pièce violette des jetons fun ; « .gc-fun » seul colorait aussi toute la carte) */
.rolec.gc-blue { --a: #2d6ad0; --b: #0f2347; --e: #9cc4ff; } .rolec.gc-yellow { --a: #b88a16; --b: #3a2a06; --e: #ffe08a; }
.rolec.gc-green { --a: #1f8a55; --b: #0b2a1a; --e: #9ff0c4; } .rolec.gc-red { --a: #b8402f; --b: #3a120c; --e: #ffb4a8; }
.rolec.gc-ink { --a: #3c3a46; --b: #121117; --e: #d6b066; } .rolec.gc-purple { --a: #6b4ab0; --b: #1d1640; --e: #c8b8ff; }
.rolec.gc-gold { --a: #a8822a; --b: #2a1f08; --e: #f2d58a; } .rolec.gc-sea { --a: #2a7a9a; --b: #0a2430; --e: #a8e6ff; }
.rolec.gc-fun { --a: #7a4ac0; --b: #241040; --e: #e0b8ff; }
@media (prefers-reduced-motion: reduce) { .how-list .rules-list li, .gcgrid .rolec { opacity: 1; transform: none; transition: none; } }

/* ---- étape 39 : Rats-Garous, la narration bien visible ---- */
.lhint:not(:empty) { display: block; width: fit-content; max-width: min(760px, calc(100% - 32px)); margin: 0 auto calc(10px + env(safe-area-inset-bottom, 0px)); padding: 10px 18px; border-radius: 16px; background: rgba(8, 12, 30, .66); box-shadow: inset 0 0 0 1px rgba(184, 168, 255, .25), 0 14px 30px -16px rgba(0, 0, 0, .9); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #f2eefc; font-size: 16px; line-height: 1.45; text-align: center; }
.lhint b { color: #ffe3a3; }
@media (max-width: 900px) { .lhint:not(:empty) { margin-left: 12px; margin-right: 12px; max-width: calc(100% - 150px); text-align: left; font-size: 14.5px; } }
.msg.narr { display: flex; align-items: flex-start; gap: 8px; margin: 6px 0; padding: 9px 12px; border-radius: 12px; background: linear-gradient(120deg, rgba(214, 176, 102, .2), rgba(214, 176, 102, .07)); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .35); }
.msg.narr p { margin: 0; font-style: italic; font-weight: 600; color: #f6e4b8; font-size: 14px; line-height: 1.4; }
.narr-ic { flex: none; width: 22px; height: 22px; display: grid; place-items: center; color: #e6be62; }
.narr-ic svg { width: 16px; height: 16px; }

/* ---- étape 39 : Black Rat, la Table Fun ---- */
.bjroom-card.funroom { background: linear-gradient(160deg, rgba(122, 74, 192, .38), rgba(36, 16, 64, .55)); box-shadow: inset 0 0 0 1.5px rgba(200, 160, 255, .5), 0 18px 40px -22px rgba(122, 74, 192, .9); }
.bjroom-card.funroom .rc-art { position: relative; }
.bjroom-card.funroom .rc-art svg { filter: hue-rotate(40deg) saturate(1.2); }
.fun-badge { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; background: linear-gradient(180deg, #c89bff, #8a55e0); color: #1d0b33; font: 800 12.5px/1 var(--body); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .6); animation: funPop 3s ease-in-out infinite; }
.fun-badge svg { width: 13px; height: 13px; }
.fun-note { margin: -2px 0 0; font-size: 13px; color: #e6d4ff; }
@keyframes funPop { 50% { transform: translateY(-2px) scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .fun-badge { animation: none; } }

/* ---- étape 39 : transition de la Bataille navale, le navire ennemi prend feu (plus d'éclair blanc) ---- */
.tx .sv-enemy { transform-box: fill-box; transform-origin: 50% 80%; }
.tx .sv-fire { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; }
.tx .sv-fire.on { animation: svFireIn .35s ease-out forwards, svFlick .28s ease-in-out .35s infinite alternate; }
.tx .sv-smoke { animation: svSmoke 1.6s ease-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes svFireIn { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }
@keyframes svFlick { to { opacity: .82; transform: scale(1.06, .95); } }
@keyframes svSmoke { from { transform: translateY(6px); opacity: .9; } to { transform: translateY(-10px); opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .tx .sv-fire.on { animation: none; opacity: 1; } .tx .sv-smoke { animation: none; } }

/* ---- étape 39 : Bataille navale, le placement bien centré ---- */
.nvtable[data-phase="place"] .nvmine { justify-content: center; justify-items: center; }
.nvtable[data-phase="place"] .nvmine > header { justify-content: center; justify-self: stretch; text-align: center; }
.nvtable[data-phase="place"] .nvmine > .nvframe { justify-self: center; }
@media (min-width: 760px) { .nvtable[data-phase="place"] .nvmine > .nvwho { grid-column: 1 / -1; justify-self: center; } }
.nvtable[data-phase="place"] .nvmine > .nvplace { justify-self: stretch; }
.nvtable[data-phase="place"] .nvlog { display: none; }

/* ---- étape 40 : taille du site (zoom) ---- */
/* les pages (barre du haut, contenu, bas de page) sont réduites ensemble ; les tables de jeu et les fenêtres gardent leur taille */
html.zoomed .nav, html.zoomed body:not(.in-game) #main, html.zoomed body:not(.in-game) .foot { zoom: var(--rgz, 1); --nav-h: var(--nav-hz, 72px); }
.zoompop .zm-row { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; padding: 2px 2px 4px; }
.zoompop .zm-b { height: 40px; border-radius: 12px; background: rgba(26, 22, 17, .07); font: 700 22px/1 var(--body); color: var(--ink); transition: background .2s; }
.zoompop .zm-b:hover:not(:disabled) { background: rgba(26, 22, 17, .13); }
.zoompop .zm-b:disabled { opacity: .35; cursor: default; }
.zoompop .zm-v { text-align: center; font: 700 17px/1 var(--body); font-variant-numeric: tabular-nums; }
.zoompop .lp-opt { justify-content: space-between; }
.zoompop .zm-note { font-size: 12.5px; line-height: 1.4; color: rgba(26, 22, 17, .62); padding: 2px 4px 0; }
@media (max-width: 899px) { .zoombtn { display: none; } }

/* ---- étape 41 : Color Rats, le texte du tour toujours lisible ---- */
.gtable .gstatus > .gs-txt { padding: 8px 16px; border-radius: 999px; background: rgba(8, 16, 13, .78); color: #f6efdf; text-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.gtable .gstatus > .gs-txt.mine { background: linear-gradient(180deg, #f6dc98, #dcb768); color: #1d150a; text-shadow: none; }
.gtable .gstatus > .gs-txt b { color: inherit; }

/* ---- étape 41 : fenêtre « Nouvelle partie », plus aérée ---- */
.setmodal .smbody { gap: 18px; padding: 8px 28px 20px; }
.sx { gap: 18px; }
.sx .scols { gap: 18px; }
.sx .scol { gap: 18px; }
.cinv { gap: 10px; padding: 14px 16px 16px; border-radius: 14px; background: rgba(26, 22, 17, .045); box-shadow: inset 0 0 0 1px rgba(26, 22, 17, .07); }
.cinv-h { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.cinv-h > div { display: grid; gap: 3px; min-width: 0; flex: 1 1 220px; }
.cinv-h small { color: var(--ink-2); font-size: 13px; line-height: 1.35; }
.cinv-h .btn { flex: none; }
.cinv-empty { margin: 0; font-size: 13px; color: var(--ink-2); }
.cinv .inv-list { max-height: none; margin: 0; padding: 0; gap: 6px; }
.setmodal .smfoot { gap: 16px; padding: 14px 28px 18px; }
.setmodal .smfoot .note { line-height: 1.4; }
.setmodal .smfoot .acts { gap: 10px; }
@media (max-width: 640px) {
  .setmodal .smbody { gap: 14px; padding: 4px 16px 14px; }
  .cinv { padding: 12px; }
  .cinv-h .btn { width: 100%; justify-content: center; }
  .setmodal .smfoot { gap: 10px; padding: 10px 14px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .setmodal .smfoot .note { font-size: 12px; }
}
/* une ligne d'invitation : avatar, pseudo, état, retirer / annuler */
.inv-row { min-height: 54px; padding: 8px 10px; background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px rgba(26, 22, 17, .08); }
.inv-row .av { flex: none; }
.inv-n { gap: 1px; }
.inv-n b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-n small { font-size: 12.5px; line-height: 1.3; }
.inv-st { flex: none; white-space: nowrap; }
.inv-st.picked, .inv-st.sent { background: rgba(214, 176, 102, .22); color: #7a5a1c; }
.inv-x { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--ink-2); transition: background .2s, color .2s; }
.inv-x:hover { background: rgba(214, 74, 58, .12); color: #a3352a; }
.inv-x svg { width: 16px; height: 16px; }
.inv-cancel { flex: none; }
.inv-row.inv-accepted { box-shadow: inset 0 0 0 1.5px rgba(61, 165, 122, .45); }
.inv-row.inv-refused { opacity: .72; }
@media (max-width: 480px) { .inv-row { flex-wrap: wrap; } .inv-n { flex: 1 1 60%; } .inv-row .inv-st { order: 3; } .inv-cancel, .inv-x { margin-left: auto; } }
/* le salon : les invitations envoyées, sous les places */
.linv { display: grid; gap: 10px; margin-top: 18px; padding: 16px 18px; }
.linv-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.linv-h small { color: var(--ink-2); font-size: 13px; }
.linv .inv-list { max-height: none; margin: 0; padding: 0; gap: 6px; }

/* ---- étape 41 : Rats-Garous, chaque carte de rôle a sa petite animation ---- */
.rolec .rc-ri [class^="ra-"], .rolec .rc-ri [class*=" ra-"] { transform-box: fill-box; transform-origin: center; }
.rolec .ra-blink { animation: raBlink 5.5s ease-in-out infinite; }
.rolec .ra-head { animation: raHead 4.8s ease-in-out infinite; transform-origin: 50% 100%; }
.rolec .ra-hat { animation: raHat 4.8s ease-in-out infinite; transform-origin: 50% 100%; }
.rolec .ra-body { animation: raBreath 4.8s ease-in-out infinite; transform-origin: 50% 100%; }
.rolec .ra-swirl { animation: raSpin 7s linear infinite; transform-box: view-box; transform-origin: 50px 48px; }
.rolec .ra-halo { animation: raHalo 3.6s ease-in-out infinite; }
.rolec .ra-liq { animation: raLiq 2.6s ease-in-out infinite; transform-origin: 50% 100%; }
.rolec .ra-bub { animation: raBub 2.8s ease-in infinite; }
.rolec .ra-bub.b2 { animation-delay: .9s; } .rolec .ra-bub.b3 { animation-delay: 1.7s; }
.rolec .ra-shine { animation: raShine 4.5s ease-in-out infinite; transform-box: view-box; transform-origin: 0 0; }
.rolec .ra-aim { animation: raAim 3.4s ease-in-out infinite; }
.rolec .ra-dot { animation: raDot 1.7s ease-in-out infinite; }
.rolec .ra-heart { animation: raBeat 1.6s ease-in-out infinite; }
.rolec .ra-arrow { animation: raArrow 3.2s ease-in-out infinite; }
.rolec .ra-glint { animation: raGlint 3.4s ease-in-out infinite; }
.rolec .ra-sash { animation: raSash 4s ease-in-out infinite; }
.rolec .ra-medal { animation: raMedal 3.2s ease-in-out infinite; transform-origin: 50% 0%; }
.rolec .ra-quill { animation: raQuill 2.4s ease-in-out infinite; transform-origin: 20% 100%; }
@keyframes raBlink { 0%, 90%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.1); } }
@keyframes raHead { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-4deg); } 65% { transform: rotate(3deg); } }
@keyframes raHat { 0%, 100% { transform: rotate(0) translateY(0); } 40% { transform: rotate(-5deg) translateY(-1px); } 70% { transform: rotate(3deg); } }
@keyframes raBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03, .98); } }
@keyframes raSpin { to { transform: rotate(360deg); } }
@keyframes raHalo { 0%, 100% { opacity: .25; transform: scale(1); } 50% { opacity: .55; transform: scale(1.08); } }
@keyframes raLiq { 0%, 100% { transform: skewX(0) translateY(0); } 25% { transform: skewX(6deg) translateY(-1px); } 75% { transform: skewX(-6deg) translateY(1px); } }
@keyframes raBub { 0% { transform: translateY(0) scale(.6); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-22px) scale(1.1); opacity: 0; } }
@keyframes raShine { 0%, 55% { transform: translateX(0) skewX(-20deg); } 100% { transform: translateX(150px) skewX(-20deg); } }
@keyframes raAim { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(.9) rotate(8deg); } }
@keyframes raDot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.75); } }
@keyframes raBeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.08); } 30% { transform: scale(.98); } 45% { transform: scale(1.06); } }
@keyframes raArrow { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(2px, -2px); } }
@keyframes raGlint { 0%, 70%, 100% { opacity: 0; transform: scale(.4); } 80% { opacity: 1; transform: scale(1.2); } }
@keyframes raSash { 0%, 100% { transform: skewY(0); } 50% { transform: skewY(-2.5deg) translateY(1px); } }
@keyframes raMedal { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes raQuill { 0%, 100% { transform: rotate(0) translate(0, 0); } 25% { transform: rotate(-4deg) translate(-1px, 1px); } 50% { transform: rotate(2deg) translate(1px, 0); } 75% { transform: rotate(-3deg) translate(0, 1px); } }

/* ---- étape 41 : « En un coup d'œil », l'intérieur des cartes bouge doucement ---- */
.gcgrid .gc-art > .pc { animation: gcSway 4.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.7s); }
.gcgrid .gc-ic > svg { animation: gcBob 3.8s ease-in-out infinite; animation-delay: calc(var(--i) * -.5s); }
.gcgrid .gc-ic.wide > svg { animation-name: gcDrift; }
.gcgrid .gc-ic::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(255, 255, 255, .35); animation: gcRing 3.6s ease-out infinite; animation-delay: calc(var(--i) * -.6s); pointer-events: none; }
.gcgrid .gc-ic.gc-cards::after, .gcgrid .gc-ic.gc-bubble::after { display: none; }
.gcgrid .gc-word { display: inline-block; animation: gcPulse 2.8s ease-in-out infinite; }
.gcgrid .gc-bubble { animation: gcTalk 3s ease-in-out infinite; transform-origin: 20% 100%; }
.gcgrid .gc-hand { transform-box: view-box; transform-origin: 12px 13px; animation: raSpin 6s linear infinite; }
.gcgrid .gc-star3 { animation: gcTwinkle 2.4s ease-in-out infinite; }
.gcgrid .gc-wave { animation: gcWave 2.6s ease-in-out infinite; }
.gcgrid .role-ic.nvrule { animation: gcBob 3.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.5s); }
.gcgrid .role-ic.nvrule::after { animation: gcPulse 2.4s ease-in-out infinite; }
.gcgrid .gc-plus { animation: gcPop 2.4s ease-in-out infinite; }
.gcgrid .gc-fun svg { animation: gcFlip 5s ease-in-out infinite; }
/* Black Rat : de vraies petites cartes, au bon format */
.gc-ic.gc-cards { width: 112px; height: 100px; border-radius: 0; background: none; box-shadow: none; }
.gc-bj > * { --cw: 48px; width: var(--cw); }
.gc-bj > * + * { margin-left: -14px; }
.gc-bj.split > * + * { margin-left: 8px; }
.gcgrid .gc-bj > * { animation: gcFanL 4s ease-in-out infinite; }
.gcgrid .gc-bj > * + * { animation-name: gcFanR; }
.gcgrid .gc-bj.split > * { animation-name: gcSplitL; } .gcgrid .gc-bj.split > * + * { animation-name: gcSplitR; }
.gc-cards .gc-plus { right: -4px; top: -2px; }
.gc-inf { position: absolute; right: -6px; bottom: -4px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #f6efdf; color: #5b2ea0; font: 900 21px/1 var(--display); box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .6); }
.rolegrid.gcgrid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.rolec.gc { padding: 24px 20px 22px; gap: 10px; }
@keyframes gcSway { 0%, 100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(-1deg) translateY(-4px); } }
@keyframes gcBob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(-3deg); } }
@keyframes gcDrift { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px) translateY(-2px); } }
@keyframes gcRing { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .3); } 70%, 100% { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0); } }
@keyframes gcPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes gcTalk { 0%, 100% { transform: rotate(0) scale(1); } 20% { transform: rotate(-4deg) scale(1.04); } 35% { transform: rotate(3deg) scale(1); } }
@keyframes gcTwinkle { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes gcWave { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-4px); } }
@keyframes gcPop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
@keyframes gcFlip { 0%, 70%, 100% { transform: rotateY(0); } 85% { transform: rotateY(180deg); } }
@keyframes gcFanL { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(-13deg) translateY(-2px); } }
@keyframes gcFanR { 0%, 100% { transform: rotate(8deg) translateY(4px); } 50% { transform: rotate(13deg) translateY(2px); } }
@keyframes gcSplitL { 0%, 100% { transform: rotate(-8deg) translateX(0); } 50% { transform: rotate(-10deg) translateX(-3px); } }
@keyframes gcSplitR { 0%, 100% { transform: rotate(8deg) translateY(4px) translateX(0); } 50% { transform: rotate(10deg) translateY(4px) translateX(3px); } }

/* ---- étape 41 : la fin de partie flotte doucement (propriété « translate » : elle s'ajoute aux autres animations) ---- */
.endbox .endcard { animation: endFloat 6s ease-in-out 1.4s infinite; }
@keyframes endFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }

/* ---- étape 41 : Black Rat, jetons fun infinis ---- */
.bjinf { font-size: 1.25em; line-height: 1; font-weight: 900; letter-spacing: 0; }

@media (prefers-reduced-motion: reduce) {
  .rolec .rc-ri *, .gcgrid .gc-art *, .gcgrid .gc-ic::after, .gcgrid .role-ic.nvrule, .gcgrid .role-ic.nvrule::after, .endbox .endcard { animation: none !important; }
}

/* ---- étape 41 (suite) : salon, les joueurs en haut et les réglages dessous (« Lancer » ne crée plus de 2e colonne) ---- */
.wrap.lobby .grid-side > .lacts { grid-column: 1 / -1; }

/* ---- étape 41 (suite) : fiche d'un joueur, des boutons rangés ---- */
.pmodal .pm-acts { display: grid; gap: 10px; margin-top: 6px; }
.pmodal .pm-main { width: 100%; justify-content: center; min-height: 46px; }
.pm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pm-b { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 8px 14px; border-radius: 12px; text-align: left; font: 650 14px/1.25 var(--body); color: var(--ink); background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1px rgba(26, 22, 17, .14); transition: background .2s, box-shadow .2s, transform .2s; }
.pm-b:hover { background: #fff; box-shadow: inset 0 0 0 1px rgba(26, 22, 17, .24), 0 6px 14px -10px rgba(26, 22, 17, .5); transform: translateY(-1px); }
.pm-b svg { flex: none; width: 18px; height: 18px; }
.pm-b span { min-width: 0; }
.pm-b.warn { color: #8a3a2a; }
.pm-b.warn:hover { background: rgba(214, 74, 58, .08); box-shadow: inset 0 0 0 1px rgba(214, 74, 58, .35); }
.pm-b.danger { color: #b3261e; background: rgba(214, 74, 58, .07); box-shadow: inset 0 0 0 1px rgba(214, 74, 58, .35); }
.pm-b.danger:hover { background: rgba(214, 74, 58, .14); }
.pmodal .pm-staff { display: grid; gap: 10px; padding: 12px; }
.pmodal .pm-staff .pm-b:not(.danger) { background: rgba(255, 255, 255, .7); }
@media (max-width: 420px) { .pm-grid { grid-template-columns: minmax(0, 1fr); } }
.pm-grid > .pm-b:first-child:nth-last-child(2n+1) { grid-column: 1 / -1; } /* (nombre impair : le premier prend toute la ligne, les autres vont par deux) */

/* ---- étape 42 : fiche d'un joueur, « Ses jeux » (une liste courte, même avec beaucoup de jeux) ---- */
.pm-games { display: grid; gap: 8px; }
.pm-gh { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pm-season { color: var(--ink-2); font-size: 12.5px; }
.pm-glist { display: grid; gap: 6px; }
.pm-glist > .spin { justify-self: center; margin: 10px 0; }
.pm-g { position: relative; border-radius: 13px; background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px rgba(26, 22, 17, .1); overflow: hidden; transition: box-shadow .2s, background .2s; }
.pm-g::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--acc); opacity: .85; }
.pm-g:hover, .pm-g.open { background: #fff; box-shadow: inset 0 0 0 1px rgba(26, 22, 17, .18), 0 8px 18px -14px rgba(26, 22, 17, .6); }
.pm-gb { width: 100%; min-height: 56px; display: flex; align-items: center; gap: 12px; padding: 7px 12px 7px 18px; text-align: left; color: var(--ink); }
.pm-gn { flex: 1; min-width: 0; display: grid; gap: 1px; }
.pm-gn b { font: 700 15px/1.2 var(--display); }
.pm-gn small { color: var(--ink-2); font-size: 12.5px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-g:not(.ranked) .pm-gn b { color: #4a4238; }
.pm-ge { flex: none; min-width: 42px; height: 42px; display: grid; place-items: center; }
.pm-ge svg { width: 42px; height: 42px; display: block; }
.pm-gnr { font-size: 11.5px; font-weight: 600; color: var(--ink-2); padding: 3px 8px; border-radius: 999px; background: rgba(26, 22, 17, .06); white-space: nowrap; }
.pm-gb > svg:last-child { flex: none; width: 18px; height: 18px; color: var(--ink-2); transition: transform .3s var(--ease-out); }
.pm-gb[aria-expanded="true"] > svg:last-child { transform: rotate(180deg); }
.pm-gd { padding: 2px 12px 14px 18px; }
.pm-gd .rkp { gap: 12px; }
.pm-gd .rkp-hero { padding: 12px; gap: 14px; }
.pm-gd .rkp-stats { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.pm-gd .rkp-seasons { grid-template-columns: minmax(0, 1fr); }
.pm-glist:not(.all) > .pm-g.extra { display: none; }
.pm-more { justify-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; font: 650 13.5px/1 var(--body); color: #7a5a1c; background: rgba(214, 176, 102, .16); transition: background .2s; }
.pm-more:hover { background: rgba(214, 176, 102, .28); }
.pm-more svg { width: 16px; height: 16px; transition: transform .3s var(--ease-out); }
.pm-more[aria-expanded="true"] svg { transform: rotate(180deg); }
.pmodal .pm-bio { margin: 0; }
@media (max-width: 420px) { .pm-gd { padding: 2px 10px 12px 14px; } .pm-gd .rkp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pm-ge.dim { opacity: .5; filter: grayscale(.6); }

/* ---- étape 43 : l'écran d'entrée, « la salle de jeux ouvre ses portes » ---- */
.gate { background: none; overflow: hidden; --mx: 0; --my: 0; }
/* deux portes de tapis vert (chacune garde le dessin de tout l'écran : pas de raccord visible quand elles sont fermées) */
.g-door { position: absolute; top: 0; bottom: 0; width: 50.5%; overflow: hidden; z-index: 0; }
.g-door.l { left: 0; } .g-door.r { right: 0; }
.g-door > i { position: absolute; top: 0; bottom: 0; width: 100vw; background-color: #0a1d17; background-image: radial-gradient(60% 55% at 50% 42%, #1d4a37, #0e2a20 55%, #071510 100%); }
.g-door.l > i { left: 0; } .g-door.r > i { right: 0; }
.g-door > i::after { content: ""; position: absolute; inset: 0; opacity: .5; background-image: repeating-radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .018) 0 1px, transparent 1px 3px); }
.g-door.l::after, .g-door.r::after { content: ""; position: absolute; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, transparent, #d6b066 18%, #f2d58a 50%, #d6b066 82%, transparent); opacity: 0; transition: opacity .3s; }
.g-door.l::after { right: 0; } .g-door.r::after { left: 0; }
.gate.opening .g-door::after { opacity: 1; }
.g-seam { position: absolute; left: 50%; top: 0; bottom: 0; width: 26px; margin-left: -13px; z-index: 3; opacity: 0; pointer-events: none; background: radial-gradient(50% 50% at 50% 50%, rgba(255, 238, 190, .95), rgba(255, 214, 130, .4) 45%, transparent 75%); filter: blur(2px); }
/* le décor : projecteur, lueurs qui se promènent, poussières dorées qui montent */
.g-scene { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.g-glow { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(40px); opacity: .55; }
.g-glow.a { left: -20vmax; top: -10vmax; background: radial-gradient(circle, rgba(61, 165, 122, .35), transparent 65%); animation: gDrift 22s ease-in-out infinite; }
.g-glow.b { right: -22vmax; bottom: -16vmax; background: radial-gradient(circle, rgba(214, 176, 102, .28), transparent 65%); animation: gDrift 26s ease-in-out infinite reverse; }
.g-motes { position: absolute; inset: 0; }
.g-motes i { position: absolute; bottom: -10px; width: 3px; height: 3px; border-radius: 50%; background: #f2d58a; box-shadow: 0 0 6px 1px rgba(242, 213, 138, .6); opacity: 0; animation: gMote 9s linear infinite; }
.g-motes i:nth-child(1) { left: 6%; animation-delay: -1s; } .g-motes i:nth-child(2) { left: 12%; animation-delay: -5s; animation-duration: 11s; } .g-motes i:nth-child(3) { left: 19%; animation-delay: -3s; }
.g-motes i:nth-child(4) { left: 26%; animation-delay: -7s; animation-duration: 12s; } .g-motes i:nth-child(5) { left: 33%; animation-delay: -2s; } .g-motes i:nth-child(6) { left: 39%; animation-delay: -8s; animation-duration: 10s; }
.g-motes i:nth-child(7) { left: 45%; animation-delay: -4s; } .g-motes i:nth-child(8) { left: 51%; animation-delay: -6s; animation-duration: 13s; } .g-motes i:nth-child(9) { left: 57%; animation-delay: -1.5s; }
.g-motes i:nth-child(10) { left: 63%; animation-delay: -9s; animation-duration: 11s; } .g-motes i:nth-child(11) { left: 69%; animation-delay: -3.5s; } .g-motes i:nth-child(12) { left: 75%; animation-delay: -5.5s; animation-duration: 12s; }
.g-motes i:nth-child(13) { left: 81%; animation-delay: -2.5s; } .g-motes i:nth-child(14) { left: 87%; animation-delay: -7.5s; animation-duration: 10s; } .g-motes i:nth-child(15) { left: 93%; animation-delay: -4.5s; }
.g-motes i:nth-child(16) { left: 9%; animation-delay: -10s; animation-duration: 14s; } .g-motes i:nth-child(17) { left: 48%; animation-delay: -11s; animation-duration: 15s; } .g-motes i:nth-child(18) { left: 84%; animation-delay: -12s; animation-duration: 14s; }
@keyframes gMote { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: .9; } 80% { opacity: .5; } 100% { transform: translate(30px, -105vh); opacity: 0; } }
@keyframes gDrift { 50% { transform: translate(8vmax, 6vmax) scale(1.1); } }
/* les objets des 5 jeux, autour de l'enseigne : ils flottent et suivent un peu la souris */
.g-item { position: absolute; left: var(--x); top: var(--y); translate: calc(var(--mx) * var(--d) * -38px) calc(var(--my) * var(--d) * -30px); transition: translate .6s cubic-bezier(.2, .8, .2, 1); filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .55)); }
.g-float { animation: gFloat 6s ease-in-out infinite; animation-delay: calc(var(--d) * -4s); }
@keyframes gFloat { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-12px) rotate(2deg); } }
.gi-cr { --x: 9%; --y: 16%; } .gi-bj { --x: 11%; --y: 64%; } .gi-qz { --x: 77%; --y: 12%; } .gi-lg { --x: 80%; --y: 60%; } .gi-nv { --x: 3%; --y: 42%; }
.gi-fan { position: relative; width: 170px; height: 150px; }
.gi-fan .pc { position: absolute; left: 40px; top: 10px; transform-origin: 50% 110%; }
.gi-fan .pc:nth-child(1) { transform: rotate(-22deg); } .gi-fan .pc:nth-child(2) { transform: rotate(0); animation: gFan 5s ease-in-out infinite; } .gi-fan .pc:nth-child(3) { transform: rotate(22deg); }
@keyframes gFan { 50% { transform: rotate(4deg) translateY(-6px); } }
.gi-bj { } .gi-bj > div:first-child { }
.gi-bj { --sc: 1; }
.gi-bj > .g-float > .gi-bj, .gi-bj .gi-bj { display: flex; align-items: flex-end; }
.gi-bj .bjc { --cw: 62px; box-shadow: 0 10px 18px -8px rgba(0, 0, 0, .6); }
.gi-bj .bjc:nth-of-type(1) { transform: rotate(-12deg); } .gi-bj .bjc:nth-of-type(2) { margin-left: -18px; transform: rotate(10deg) translateY(6px); }
.gi-chips { display: block; width: 86px; margin-left: -6px; margin-bottom: -12px; animation: gChip 3.4s ease-in-out infinite; }
.gi-chips svg { width: 100%; height: auto; display: block; }
@keyframes gChip { 50% { transform: translateY(-4px) rotate(-3deg); } }
.gi-quiz { position: relative; width: 150px; }
.gi-quiz > svg { width: 150px; height: auto; display: block; }
.gi-q { position: absolute; right: -16px; top: -30px; width: 54px; height: 54px; border-radius: 16px 16px 16px 4px; display: grid; place-items: center; background: #f6efdf; color: #6b4ab0; font: 900 34px/1 var(--display); box-shadow: 0 10px 18px -8px rgba(0, 0, 0, .6); animation: gPop 2.6s ease-in-out infinite; }
@keyframes gPop { 0%, 100% { transform: scale(1) rotate(-6deg); } 50% { transform: scale(1.1) rotate(4deg); } }
.gi-moon { position: relative; width: 150px; height: 150px; }
.gi-moon > svg { width: 100%; height: 100%; display: block; animation: gGlowMoon 4s ease-in-out infinite; }
.gi-wolf { position: absolute; left: 22px; bottom: -22px; width: 108px; height: 108px; }
.gi-wolf svg { width: 100%; height: 100%; display: block; }
@keyframes gGlowMoon { 50% { filter: drop-shadow(0 0 22px rgba(242, 213, 138, .55)); } }
.gi-nav { position: relative; width: 140px; height: 120px; }
.gi-radar { position: absolute; left: 0; top: 0; width: 96px; height: 96px; }
.gi-radar svg { width: 100%; height: 100%; display: block; }
.gi-radar .g-sweep { transform-box: view-box; transform-origin: 50px 50px; animation: raSpin 3.2s linear infinite; }
.gi-radar .g-blip { animation: gBlip 3.2s ease-out infinite; }
@keyframes gBlip { 0%, 30% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: 0; } }
.gi-ship { position: absolute; right: 0; bottom: 0; width: 92px; }
.gi-ship svg { width: 100%; height: auto; display: block; animation: gShip 3.6s ease-in-out infinite; }
@keyframes gShip { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg) translateY(-2px); } }
/* le centre : médaillon, enseigne lumineuse, bouton */
.gate .g-in { position: relative; z-index: 2; gap: 18px; }
.gate .g-medal { width: min(30vw, 116px); margin-bottom: -6px; perspective: 900px; }
.g-coin { position: relative; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; transform-style: preserve-3d; }
.g-coin svg { width: 100%; height: 100%; display: block; }
.g-coin .ratbadge text { transform-box: view-box; transform-origin: 100px 100px; animation: ring 14s linear infinite; }
.g-coin .shine { position: absolute; inset: -20%; background: linear-gradient(90deg, transparent 35%, rgba(255, 250, 225, .55) 50%, transparent 65%); transform: translateX(-140%) rotate(20deg); mix-blend-mode: screen; pointer-events: none; }
.g-sign { position: relative; display: grid; justify-items: center; gap: 6px; padding: 26px clamp(26px, 5vw, 54px) 22px; border-radius: 22px; background: linear-gradient(180deg, rgba(20, 40, 31, .92), rgba(8, 20, 15, .92)); box-shadow: inset 0 0 0 3px #b8914a, inset 0 0 0 6px rgba(26, 18, 8, .9), inset 0 0 0 7.5px rgba(242, 213, 138, .55), 0 30px 60px -24px rgba(0, 0, 0, .85), 0 0 60px -10px rgba(242, 213, 138, .22); }
.gate .g-sign b { font-size: clamp(46px, 8vw, 92px); text-shadow: 0 0 22px rgba(242, 213, 138, .25); }
.gate .g-sign b em { text-shadow: 0 0 26px rgba(242, 213, 138, .55); animation: gNeon 4.8s ease-in-out infinite; }
@keyframes gNeon { 0%, 100% { opacity: 1; } 46% { opacity: 1; } 48% { opacity: .55; } 50% { opacity: 1; } 52% { opacity: .75; } 54% { opacity: 1; } }
.g-tag { font: 600 14px/1.2 var(--body); color: #e6d3a3; letter-spacing: .01em; }
.g-sign > i { position: absolute; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff8dd, #f2c868 60%, #b8862a); box-shadow: 0 0 4px 1px rgba(255, 210, 120, .5); animation: gBulb 1.5s steps(1) infinite; animation-delay: calc(var(--m) * .5s); }
@keyframes gBulb { 0% { opacity: 1; box-shadow: 0 0 10px 3px rgba(255, 210, 120, .85); } 33.3% { opacity: .35; box-shadow: none; } 100% { opacity: .35; box-shadow: none; } }
.gate.opening .g-sign > i { animation: gFlash .22s steps(1) 4; opacity: 1; }
@keyframes gFlash { 50% { opacity: .3; } }
.gate .g-go { display: inline-flex; align-items: center; gap: 10px; height: 58px; padding: 0 30px; font-size: 17px; }
.gate .g-go svg { width: 18px; height: 18px; }
.gate .g-snd { font: 500 13px/1 var(--body); letter-spacing: 0; text-transform: none; color: var(--chalk-3); }
/* tablette et téléphone : les objets plus petits, en haut et en bas, loin de l'enseigne */
@media (max-width: 900px) {
  .g-float { scale: .72; }
  .gi-cr { --x: -2%; --y: 4%; } .gi-qz { --x: 68%; --y: 3%; } .gi-bj { --x: 0%; --y: 76%; } .gi-lg { --x: 70%; --y: 76%; } .gi-nv { display: none; }
}
@media (max-width: 520px) {
  .g-float { scale: .56; }
  .gi-cr { --x: -10%; --y: 0%; } .gi-qz { --x: 62%; --y: 1%; } .gi-bj { --x: -6%; --y: 80%; } .gi-lg { --x: 64%; --y: 80%; }
  .gate .g-in { gap: 14px; }
  .g-sign { padding: 20px 22px 18px; }
  .g-sign > i { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; }
}
@media (max-height: 640px) and (min-width: 901px) { .g-float { scale: .78; } }
@media (prefers-reduced-motion: reduce) { .g-glow, .g-motes i, .g-float, .gi-fan .pc, .gi-chips, .gi-q, .gi-moon > svg, .gi-radar *, .gi-ship svg, .g-coin .ratbadge text, .gate .g-sign b em, .g-sign > i { animation: none !important; } .g-motes { display: none; } .g-item { transition: none; } }
.gate .g-sign .g-tag { display: block; font: 600 15px/1.2 var(--body); letter-spacing: .01em; text-transform: none; color: #e6d3a3; }
@media (min-width: 1300px) { .g-float { scale: 1.18; } .gi-cr { --x: 12%; } .gi-bj { --x: 13%; } .gi-qz { --x: 76%; } .gi-lg { --x: 78%; } .gi-nv { --x: 5%; } .gate .g-medal { width: 128px; } }
@media (min-width: 1800px) { .g-float { scale: 1.35; } }
@media (max-width: 520px) { .gi-qz { --x: 56%; } .gi-lg { --x: 58%; } }
.gate.opening .g-medal { animation: none; transform: none; } /* (la « respiration » s'arrête au clic : sinon elle décalait et grossissait le médaillon pendant son vol vers le logo) */
.gate .gi-q { color: #5b2ea0; text-shadow: none; } /* (étape 43 : le « ? » du buzzer bien visible) */

/* ---- étape 45 : les personnages ---- */
/* l'avatar : la tête du personnage dans sa pastille de couleur */
.av.perso { background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--c) 55%, #fff 45%), var(--c) 75%); }
.av.perso > svg.rgperso { width: 112%; height: 112%; margin-top: 6%; display: block; }
.av.bot.perso { background: radial-gradient(circle at 50% 30%, #9fb0c2, #4d5a68 80%); }
/* le personnage en entier */
.pfull { display: inline-grid; place-items: end center; width: calc(var(--h) * .91); height: var(--h); flex: none; }
.pfull > svg.rgperso { width: 100%; height: 100%; display: block; overflow: visible; }
.pfull.anim .pp-blink { transform-box: fill-box; transform-origin: 50% 50%; animation: ppBlink 5s ease-in-out infinite; }
.pfull.anim .pp-tail { transform-box: fill-box; transform-origin: 0% 100%; animation: ppTail 3.6s ease-in-out infinite; }
.pfull.anim .pp-breath { transform-box: fill-box; transform-origin: 50% 100%; animation: ppBreath 3.8s ease-in-out infinite; }
.pfull.anim .pp-head { transform-box: fill-box; transform-origin: 50% 100%; animation: ppHead 5.6s ease-in-out infinite; }
.pfull.anim .pp-aura { transform-box: fill-box; transform-origin: center; animation: ppAura 3.4s ease-in-out infinite; }
@keyframes ppBlink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.12); } }
@keyframes ppTail { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-7deg); } }
@keyframes ppBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.015, .99); } }
@keyframes ppHead { 0%, 100% { transform: rotate(0) translateY(0); } 30% { transform: rotate(-2deg) translateY(-.5px); } 65% { transform: rotate(1.5deg); } }
@keyframes ppAura { 0%, 100% { opacity: .8; transform: scale(1); } 50% { opacity: 1; transform: scale(1.04); } }
@media (prefers-reduced-motion: reduce) { .pfull.anim * { animation: none !important; } }
/* le menu du compte, le profil, la fiche d'un joueur */
.drop .who .pfull { margin: -6px 0 -4px -4px; }
.avedit.pz-prof { display: grid; justify-items: center; gap: 8px; }
.avedit.pz-prof .pfull { filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .35)); }
.pm-fig { position: relative; display: inline-grid; flex: none; }
.pm-fig .pfull { filter: drop-shadow(0 12px 16px rgba(26, 22, 17, .3)); }
.pm-fig .dot { position: absolute; right: 14px; bottom: 18px; width: 16px; height: 16px; border-radius: 50%; background: #9a8f7a; box-shadow: 0 0 0 3px var(--paper); }
.pm-fig .dot.on { background: #3da57a; }
.pmodal .pm-head { align-items: center; }
/* la page « Mon personnage » */
.pz .phead .row { display: grid; gap: 10px; }
.pz-grid { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 22px; align-items: start; }
.pz-stage { position: sticky; top: calc(var(--nav-h) + 20px); display: grid; justify-items: center; gap: 14px; padding: 22px 18px 20px; }
.pz-fig { width: 100%; display: grid; place-items: center; min-height: 340px; padding: 6px 0 0; border-radius: 18px; background: radial-gradient(60% 50% at 50% 60%, rgba(214, 176, 102, .22), transparent 70%); }
.pz-fig .pfull { filter: drop-shadow(0 18px 22px rgba(26, 22, 17, .35)); }
.pz-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pz-save { width: 100%; justify-content: center; }
.pz-panel { display: grid; gap: 14px; padding: 18px; min-width: 0; }
.pz-groups { display: flex; gap: 6px; flex-wrap: wrap; }
.pz-groups button { padding: 9px 14px; border-radius: 12px; font: 700 14px/1 var(--body); color: var(--ink-2); background: rgba(26, 22, 17, .05); transition: background .2s, color .2s; }
.pz-groups button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.pz-cats, .apz-cats > .apz-g > div { display: flex; gap: 6px; flex-wrap: wrap; }
.pz-cat { padding: 7px 12px; border-radius: 999px; font: 600 13px/1 var(--body); color: var(--ink); background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1px rgba(26, 22, 17, .14); transition: background .2s, box-shadow .2s; }
.pz-cat:hover { background: #fff; }
.pz-cat.on { background: rgba(214, 176, 102, .3); box-shadow: inset 0 0 0 1.5px #b8914a; }
.pz-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.pz-items.face { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.pz-it { position: relative; display: grid; justify-items: center; gap: 4px; padding: 8px 6px 9px; border-radius: 14px; background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1px rgba(26, 22, 17, .12); text-align: center; transition: transform .2s, box-shadow .2s, background .2s; }
.pz-it:hover { transform: translateY(-2px); background: #fff; }
.pz-it.on { background: #fff; box-shadow: inset 0 0 0 2.5px #b8914a, 0 8px 18px -12px rgba(26, 22, 17, .6); }
.pz-it.on::after { content: ""; position: absolute; top: 6px; right: 6px; width: 10px; height: 10px; border-radius: 50%; background: #3da57a; box-shadow: 0 0 0 2px #fff; }
.pz-it b { font: 600 12.5px/1.2 var(--body); color: var(--ink); }
.pz-th { width: 100%; aspect-ratio: .9; display: grid; place-items: center; }
.pz-items.face .pz-th { aspect-ratio: 1; }
.pz-th > svg { width: 100%; height: 100%; display: block; }
.pz-sw { width: 54%; aspect-ratio: 1; border-radius: 50%; background: var(--c); box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .15), 0 0 0 3px #fff, 0 0 0 4px rgba(26, 22, 17, .15); }
.pz-it.locked { opacity: .7; }
.pz-it.locked .pz-th { filter: grayscale(.6); }
.pz-lock { display: inline-flex; align-items: center; gap: 4px; font: 700 11.5px/1 var(--body); color: #7a5a1c; }
.pz-lock svg { width: 12px; height: 12px; }
.pz-rar { font: 700 11px/1 var(--body); padding: 3px 7px; border-radius: 999px; background: rgba(26, 22, 17, .07); color: var(--ink-2); }
.pz-it.r-rare .pz-rar { background: rgba(47, 95, 174, .14); color: #2f5fae; }
.pz-it.r-epique .pz-rar { background: rgba(124, 92, 214, .16); color: #6b4ab0; }
.pz-it.r-legendaire .pz-rar { background: rgba(214, 176, 102, .28); color: #7a5a1c; }
@media (max-width: 860px) {
  .pz-grid { grid-template-columns: minmax(0, 1fr); }
  .pz-stage { position: sticky; top: calc(var(--nav-h) + 6px); z-index: 3; grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: stretch; gap: 10px; padding: 10px; }
  .pz-fig { min-height: 0; width: auto; padding: 0; }
  .pz-fig .pfull { --h: 150px !important; }
  .pz-acts { justify-content: flex-start; } .pz-acts .btn { padding: 0 10px; font-size: 12.5px; }
  .pz-save { grid-column: 1 / -1; }
  .pz-items { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .pz-items.face { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
}
/* la régie : « Personnages » */
.apz { display: grid; gap: 14px; }
.apz-top { display: grid; gap: 8px; }
.apz-sum { display: flex; align-items: baseline; gap: 10px; }
.apz-sum b { font: 800 30px/1 var(--display); }
.apz-cats { display: grid; gap: 10px; }
.apz-g { display: grid; gap: 6px; }
.apz-g > small { color: var(--chalk-2); font-size: 12.5px; font-weight: 600; }
.apz-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.apz-it { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px; }
.apz-it.off { opacity: .62; }
.apz-th { width: 88px; height: 96px; display: grid; place-items: center; border-radius: 12px; background: rgba(255, 255, 255, .06); }
.apz-th > svg { width: 100%; height: 100%; }
.apz-f { display: grid; gap: 8px; }
.apz-f label { display: grid; gap: 3px; font-size: 12px; font-weight: 600; }
.apz-f .inp { height: 34px; padding: 0 10px; font-size: 13.5px; }
.apz-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: end; }
.apz-f label.apz-free { display: flex; align-items: center; gap: 6px; font-size: 13px; height: 34px; }
.apz-f .btn { justify-self: start; }
.pz-stage .btn.ghost, .pz-panel .btn.ghost { color: var(--ink); background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1.5px rgba(26, 22, 17, .2); }
.pz-stage .btn.ghost:hover:not(:disabled) { background: #fff; }
.pz-stage .btn:disabled { opacity: .45; }
.apz-row:has(select) { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.apz-f select.inp { padding: 0 6px; }
/* le salon : les joueurs en entier */
.pav.full { position: relative; display: inline-grid; place-items: end center; }
.pav.full .pfull { filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .35)); }
.pav.full .pbadge { position: absolute; right: -2px; bottom: 6px; }
.lseat .pav.full { margin-top: -6px; }
.pav.full.vc-speaking .pfull { filter: drop-shadow(0 0 10px rgba(61, 220, 132, .75)) drop-shadow(0 10px 12px rgba(0, 0, 0, .35)); }

/* ---- étape 45 (2e morceau) : les personnages en entier aux tables ---- */
/* « disque au sol » : le cercle de l'avatar devient un disque sous les pieds ; ses couleurs (tour, chrono, vote, maire,
   joueur qui parle…) restent les mêmes, et le personnage se tient debout dessus */
.flr { position: relative; width: var(--fw, var(--s)) !important; height: calc(var(--fw, var(--s)) * .36) !important; border-radius: 50% !important; overflow: visible !important; background: radial-gradient(closest-side, rgba(0, 0, 0, .34), rgba(0, 0, 0, .14) 70%, transparent) !important; }
.flr > .pav.full { position: absolute; left: 50%; bottom: 30%; transform: translateX(-50%); z-index: 2; }
.flr > .pav.full .pfull { filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .35)); }
.gtable .seat .sav.flr { box-shadow: 0 0 0 2px rgba(42, 23, 10, .8), 0 0 0 4px rgba(214, 176, 102, .4); }
.gtable .seat .sav.flr .tring { inset: -6px; }
.gtable .seat .sav.flr .cnt { right: -16px; bottom: auto; top: -46%; z-index: 3; }
.gtable .seat .sav.flr::before { width: 170%; height: 300%; }
.gtable .seat { padding-top: 0; }
.gtable .seat .sinfo { margin-top: 2px; }
.seat.left .flr .pfull, .seat.done .flr .pfull { filter: grayscale(.7) opacity(.75); }
/* Rats-Garous : le jeton devient un disque au sol */
.tok .tav.flr { --fw: var(--s); margin-top: calc(var(--s) * 1.15); }
.tok .tav.flr .pfull { --h: calc(var(--s) * 1.5) !important; }
.tok .tav.flr .pbadge { bottom: -4px; }
.tok.dead .tav.flr .pfull { filter: grayscale(1) opacity(.55); }
.tok.dead .tav.flr::after { inset: -30% 10%; }
.tok .tmayor { top: 6px; }
.ltable.is-night .tok:not(.me):not(.wolfmate):not(.dead) .tav.flr .pfull { filter: brightness(.8); }
/* Quiz : debout derrière son pupitre */
.desk > .pav.full { grid-row: 1 / 3; margin: -26px 0 -10px -4px; align-self: end; }
/* Black Rat : sur sa plaque */
.bjplate > .pav.full { margin: -30px 0 -4px -2px; align-self: end; }
@media (max-width: 700px) { .bjplate > .pav.full .pfull { --h: 44px !important; } .bjplate > .pav.full { margin-top: -20px; } }
/* Bataille navale : dans la barre des joueurs */
.nvside > .pav.full { margin: -22px 0 -6px; align-self: end; }
.nvside.turn > .pav.full .pfull { filter: drop-shadow(0 0 8px rgba(61, 220, 132, .7)); }
/* les cartes d'un joueur éliminé (Rats-Garous) */
.ovc .pav.full, .ovcard .pav.full { margin-bottom: -6px; }
/* la page Amis : le personnage en entier */
.fr .fr-fig { position: relative; display: inline-grid; flex: none; margin: -14px 2px -6px -4px; }
.fr .fr-fig .pfull { filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .3)); transition: transform .3s var(--ease-out); }
.fr:hover .fr-fig .pfull { transform: translateY(-3px) rotate(-2deg); }
.fr .fr-fig .dot { position: absolute; right: 6px; bottom: 8px; width: 13px; height: 13px; border-radius: 50%; background: #9a8f7a; box-shadow: 0 0 0 2.5px var(--paper); }
.fr .fr-fig .dot.on { background: #3da57a; }
/* le podium du Classement */
.rk-podium .pod .who .pfull { filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .4)); margin-bottom: -4px; }
.rk-podium .pod .who .crown { z-index: 3; }

/* ---- étape 46 : personnages retravaillés ---- */
/* une couleur par élément */
.pz-colors { display: grid; gap: 6px; }
.pz-colors > small { font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.pz-colors > div { display: flex; flex-wrap: wrap; gap: 7px; }
.pz-col { width: 28px; height: 28px; border-radius: 50%; background: var(--c); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .14), 0 0 0 2px #fff, 0 0 0 3px rgba(26, 22, 17, .16); transition: transform .2s, box-shadow .2s; }
.pz-col:hover { transform: scale(1.12); }
.pz-col.on { box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .14), 0 0 0 2px #fff, 0 0 0 4.5px #b8914a; transform: scale(1.08); }
/* l'aura : elle respire, et ses étincelles scintillent en tournant doucement */
.pfull .pp-aura { transform-box: fill-box; transform-origin: center; animation: ppAura2 3.2s ease-in-out infinite; }
.pfull .pp-spark { transform-box: fill-box; transform-origin: center; animation: ppSpark 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.45s); }
.pfull.anim .pp-sparks { transform-box: view-box; transform-origin: 100px 130px; animation: ppOrbit 18s linear infinite; }
@keyframes ppAura2 { 0%, 100% { opacity: .85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.03); } }
@keyframes ppSpark { 0%, 100% { opacity: .2; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes ppOrbit { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pfull .pp-aura, .pfull .pp-spark, .pfull .pp-sparks { animation: none !important; } }
/* le menu du compte : « Voir ma fiche » */
.drop .who { width: 100%; text-align: left; border-radius: 12px; transition: background .2s; }
.drop .who:hover { background: rgba(26, 22, 17, .05); }
.who-see { display: inline-flex; align-items: center; gap: 3px; margin-top: 3px; font: 700 12px/1 var(--body); font-style: normal; color: #7a5a1c; }
.who-see svg { width: 13px; height: 13px; transform: rotate(-90deg); }
#g-me .meav, #g-me b { cursor: pointer; }
/* le podium : plus de couronne séparée (elle est posée sur la tête du premier) */
.rk-podium .pod .who .crown { display: none; }

/* ---- étape 46 (2e morceau) : Color Rats, le tour du joueur ---- */
/* plus de disque au sol : un rayon de lumière dorée sur le rat dont c'est le tour, son rat se lève avec ses cartes,
   et le chrono devient une petite horloge à côté de sa tête */
.gtable .seat .sav.crs { background: none !important; box-shadow: none !important; }
.gtable .seat .sav.crs::before { display: none; }
.sav.crs .tbeam { position: absolute; left: 50%; bottom: -4px; width: 210%; height: calc(var(--fw) * 3.4); transform: translateX(-50%) scaleY(.4); transform-origin: 50% 100%; border-radius: 50% 50% 46% 46% / 30% 30% 12% 12%; background: linear-gradient(180deg, rgba(255, 226, 150, 0), rgba(255, 220, 140, .3) 55%, rgba(255, 214, 130, .55)); opacity: 0; pointer-events: none; transition: opacity .45s, transform .6s var(--ease-out); z-index: 0; }
.sav.crs .tbeam::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 70%; height: 16px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 220, 140, .85), transparent); }
.gtable .seat.turn .sav.crs .tbeam { opacity: 1; transform: translateX(-50%) scaleY(1); animation: crBeam 2.4s ease-in-out infinite; }
@keyframes crBeam { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.18); } }
.gtable .seat.turn .sav.crs .pav.full .pfull { animation: crUp 1.1s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes crUp { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-6%) scale(1.04); } }
/* ses cartes en éventail, à côté de sa main : elles se lèvent quand c'est à lui */
.sav.crs .tfan { position: absolute; z-index: 3; right: calc(var(--fw) * -.18); bottom: 40%; width: calc(var(--fw) * .5); height: calc(var(--fw) * .5); transition: transform .45s var(--ease-out); }
.sav.crs .tfan i { position: absolute; left: 30%; bottom: 0; width: 48%; height: 70%; border-radius: 3px; background: linear-gradient(160deg, #20402f, #0f2419); box-shadow: inset 0 0 0 1.5px #d6b066, 0 2px 4px rgba(0, 0, 0, .5); transform-origin: 50% 100%; }
.sav.crs .tfan i:nth-child(1) { transform: rotate(-22deg); } .sav.crs .tfan i:nth-child(2) { transform: rotate(0); } .sav.crs .tfan i:nth-child(3) { transform: rotate(22deg); }
.gtable .seat.turn .sav.crs .tfan { transform: translateY(-40%) rotate(-8deg) scale(1.15); }
.gtable .seat.turn .sav.crs .tfan i:nth-child(1) { transform: rotate(-32deg); } .gtable .seat.turn .sav.crs .tfan i:nth-child(3) { transform: rotate(32deg); }
/* la petite horloge du chrono, près de sa tête */
.gtable .seat .sav.crs .tring { inset: auto; left: calc(var(--fw) * -.25); top: calc(var(--fw) * -1.05); width: 26px; height: 26px; border-radius: 50%; background: rgba(12, 8, 4, .78); box-shadow: 0 0 0 2px #d6b066, 0 4px 10px rgba(0, 0, 0, .5); z-index: 4; animation: none; }
.gtable .seat .sav.crs .tring::after { inset: 2px; }
.gtable .seat.turn .sav.crs .tring { opacity: 1; }
.gtable .seat .sav.crs .cnt { top: auto; bottom: -4px; right: -18px; }
@media (prefers-reduced-motion: reduce) { .gtable .seat.turn .sav.crs .tbeam, .gtable .seat.turn .sav.crs .pav.full .pfull { animation: none; } }
/* ma barre : mon rat en entier, debout à côté de mon nom */
.meav.full { width: 64px; height: 46px; margin: -10px 4px -6px 0; }
.meav.full > .pav.full { position: absolute; left: 50%; bottom: -4px; transform: translateX(-50%); }
.meav.full .tclock { inset: auto; right: -8px; top: -42px; width: 24px; height: 24px; background: rgba(12, 8, 4, .8); box-shadow: 0 0 0 2px #d6b066; }
#g-me.turn .meav.full .pfull { animation: crUp 1.1s ease-in-out infinite; transform-origin: 50% 100%; }
@media (prefers-reduced-motion: reduce) { #g-me.turn .meav.full .pfull { animation: none; } }

/* ---- étape 46 (2e morceau) : Rats-Garous ---- */
/* le point placé = les pieds du rat (sur la place ronde) */
.tok:has(.tav.flr) { transform: translate(calc(var(--x) - 50%), calc(var(--y) - var(--s) * 1.33)); }
.tok:has(.tav.flr) .tshadow { display: none; }
/* la nuit : ils dorment, avec des « ZzZ » qui montent */
.tok .tzz { display: none; position: absolute; z-index: 4; left: calc(50% + var(--s) * .25); top: calc(var(--s) * -.1); pointer-events: none; font: 800 14px/1 var(--display); color: #dfe8ff; text-shadow: 0 0 8px rgba(160, 190, 255, .8); }
.tok.asleep .tzz { display: block; }
.tok .tzz i { position: absolute; left: 0; top: 0; font-style: normal; opacity: 0; animation: lzz 3s ease-in-out infinite; }
.tok .tzz i:nth-child(2) { animation-delay: 1s; font-size: 12px; } .tok .tzz i:nth-child(3) { animation-delay: 2s; font-size: 17px; }
@keyframes lzz { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(14px, -30px) scale(1.15) rotate(12deg); } }
.tok.asleep .tav.flr .pfull { animation: lsleep 3.2s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes lsleep { 0%, 100% { transform: rotate(-3deg) scaleY(1); } 50% { transform: rotate(-5deg) scaleY(.97); } }
@media (prefers-reduced-motion: reduce) { .tok .tzz i, .tok.asleep .tav.flr .pfull { animation: none; } .tok.asleep .tzz i:last-child { opacity: 1; } }
/* la carte d'un mort : le rat meurt (selon la façon), un petit fantôme s'élève ; jamais qui l'a tué */
.dcard .dfig { position: relative; display: inline-grid; place-items: end center; }
.dcard .dfig .pfull { animation: ldie 1.3s 1.25s cubic-bezier(.5, 0, .5, 1) forwards; transform-origin: 50% 100%; }
@keyframes ldie { 60% { transform: rotate(-12deg); } 100% { transform: rotate(-82deg) translate(-6%, 10%); filter: grayscale(.85) brightness(.85); } }
.dcard .dfig.dc-poison .pfull { animation-name: lpoison; }
@keyframes lpoison { 0% { filter: none; } 35% { filter: hue-rotate(60deg) saturate(1.4); transform: rotate(4deg); } 55% { transform: rotate(-6deg); } 100% { transform: rotate(-82deg) translate(-6%, 10%); filter: hue-rotate(60deg) grayscale(.6); } }
.dcard .dfig.dc-chagrin .pfull { animation-name: lsad; }
@keyframes lsad { 50% { transform: scale(.96, .9); } 100% { transform: scale(.9, .78) translateY(4%); opacity: .55; filter: grayscale(.9); } }
.dcard .dfig.dc-parti .pfull { animation-name: lgone; }
@keyframes lgone { 100% { opacity: 0; transform: translateX(30%) scale(.9); } }
.dcard .dfx { position: absolute; inset: 0; pointer-events: none; font-style: normal; }
.dfx.claws b { position: absolute; top: 20%; width: 5px; height: 55%; border-radius: 3px; background: linear-gradient(180deg, transparent, #f2f2f2 30%, #f2f2f2 70%, transparent); transform: rotate(28deg) scaleY(0); opacity: 0; animation: lclaw .5s 1.05s ease-out forwards; }
.dfx.claws b:nth-child(1) { left: 34%; } .dfx.claws b:nth-child(2) { left: 48%; animation-delay: 1.12s; } .dfx.claws b:nth-child(3) { left: 62%; animation-delay: 1.19s; }
@keyframes lclaw { 40% { opacity: 1; transform: rotate(28deg) scaleY(1); } 100% { opacity: 0; transform: rotate(28deg) scaleY(1); } }
.dfx.bubbles b { position: absolute; bottom: 30%; width: 10px; height: 10px; border-radius: 50%; background: rgba(120, 230, 140, .75); box-shadow: inset -2px -2px 0 rgba(0, 0, 0, .15); opacity: 0; animation: lbub 1.6s 1.1s ease-out infinite; }
.dfx.bubbles b:nth-child(1) { left: 30%; } .dfx.bubbles b:nth-child(2) { left: 50%; animation-delay: 1.4s; width: 7px; height: 7px; } .dfx.bubbles b:nth-child(3) { left: 64%; animation-delay: 1.7s; } .dfx.bubbles b:nth-child(4) { left: 42%; animation-delay: 2s; width: 6px; height: 6px; }
@keyframes lbub { 0% { opacity: 0; transform: translateY(0) scale(.5); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-70px) scale(1.1); } }
.dfx.impact { left: 50%; top: 40%; width: 20px; height: 20px; margin: -10px; border-radius: 50%; inset: auto; box-shadow: 0 0 0 0 rgba(255, 240, 200, .9); animation: limpact .6s 1.1s ease-out forwards; }
@keyframes limpact { 0% { box-shadow: 0 0 0 0 rgba(255, 240, 200, .95); background: #fff7de; } 100% { box-shadow: 0 0 0 46px rgba(255, 240, 200, 0); background: transparent; } }
.dfx.broken { display: grid; place-items: start center; }
.dfx.broken b { margin-top: -6px; font-size: 34px; line-height: 1; color: #ff6b8b; text-shadow: 0 2px 8px rgba(0, 0, 0, .4); opacity: 0; animation: lheart 1.6s 1.1s ease-in-out forwards; }
@keyframes lheart { 20% { opacity: 1; transform: scale(1.15); } 55% { opacity: 1; transform: scale(1) rotate(0); clip-path: inset(0); } 100% { opacity: 0; transform: translateY(30px) rotate(25deg); } }
.dfx.spot { inset: -20% 10% 0; background: radial-gradient(60% 80% at 50% 0%, rgba(255, 240, 200, .5), transparent 70%); opacity: 0; animation: lspot 1.8s .9s ease-in-out forwards; }
@keyframes lspot { 30% { opacity: 1; } 100% { opacity: 0; } }
.dcard .dghost { position: absolute; left: 50%; bottom: 30%; width: 34px; height: 40px; margin-left: -17px; border-radius: 50% 50% 30% 30%; background: rgba(255, 255, 255, .85); box-shadow: 0 0 18px rgba(255, 255, 255, .6); opacity: 0; animation: lghost 1.8s 2.2s ease-out forwards; }
.dcard .dghost::before, .dcard .dghost::after { content: ""; position: absolute; top: 12px; width: 5px; height: 7px; border-radius: 50%; background: #3a3a4a; }
.dcard .dghost::before { left: 9px; } .dcard .dghost::after { right: 9px; }
@keyframes lghost { 0% { opacity: 0; transform: translateY(0) scale(.6); } 30% { opacity: .85; } 100% { opacity: 0; transform: translateY(-80px) scale(1); } }
@media (prefers-reduced-motion: reduce) { .dcard .dfig .pfull, .dcard .dfx *, .dcard .dfx, .dcard .dghost { animation: none !important; } .dcard .dfig .pfull { filter: grayscale(.85); } }

/* ---- étape 46 (3e morceau) : Quiz, les pupitres sous la question ---- */
.qscores { gap: 14px; padding-block: 18px 14px; align-items: flex-end; }
.desk.pup { display: grid; grid-template-columns: none; grid-template-rows: auto auto; justify-items: center; min-width: 132px; max-width: 170px; padding: 0; background: none; box-shadow: none; position: relative; }
.desk.pup .pfig { position: relative; z-index: 1; margin-bottom: -26px; }
.desk.pup .pfig .pfull { filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .4)); transform-origin: 50% 100%; }
.desk.pup .pbuzz { position: absolute; z-index: 3; left: 50%; top: calc(100% - 78px); width: 34px; height: 14px; margin-left: 14px; border-radius: 50% 50% 4px 4px / 80% 80% 4px 4px; background: #3b4250; box-shadow: 0 3px 0 #1d2028; }
.desk.pup .pbuzz i { position: absolute; left: 4px; right: 4px; bottom: 6px; height: 14px; border-radius: 50% 50% 20% 20%; background: radial-gradient(circle at 40% 30%, #ff8c7a, #d9342a 60%, #8a1c15); box-shadow: 0 0 0 1.5px #2a0b05; transition: transform .12s; }
.desk.pup .pfront { position: relative; z-index: 2; display: grid; justify-items: center; gap: 1px; width: 100%; padding: 10px 12px 9px; border-radius: 12px 12px 6px 6px; background: linear-gradient(180deg, #2b2f3e, #171a24); box-shadow: inset 0 0 0 1.5px rgba(214, 176, 102, .55), inset 0 3px 0 rgba(255, 255, 255, .08), 0 14px 22px -12px rgba(0, 0, 0, .9); }
.desk.pup .pfront::before { content: ""; position: absolute; left: 10px; right: 10px; top: 4px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(255, 211, 110, .7), transparent); }
.desk.pup .ds { font-size: 34px; line-height: 1; text-align: center; min-width: 0; }
.desk.pup .dn { max-width: 100%; color: #f2eefc; }
.desk.pup .dst { max-width: 100%; text-align: center; }
.desk.pup.mine .pfront { box-shadow: inset 0 0 0 2px #e6be62, inset 0 3px 0 rgba(255, 255, 255, .08), 0 14px 22px -12px rgba(0, 0, 0, .9); }
.desk.pup.lead .pfront { box-shadow: inset 0 0 0 2px var(--brass), 0 0 22px rgba(255, 211, 110, .35), 0 14px 22px -12px rgba(0, 0, 0, .9); }
.desk.pup.won .pfront { box-shadow: inset 0 0 0 2px var(--mint), 0 0 30px rgba(61, 224, 166, .45); }
/* le coup de buzzer : le rat se penche et appuie, le buzzer s'enfonce et s'allume */
.desk.pup.buzz .pfig .pfull { animation: qzLean .9s ease-in-out; }
.desk.pup.buzz .pbuzz i { animation: qzPress .9s ease-in-out; }
@keyframes qzLean { 30% { transform: rotate(7deg) translateY(4%); } 55% { transform: rotate(7deg) translateY(7%); } 100% { transform: none; } }
@keyframes qzPress { 0%, 25% { transform: none; } 45% { transform: scaleY(.45) translateY(30%); box-shadow: 0 0 0 1.5px #2a0b05, 0 0 22px 6px rgba(255, 120, 90, .9); } 100% { transform: none; } }
@media (max-width: 640px) { .desk.pup { min-width: 96px; } .desk.pup .pfig .pfull { --h: 78px !important; } .desk.pup .pbuzz { top: calc(100% - 64px); } .desk.pup .ds { font-size: 26px; } }
@media (prefers-reduced-motion: reduce) { .desk.pup.buzz .pfig .pfull, .desk.pup.buzz .pbuzz i { animation: none; } }

/* ---- étape 46 (3e morceau) : Black Rat, le rat bien visible et ses gestes ---- */
.bjplate > .pav.full { margin: -58px -2px -4px -10px; }
.bjseat.me .bjplate > .pav.full { margin-top: -86px; }
.bjplate > .pav.full .pfull { transform-origin: 50% 100%; }
.pav.full.rf-bet .pfull { animation: bjBet .9s ease-out; }
.pav.full.rf-hit .pfull { animation: bjTap .9s ease-in-out; }
.pav.full.rf-stand .pfull { animation: bjWave 1s ease-in-out; }
.pav.full.rf-double .pfull { animation: bjJump .9s cubic-bezier(.3, 1.4, .5, 1); }
.pav.full.rf-split .pfull { animation: bjSplit .9s ease-in-out; }
@keyframes bjBet { 30% { transform: rotate(-8deg) translateY(-3%); } 60% { transform: rotate(6deg); } 100% { transform: none; } }
@keyframes bjTap { 20%, 60% { transform: translateY(5%) rotate(4deg); } 40%, 80% { transform: none; } }
@keyframes bjWave { 20% { transform: rotate(-6deg); } 45% { transform: rotate(6deg); } 70% { transform: rotate(-4deg); } 100% { transform: none; } }
@keyframes bjJump { 40% { transform: translateY(-18%) scale(1.06); } 100% { transform: none; } }
@keyframes bjSplit { 40% { transform: scaleX(1.18) scaleY(.94); } 100% { transform: none; } }
.pav.full .rf-chip { position: absolute; left: 60%; bottom: 40%; width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle, #e8c547 35%, #c4473b 36%); box-shadow: 0 0 0 2px #f6efdf inset, 0 2px 4px rgba(0, 0, 0, .5); animation: bjToss .85s cubic-bezier(.3, .6, .5, 1) forwards; z-index: 5; }
@keyframes bjToss { 0% { transform: translate(0, 0) scale(.6); opacity: 1; } 50% { transform: translate(-10px, -90px) scale(1); } 100% { transform: translate(-20px, -60px) scale(.8); opacity: 0; } }
@media (max-width: 700px) { .bjplate > .pav.full .pfull { --h: 62px !important; } .bjseat.me .bjplate > .pav.full .pfull { --h: 76px !important; } .bjplate > .pav.full { margin-top: -38px; } .bjseat.me .bjplate > .pav.full { margin-top: -52px; } }

/* ---- étape 46 (3e morceau) : Bataille navale, les ponts sous les grilles ---- */
.nvdecks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 10px; }
.dk { position: relative; height: 150px; display: grid; align-items: end; }
.dk .dk-ship { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 72px; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .5)); }
.dk .dk-rat { position: absolute; bottom: 36px; left: 18%; z-index: 2; }
.dk-foe .dk-rat { left: auto; right: 18%; }
.dk .dk-rat .pfull { filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .4)); transform-origin: 50% 100%; }
.dk .dk-spy { position: absolute; z-index: 3; width: 42px; left: 60%; top: 26%; transform: rotate(-14deg); transform-origin: 0 50%; animation: dkSpy 4s ease-in-out infinite; }
@keyframes dkSpy { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(-4deg) translateX(2px); } }
.dk .dk-can { position: absolute; z-index: 1; bottom: 40px; left: 52%; width: 92px; overflow: visible; }
.dk-foe .dk-can { left: auto; right: 52%; transform: scaleX(-1); }
.dk .dk-name { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); z-index: 3; font-size: 12.5px; color: #f6efdf; text-shadow: 0 1px 4px rgba(0, 0, 0, .8); }
.dk .dk-flash, .dk .dk-smoke { opacity: 0; transform-box: fill-box; transform-origin: 0 50%; }
.dk.fire .dk-barrel { animation: dkRecoil .5s ease-out; transform-box: fill-box; transform-origin: 0 50%; }
.dk.fire .dk-flash { animation: dkFlash .35s ease-out; }
.dk.fire .dk-smoke { animation: dkSmoke 1s ease-out; }
.dk.fire .dk-rat .pfull { animation: dkBrace .6s ease-out; }
@keyframes dkRecoil { 20% { transform: translateX(-10px) rotate(-3deg); } 100% { transform: none; } }
@keyframes dkFlash { 0% { opacity: 0; transform: scale(.4); } 30% { opacity: 1; transform: scale(1.2); } 100% { opacity: 0; transform: scale(1); } }
@keyframes dkSmoke { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 25% { opacity: .9; } 100% { opacity: 0; transform: translate(18px, -16px) scale(1.6); } }
@keyframes dkBrace { 25% { transform: rotate(-5deg) translateX(-3%); } 100% { transform: none; } }
/* touché : le pont tremble, une lueur rouge, le rat chancelle ; coulé : plus fort, avec de la fumée */
.dk.hurt, .dk.sunk { animation: dkShake .55s ease-in-out; }
.dk.sunk { animation-iteration-count: 2; }
.dk.hurt::after, .dk.sunk::after { content: ""; position: absolute; inset: 20% 0 0; border-radius: 30px; background: radial-gradient(closest-side, rgba(255, 90, 60, .5), transparent); animation: dkRed .9s ease-out forwards; pointer-events: none; }
.dk.hurt .dk-rat .pfull, .dk.sunk .dk-rat .pfull { animation: dkStagger .9s ease-in-out; }
@keyframes dkShake { 20% { transform: translateX(-5px) rotate(-.6deg); } 40% { transform: translateX(5px) rotate(.6deg); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@keyframes dkRed { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
@keyframes dkStagger { 20% { transform: rotate(-12deg) translateX(-6%); } 45% { transform: rotate(8deg); } 70% { transform: rotate(-4deg); } 100% { transform: none; } }
@media (max-width: 760px) { .nvdecks { gap: 8px; } .dk { height: 118px; } .dk .dk-rat .pfull { --h: 78px !important; } .dk .dk-can { width: 70px; } .dk .dk-ship { height: 58px; } .dk .dk-rat { bottom: 28px; } }
@media (prefers-reduced-motion: reduce) { .dk *, .dk { animation: none !important; } }
.dk { height: 178px; } .dk .dk-rat { bottom: 40px; } .dk .dk-can { width: 104px; }

/* ---- étape 46 (4e morceau) : la régie, chercher partout ---- */
.atout { display: grid; gap: 16px; }
.asearch.big .inp { height: 50px; font-size: 16px; }
.atout-res { display: grid; gap: 14px; }
.atout-g { display: grid; gap: 8px; }
.atout-g .sghead { color: var(--chalk); }
.atout-g .sghead small { font: 600 12.5px/1 var(--body); color: var(--chalk-3); margin-left: 6px; }
.atout-list { display: grid; gap: 6px; }
.atout-it { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 10px 14px; border-radius: 12px; text-align: left; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); color: var(--chalk); transition: background .2s; }
.atout-it:hover { background: rgba(255, 255, 255, .1); }
.atout-it b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atout-it small { grid-row: 2; color: var(--chalk-3); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atout-it svg { grid-row: 1 / 3; grid-column: 2; width: 18px; height: 18px; transform: rotate(-90deg); color: var(--chalk-3); }
.asearch[data-gen] { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.asearch[data-gen] small { white-space: nowrap; }

/* ---- étape 47 : mon menu (et les petites fenêtres du haut) passe devant le tchat de la partie, le tchat et les appels ---- */
.drop, .volpop, .ratpop, .langpop, .nmore-m { z-index: 78; }

/* ---- étape 47 : personnages ---- */
/* la tête dans les ronds et les carrés : le dessin est déjà cadré (tête, oreilles, chapeau, moustaches) et centré */
.av.perso > svg.rgperso { width: 100%; height: 100%; margin: 0; }
/* la queue : le grelot se balance, les rubans du nœud flottent ; la pierre de la bague scintille */
.pfull.anim .pp-swing { transform-box: view-box; animation: ppSwing 2.4s ease-in-out infinite; }
.pfull.anim .pp-flut { transform-box: view-box; animation: ppFlut 2.8s ease-in-out infinite; }
.pfull.anim .pp-gem { transform-box: fill-box; transform-origin: center; animation: ppSpark 2.2s ease-in-out infinite; }
@keyframes ppSwing { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(14deg); } }
@keyframes ppFlut { 0%, 100% { transform: rotate(-7deg) skewX(-4deg); } 50% { transform: rotate(6deg) skewX(4deg); } }
@media (prefers-reduced-motion: reduce) { .pfull .pp-swing, .pfull .pp-flut, .pfull .pp-gem { animation: none !important; } }
/* le podium : le personnage (et son aura) passe devant la marche */
.rk-podium .pod .who { position: relative; z-index: 2; }

/* ---- étape 47 : Color Rats, le tour d'un joueur (beau et clair) ---- */
/* plus de rayon ni de petit rond noir : une flèche dorée rebondit au-dessus de sa tête, une lueur chaude à ses pieds, son nom
   en doré avec la barre du temps qui reste ; les autres joueurs sont un peu plus sombres pendant ce temps */
.gtable .seat .sav.crs .tbeam, .gtable .seat .sav.crs .tring, .meav.full .tclock { display: none !important; }
.sav.crs .tglow { position: absolute; left: 50%; bottom: -10%; width: calc(var(--fw) * 2); height: calc(var(--fw) * .7); border-radius: 50%; transform: translateX(-50%) scale(.5); background: radial-gradient(closest-side, rgba(255, 216, 130, .85), rgba(255, 196, 90, .35) 55%, transparent); opacity: 0; transition: opacity .35s, transform .45s var(--ease-out); pointer-events: none; z-index: 0; }
.gtable .seat.turn .sav.crs .tglow { opacity: 1; transform: translateX(-50%) scale(1); animation: crGlow 1.8s ease-in-out infinite; }
@keyframes crGlow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.25); } }
.tarrow { position: absolute; left: 50%; z-index: 6; width: 24px; height: 20px; margin-left: -12px; opacity: 0; transform: translateY(-8px) scale(.6); transition: opacity .3s, transform .35s var(--ease-out); pointer-events: none; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .55)) drop-shadow(0 0 8px rgba(255, 211, 110, .7)); }
.tarrow svg { width: 100%; height: 100%; display: block; }
.sav.crs .tarrow { top: calc(var(--fw) * -1.42); }
.gtable .seat.turn .sav.crs .tarrow, #g-me.turn .meav.full .tarrow { opacity: 1; transform: none; animation: crArrow .8s ease-in-out infinite alternate; }
@keyframes crArrow { from { translate: 0 -4px; } to { translate: 0 5px; } }
.gtable .seat.turn .sav.crs .pav.full .pfull { animation: crUp 1.1s ease-in-out infinite; transform-origin: 50% 100%; }
.gtable:has(.seat.turn) .seat:not(.turn) .sav.crs .pav.full .pfull { filter: brightness(.78) saturate(.85) drop-shadow(0 6px 6px rgba(0, 0, 0, .35)); }
/* le nom et la barre du temps */
.gtable .seat .sinfo .tbar, #g-me .tbar { display: block; width: 100%; max-width: 116px; height: 5px; border-radius: 3px; background: rgba(10, 6, 3, .55); overflow: hidden; opacity: 0; transition: opacity .3s; }
.gtable .seat .sinfo .tbar i, #g-me .tbar i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); border-radius: 3px; background: linear-gradient(90deg, #ffb347, #ffd36e); transition: width .1s linear; }
.gtable .seat.turn .sinfo .tbar, #g-me.turn .tbar { opacity: 1; }
.gtable .seat.turn .sinfo b { box-shadow: 0 0 0 2px #5a3a0a, 0 0 16px rgba(255, 211, 110, .8); animation: crName 1.4s ease-in-out infinite; }
@keyframes crName { 50% { box-shadow: 0 0 0 2px #5a3a0a, 0 0 26px rgba(255, 211, 110, 1); } }
.gtable .seat .sinfo .mini { display: none; }
/* ses cartes : de vraies petites cartes (dos Color Rats) en éventail */
.sav.crs .tfan i { background: none; box-shadow: none; border-radius: 3px; overflow: visible; width: auto; height: auto; left: 22%; }
.sav.crs .tfan i > .pc { box-shadow: 0 2px 5px rgba(0, 0, 0, .55); }
/* il jette sa carte : le rat se penche en avant et lance le bras */
.gtable .seat.throw .sav.crs .pav.full .pfull { animation: crThrow .6s ease-out; transform-origin: 50% 100%; }
.gtable .seat.throw .sav.crs .tfan { animation: crFan .6s ease-out; }
@keyframes crThrow { 30% { transform: rotate(-9deg) translateY(-4%) scale(1.06); } 100% { transform: none; } }
@keyframes crFan { 30% { transform: translate(-30%, -60%) rotate(-30deg) scale(1.2); } 100% { transform: none; } }
/* ma barre : mon rat bien plus grand, qui dépasse au-dessus de la barre */
.meav.full { width: calc(var(--mh) * .7); height: 50px; margin: 0 6px 0 0; }
.meav.full > .pav.full { bottom: -6px; }
.meav.full .tarrow { top: calc(var(--mh) * -1.02); }
#g-me .meinfo { display: grid; gap: 3px; min-width: 0; }
#g-me .meinfo .tbar { max-width: 140px; }
@media (prefers-reduced-motion: reduce) { .gtable .seat.turn .sav.crs .tglow, .tarrow, .gtable .seat.turn .sinfo b, .gtable .seat.throw .sav.crs .pav.full .pfull, .gtable .seat.throw .sav.crs .tfan { animation: none !important; } }

/* ---- étape 47 : Rats-Garous, chaque rat debout SUR son cercle ---- */
/* (une vieille règle « .tok .tav .pav { width: 100%; height: 100% } » posait le rat SOUS son cercle : il cachait le pseudo) */
.tok .tav.flr > .pav.full { width: auto; height: auto; display: inline-grid; place-items: end center; position: absolute; left: 50%; bottom: 30%; transform: translateX(-50%); }
.tok .tav.flr { box-shadow: 0 0 0 2px rgba(255, 255, 255, .55), 0 6px 14px -6px rgba(0, 0, 0, .8); background: radial-gradient(closest-side, rgba(0, 0, 0, .42), rgba(0, 0, 0, .18) 70%, transparent) !important; }
.tok.me .tav.flr { box-shadow: 0 0 0 2.5px var(--brass), 0 0 16px rgba(230, 190, 98, .5); }
.tok .tnm { position: relative; z-index: 3; margin-top: 2px; padding: 1px 8px; border-radius: 8px; background: rgba(10, 8, 14, .55); }
/* les « ZzZ » sortent de la tête de chaque rat qui dort */
.tok .tzz { left: calc(50% + var(--s) * .26); top: calc(var(--s) * .18); z-index: 5; }
/* la médaille du maire : sur sa poitrine (il porte aussi le chapeau du maire) */
.tok .tmayor { top: calc(var(--s) * .86); left: calc(50% - var(--s) * .16); width: calc(var(--s) * .32); height: calc(var(--s) * .32); min-width: 18px; min-height: 18px; z-index: 4; }
/* la fontaine bien au milieu de la place */
.village .fountain { top: 60%; transform: translate(-50%, -79%); }
/* le bouton « Passer » (3/4 des joueurs en vie → il ne reste que 3 secondes) */
.lskip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 0; border-radius: 10px; background: rgba(0, 0, 0, .3); color: #fff; font: 600 13.5px/1 var(--body); cursor: pointer; box-shadow: inset 0 0 0 1.5px rgba(214, 176, 102, .5); transition: background .2s, box-shadow .2s, transform .15s; }
.lskip svg { width: 15px; height: 15px; }
.lskip b { min-width: 30px; padding: 3px 6px; border-radius: 6px; background: rgba(255, 255, 255, .14); font: 700 12px/1 var(--mono); text-align: center; display: inline-block; }
.lskip:hover:not(:disabled) { background: rgba(214, 176, 102, .25); }
.lskip:active:not(:disabled) { transform: scale(.96); }
.lskip.on { background: var(--brass); color: var(--ink); cursor: default; box-shadow: 0 0 14px rgba(230, 190, 98, .55); }
.lskip.on b { background: rgba(0, 0, 0, .15); }
@media (max-width: 640px) { .lskip span { display: none; } .lskip { padding: 0 9px; } }

/* ---- étape 47 : Rats-Garous, une mort différente pour chaque façon de mourir ---- */
/* (le rat meurt pendant que la carte est tournée vers nous : ~1,1 s → 3,5 s ; jamais qui l'a tué) */
.dcard .dfig .pfull { animation-name: none; }
.dcard .dfig { min-height: 150px; }
/* vote du village : il tombe d'en haut au bout d'une corde, se balance, puis pend, gris */
.dcard .dfig.dc-village { overflow: hidden; padding-top: 30px; margin-top: -20px; }
.dcard .dfig.dc-village > .pav { animation: lhang 2.2s 1s cubic-bezier(.45, 0, .3, 1) both; transform-origin: 50% -200px; }
.dcard .dfig.dc-village > .pav::before { content: ""; position: absolute; left: 50%; bottom: 36%; width: 3px; height: 400px; margin-left: -1.5px; background: repeating-linear-gradient(180deg, #c9a46a 0 5px, #8a6a3a 5px 9px); border-radius: 2px; }
.dcard .dfig.dc-village .pfull { animation: lgrey .8s 2.4s forwards; }
@keyframes lhang { 0% { transform: translateY(-140%); } 30% { transform: translateY(6%); } 38% { transform: translateY(-4%); } 46% { transform: translateY(0) rotate(5deg); } 62% { transform: rotate(-4deg); } 78% { transform: rotate(2.5deg); } 100% { transform: rotate(-1deg); } }
@keyframes lgrey { to { filter: grayscale(.85) brightness(.85); } }
/* rats-garous : trois griffures le traversent, il recule et s'effondre ; les marques restent */
.dcard .dfig.dc-loups .pfull { animation: lslash 1.6s 1.05s cubic-bezier(.5, 0, .5, 1) forwards; transform-origin: 50% 100%; }
@keyframes lslash { 0% { transform: none; } 12% { transform: translateX(7%) rotate(6deg); } 22% { transform: translateX(-3%) rotate(-3deg); } 45% { transform: rotate(-8deg); } 100% { transform: rotate(-82deg) translate(-6%, 10%); filter: grayscale(.8) brightness(.85); } }
.dfx.claws { inset: -6% 0 10%; }
.dfx.claws b { top: 8%; width: 7px; height: 78%; border-radius: 4px; background: linear-gradient(180deg, transparent, #fff 18%, #ff8a7a 55%, #c4231b 85%, transparent); box-shadow: 0 0 10px rgba(255, 90, 70, .7); transform: rotate(32deg) scaleY(0); transform-origin: 50% 0; opacity: 0; animation: lclaw2 .9s 1.05s ease-out forwards; }
.dfx.claws b:nth-child(1) { left: 30%; } .dfx.claws b:nth-child(2) { left: 46%; animation-delay: 1.12s; } .dfx.claws b:nth-child(3) { left: 62%; animation-delay: 1.19s; }
@keyframes lclaw2 { 0% { opacity: 1; transform: rotate(32deg) scaleY(0); } 30% { opacity: 1; transform: rotate(32deg) scaleY(1); } 100% { opacity: .45; transform: rotate(32deg) scaleY(1); filter: blur(.5px); } }
/* sorcière : une potion tombe en tournant, éclate en vert sur sa tête ; il verdit, vacille et tombe */
.dfx.potion { left: 50%; top: -30%; width: 34px; height: 44px; margin-left: -17px; opacity: 0; animation: lpot .55s 1s cubic-bezier(.5, 0, 1, .6) forwards; z-index: 3; }
.dfx.potion svg { width: 100%; height: 100%; display: block; }
@keyframes lpot { 0% { opacity: 1; transform: translateY(0) rotate(-30deg); } 90% { opacity: 1; transform: translateY(105px) rotate(200deg); } 100% { opacity: 0; transform: translateY(112px) rotate(220deg) scale(.6); } }
.dfx.splash { left: 50%; top: 28%; width: 0; height: 0; }
.dfx.splash::before { content: ""; position: absolute; left: -40px; top: -40px; width: 80px; height: 80px; border-radius: 50%; background: radial-gradient(circle, rgba(140, 240, 140, .95), rgba(80, 200, 100, .5) 50%, transparent 70%); transform: scale(0); opacity: 0; animation: lsplash .7s 1.52s ease-out forwards; }
@keyframes lsplash { 0% { transform: scale(.2); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.dfx.splash b { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #7be08a; box-shadow: 0 0 0 1.5px #1d3a22; opacity: 0; animation: ldrop .8s 1.52s ease-out forwards; }
.dfx.splash b:nth-child(1) { --dx: -46px; --dy: -30px; } .dfx.splash b:nth-child(2) { --dx: 44px; --dy: -34px; } .dfx.splash b:nth-child(3) { --dx: -30px; --dy: 22px; } .dfx.splash b:nth-child(4) { --dx: 36px; --dy: 18px; } .dfx.splash b:nth-child(5) { --dx: -6px; --dy: -50px; width: 6px; height: 6px; } .dfx.splash b:nth-child(6) { --dx: 14px; --dy: 40px; width: 6px; height: 6px; }
@keyframes ldrop { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)); } }
.dcard .dfig.dc-poison .pfull { animation: lpoison2 1.8s 1.55s ease-in-out forwards; transform-origin: 50% 100%; }
@keyframes lpoison2 { 0% { filter: none; } 25% { filter: hue-rotate(70deg) saturate(1.6); transform: rotate(5deg); } 45% { transform: rotate(-7deg); } 60% { transform: rotate(4deg); } 100% { transform: rotate(-82deg) translate(-6%, 10%); filter: hue-rotate(70deg) grayscale(.6); } }
.dcard .dfig.dc-poison .dfx.bubbles b { animation-delay: 1.9s; }
/* chasseur : un viseur glisse sur lui, hésite, se fixe… « PAN ! » : éclair, il est projeté en arrière */
.dfx.scope { left: 50%; top: 32%; width: 64px; height: 64px; margin: -32px; opacity: 0; animation: lscope 1.1s .7s ease-in-out forwards; z-index: 3; }
.dfx.scope svg { width: 100%; height: 100%; display: block; }
@keyframes lscope { 0% { opacity: 0; transform: translate(-90px, -50px) scale(1.6); } 20% { opacity: 1; } 55% { transform: translate(10px, 6px) scale(1.05); } 75% { transform: translate(-4px, -2px) scale(1); } 92% { opacity: 1; transform: scale(.95); } 100% { opacity: 0; transform: scale(.7); } }
.dcard .dfig.dc-chasseur .dfx.impact { left: 50%; top: 32%; animation: limpact .6s 1.8s ease-out forwards; }
.dfx.bang { inset: auto; left: 50%; top: 4%; margin-left: -40px; width: 80px; text-align: center; font: 900 22px/1 var(--display); color: #ffe27a; text-shadow: 0 0 0 #000, 2px 2px 0 #7a1c10, 0 0 14px rgba(255, 200, 80, .8); opacity: 0; transform: scale(.3) rotate(-10deg); animation: lbang .9s 1.8s cubic-bezier(.3, 1.6, .5, 1) forwards; z-index: 4; }
@keyframes lbang { 0% { opacity: 1; transform: scale(.3) rotate(-10deg); } 30% { opacity: 1; transform: scale(1.2) rotate(-6deg); } 80% { opacity: 1; transform: scale(1) rotate(-6deg); } 100% { opacity: 0; transform: scale(1.1) rotate(-6deg); } }
.dcard .dfig.dc-chasseur .pfull { animation: lshot 1.3s 1.82s cubic-bezier(.2, .8, .4, 1) forwards; transform-origin: 50% 100%; }
@keyframes lshot { 0% { transform: none; } 15% { transform: translateX(-10%) rotate(-14deg); } 100% { transform: rotate(-84deg) translate(-8%, 12%); filter: grayscale(.85) brightness(.85); } }
/* chagrin : un cœur se brise en deux moitiés qui tombent, il se tasse */
.dfx.broken { display: block; }
.dfx.broken b { position: absolute; left: 50%; top: 0; margin-left: -17px; font-size: 34px; line-height: 1; color: #ff6b8b; text-shadow: 0 2px 8px rgba(0, 0, 0, .4); opacity: 0; animation: lheartL 1.8s 1.05s ease-in forwards; }
.dfx.broken b.h1 { clip-path: polygon(0 0, 52% 0, 40% 35%, 56% 55%, 44% 100%, 0 100%); }
.dfx.broken b.h2 { clip-path: polygon(52% 0, 100% 0, 100% 100%, 44% 100%, 56% 55%, 40% 35%); animation-name: lheartR; }
@keyframes lheartL { 0% { opacity: 1; transform: scale(.6); } 20% { transform: scale(1.15); } 40% { transform: scale(1); } 55% { opacity: 1; transform: translateX(-3px) rotate(-6deg); } 100% { opacity: 0; transform: translate(-22px, 60px) rotate(-40deg); } }
@keyframes lheartR { 0% { opacity: 1; transform: scale(.6); } 20% { transform: scale(1.15); } 40% { transform: scale(1); } 55% { opacity: 1; transform: translateX(3px) rotate(6deg); } 100% { opacity: 0; transform: translate(22px, 60px) rotate(40deg); } }
.dcard .dfig.dc-chagrin .pfull { animation: lsad 1.6s 1.7s ease-in-out forwards; transform-origin: 50% 100%; }
/* parti : il s'éloigne et s'efface */
.dcard .dfig.dc-parti .pfull { animation: lgone2 1.6s 1.2s ease-in forwards; }
@keyframes lgone2 { 30% { transform: translateX(-6%) scale(.97); } 100% { opacity: 0; transform: translateX(45%) scale(.8); filter: blur(1px) grayscale(1); } }
.dcard .dfig.dc-village .dghost, .dcard .dfig.dc-parti .dghost { display: none; }
.dcard .dghost { animation-delay: 2.7s; }
@media (prefers-reduced-motion: reduce) { .dcard .dfig > .pav, .dcard .dfig .pfull, .dcard .dfx, .dcard .dfx *, .dcard .dfx::before { animation: none !important; } .dcard .dfx.potion, .dcard .dfx.scope, .dcard .dfx.bang { display: none; } }

/* ---- étape 47 : Quiz, des pupitres plus grands, les textes sous le pseudo, la joie et la déception ---- */
.desk.pup { --fh: 132px; min-width: calc(var(--fh) * 1.08); max-width: calc(var(--fh) * 1.45); }
.desk.pup .pfig { margin-bottom: calc(var(--fh) * -.2); }
.desk.pup .pfront { padding: 14px 12px 10px; gap: 3px; }
/* (les vieilles règles du pupitre rangeaient le score et le texte en colonnes : ils se marchaient dessus) */
.desk.pup .pfront > .ds, .desk.pup .pfront > .dn, .desk.pup .pfront > .dst { grid-column: 1 !important; grid-row: auto !important; text-align: center; }
.desk.pup .pfront > .ds { font-size: calc(var(--fh) * .26); min-width: 0; }
.desk.pup .pfront > .dn { font-size: 13.5px; }
.desk.pup .pfront > .dst { font-size: 12px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.desk.pup .pfront .pbuzz { top: -11px; left: 50%; margin-left: calc(var(--fh) * .12); }
/* gagner le point : il saute de joie, des étoiles jaillissent, son pupitre s'illumine */
.desk.pup.joy .pfig .pfull { animation: qzJoy 1.5s ease-out; transform-origin: 50% 100%; }
@keyframes qzJoy { 0% { transform: none; } 15% { transform: translateY(-16%) scale(1.05) rotate(-4deg); } 30% { transform: none; } 45% { transform: translateY(-11%) rotate(4deg); } 60% { transform: none; } 75% { transform: translateY(-4%); } 100% { transform: none; } }
.desk.pup.joy .pfront { box-shadow: inset 0 0 0 2px var(--mint), 0 0 34px rgba(61, 224, 166, .6); }
.desk.pup .pmood { position: absolute; left: 50%; top: 4%; width: 0; height: 0; pointer-events: none; z-index: 4; }
.desk.pup.joy .pmood::before, .desk.pup.joy .pmood::after { content: "\2726"; position: absolute; left: -10px; top: 0; font-size: 22px; color: #ffd36e; text-shadow: 0 0 10px rgba(255, 211, 110, .9); animation: qzStarL 1.3s ease-out forwards; }
.desk.pup.joy .pmood::after { animation-name: qzStarR; font-size: 16px; animation-delay: .15s; opacity: 0; }
@keyframes qzStarL { 0% { opacity: 0; transform: translate(0, 20px) scale(.4); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(-38px, -30px) scale(1.2) rotate(-40deg); } }
@keyframes qzStarR { 0% { opacity: 0; transform: translate(0, 20px) scale(.4); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(40px, -24px) scale(1.2) rotate(40deg); } }
/* rater le point : il baisse la tête et se tasse, un petit nuage de pluie passe au-dessus */
.desk.pup.sad .pfig .pfull { animation: qzSad 2s ease-in-out; transform-origin: 50% 100%; }
@keyframes qzSad { 0% { transform: none; filter: none; } 20% { transform: translateY(3%) scaleY(.93) rotate(-3deg); filter: saturate(.5) brightness(.85); } 40% { transform: translateY(3%) scaleY(.93) rotate(2deg); } 60% { transform: translateY(3%) scaleY(.93) rotate(-2deg); filter: saturate(.5) brightness(.85); } 100% { transform: none; filter: none; } }
.desk.pup.sad .pmood::before { content: ""; position: absolute; left: -22px; top: -14px; width: 44px; height: 16px; border-radius: 10px; background: #9aa3b5; box-shadow: 8px -8px 0 -1px #9aa3b5, -6px -5px 0 -3px #9aa3b5, inset 0 -3px 0 rgba(0, 0, 0, .15); animation: qzCloud 2s ease-in-out forwards; }
.desk.pup.sad .pmood::after { content: ""; position: absolute; left: -14px; top: 4px; width: 28px; height: 22px; background: repeating-linear-gradient(100deg, transparent 0 5px, rgba(140, 190, 255, .9) 5px 6.5px, transparent 6.5px 10px); -webkit-mask: linear-gradient(180deg, #000, transparent); mask: linear-gradient(180deg, #000, transparent); animation: qzRain 2s linear forwards; }
@keyframes qzCloud { 0% { opacity: 0; transform: translateY(-8px); } 15%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes qzRain { 0% { opacity: 0; background-position: 0 0; } 15%, 80% { opacity: 1; } 100% { opacity: 0; background-position: 0 40px; } }
@media (max-width: 640px) { .desk.pup { min-width: 0; } .desk.pup .pfig .pfull { --h: var(--fh) !important; } .desk.pup .pbuzz { top: -11px; } .desk.pup .pfront > .ds { font-size: 24px; } }
@media (prefers-reduced-motion: reduce) { .desk.pup.joy .pfig .pfull, .desk.pup.sad .pfig .pfull, .desk.pup .pmood::before, .desk.pup .pmood::after { animation: none !important; } }

/* ---- étape 47 : Black Rat, mon rat à côté de ma plaque, des gestes bien différents, la victoire et la défaite ---- */
.bjplate > .bjrat { position: absolute; right: calc(100% + 4px); bottom: -10px; pointer-events: none; }
.bjplate > .bjrat .pav.full { pointer-events: auto; }
.bjplate > .bjrat .pfull { filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .45)); transform-origin: 50% 100%; }
.bjseat.me .bjplate { padding-left: 12px; }
.pav.full .rf-fx { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.pav.full .rf-fx i { position: absolute; font-style: normal; }
/* mise : il lance son jeton en l'air, vers le tapis */
.pav.full.rf-bet .pfull { animation: bjBet2 .9s ease-out; }
@keyframes bjBet2 { 25% { transform: rotate(-10deg) translateY(-2%); } 45% { transform: rotate(8deg) translateY(-6%); } 100% { transform: none; } }
.rf-fx .rf-chip { left: 58%; bottom: 45%; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle, #e8c547 34%, #c4473b 35%); box-shadow: inset 0 0 0 2px #f6efdf, 0 2px 4px rgba(0, 0, 0, .5); animation: bjToss2 .9s cubic-bezier(.3, .6, .5, 1) forwards; }
@keyframes bjToss2 { 0% { transform: translate(0, 0) scale(.6) rotateY(0); } 50% { transform: translate(30px, -110px) scale(1.1) rotateY(540deg); } 100% { opacity: 0; transform: translate(60px, -40px) scale(.7) rotateY(900deg); } }
/* carte : deux petits coups sur la table (deux ondes) */
.pav.full.rf-hit .pfull { animation: bjTap2 .9s ease-in-out; }
@keyframes bjTap2 { 15%, 55% { transform: translateY(6%) rotate(5deg) scaleY(.96); } 35%, 75% { transform: translateY(-2%); } 100% { transform: none; } }
.rf-fx .rf-tap { left: 64%; bottom: 8%; width: 30px; height: 10px; margin-left: -15px; border-radius: 50%; border: 2.5px solid rgba(255, 230, 160, .9); opacity: 0; animation: bjRip .5s .1s ease-out forwards; }
.rf-fx .rf-tap.t2 { animation-delay: .5s; }
@keyframes bjRip { 0% { opacity: 1; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.8); } }
/* reste : il lève la main bien haut, « stop », et secoue la tête */
.pav.full.rf-stand .pfull { animation: bjStop 1s ease-in-out; }
@keyframes bjStop { 15% { transform: translateX(-2%) rotate(-3deg); } 35% { transform: translateX(2%) rotate(3deg); } 55% { transform: translateX(-2%) rotate(-2deg); } 100% { transform: none; } }
.rf-fx .rf-palm { left: 50%; top: -8%; width: 34px; height: 34px; margin-left: -17px; animation: bjPalm 1.1s cubic-bezier(.3, 1.5, .5, 1) forwards; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .5)); }
.rf-fx .rf-palm svg { width: 100%; height: 100%; display: block; }
@keyframes bjPalm { 0% { opacity: 0; transform: translateY(16px) scale(.4); } 25% { opacity: 1; transform: scale(1.1); } 40%, 60% { transform: rotate(-12deg); } 50%, 70% { transform: rotate(12deg); } 85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-10px); } }
/* double : il saute, et un « ×2 » doré jaillit */
.pav.full.rf-double .pfull { animation: bjJump2 .9s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes bjJump2 { 0% { transform: none; } 15% { transform: scaleY(.88) scaleX(1.08); } 45% { transform: translateY(-24%) scale(1.06) rotate(-5deg); } 75% { transform: scaleY(.92) scaleX(1.05); } 100% { transform: none; } }
.rf-fx .rf-x2 { left: 50%; top: -6%; margin-left: -20px; width: 40px; text-align: center; font: 900 24px/1 var(--display); color: #ffd36e; text-shadow: 2px 2px 0 #6a3d0a, 0 0 12px rgba(255, 211, 110, .9); animation: bjX2 1s cubic-bezier(.3, 1.6, .5, 1) forwards; }
@keyframes bjX2 { 0% { opacity: 0; transform: scale(.3); } 30% { opacity: 1; transform: scale(1.3) rotate(-8deg); } 80% { opacity: 1; transform: translateY(-14px) scale(1) rotate(-8deg); } 100% { opacity: 0; transform: translateY(-22px) rotate(-8deg); } }
/* sépare : il écarte les bras, deux cartes glissent chacune de leur côté */
.pav.full.rf-split .pfull { animation: bjSplit2 .9s ease-in-out; }
@keyframes bjSplit2 { 35% { transform: scaleX(1.2) scaleY(.94); } 60% { transform: scaleX(1.1); } 100% { transform: none; } }
.rf-fx .rf-card { left: 50%; top: 40%; width: 18px; height: 26px; margin: -13px -9px; border-radius: 3px; background: #fffaf0; box-shadow: inset 0 0 0 2px #b8312a, 0 2px 5px rgba(0, 0, 0, .5); animation: bjCardL .9s ease-out forwards; }
.rf-fx .rf-card.r { animation-name: bjCardR; }
@keyframes bjCardL { 0% { opacity: 0; transform: none; } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-46px, -10px) rotate(-25deg); } }
@keyframes bjCardR { 0% { opacity: 0; transform: none; } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(46px, -10px) rotate(25deg); } }
/* gagné : il saute de joie dans des étincelles dorées (blackjack : plus haut, plus d'étoiles, lueur dorée) */
.pav.full.rf-win .pfull, .pav.full.rf-bj .pfull { animation: bjWin 1.8s ease-out; }
.pav.full.rf-bj .pfull { animation-name: bjWinBig; filter: drop-shadow(0 0 14px rgba(255, 211, 110, .9)) drop-shadow(0 10px 12px rgba(0, 0, 0, .45)); }
@keyframes bjWin { 0%, 100% { transform: none; } 12% { transform: translateY(-14%) rotate(-5deg); } 25% { transform: none; } 37% { transform: translateY(-10%) rotate(5deg); } 50% { transform: none; } 62% { transform: translateY(-5%); } 75% { transform: none; } }
@keyframes bjWinBig { 0%, 100% { transform: none; } 12% { transform: translateY(-24%) rotate(-8deg) scale(1.08); } 25% { transform: none; } 37% { transform: translateY(-18%) rotate(8deg) scale(1.06); } 50% { transform: none; } 62% { transform: translateY(-10%) rotate(360deg); } 80% { transform: rotate(360deg); } }
.rf-fx .rf-spark { left: 50%; top: 20%; font-size: 20px; color: #ffd36e; text-shadow: 0 0 10px rgba(255, 211, 110, .9); opacity: 0; animation: bjSpark 1.4s ease-out forwards; }
.rf-fx .rf-spark.s1 { --dx: -44px; --dy: -40px; } .rf-fx .rf-spark.s2 { --dx: 40px; --dy: -46px; animation-delay: .15s; } .rf-fx .rf-spark.s3 { --dx: 4px; --dy: -70px; animation-delay: .3s; font-size: 15px; }
.rf-fx .rf-spark.s4 { --dx: -60px; --dy: -10px; animation-delay: .45s; } .rf-fx .rf-spark.s5 { --dx: 58px; --dy: -14px; animation-delay: .6s; }
@keyframes bjSpark { 0% { opacity: 0; transform: translate(0, 10px) scale(.3); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.2) rotate(90deg); } }
/* perdu : il se tasse, devient gris, une goutte de sueur coule */
.pav.full.rf-lose .pfull { animation: bjLose 2s ease-in-out; }
@keyframes bjLose { 0% { transform: none; filter: none; } 20% { transform: translateY(3%) scaleY(.92) rotate(-4deg); filter: grayscale(.7) brightness(.8); } 70% { transform: translateY(3%) scaleY(.92) rotate(-2deg); filter: grayscale(.7) brightness(.8); } 100% { transform: none; filter: none; } }
.rf-fx .rf-drop { left: 64%; top: 14%; width: 9px; height: 13px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: linear-gradient(180deg, #e6f6ff, #8ccaf5); box-shadow: 0 0 0 1.5px #2a4a6a; opacity: 0; animation: bjSweat 1.6s .3s ease-in forwards; }
@keyframes bjSweat { 0% { opacity: 0; transform: translateY(-4px) scale(.5); } 20% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(30px); } }
/* égalité : il hausse les épaules */
.pav.full.rf-push .pfull { animation: bjShrug 1s ease-in-out; }
@keyframes bjShrug { 30%, 60% { transform: scaleY(1.05) translateY(-3%); } 100% { transform: none; } }
.rf-fx .rf-push { left: 50%; top: -2%; margin-left: -10px; font: 900 22px/1 var(--display); color: #f2eadb; text-shadow: 0 2px 6px rgba(0, 0, 0, .6); animation: bjX2 1s ease-out forwards; }
@media (max-width: 700px) { .bjplate > .bjrat { bottom: -6px; right: calc(100% + 2px); } }
@media (prefers-reduced-motion: reduce) { .pav.full[class*="rf-"] .pfull { animation: none !important; } .rf-fx { display: none; } }

/* ---- étape 47 : Bataille navale, la baie sous les grilles (deux navires face à face, le journal de bord entre eux) ---- */
.nvbay { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 320px) minmax(0, 1fr); align-items: end; gap: 14px; margin-top: 14px; padding: 18px 16px 0; border-radius: 20px; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, #0b1c2c 0%, #12304a 52%, #0d3550 53%, #0a2a40 100%); box-shadow: inset 0 0 0 1px rgba(127, 224, 196, .16), 0 24px 50px -24px rgba(0, 0, 0, .9); min-height: 210px; }
.nvbay .bs-sky { position: absolute; inset: 0 0 47% 0; z-index: -1; background: radial-gradient(60% 90% at 50% 100%, rgba(255, 211, 110, .16), transparent 70%), radial-gradient(1px 1px at 12% 22%, #fff 50%, transparent), radial-gradient(1px 1px at 34% 12%, #fff 50%, transparent), radial-gradient(1.4px 1.4px at 66% 26%, #fff 50%, transparent), radial-gradient(1px 1px at 86% 14%, #fff 50%, transparent), radial-gradient(1px 1px at 52% 8%, #fff 50%, transparent); opacity: .8; }
.nvbay .bs-waves { position: absolute; left: 0; right: 0; bottom: 0; height: 34px; z-index: 3; pointer-events: none; }
.nvbay .bs-waves i { position: absolute; inset: 0; background: radial-gradient(18px 8px at 50% 0, transparent 70%, rgba(10, 42, 64, .92) 72%) 0 0 / 36px 34px repeat-x; animation: bsWave 7s linear infinite; }
.nvbay .bs-waves i + i { bottom: -8px; top: 8px; opacity: .8; background: radial-gradient(22px 9px at 50% 0, transparent 70%, rgba(7, 32, 50, .96) 72%) 0 0 / 44px 34px repeat-x; animation-duration: 11s; animation-direction: reverse; }
@keyframes bsWave { to { background-position: 360px 0; } }
.bs-slot { position: relative; min-width: 0; }
.bs-ship { position: relative; width: 100%; max-width: 340px; aspect-ratio: 300 / 175; margin-inline: auto; container-type: inline-size; animation: bsRock 5s ease-in-out infinite; transform-origin: 50% 90%; }
.bs-foe .bs-ship { animation-delay: -2.5s; }
@keyframes bsRock { 0%, 100% { transform: rotate(-1.2deg) translateY(0); } 50% { transform: rotate(1.2deg) translateY(3px); } }
.bs-ship .bs-hull { position: absolute; left: 0; right: 0; bottom: 8px; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .45)); }
.bs-foe .bs-hull { transform: scaleX(-1); }
.bs-ship .bs-win { animation: bsWin 4s ease-in-out infinite; } .bs-ship .bs-flag { transform-box: fill-box; transform-origin: 0 50%; animation: bsFlag 2.4s ease-in-out infinite; }
@keyframes bsWin { 50% { opacity: .65; } } @keyframes bsFlag { 50% { transform: skewY(6deg) scaleX(.94); } }
/* le rat sur le pont (au milieu du navire), le canon à la proue, tourné vers l'adversaire */
.bs-ship .bs-rat { position: absolute; z-index: 2; bottom: calc(8px + 24cqw); left: 30%; transform: translateX(-50%); }
.bs-foe .bs-ship .bs-rat { left: auto; right: 30%; transform: translateX(50%); }
.bs-ship .bs-rat .pfull { filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .45)); transform-origin: 50% 100%; }
.bs-ship .bs-can { position: absolute; z-index: 3; bottom: calc(8px + 22.5cqw); left: 62%; width: 30%; overflow: visible; }
.bs-foe .bs-ship .bs-can { left: auto; right: 62%; transform: scaleX(-1); }
.bs-ship .bs-name { position: absolute; z-index: 4; left: 50%; bottom: 2px; transform: translateX(-50%); padding: 2px 10px; border-radius: 8px; background: rgba(6, 18, 28, .7); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .4); font-size: 12.5px; color: #f6efdf; white-space: nowrap; max-width: 90%; overflow: hidden; text-overflow: ellipsis; }
/* tir : le canon recule, flamme et fumée ; touché : le navire tremble, lueur rouge ; coulé : plus fort */
.bs-ship .bs-flash, .bs-ship .bs-smoke { opacity: 0; transform-box: fill-box; transform-origin: 0 50%; }
.bs-ship.fire .bs-barrel { animation: dkRecoil .5s ease-out; transform-box: fill-box; transform-origin: 0 50%; }
.bs-ship.fire .bs-flash { animation: dkFlash .35s ease-out; } .bs-ship.fire .bs-smoke { animation: dkSmoke 1s ease-out; }
.bs-ship.fire .bs-rat .pfull { animation: dkBrace .6s ease-out; }
.bs-ship.hurt, .bs-ship.sunk { animation: dkShake .55s ease-in-out; } .bs-ship.sunk { animation-iteration-count: 2; }
.bs-ship.hurt::after, .bs-ship.sunk::after { content: ""; position: absolute; inset: 30% 5% 0; border-radius: 40px; background: radial-gradient(closest-side, rgba(255, 90, 60, .55), transparent); animation: dkRed .9s ease-out forwards; pointer-events: none; z-index: 5; }
.bs-ship.hurt .bs-rat .pfull, .bs-ship.sunk .bs-rat .pfull { animation: dkStagger .9s ease-in-out; }
/* le journal de bord : une carte de verre fumé, des lignes fines et lisibles */
.nvhist { position: relative; z-index: 4; align-self: center; margin-bottom: 28px; display: grid; gap: 8px; padding: 12px 12px 10px; border-radius: 16px; background: rgba(6, 20, 30, .78); box-shadow: inset 0 0 0 1px rgba(127, 224, 196, .22), 0 16px 30px -14px rgba(0, 0, 0, .9); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: var(--chalk); }
.nvh-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.nvh-h b { font: 700 14px/1 var(--display); color: #f2d58a; }
.nvh-all { font: 600 12px/1 var(--body); color: #bfe8d6; padding: 5px 9px; border: 0; border-radius: 999px; background: rgba(127, 224, 196, .12); box-shadow: inset 0 0 0 1px rgba(127, 224, 196, .35); cursor: pointer; }
.nvh-all small { margin-left: 4px; opacity: .75; } .nvh-all:hover { background: rgba(127, 224, 196, .22); }
.nvhist ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.nvh-r { display: grid; grid-template-columns: 22px 38px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: rgba(255, 255, 255, .04); border-left: 3px solid transparent; font-size: 13px; line-height: 1.2; }
.nvh-r.me { border-left-color: #2fae86; } .nvh-r.foe { border-left-color: #c4473b; }
.nvh-r:first-child { background: rgba(255, 255, 255, .09); box-shadow: 0 0 0 1px rgba(242, 213, 138, .25); }
.nvh-ic { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.nvh-ic svg { width: 14px; height: 14px; display: block; }
.nvh-r.miss .nvh-ic { color: #bfe3f5; } .nvh-r.hit .nvh-ic { color: #ffb08a; background: rgba(255, 150, 90, .16); } .nvh-r.sunk .nvh-ic { color: #ff8a70; background: rgba(255, 90, 60, .2); }
.nvh-c { font-weight: 800; font-size: 14px; color: #fff; }
.nvh-t { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nvh-r.miss .nvh-t { color: #bfe3f5; } .nvh-r.hit .nvh-t { color: #ffb08a; } .nvh-r.sunk .nvh-t { color: #ff9c86; }
.nvh-w { font-size: 11.5px; opacity: .7; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nvh-empty { padding: 10px; text-align: center; font-size: 13px; opacity: .65; }
.nvtable[data-phase="place"] .nvhist { display: none; }
.nvtable[data-phase="place"] .nvbay { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 760px) {
  .nvbay { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 34px 8px 0; gap: 8px; min-height: 0; }
  .nvbay .nvhist { grid-column: 1 / -1; grid-row: 2; margin-bottom: 30px; }
  .bs-ship .bs-name { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .nvbay *, .bs-ship { animation: none !important; } }

/* ---- étape 48 ---- */
/* Color Rats : mon rat fait le même geste que les autres quand je joue une carte */
#g-me.throw .meav.full .pfull { animation: crThrow .6s ease-out; transform-origin: 50% 100%; }
/* Rats-Garous : le pseudo ouvre le profil (le rat sert à voter) ; la médaille du maire en haut à droite du personnage */
.tok .tnm { cursor: pointer; }
.tok .tnm:hover { text-decoration: underline; text-underline-offset: 3px; }
.tok .tmayor { top: calc(var(--s) * .12); left: calc(50% + var(--s) * .3); width: calc(var(--s) * .42); height: calc(var(--s) * .42); min-width: 22px; min-height: 22px; }

/* Black Rat : ma souris bien à gauche de ma plaque (pseudo, jetons), séparée mais tout près */
.bjplate > .bjrat { right: calc(100% + 16px); bottom: -14px; }
@media (max-width: 700px) { .bjplate > .bjrat { right: calc(100% + 8px); bottom: -8px; } }

/* ---- étape 48 : Bataille navale, des navires de guerre (le rat est DANS le navire), le journal de bord dessous ---- */
.nvbay { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; padding: 22px 18px 0; min-height: 0; }
.bs-ship { aspect-ratio: 320 / 175; max-width: 420px; }
.bs-ship .bs-hull, .bs-ship .bs-can { display: none; }
.bs-ship .bs-back, .bs-ship .bs-front { position: absolute; left: 0; right: 0; bottom: 8px; width: 100%; height: auto; overflow: visible; }
.bs-ship .bs-back { z-index: 1; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .35)); }
.bs-ship .bs-front { z-index: 3; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .45)); pointer-events: none; }
.bs-foe .bs-back, .bs-foe .bs-front { transform: scaleX(-1); }
/* le rat se tient sur le pont, juste derrière la tourelle ; le bord de la coque passe devant ses pieds */
.bs-ship .bs-rat { z-index: 2; left: 63%; bottom: calc(8px + 25.5cqw); }
.bs-foe .bs-ship .bs-rat { left: auto; right: 63%; }
.bs-ship .bs-name { z-index: 4; }
.bs-ship .bs-radar { transform-box: fill-box; transform-origin: 50% 50%; animation: bsRadar 3s linear infinite; }
@keyframes bsRadar { 0% { transform: scaleX(1); } 25% { transform: scaleX(.15); } 50% { transform: scaleX(-1); } 75% { transform: scaleX(.15); } 100% { transform: scaleX(1); } }
.bs-ship .bs-blink { animation: bsBlink 1.6s steps(2) infinite; } @keyframes bsBlink { 50% { opacity: .15; } }
.bs-ship .bs-fumes circle { transform-box: fill-box; transform-origin: center; animation: bsFume 3.2s ease-out infinite; } .bs-ship .bs-fumes circle + circle { animation-delay: -1.6s; }
@keyframes bsFume { 0% { opacity: 0; transform: translate(0, 8px) scale(.6); } 30% { opacity: .5; } 100% { opacity: 0; transform: translate(10px, -14px) scale(1.4); } }
.bs-ship.fire .bs-barrel { animation: dkRecoil .5s ease-out; transform-box: fill-box; transform-origin: 0 50%; }
/* le journal de bord : sous la baie, centré, aussi large qu'elle ; les 4 derniers tirs sur deux colonnes */
.nvhist.wrap { margin: 12px auto 0; width: 100%; align-self: auto; }
.nvhist ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; }
@media (max-width: 760px) { .nvhist ol { grid-template-columns: minmax(0, 1fr); } .nvbay { padding: 30px 8px 0; } }
.nvtable[data-phase="place"] .nvhist { display: none; }
@media (prefers-reduced-motion: reduce) { .bs-ship .bs-radar, .bs-ship .bs-blink, .bs-ship .bs-fumes circle { animation: none !important; } }

/* ---- étape 49 ---- */
/* Rats-Garous : le fond de l'annonce est une couche à part, qui s'efface avant la distribution des cartes de rôle */
.lintro { background: none; }
.lintro .lbg { position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 50% 30%, #18235c, #05081a 70%); }
/* le viseur du Chasseur vise la tête (un peu plus bas qu'avant) */
.dfx.scope { top: 54%; }
.dcard .dfig.dc-chasseur .dfx.impact { top: 54%; }
/* les tchats : chaque message garde sa hauteur (avant, des messages se tassaient et la liste ne défilait plus) */
.lch-list > *, .gt-msgs > * { flex-shrink: 0; }
/* le petit bouton micro des joueurs : seulement sur la table de jeu, jamais dans les tchats ni les panneaux sur les côtés */
:is(.lchat, .gtalk, .chatp, .lmj, .lmayor, .mates, .ldeath, .lrole, .endbox, .endcard, .lintro) .pbadge { display: none !important; }
/* Black Rat : la vraie cause — une vieille règle (« .bjplate span { display: grid; min-width: 0 } ») donnait 0 de large à la
   boîte de ma souris : le dessin débordait sur ma plaque. Elle reprend sa vraie largeur, bien à gauche de la plaque. */
.bjseat .bjplate > .bjrat, .bjseat .bjplate > .bjrat > .pav.full { display: inline-grid; width: max-content; min-width: max-content; }

/* ---- étape 49 : Bataille navale bien vivante ---- */
/* le pseudo peint sur la coque (au lieu de « R7 »), dans le bon sens des deux côtés ; plus d'étiquette sous le navire */
.bs-ship .bs-name { display: none; }
.bs-front text { display: none; }
.bs-ship .bs-hullname { position: absolute; z-index: 4; left: 50%; bottom: calc(8px + 16.5cqw); transform: translateX(-50%); max-width: 46cqw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 900 4.4cqw/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: rgba(242, 242, 242, .88); text-shadow: 0 1px 0 rgba(0, 0, 0, .35); pointer-events: none; }
/* les navires dans l'eau : l'eau passe devant le bas de la coque, avec l'écume de la ligne de flottaison */
.bs-ship .bs-water { position: absolute; z-index: 5; left: -6%; right: -6%; bottom: 0; height: calc(8px + 11.5cqw); pointer-events: none;
  background: radial-gradient(14px 5px at 50% 0, rgba(220, 240, 255, .55), transparent 70%) 0 0 / 28px 8px repeat-x, linear-gradient(180deg, rgba(16, 58, 88, .55), rgba(10, 40, 62, .95) 45%); border-radius: 40% 40% 0 0 / 30% 30% 0 0; animation: bsFoam 4s linear infinite; }
@keyframes bsFoam { to { background-position: 280px 0, 0 0; } }
.bs-ship { animation: none; }
.bs-ship .bs-back, .bs-ship .bs-front, .bs-ship .bs-rat, .bs-ship .bs-hullname, .bs-ship .bs-dmg { animation: bsRock2 5s ease-in-out infinite; transform-origin: 50% 90%; }
.bs-foe .bs-ship .bs-back, .bs-foe .bs-ship .bs-front { animation-name: bsRock2f; }
@keyframes bsRock2 { 0%, 100% { rotate: -1.2deg; translate: 0 0; } 50% { rotate: 1.2deg; translate: 0 3px; } }
@keyframes bsRock2f { 0%, 100% { rotate: 1.2deg; translate: 0 0; } 50% { rotate: -1.2deg; translate: 0 3px; } }
/* le canon bien visible : canons plus clairs, éclair et fumée bien plus grands */
.bs-ship .bs-barrel path { fill: #56616b; stroke-width: 2.2; }
.bs-ship.fire .bs-flash { animation: bsFlash2 .45s ease-out; transform-box: fill-box; transform-origin: 0 50%; }
.bs-ship.fire .bs-smoke { animation: bsSmoke2 1.2s ease-out; transform-box: fill-box; transform-origin: 0 50%; }
@keyframes bsFlash2 { 0% { opacity: 0; transform: scale(.5); } 25% { opacity: 1; transform: scale(2.2); } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes bsSmoke2 { 0% { opacity: 0; transform: scale(.6); } 20% { opacity: .95; transform: scale(1.4); } 100% { opacity: 0; transform: translate(14px, -18px) scale(2.6); } }
.bs-ship.fire .bs-back { filter: drop-shadow(0 0 14px rgba(255, 200, 90, .8)) drop-shadow(0 4px 6px rgba(0, 0, 0, .35)); }
/* l'obus traçant, la gerbe d'eau (raté) et l'explosion (touché) */
.nvbay .bs-shell { position: absolute; left: 0; top: 0; z-index: 8; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: radial-gradient(circle, #fff6d0, #ffb347 60%, #c4473b); box-shadow: 0 0 12px 4px rgba(255, 190, 90, .8); pointer-events: none; }
.nvbay .bs-splash, .nvbay .bs-boom { position: absolute; z-index: 7; width: 0; height: 0; pointer-events: none; }
.bs-splash i { position: absolute; left: -6px; bottom: 0; width: 12px; height: 46px; border-radius: 50% 50% 30% 30%; background: linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(170, 220, 255, .6)); transform-origin: 50% 100%; animation: bsCol 1s ease-out forwards; }
.bs-splash i:nth-child(2) { left: -16px; height: 30px; animation-delay: .06s; rotate: -18deg; } .bs-splash i:nth-child(3) { left: 4px; height: 34px; animation-delay: .1s; rotate: 16deg; }
@keyframes bsCol { 0% { transform: scaleY(0); opacity: 1; } 35% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(.3) translateY(10px); opacity: 0; } }
.bs-splash b { position: absolute; left: -30px; top: -6px; width: 60px; height: 14px; border-radius: 50%; border: 2px solid rgba(220, 240, 255, .8); animation: bsRing 1.2s ease-out forwards; }
.bs-splash b + b { animation-delay: .25s; }
@keyframes bsRing { 0% { transform: scale(.2); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }
.bs-boom i { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle, #fff6d0, #ffb347 40%, #e2442a 65%, transparent 70%); animation: bsBoom .7s ease-out forwards; }
.bs-boom i:nth-child(2) { left: -6px; top: -30px; animation-delay: .08s; width: 30px; height: 30px; } .bs-boom i:nth-child(3) { left: -30px; top: -8px; animation-delay: .14s; width: 28px; height: 28px; }
@keyframes bsBoom { 0% { transform: scale(.2); opacity: 1; } 60% { opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.bs-boom b { position: absolute; left: -20px; top: -40px; width: 40px; height: 40px; border-radius: 50%; background: rgba(80, 80, 80, .55); animation: bsSmoke2 1.4s .2s ease-out both; }
/* les dégâts : chaque bateau coulé ajoute de la fumée, puis du feu, puis des trous ; le navire penche un peu */
.bs-ship .bs-dmg { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.bs-dmg i { position: absolute; display: none; }
.bs-dmg .sm { width: 7cqw; height: 7cqw; border-radius: 50%; background: radial-gradient(circle, rgba(60, 60, 64, .75), rgba(60, 60, 64, 0) 70%); animation: bsSm 2.4s ease-out infinite; }
.bs-dmg .s1 { left: 30%; bottom: 40cqw; } .bs-dmg .s2 { left: 55%; bottom: 38cqw; animation-delay: -.8s; } .bs-dmg .s3 { left: 76%; bottom: 36cqw; animation-delay: -1.6s; }
@keyframes bsSm { 0% { opacity: 0; transform: translateY(0) scale(.5); } 30% { opacity: .9; } 100% { opacity: 0; transform: translate(6px, -9cqw) scale(1.8); } }
.bs-dmg .fi { width: 3.6cqw; height: 5cqw; border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%; background: radial-gradient(circle at 50% 70%, #fff3b0, #ffb347 40%, #e2442a 75%); filter: drop-shadow(0 0 6px rgba(255, 140, 60, .9)); transform-origin: 50% 100%; animation: bsFire .5s ease-in-out infinite alternate; }
.bs-dmg .f1 { left: 34%; bottom: 31cqw; } .bs-dmg .f2 { left: 70%; bottom: 30cqw; animation-delay: -.25s; } .bs-dmg .f3 { left: 50%; bottom: 31cqw; animation-delay: -.12s; }
@keyframes bsFire { from { transform: scaleY(.85) rotate(-4deg); } to { transform: scaleY(1.15) rotate(4deg); } }
.bs-dmg .ho { width: 3.4cqw; height: 2.6cqw; border-radius: 45% 55% 50% 40%; background: radial-gradient(circle, #0d0f12 45%, #2b2f34 70%); box-shadow: 0 0 0 1px rgba(255, 140, 60, .5); }
.bs-dmg .h1 { left: 28%; bottom: 20cqw; } .bs-dmg .h2 { left: 58%; bottom: 18cqw; } .bs-dmg .h3 { left: 42%; bottom: 23cqw; }
.bs-ship[data-dmg="1"] .s1, .bs-ship[data-dmg="2"] :is(.s1, .s2, .f1), .bs-ship[data-dmg="3"] :is(.s1, .s2, .f1, .h1, .h2), .bs-ship[data-dmg="4"] :is(.s1, .s2, .s3, .f1, .f2, .h1, .h2), .bs-ship[data-dmg="5"] .bs-dmg i { display: block; }
.bs-ship[data-dmg="3"] .bs-front, .bs-ship[data-dmg="4"] .bs-front, .bs-ship[data-dmg="5"] .bs-front { filter: brightness(.82) drop-shadow(0 8px 10px rgba(0, 0, 0, .45)); }
.bs-ship[data-dmg="4"], .bs-ship[data-dmg="5"] { rotate: 2deg; }
/* la fin : le navire du perdant coule doucement, dans des bulles */
.bs-ship.sinking { animation: bsSink 4s ease-in forwards; }
@keyframes bsSink { 0% { transform: none; } 30% { transform: rotate(-6deg) translateY(4%); } 100% { transform: rotate(-14deg) translateY(70%); opacity: .25; } }
/* les réactions : content (il saute) ou fâché (il trépigne, rouge) */
.bs-ship.joy .bs-rat .pfull { animation: bsJoy .9s ease-out 2; transform-origin: 50% 100%; }
.bs-ship.mad .bs-rat .pfull { animation: bsMad .45s ease-in-out 4; transform-origin: 50% 100%; filter: drop-shadow(0 0 8px rgba(255, 80, 60, .7)); }
@keyframes bsJoy { 30% { transform: translateY(-14%) scale(1.05); } 60% { transform: none; } }
@keyframes bsMad { 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
/* le journal de bord : en-tête avec une petite légende, puis une rangée des derniers tirs (le plus récent à gauche) */
.nvhist { align-self: start !important; align-content: start; gap: 10px; padding: 12px 14px; }
.nvh-h { gap: 14px; }
.nvh-h > b { margin-right: auto; }
.nvh-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(242, 238, 230, .7); }
.nvh-leg i { width: 10px; height: 10px; border-radius: 3px; margin-left: 6px; } .nvh-leg i.me { background: #2fae86; } .nvh-leg i.foe { background: #c4473b; }
.nvhist ol { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; align-content: start; gap: 8px !important; }
.nvh-r { grid-template-columns: 22px minmax(0, 1fr); grid-template-rows: auto auto; row-gap: 2px; column-gap: 8px; padding: 8px 10px; min-height: 0; height: auto; border-left-width: 0; border-top: 3px solid transparent; }
.nvh-r.me { border-top-color: #2fae86; } .nvh-r.foe { border-top-color: #c4473b; }
.nvh-r .nvh-ic { grid-row: 1 / 3; }
.nvh-r .nvh-c { font-size: 15px; } .nvh-r .nvh-t { grid-column: 2; font-size: 12.5px; } .nvh-r .nvh-w { display: none; }
@media (max-width: 760px) { .nvhist ol { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .nvh-leg { display: none; } }
@media (prefers-reduced-motion: reduce) { .bs-ship *, .bs-ship, .nvbay .bs-shell, .bs-splash *, .bs-boom * { animation: none !important; } }
/* (même cause pour les autres joueurs du Black Rat : leur souris garde sa vraie largeur dans leur plaque, à côté du pseudo) */
.bjseat .bjplate > .pav.full { display: inline-grid; width: max-content; min-width: max-content; }

/* ---- étape 50 : la Sorcière devant ses deux potions ---- */
.actp.witch2 { display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 10px; border-radius: 18px; background: linear-gradient(180deg, rgba(36, 22, 60, .92), rgba(18, 12, 32, .94)); box-shadow: inset 0 0 0 1.5px rgba(180, 140, 255, .5), 0 18px 40px -16px rgba(0, 0, 0, .9); color: #f2eefc; max-width: min(720px, calc(100vw - 24px)); }
.witch2 .wp-me { flex: none; margin: -24px 0 -8px; }
.witch2 .wp-main { display: grid; gap: 10px; min-width: 0; }
.witch2 .wp-txt { margin: 0; font-size: 14px; }
.witch2 .wp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.witch2 .wp { display: flex; align-items: center; gap: 10px; min-width: 190px; padding: 8px 14px 8px 8px; border: 0; border-radius: 14px; cursor: pointer; text-align: left; color: inherit; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1.5px var(--wc); transition: transform .15s, background .2s, box-shadow .2s; }
.witch2 .wp.life { --wc: rgba(74, 163, 255, .7); } .witch2 .wp.death { --wc: rgba(76, 211, 106, .7); }
.witch2 .wp:hover:not(:disabled) { transform: translateY(-2px); background: rgba(255, 255, 255, .1); }
.witch2 .wp.on { background: rgba(76, 211, 106, .18); box-shadow: inset 0 0 0 2px #4cd36a, 0 0 22px rgba(76, 211, 106, .5); }
.witch2 .wp:disabled { cursor: default; opacity: .45; filter: grayscale(.7); }
.witch2 .wp span { display: grid; gap: 2px; } .witch2 .wp b { font-size: 14px; } .witch2 .wp small { font-size: 12px; opacity: .85; }
.witch2 .wp-svg { width: 34px; height: 46px; flex: none; filter: drop-shadow(0 0 10px var(--wc)); }
.witch2 .wp:not(:disabled) .wp-svg { animation: wpFloat 2.4s ease-in-out infinite; } .witch2 .wp.death .wp-svg { animation-delay: -1.2s; }
.witch2 .wp-bub circle { animation: wpBub 2s ease-in infinite; } .witch2 .wp-bub circle:nth-child(2) { animation-delay: -.7s; } .witch2 .wp-bub circle:nth-child(3) { animation-delay: -1.3s; }
@keyframes wpFloat { 50% { transform: translateY(-3px) rotate(-3deg); } }
@keyframes wpBub { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: .8; } 100% { transform: translateY(-14px); opacity: 0; } }
@media (max-width: 640px) { .witch2 .wp-me { display: none; } .witch2 .wp { min-width: 0; flex: 1 1 140px; } }
@media (prefers-reduced-motion: reduce) { .witch2 .wp-svg, .witch2 .wp-bub circle { animation: none !important; } }

/* ---- étape 50 : Bataille navale ---- */
/* le navire : « bs-hw » s'enfonce et penche selon les dégâts, « bs-rock » tangue ; tout ce qui est dedans suit */
.bs-ship .bs-hw, .bs-ship .bs-rock { position: absolute; inset: 0; }
.bs-ship .bs-hw { transform-origin: 50% 80%; transition: transform 1.4s cubic-bezier(.3, .7, .3, 1); }
.bs-ship .bs-rock { transform-origin: 50% 85%; animation: bsRock3 5s ease-in-out infinite; }
.bs-foe .bs-ship .bs-rock { animation-delay: -2.5s; }
@keyframes bsRock3 { 0%, 100% { transform: rotate(-1.1deg) translateY(0); } 50% { transform: rotate(1.1deg) translateY(3px); } }
.bs-ship .bs-back, .bs-ship .bs-front, .bs-ship .bs-rat, .bs-ship .bs-hullname { animation: none !important; rotate: none; translate: none; }
.bs-ship .bs-dmg, .bs-ship .bs-water { display: none; }
.bs-me .bs-ship[data-dmg="1"] .bs-hw { transform: translateY(2%) rotate(1deg); } .bs-foe .bs-ship[data-dmg="1"] .bs-hw { transform: translateY(2%) rotate(-1deg); }
.bs-me .bs-ship[data-dmg="2"] .bs-hw { transform: translateY(4%) rotate(2deg); } .bs-foe .bs-ship[data-dmg="2"] .bs-hw { transform: translateY(4%) rotate(-2deg); }
.bs-me .bs-ship[data-dmg="3"] .bs-hw { transform: translateY(7%) rotate(3.5deg); } .bs-foe .bs-ship[data-dmg="3"] .bs-hw { transform: translateY(7%) rotate(-3.5deg); }
.bs-me .bs-ship[data-dmg="4"] .bs-hw { transform: translateY(10%) rotate(5deg); } .bs-foe .bs-ship[data-dmg="4"] .bs-hw { transform: translateY(10%) rotate(-5deg); }
.bs-me .bs-ship[data-dmg="5"] .bs-hw { transform: translateY(14%) rotate(7deg); } .bs-foe .bs-ship[data-dmg="5"] .bs-hw { transform: translateY(14%) rotate(-7deg); }
.bs-ship[data-dmg="4"], .bs-ship[data-dmg="5"] { rotate: none; }
/* la fin : le perdant coule pour de bon */
.bs-ship.sinking { animation: none; }
.bs-me .bs-ship.sinking .bs-hw { animation: bsSink3 4.5s ease-in forwards; } .bs-foe .bs-ship.sinking .bs-hw { animation: bsSink3f 4.5s ease-in forwards; }
@keyframes bsSink3 { 0% { transform: translateY(10%) rotate(6deg); } 100% { transform: translateY(85%) rotate(18deg); opacity: .2; } }
@keyframes bsSink3f { 0% { transform: translateY(10%) rotate(-6deg); } 100% { transform: translateY(85%) rotate(-18deg); opacity: .2; } }
/* le feu et la grosse fumée noire (dessinés dans le navire) */
.bs-ship .bs-fl { transform-box: fill-box; transform-origin: 50% 100%; animation: bsFl .45s ease-in-out infinite alternate; animation-delay: calc(var(--d) * -1); }
@keyframes bsFl { from { transform: scaleY(.85) scaleX(1.05) rotate(-3deg); } to { transform: scaleY(1.15) scaleX(.95) rotate(3deg); } }
.bs-ship .bs-plume circle { transform-box: fill-box; transform-origin: center; opacity: 0; animation: bsPlume 3.2s ease-out infinite; animation-delay: calc(var(--k) * -.8s); }
@keyframes bsPlume { 0% { opacity: 0; transform: translate(0, 0) scale(.5); } 15% { opacity: .85; } 100% { opacity: 0; transform: translate(calc(var(--s) * 18px), calc(var(--s) * -70px)) scale(2.4); } }
.bs-ship .bs-ember { animation: bsEmber 1.2s ease-in-out infinite alternate; } @keyframes bsEmber { from { opacity: .25; } to { opacity: .75; } }
.bs-ship .bs-radar.stop { animation: none; }
/* l'adversaire regarde vers moi : il est retourné (sa longue-vue pointe à gauche) */
.bs-foe .bs-ship .bs-rat .pav.full { transform: scaleX(-1); }
/* le rat un peu en retrait de la grosse tourelle */
.bs-ship .bs-rat { left: 56%; }
.bs-foe .bs-ship .bs-rat { left: auto; right: 56%; }
/* l'eau sur toute la largeur de la baie, devant le bas des coques, avec l'écume qui défile */
.nvbay .bs-sea { position: absolute; z-index: 6; left: 0; right: 0; bottom: 0; height: var(--wl, 52px); pointer-events: none;
  background: radial-gradient(14px 5px at 50% 0, rgba(220, 240, 255, .55), transparent 70%) 0 0 / 28px 8px repeat-x, linear-gradient(180deg, rgba(16, 58, 88, .6), rgba(10, 40, 62, .96) 45%); animation: bsFoam 4s linear infinite; }
.nvbay .bs-waves { z-index: 7; }
@media (prefers-reduced-motion: reduce) { .bs-ship .bs-rock, .bs-ship .bs-fl, .bs-ship .bs-plume circle, .nvbay .bs-sea { animation: none !important; } .bs-ship .bs-plume circle { opacity: .6; } }

/* ---- étape 51 ---- */
/* Rats-Garous : la distribution des rôles se fait sur le village (plus d'écran sombre qui ressemblait à une 2e annonce de la nuit) */
.lintro.deal { background: none; pointer-events: none; }
.lintro.deal .ldeal { margin: 0; padding: 6px 14px; border-radius: 999px; background: rgba(10, 8, 24, .7); font-size: 15px; color: #e9e6ff; box-shadow: inset 0 0 0 1px rgba(201, 210, 255, .3); }

/* ---- étape 52 : rejoindre ou regarder un ami ---- */
.pm-where { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 12px; background: rgba(47, 174, 134, .1); box-shadow: inset 0 0 0 1px rgba(47, 174, 134, .35); }
.pm-where .pm-wt { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #1f6b52; }
.pm-where .pm-wt svg { width: 16px; height: 16px; }
.cp-frow { display: flex; align-items: center; gap: 6px; }
.cp-frow > .cp-item { flex: 1; min-width: 0; }
.cp-frow .cp-it { display: grid; min-width: 0; text-align: left; }
.cp-frow .cp-it b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-where { font-size: 11.5px; color: #2f8a6a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-fgo { flex: none; margin-right: 4px; }

/* ---- étape 53 : la collection ---- */
/* les raretés bien visibles dans « Mon personnage » : un liseré et une étiquette de couleur ; le légendaire brille */
.pz-it.r-commun { box-shadow: inset 0 0 0 1.5px rgba(26, 22, 17, .12); }
.pz-it.r-rare { box-shadow: inset 0 0 0 2px rgba(47, 95, 174, .55); background: linear-gradient(180deg, rgba(47, 95, 174, .08), transparent 60%); }
.pz-it.r-epique { box-shadow: inset 0 0 0 2px rgba(124, 92, 214, .65); background: linear-gradient(180deg, rgba(124, 92, 214, .12), transparent 60%); }
.pz-it.r-legendaire { box-shadow: inset 0 0 0 2px rgba(214, 160, 60, .85), 0 0 14px rgba(230, 190, 98, .35); background: linear-gradient(180deg, rgba(230, 190, 98, .2), transparent 60%); position: relative; overflow: hidden; }
.pz-it.r-legendaire::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 245, 210, .55) 50%, transparent 65%); transform: translateX(-120%); animation: pzShine 3.2s ease-in-out infinite; pointer-events: none; }
@keyframes pzShine { 60%, 100% { transform: translateX(120%); } }
.pz-it.on.r-rare, .pz-it.on.r-epique, .pz-it.on.r-legendaire { outline: 3px solid #b8914a; outline-offset: 1px; }
.pz-it.r-commun .pz-rar { background: rgba(26, 22, 17, .07); color: #6b6155; }
.pz-col.r-rare { box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .14), 0 0 0 2px #fff, 0 0 0 3.5px #2f5fae; }
/* les objets des jeux qui bougent un peu : la lanterne se balance et luit, le buzzer s'enfonce de temps en temps, l'éventail respire */
.pfull.anim .pp-glow { transform-box: fill-box; transform-origin: center; animation: ppGlow 2.2s ease-in-out infinite; }
@keyframes ppGlow { 50% { opacity: .55; transform: scale(1.12); } }
.pfull.anim .pp-press { transform-box: fill-box; transform-origin: 50% 100%; animation: ppPress 3.4s ease-in-out infinite; }
@keyframes ppPress { 0%, 80%, 100% { transform: none; } 86% { transform: scaleY(.6); } }
.pfull.anim .pp-fan { transform-box: fill-box; transform-origin: 30% 100%; animation: ppFan 4s ease-in-out infinite; }
@keyframes ppFan { 50% { transform: rotate(-5deg) scale(1.03); } }
@media (prefers-reduced-motion: reduce) { .pz-it.r-legendaire::after, .pfull .pp-glow, .pfull .pp-press, .pfull .pp-fan { animation: none !important; } }

/* ---- étape 53 (2e morceau) : les nouveaux éléments qui bougent ---- */
.pfull.anim .pp-wing { animation: ppWing 2.6s ease-in-out infinite; }
@keyframes ppWing { 50% { transform: rotate(-9deg); } }
.pfull.anim .pp-jet { transform-box: view-box; animation: ppJet .18s ease-in-out infinite alternate; }
@keyframes ppJet { from { transform: scaleY(.8); } to { transform: scaleY(1.2); } }
.pfull.anim .pp-float { transform-box: view-box; animation: ppFloat 3s ease-in-out infinite; }
@keyframes ppFloat { 50% { transform: translateY(-4px) rotate(3deg); } }
.pfull .pp-bub { transform-box: fill-box; transform-origin: center; animation: ppBub 3.6s ease-in infinite; animation-delay: calc(var(--i) * -.45s); }
@keyframes ppBub { 0% { opacity: 0; transform: translateY(14px) scale(.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-40px) scale(1.1); } }
.pfull .pp-afl { transform-box: fill-box; transform-origin: 50% 100%; animation: ppAfl .5s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.13s); }
@keyframes ppAfl { from { transform: scaleY(.8) rotate(-4deg); } to { transform: scaleY(1.15) rotate(4deg); } }
.pfull.anim .pp-eyefl { transform-box: fill-box; transform-origin: 50% 100%; animation: ppAfl .4s ease-in-out infinite alternate; }
.pfull.anim .pp-spin { transform-box: view-box; animation: ppSpin 2.4s linear infinite; }
@keyframes ppSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pfull .pp-wing, .pfull .pp-jet, .pfull .pp-float, .pfull .pp-bub, .pfull .pp-afl, .pfull .pp-eyefl, .pfull .pp-spin { animation: none !important; } }

/* (étape 53) des objets qui existaient déjà bougent un peu */
.pfull.anim .pp-pom { transform-box: fill-box; transform-origin: 50% 100%; animation: ppPom 2.6s ease-in-out infinite; }
@keyframes ppPom { 50% { transform: translateY(-1.5px) rotate(6deg); } }
.pfull.anim .pp-cape { transform-box: fill-box; transform-origin: 50% 0; animation: ppCape 3.6s ease-in-out infinite; }
@keyframes ppCape { 50% { transform: skewX(2deg) scaleX(1.03); } }
.pfull.anim .pp-glint { animation: ppGlint 3.4s ease-in-out infinite; } @keyframes ppGlint { 0%, 70%, 100% { opacity: .2; } 80% { opacity: .9; } }
.pfull.anim .pp-dice { transform-box: fill-box; transform-origin: 50% 80%; animation: ppDice 4s ease-in-out infinite; } @keyframes ppDice { 0%, 80%, 100% { transform: none; } 88% { transform: rotate(-14deg) translateY(-3px); } 94% { transform: rotate(8deg); } }
@media (prefers-reduced-motion: reduce) { .pfull .pp-pom, .pfull .pp-cape, .pfull .pp-glint, .pfull .pp-dice { animation: none !important; } }

/* ---- étape 54 : l'ordre des jeux (régie) ---- */
.ago { display: grid; gap: 14px; }
.ago-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.ago-sec { padding: 14px; }
.ago-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.ago-it { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(26, 22, 17, .05); box-shadow: inset 4px 0 0 var(--acc); cursor: grab; transition: background .15s, transform .15s, box-shadow .15s; user-select: none; }
.ago-it:hover { background: rgba(26, 22, 17, .08); }
.ago-it.dragging { opacity: .45; } .ago-it.over { box-shadow: inset 4px 0 0 var(--acc), 0 0 0 2px #b8914a; transform: translateY(2px); }
.ago-h { color: rgba(26, 22, 17, .35); font-weight: 900; letter-spacing: -2px; }
.ago-n { width: 20px; text-align: center; color: var(--ink-2); }
.ago-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--acc); flex: none; }
.ago-t { flex: 1; font-weight: 700; }
.ago-mv { display: inline-flex; gap: 4px; } .ago-mv .btn { min-width: 30px; padding: 0 6px; }
/* ---- étape 54 : l'encart « En développement » ---- */
.ins .ins-art { display: block; margin: 2px -4px 2px; }
.ins .ins-art svg { width: 100%; height: auto; display: block; }
.ins-band .ins.ins-hasart { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 16px; align-items: start; max-width: 720px; }
.ins-band .ins.ins-hasart > .ins-lab { grid-column: 1 / -1; }
.ins-band .ins.ins-hasart > .ins-art { grid-row: 2 / 4; align-self: center; }
@media (max-width: 560px) { .ins-band .ins.ins-hasart { grid-template-columns: 1fr; } .ins-band .ins.ins-hasart > .ins-art { grid-row: auto; } }
.ins-art.dev .dv-arm { transform-box: view-box; transform-origin: 182px 80px; animation: dvHammer 1.1s ease-in-out infinite; }
@keyframes dvHammer { 0%, 100% { transform: rotate(-26deg); } 45% { transform: rotate(6deg); } 55% { transform: rotate(4deg); } }
.ins-art.dev .dv-sparks { opacity: 0; transform-box: fill-box; transform-origin: 0 100%; animation: dvSpark 1.1s ease-out infinite; }
@keyframes dvSpark { 0%, 40% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1.1); } 80%, 100% { opacity: 0; transform: scale(1.3); } }
.ins-art.dev .dv-rat { transform-box: view-box; transform-origin: 196px 92px; animation: dvBob 1.1s ease-in-out infinite; }
@keyframes dvBob { 45% { transform: translateY(1.5px) scaleY(.99); } }
.ins-art.dev .dv-dust circle { animation: dvDust 4s ease-in-out infinite; } .ins-art.dev .dv-dust circle:nth-child(2) { animation-delay: -1.3s; } .ins-art.dev .dv-dust circle:nth-child(3) { animation-delay: -2.6s; }
@keyframes dvDust { 0%, 100% { opacity: .2; transform: translateY(0); } 50% { opacity: .8; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .ins-art.dev * { animation: none !important; } .ins-art.dev .dv-sparks { opacity: 1; } }

/* ---- étape 55 : des objets qui bougent tout seuls ---- */
.pfull.anim .pp-ystr { transform-box: view-box; animation: ppYStr 2.8s ease-in-out infinite; }
.pfull.anim .pp-ydisc { transform-box: view-box; animation: ppYDisc 2.8s ease-in-out infinite; }
.pfull.anim .pp-yspin { transform-box: view-box; animation: ppSpin .45s linear infinite; }
@keyframes ppYStr { 0%, 100% { transform: scaleY(.21); } 20%, 30% { transform: scaleY(1); } 45% { transform: scaleY(.21); } 60%, 70% { transform: scaleY(1); } 85% { transform: scaleY(.6); } }
/* (étape 62) la ficelle (pp-ystr, longueur) et le yoyo (pp-ydisc, hauteur) bougent ensemble : mêmes moments, mêmes longueurs ;
   le tour du monde fait tourner les deux autour de la main (pp-yrot) */
@keyframes ppYDisc { 0%, 100% { transform: translateY(-30px); } 20%, 30% { transform: translateY(0); } 45% { transform: translateY(-30px); } 60%, 70% { transform: translateY(0); } 85% { transform: translateY(-15.2px); } }
.pfull.anim .pp-yrot { transform-box: view-box; animation: ppYRot 2.8s ease-in-out infinite; }
@keyframes ppYRot { 0%, 60% { transform: rotate(0deg); } 78% { transform: rotate(-360deg); } 78.1%, 100% { transform: rotate(0deg); } }
.pfull.anim .pp-top { transform-box: view-box; animation: ppTop .5s linear infinite, ppWobble 2.4s ease-in-out infinite; }
@keyframes ppTop { 0% { scale: 1 1; } 50% { scale: .7 1; } 100% { scale: 1 1; } }
@keyframes ppWobble { 0%, 100% { rotate: -4deg; } 50% { rotate: 4deg; } }
.pfull.anim .pp-jcard { transform-box: view-box; animation: ppJCard 3.4s linear infinite; } /* (étape 59 : régulier, sans pause) */
/* (étape 57) un jonglage lent d'une main à l'autre : un petit arc au-dessus des mains, la carte se penche un peu */
@keyframes ppJCard { 0% { transform: translate(calc(var(--dx) * 0.000), calc(var(--h1) * -0.000)) rotate(-0.0deg); } 6.25% { transform: translate(calc(var(--dx) * 0.125), calc(var(--h1) * -0.383)) rotate(-6.9deg); } 12.5% { transform: translate(calc(var(--dx) * 0.250), calc(var(--h1) * -0.707)) rotate(-12.7deg); } 18.75% { transform: translate(calc(var(--dx) * 0.375), calc(var(--h1) * -0.924)) rotate(-16.6deg); } 25% { transform: translate(calc(var(--dx) * 0.500), calc(var(--h1) * -1.000)) rotate(-18.0deg); } 31.25% { transform: translate(calc(var(--dx) * 0.625), calc(var(--h1) * -0.924)) rotate(-16.6deg); } 37.5% { transform: translate(calc(var(--dx) * 0.750), calc(var(--h1) * -0.707)) rotate(-12.7deg); } 43.75% { transform: translate(calc(var(--dx) * 0.875), calc(var(--h1) * -0.383)) rotate(-6.9deg); } 50% { transform: translate(calc(var(--dx) * 1.000), calc(var(--h2) * -0.000)) rotate(0.0deg); } 56.25% { transform: translate(calc(var(--dx) * 0.875), calc(var(--h2) * -0.383)) rotate(5.4deg); } 62.5% { transform: translate(calc(var(--dx) * 0.750), calc(var(--h2) * -0.707)) rotate(9.9deg); } 68.75% { transform: translate(calc(var(--dx) * 0.625), calc(var(--h2) * -0.924)) rotate(12.9deg); } 75% { transform: translate(calc(var(--dx) * 0.500), calc(var(--h2) * -1.000)) rotate(14.0deg); } 81.25% { transform: translate(calc(var(--dx) * 0.375), calc(var(--h2) * -0.924)) rotate(12.9deg); } 87.5% { transform: translate(calc(var(--dx) * 0.250), calc(var(--h2) * -0.707)) rotate(9.9deg); } 93.75% { transform: translate(calc(var(--dx) * 0.125), calc(var(--h2) * -0.383)) rotate(5.4deg); } 100% { transform: translate(0, 0) rotate(0deg); } }
.pfull.anim .pp-flip { transform-box: view-box; animation: ppFlip 2.2s cubic-bezier(.3, .6, .5, 1) infinite; }
.pfull.anim .pp-coin { transform-box: view-box; animation: ppCoin .3s linear infinite; }
@keyframes ppFlip { 0%, 15%, 100% { transform: none; } 45% { transform: translateY(-44px); } 75% { transform: none; } }
@keyframes ppCoin { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.1); } }
.pfull.anim .pp-dribble { transform-box: view-box; animation: ppDribble 1.1s cubic-bezier(.5, 0, .5, 1) infinite; }
@keyframes ppDribble { 0%, 100% { transform: translateY(0); } 48% { transform: translateY(var(--drop)) scale(1, 1); } 52% { transform: translateY(var(--drop)) scale(1.15, .85); } }
.pfull.anim .pp-coinspin { transform-box: view-box; animation: ppCoin 2.6s ease-in-out infinite; }
.pfull.anim .pp-cardtilt { transform-box: view-box; animation: ppCardTilt 3.2s ease-in-out infinite; }
@keyframes ppCardTilt { 50% { transform: rotate(-12deg) translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .pfull .pp-ystr, .pfull .pp-ydisc, .pfull .pp-yrot, .pfull .pp-yspin, .pfull .pp-top, .pfull .pp-jcard, .pfull .pp-flip, .pfull .pp-coin, .pfull .pp-dribble, .pfull .pp-coinspin, .pfull .pp-cardtilt { animation: none !important; } }
/* la fiche d'un joueur : plus de bulle verte sur le personnage (« En ligne » reste à droite) */
.pm-fig > .dot { display: none !important; }
/* le salon : le petit bouton du micro à droite du pseudo, plus sur le personnage */
.lseat .lnm { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
.lseat .lnm > b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lseat .lnm > .lmic { flex: none; }
.lseat .lnm > .lmic .pbadge { position: static; width: 22px; height: 22px; } /* (étape 57 : le même bouton rond et foncé que partout) */

/* ---- étape 56 : la bannière « Le site est en construction » (Accueil, sous la banderole) ---- */
.ins-band .ins.ins-dev { grid-column: 1 / -1; justify-self: center; width: min(1000px, 100%); max-width: none; display: grid; grid-template-columns: minmax(240px, 400px) minmax(0, 1fr); align-items: center; gap: 10px 30px; padding: 30px 32px 26px; position: relative; overflow: hidden; border-radius: 22px;
  background: radial-gradient(120% 140% at 0% 0%, #fbf3dc, #f3e6c8 60%, #ecdcb8); box-shadow: inset 0 0 0 1.5px rgba(184, 145, 74, .55), 0 26px 50px -24px rgba(0, 0, 0, .7); }
.ins-dev .dv-stripes { position: absolute; left: 0; right: 0; top: 0; height: 9px; background: repeating-linear-gradient(-45deg, #f4bf3d 0 14px, #2a2730 14px 28px); background-size: 40px 9px; animation: dvStripes 6s linear infinite; opacity: .95; }
@keyframes dvStripes { to { background-position: 40px 0; } }
.ins-dev .dv-scene { align-self: end; }
.ins-dev .dv-scene svg { width: 100%; height: auto; display: block; }
.ins-dev .dv-body { display: grid; gap: 12px; justify-items: start; min-width: 0; }
.ins-dev .dv-pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px 6px 9px; border-radius: 999px; background: #2a2730; color: #f4bf3d; font: 700 12.5px/1 var(--body); letter-spacing: .02em; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .7); }
.ins-dev .dv-pill svg { width: 16px; height: 16px; }
.ins-dev .dv-t { margin: 0; font: 800 clamp(24px, 3vw, 32px)/1.1 var(--display); color: #2a1d14; text-wrap: balance; overflow-wrap: normal; word-break: normal; hyphens: none; }
.ins-dev .dv-body p { margin: 0; max-width: 56ch; font-size: 15.5px; line-height: 1.6; color: #4a3a2a; text-wrap: pretty; overflow-wrap: normal; word-break: normal; hyphens: none; }
.ins-dev .dv-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.ins-dev .dv-acts .btn svg { width: 15px; height: 15px; }
@media (max-width: 720px) { .ins-band .ins.ins-dev { grid-template-columns: minmax(0, 1fr); padding: 24px 18px 20px; text-align: left; } .ins-dev .dv-scene { max-width: 360px; justify-self: center; width: 100%; } }
/* les petites animations du chantier */
.ins-dev .dv-arm { transform-box: view-box; transform-origin: 186px 77px; animation: dvHam2 1.2s ease-in-out infinite; }
/* (étape 58) le bras part de l'épaule : il lève le marteau puis tape au moment des étincelles (50 %) */
@keyframes dvHam2 { 0%, 100% { transform: rotate(16deg); } 30% { transform: rotate(20deg); } 48% { transform: rotate(-16deg); } 56% { transform: rotate(-13deg); } }
.ins-dev .dv-sparks { opacity: 0; transform-box: fill-box; transform-origin: 0 100%; animation: dvSpark 1.2s ease-out infinite; }
.ins-dev .dv-rat { transform-box: view-box; transform-origin: 196px 104px; animation: dvBob 1.2s ease-in-out infinite; }
.ins-dev .dv-swing { transform-box: view-box; transform-origin: 141px 30px; animation: dvSwing 4.2s ease-in-out infinite; }
@keyframes dvSwing { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
.ins-dev .dv-bulb circle { animation: dvBulb 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * -.4s); }
@keyframes dvBulb { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.ins-dev .dv-dust circle { animation: dvDust 4.5s ease-in-out infinite; } .ins-dev .dv-dust circle:nth-child(2n) { animation-delay: -2s; } .ins-dev .dv-dust circle:nth-child(3n) { animation-delay: -3.2s; }
@media (prefers-reduced-motion: reduce) { .ins-dev *, .ins-dev .dv-stripes { animation: none !important; } .ins-dev .dv-sparks { opacity: 1; } }
.ins-band .ins.ins-dev > :not(.ins-ed):not(.ins-grip) { margin-inline: 0; }
.ins-band .ins.ins-dev .dv-body p { white-space: normal; }


/* ---- étape 61 : les emotes (le rat bouge vraiment : corps, tête, bras, jambes, queue, oreilles, visage) ---- */
.rgperso [class*="pe-"] { transform-box: view-box; }
.rgperso .pe-x { opacity: 0; }
.rgperso .pe-sp, .rgperso .pe-puff, .rgperso .pe-hf { transform-box: fill-box; transform-origin: 50% 50%; }
.rgperso.emo .pe-tear { animation: peTear 1.1s ease-in infinite; } .rgperso.emo .pe-tear.t2 { animation-delay: -.55s; }
@keyframes peTear { 0% { transform: translateY(-3px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(24px); opacity: 0; } }
.rgperso.emo .pe-z { animation: peZ 1.8s ease-out infinite; } .rgperso.emo .pe-z.z2 { animation-delay: -.6s; } .rgperso.emo .pe-z.z3 { animation-delay: -1.2s; }
@keyframes peZ { 0% { transform: translate(-4px, 8px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(8px, -12px); opacity: 0; } }
.rgperso.emo .pe-n { animation: peNote 1.2s ease-in-out infinite alternate; } .rgperso.emo .pe-n.n2 { animation-delay: -.6s; }
@keyframes peNote { from { transform: translateY(2px) rotate(-8deg); } to { transform: translateY(-8px) rotate(10deg); } }
.rgperso.emo .pe-puff { animation: pePuff 1s ease-out infinite; } .rgperso.emo .pe-puff.p2 { animation-delay: -.5s; }
@keyframes pePuff { 0% { transform: scale(.5); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-12px) scale(1.25); opacity: 0; } }
.rgperso.emo .pe-sp { animation: peSpark 1s ease-in-out infinite; animation-delay: calc(var(--i) * -.22s); }
@keyframes peSpark { 0%, 100% { transform: scale(.3) rotate(0deg); opacity: .2; } 50% { transform: scale(1.15) rotate(40deg); opacity: 1; } }
.rgperso.emo-bisou .pe-hf { animation: peHeart 1.55s cubic-bezier(.25, .8, .35, 1) 1.4s both; }
@keyframes peHeart { 0% { transform: translate(-34px, 8px) scale(.35); } 60% { transform: translate(-4px, -30px) scale(2.6); } 100% { transform: translate(4px, -42px) scale(3); } }
.rgperso.emo .pe-qb { animation: peQ .8s ease-in-out infinite alternate; }
@keyframes peQ { from { transform: translateY(2px); } to { transform: translateY(-5px); } }
.rgperso.emo-coucou .pe-av-wave { animation: e-coucou-av-wave 2.8s ease-in-out both; }
@keyframes e-coucou-av-wave { 0% { opacity: 0; } 4% { opacity: 0; } 8% { opacity: 1; } 90% { opacity: 1; } 94% { opacity: 0; } 100% { opacity: 0; } }
.rgperso.emo-coucou .pe-arm-r .pe-anorm { animation: e-coucou-arm-r--pe-anorm 2.8s ease-in-out both; }
@keyframes e-coucou-arm-r--pe-anorm { 0% { opacity: 1; } 4% { opacity: 1; } 8% { opacity: 0; } 90% { opacity: 0; } 94% { opacity: 1; } 100% { opacity: 1; } }
.rgperso.emo-coucou .pe-wv { animation: e-coucou-wv 2.8s ease-in-out both; }
@keyframes e-coucou-wv { 0% { transform: none; } 12% { transform: rotate(-14deg); } 18% { transform: rotate(16deg); } 26.25% { transform: rotate(-16deg); } 34.5% { transform: rotate(16deg); } 42.75% { transform: rotate(-16deg); } 51% { transform: rotate(16deg); } 59.25% { transform: rotate(-16deg); } 67.5% { transform: rotate(16deg); } 75.75% { transform: rotate(-16deg); } 84% { transform: rotate(16deg); } 90% { transform: none; } 100% { transform: none; } }
.rgperso.emo-coucou .pe-head { animation: e-coucou-head 2.8s ease-in-out both; }
@keyframes e-coucou-head { 0% { transform: none; } 18% { transform: rotate(-8deg); } 80% { transform: rotate(-8deg); } 100% { transform: none; } }
.rgperso.emo-coucou .pe-ears { animation: e-coucou-ears 2.8s ease-in-out both; }
@keyframes e-coucou-ears { 0% { transform: none; } 15% { transform: rotate(-3deg); } 26.6667% { transform: rotate(3deg); } 38.3333% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } 61.6667% { transform: rotate(-3deg); } 73.3333% { transform: rotate(3deg); } 85% { transform: rotate(-3deg); } 100% { transform: none; } }
.rgperso.emo-coucou .pe-tail { animation: e-coucou-tail 2.8s ease-in-out both; }
@keyframes e-coucou-tail { 0% { transform: none; } 10% { transform: rotate(-10deg); } 20% { transform: rotate(10deg); } 30% { transform: rotate(-10deg); } 40% { transform: rotate(10deg); } 50% { transform: rotate(-10deg); } 60% { transform: rotate(10deg); } 70% { transform: rotate(-10deg); } 80% { transform: rotate(10deg); } 90% { transform: rotate(-10deg); } 100% { transform: none; } }
.rgperso.emo-coucou .pe-happy { animation: e-coucou-happy 2.8s ease-in-out both; }
@keyframes e-coucou-happy { 0% { opacity: 0; } 16% { opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 84% { opacity: 0; } 100% { opacity: 0; } }
.rgperso.emo-coucou .pe-beyes { animation: e-coucou-beyes 2.8s ease-in-out both; }
@keyframes e-coucou-beyes { 0% { opacity: 1; } 16% { opacity: 1; } 20% { opacity: 0; } 80% { opacity: 0; } 84% { opacity: 1; } 100% { opacity: 1; } }
.rgperso.emo-danse .pe-body { animation: e-danse-body 4.0s ease-in-out both; }
@keyframes e-danse-body { 0% { transform: none; } 6% { transform: translateY(0) rotate(-6deg); } 12.1429% { transform: translateY(-5px) rotate(6deg); } 18.2857% { transform: translateY(0) rotate(-6deg); } 24.4286% { transform: translateY(-5px) rotate(6deg); } 30.5714% { transform: translateY(0) rotate(-6deg); } 36.7143% { transform: translateY(-5px) rotate(6deg); } 42.8571% { transform: translateY(0) rotate(-6deg); } 49% { transform: translateY(-5px) rotate(6deg); } 55.1429% { transform: translateY(0) rotate(-6deg); } 61.2857% { transform: translateY(-5px) rotate(6deg); } 67.4286% { transform: translateY(0) rotate(-6deg); } 73.5714% { transform: translateY(-5px) rotate(6deg); } 79.7143% { transform: translateY(0) rotate(-6deg); } 85.8571% { transform: translateY(-5px) rotate(6deg); } 92% { transform: translateY(0) rotate(-6deg); } 100% { transform: none; } }
.rgperso.emo-danse .pe-arm-l { animation: e-danse-arm-l 4.0s ease-in-out both; }
@keyframes e-danse-arm-l { 0% { transform: rotate(0deg); } 6% { transform: rotate(112deg); } 12.1429% { transform: rotate(15deg); } 18.2857% { transform: rotate(112deg); } 24.4286% { transform: rotate(15deg); } 30.5714% { transform: rotate(112deg); } 36.7143% { transform: rotate(15deg); } 42.8571% { transform: rotate(112deg); } 49% { transform: rotate(15deg); } 55.1429% { transform: rotate(112deg); } 61.2857% { transform: rotate(15deg); } 67.4286% { transform: rotate(112deg); } 73.5714% { transform: rotate(15deg); } 79.7143% { transform: rotate(112deg); } 85.8571% { transform: rotate(15deg); } 92% { transform: rotate(112deg); } 100% { transform: rotate(0deg); } }
.rgperso.emo-danse .pe-arm-r { animation: e-danse-arm-r 4.0s ease-in-out both; }
@keyframes e-danse-arm-r { 0% { transform: rotate(0deg); } 6% { transform: rotate(-15deg); } 12.1429% { transform: rotate(-112deg); } 18.2857% { transform: rotate(-15deg); } 24.4286% { transform: rotate(-112deg); } 30.5714% { transform: rotate(-15deg); } 36.7143% { transform: rotate(-112deg); } 42.8571% { transform: rotate(-15deg); } 49% { transform: rotate(-112deg); } 55.1429% { transform: rotate(-15deg); } 61.2857% { transform: rotate(-112deg); } 67.4286% { transform: rotate(-15deg); } 73.5714% { transform: rotate(-112deg); } 79.7143% { transform: rotate(-15deg); } 85.8571% { transform: rotate(-112deg); } 92% { transform: rotate(-15deg); } 100% { transform: rotate(0deg); } }
.rgperso.emo-danse .pe-leg-l { animation: e-danse-leg-l 4.0s ease-in-out both; }
@keyframes e-danse-leg-l { 0% { transform: none; } 6% { transform: translateY(-6px) rotate(8deg); } 12.1429% { transform: none; } 18.2857% { transform: translateY(-6px) rotate(8deg); } 24.4286% { transform: none; } 30.5714% { transform: translateY(-6px) rotate(8deg); } 36.7143% { transform: none; } 42.8571% { transform: translateY(-6px) rotate(8deg); } 49% { transform: none; } 55.1429% { transform: translateY(-6px) rotate(8deg); } 61.2857% { transform: none; } 67.4286% { transform: translateY(-6px) rotate(8deg); } 73.5714% { transform: none; } 79.7143% { transform: translateY(-6px) rotate(8deg); } 85.8571% { transform: none; } 92% { transform: translateY(-6px) rotate(8deg); } 100% { transform: none; } }
.rgperso.emo-danse .pe-leg-r { animation: e-danse-leg-r 4.0s ease-in-out both; }
@keyframes e-danse-leg-r { 0% { transform: none; } 6% { transform: none; } 12.1429% { transform: translateY(-6px) rotate(-8deg); } 18.2857% { transform: none; } 24.4286% { transform: translateY(-6px) rotate(-8deg); } 30.5714% { transform: none; } 36.7143% { transform: translateY(-6px) rotate(-8deg); } 42.8571% { transform: none; } 49% { transform: translateY(-6px) rotate(-8deg); } 55.1429% { transform: none; } 61.2857% { transform: translateY(-6px) rotate(-8deg); } 67.4286% { transform: none; } 73.5714% { transform: translateY(-6px) rotate(-8deg); } 79.7143% { transform: none; } 85.8571% { transform: translateY(-6px) rotate(-8deg); } 92% { transform: none; } 100% { transform: none; } }
.rgperso.emo-danse .pe-head { animation: e-danse-head 4.0s ease-in-out both; }
@keyframes e-danse-head { 0% { transform: none; } 6% { transform: rotate(6deg); } 12.1429% { transform: rotate(-6deg); } 18.2857% { transform: rotate(6deg); } 24.4286% { transform: rotate(-6deg); } 30.5714% { transform: rotate(6deg); } 36.7143% { transform: rotate(-6deg); } 42.8571% { transform: rotate(6deg); } 49% { transform: rotate(-6deg); } 55.1429% { transform: rotate(6deg); } 61.2857% { transform: rotate(-6deg); } 67.4286% { transform: rotate(6deg); } 73.5714% { transform: rotate(-6deg); } 79.7143% { transform: rotate(6deg); } 85.8571% { transform: rotate(-6deg); } 92% { transform: rotate(6deg); } 100% { transform: none; } }
.rgperso.emo-danse .pe-tail { animation: e-danse-tail 4.0s ease-in-out both; }
@keyframes e-danse-tail { 0% { transform: none; } 6% { transform: rotate(-14deg); } 12.1429% { transform: rotate(14deg); } 18.2857% { transform: rotate(-14deg); } 24.4286% { transform: rotate(14deg); } 30.5714% { transform: rotate(-14deg); } 36.7143% { transform: rotate(14deg); } 42.8571% { transform: rotate(-14deg); } 49% { transform: rotate(14deg); } 55.1429% { transform: rotate(-14deg); } 61.2857% { transform: rotate(14deg); } 67.4286% { transform: rotate(-14deg); } 73.5714% { transform: rotate(14deg); } 79.7143% { transform: rotate(-14deg); } 85.8571% { transform: rotate(14deg); } 92% { transform: rotate(-14deg); } 100% { transform: none; } }
.rgperso.emo-danse .pe-notes { animation: e-danse-notes 4.0s ease-in-out both; }
@keyframes e-danse-notes { 0% { opacity: 0; } 2% { opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } 98% { opacity: 0; } 100% { opacity: 0; } }
.rgperso.emo-danse .pe-happy { animation: e-danse-happy 4.0s ease-in-out both; }
@keyframes e-danse-happy { 0% { opacity: 0; } 6% { opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 94% { opacity: 0; } 100% { opacity: 0; } }
.rgperso.emo-danse .pe-beyes { animation: e-danse-beyes 4.0s ease-in-out both; }
@keyframes e-danse-beyes { 0% { opacity: 1; } 6% { opacity: 1; } 10% { opacity: 0; } 90% { opacity: 0; } 94% { opacity: 1; } 100% { opacity: 1; } }
.rgperso.emo-robot .pe-arm-l { animation: e-robot-arm-l 4.0s linear both; }
@keyframes e-robot-arm-l { 0% { transform: rotate(0deg); } 6% { transform: rotate(90deg); } 22% { transform: rotate(90deg); } 28% { transform: rotate(135deg); } 44% { transform: rotate(135deg); } 50% { transform: rotate(90deg); } 66% { transform: rotate(90deg); } 72% { transform: rotate(0deg); } 100% { transform: rotate(0deg); } }
.rgperso.emo-robot .pe-arm-r { animation: e-robot-arm-r 4.0s linear both; }
@keyframes e-robot-arm-r { 0% { transform: rotate(0deg); } 22% { transform: rotate(0deg); } 28% { transform: rotate(-90deg); } 44% { transform: rotate(-90deg); } 50% { transform: rotate(-135deg); } 66% { transform: rotate(-135deg); } 72% { transform: rotate(-90deg); } 88% { transform: rotate(-90deg); } 94% { transform: rotate(0deg); } 100% { transform: rotate(0deg); } }
.rgperso.emo-robot .pe-head { animation: e-robot-head 4.0s linear both; }
@keyframes e-robot-head { 0% { transform: none; } 8% { transform: rotate(12deg); } 26% { transform: rotate(12deg); } 32% { transform: rotate(-12deg); } 56% { transform: rotate(-12deg); } 62% { transform: none; } 100% { transform: none; } }
.rgperso.emo-robot .pe-body { animation: e-robot-body 4.0s linear both; }
@keyframes e-robot-body { 0% { transform: none; } 8% { transform: translateX(-3px); } 26% { transform: translateX(-3px); } 32% { transform: translateX(3px); } 56% { transform: translateX(3px); } 62% { transform: translateX(-3px); } 86% { transform: translateX(-3px); } 92% { transform: none; } 100% { transform: none; } }
.rgperso.emo-robot .pe-leg-l { animation: e-robot-leg-l 4.0s linear both; }
@keyframes e-robot-leg-l { 0% { transform: none; } 36% { transform: none; } 40% { transform: translateY(-5px); } 48% { transform: translateY(-5px); } 52% { transform: none; } 100% { transform: none; } }
.rgperso.emo-robot .pe-leg-r { animation: e-robot-leg-r 4.0s linear both; }
@keyframes e-robot-leg-r { 0% { transform: none; } 66% { transform: none; } 70% { transform: translateY(-5px); } 78% { transform: translateY(-5px); } 82% { transform: none; } 100% { transform: none; } }
.rgperso.emo-twist .pe-body { animation: e-twist-body 4.0s ease-in-out both; }
@keyframes e-twist-body { 0% { transform: none; } 6% { transform: rotate(-10deg) translateX(-4px); } 13.1667% { transform: rotate(10deg) translateX(4px); } 20.3333% { transform: rotate(-10deg) translateX(-4px); } 27.5% { transform: rotate(10deg) translateX(4px); } 34.6667% { transform: rotate(-10deg) translateX(-4px); } 41.8333% { transform: rotate(10deg) translateX(4px); } 49% { transform: rotate(-10deg) translateX(-4px); } 56.1667% { transform: rotate(10deg) translateX(4px); } 63.3333% { transform: rotate(-10deg) translateX(-4px); } 70.5% { transform: rotate(10deg) translateX(4px); } 77.6667% { transform: rotate(-10deg) translateX(-4px); } 84.8333% { transform: rotate(10deg) translateX(4px); } 92% { transform: rotate(-10deg) translateX(-4px); } 100% { transform: none; } }
.rgperso.emo-twist .pe-leg-l { animation: e-twist-leg-l 4.0s ease-in-out both; }
@keyframes e-twist-leg-l { 0% { transform: none; } 6% { transform: rotate(12deg); } 13.1667% { transform: rotate(-12deg); } 20.3333% { transform: rotate(12deg); } 27.5% { transform: rotate(-12deg); } 34.6667% { transform: rotate(12deg); } 41.8333% { transform: rotate(-12deg); } 49% { transform: rotate(12deg); } 56.1667% { transform: rotate(-12deg); } 63.3333% { transform: rotate(12deg); } 70.5% { transform: rotate(-12deg); } 77.6667% { transform: rotate(12deg); } 84.8333% { transform: rotate(-12deg); } 92% { transform: rotate(12deg); } 100% { transform: none; } }
.rgperso.emo-twist .pe-leg-r { animation: e-twist-leg-r 4.0s ease-in-out both; }
@keyframes e-twist-leg-r { 0% { transform: none; } 6% { transform: rotate(12deg); } 13.1667% { transform: rotate(-12deg); } 20.3333% { transform: rotate(12deg); } 27.5% { transform: rotate(-12deg); } 34.6667% { transform: rotate(12deg); } 41.8333% { transform: rotate(-12deg); } 49% { transform: rotate(12deg); } 56.1667% { transform: rotate(-12deg); } 63.3333% { transform: rotate(12deg); } 70.5% { transform: rotate(-12deg); } 77.6667% { transform: rotate(12deg); } 84.8333% { transform: rotate(-12deg); } 92% { transform: rotate(12deg); } 100% { transform: none; } }
.rgperso.emo-twist .pe-arm-l { animation: e-twist-arm-l 4.0s ease-in-out both; }
@keyframes e-twist-arm-l { 0% { transform: rotate(0deg); } 6% { transform: rotate(-40deg); } 13.1667% { transform: rotate(30deg); } 20.3333% { transform: rotate(-40deg); } 27.5% { transform: rotate(30deg); } 34.6667% { transform: rotate(-40deg); } 41.8333% { transform: rotate(30deg); } 49% { transform: rotate(-40deg); } 56.1667% { transform: rotate(30deg); } 63.3333% { transform: rotate(-40deg); } 70.5% { transform: rotate(30deg); } 77.6667% { transform: rotate(-40deg); } 84.8333% { transform: rotate(30deg); } 92% { transform: rotate(-40deg); } 100% { transform: rotate(0deg); } }
.rgperso.emo-twist .pe-arm-r { animation: e-twist-arm-r 4.0s ease-in-out both; }
@keyframes e-twist-arm-r { 0% { transform: rotate(0deg); } 6% { transform: rotate(-30deg); } 13.1667% { transform: rotate(40deg); } 20.3333% { transform: rotate(-30deg); } 27.5% { transform: rotate(40deg); } 34.6667% { transform: rotate(-30deg); } 41.8333% { transform: rotate(40deg); } 49% { transform: rotate(-30deg); } 56.1667% { transform: rotate(40deg); } 63.3333% { transform: rotate(-30deg); } 70.5% { transform: rotate(40deg); } 77.6667% { transform: rotate(-30deg); } 84.8333% { transform: rotate(40deg); } 92% { transform: rotate(-30deg); } 100% { transform: rotate(0deg); } }
.rgperso.emo-twist .pe-head { animation: e-twist-head 4.0s ease-in-out both; }
@keyframes e-twist-head { 0% { transform: none; } 6% { transform: rotate(-6deg); } 13.1667% { transform: rotate(6deg); } 20.3333% { transform: rotate(-6deg); } 27.5% { transform: rotate(6deg); } 34.6667% { transform: rotate(-6deg); } 41.8333% { transform: rotate(6deg); } 49% { transform: rotate(-6deg); } 56.1667% { transform: rotate(6deg); } 63.3333% { transform: rotate(-6deg); } 70.5% { transform: rotate(6deg); } 77.6667% { transform: rotate(-6deg); } 84.8333% { transform: rotate(6deg); } 92% { transform: rotate(-6deg); } 100% { transform: none; } }
.rgperso.emo-twist .pe-notes { animation: e-twist-notes 4.0s ease-in-out both; }
@keyframes e-twist-notes { 0% { opacity: 0; } 2% { opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } 98% { opacity: 0; } 100% { opacity: 0; } }
.rgperso.emo-joie .pe-body { animation: e-joie-body 2.6s ease-in-out both; }
@keyframes e-joie-body { 0% { transform: none; } 15% { transform: translateY(2px) scaleY(.95); } 28% { transform: translateY(-28px); } 40% { transform: translateY(0) scaleY(.96); } 55% { transform: translateY(-28px); } 68% { transform: translateY(0) scaleY(.96); } 78% { transform: none; } 100% { transform: none; } }
.rgperso.emo-joie .pe-arm-l { animation: e-joie-arm-l 2.6s ease-in-out both; }
@keyframes e-joie-arm-l { 0% { transform: rotate(0deg); } 20% { transform: rotate(122deg); } 30% { transform: rotate(104deg); } 45% { transform: rotate(122deg); } 55% { transform: rotate(104deg); } 70% { transform: rotate(122deg); } 85% { transform: rotate(0deg); } 100% { transform: rotate(0deg); } }
.rgperso.emo-joie .pe-arm-r { animation: e-joie-arm-r 2.6s ease-in-out both; }
@keyframes e-joie-arm-r { 0% { transform: rotate(0deg); } 20% { transform: rotate(-122deg); } 30% { transform: rotate(-104deg); } 45% { transform: rotate(-122deg); } 55% { transform: rotate(-104deg); } 70% { transform: rotate(-122deg); } 85% { transform: rotate(0deg); } 100% { transform: rotate(0deg); } }
.rgperso.emo-joie .pe-leg-l { animation: e-joie-leg-l 2.6s ease-in-out both; }
@keyframes e-joie-leg-l { 0% { transform: none; } 20% { transform: none; } 28% { transform: rotate(16deg); } 40% { transform: none; } 55% { transform: rotate(16deg); } 68% { transform: none; } 100% { transform: none; } }
.rgperso.emo-joie .pe-leg-r { animation: e-joie-leg-r 2.6s ease-in-out both; }
@keyframes e-joie-leg-r { 0% { transform: none; } 20% { transform: none; } 28% { transform: rotate(-16deg); } 40% { transform: none; } 55% { transform: rotate(-16deg); } 68% { transform: none; } 100% { transform: none; } }
.rgperso.emo-joie .pe-tail { animation: e-joie-tail 2.6s ease-in-out both; }
@keyframes e-joie-tail { 0% { transform: none; } 10% { transform: rotate(-16deg); } 19.5% { transform: rotate(16deg); } 29% { transform: rotate(-16deg); } 38.5% { transform: rotate(16deg); } 48% { transform: rotate(-16deg); } 57.5% { transform: rotate(16deg); } 67% { transform: rotate(-16deg); } 76.5% { transform: rotate(16deg); } 86% { transform: rotate(-16deg); } 100% { transform: none; } }
.rgperso.emo-joie .pe-happy { animation: e-joie-happy 2.6s ease-in-out both; }
@keyframes e-joie-happy { 0% { opacity: 0; } 6% { opacity: 0; } 10% { opacity: 1; } 88% { opacity: 1; } 92% { opacity: 0; } 100% { opacity: 0; } }
.rgperso.emo-joie .pe-mouth { animation: e-joie-mouth 2.6s ease-in-out both; }
@keyframes e-joie-mouth { 0% { opacity: 0; } 6% { opacity: 0; } 10% { opacity: 1; } 88% { opacity: 1; } 92% { opacity: 0; } 100% { opacity: 0; } }
.rgperso.emo-joie .pe-bmouth { animation: e-joie-bmouth 2.6s ease-in-out both; }
@keyframes e-joie-bmouth { 0% { opacity: 1; } 6% { opacity: 1; } 10% { opacity: 0; } 88% { opacity: 0; } 92% { opacity: 1; } 100% { opacity: 1; } }
.rgperso.emo-joie .pe-beyes { animation: e-joie-beyes 2.6s ease-in-out both; }
@keyframes e-joie-beyes { 0% { opacity: 1; } 6% { opacity: 1; } 10% { opacity: 0; } 88% { opacity: 0; } 92% { opacity: 1; } 100% { opacity: 1; } }
.rgperso.emo-bravo .pe-arm-l { animation: e-bravo-arm-l 3.0s ease-in-out both; }
@keyframes e-bravo-arm-l { 0% { transform: rotate(0deg); } 12% { transform: rotate(-40deg); } 18% { transform: rotate(-66deg); } 23.5% { transform: rotate(-40deg); } 29% { transform: rotate(-66deg); } 34.5% { transform: rotate(-40deg); } 40% { transform: rotate(-66deg); } 45.5% { transform: rotate(-40deg); } 51% { transform: rotate(-66deg); } 56.5% { transform: rotate(-40deg); } 62% { transform: rotate(-66deg); } 67.5% { transform: rotate(-40deg); } 73% { transform: rotate(-66deg); } 78.5% { transform: rotate(-40deg); } 84% { transform: rotate(-66deg); } 92% { transform: rotate(0deg); } 100% { transform: rotate(0deg); } }
.rgperso.emo-bravo .pe-arm-r { animation: e-bravo-arm-r 3.0s ease-in-out both; }
@keyframes e-bravo-arm-r { 0% { transform: rotate(0deg); } 12% { transform: rotate(40deg); } 18% { transform: rotate(66deg); } 23.5% { transform: rotate(40deg); } 29% { transform: rotate(66deg); } 34.5% { transform: rotate(40deg); } 40% { transform: rotate(66deg); } 45.5% { transform: rotate(40deg); } 51% { transform: rotate(66deg); } 56.5% { transform: rotate(40deg); } 62% { transform: rotate(66deg); } 67.5% { transform: rotate(40deg); } 73% { transform: rotate(66deg); } 78.5% { transform: rotate(40deg); } 84% { transform: rotate(66deg); } 92% { transform: rotate(0deg); } 100% { transform: rotate(0deg); } }
.rgperso.emo-bravo .pe-body { animation: e-bravo-body 3.0s ease-in-out both; }
@keyframes e-bravo-body { 0% { transform: none; } 18% { transform: translateY(-2px); } 23.5% { transform: none; } 29% { transform: translateY(-2px); } 34.5% { transform: none; } 40% { transform: translateY(-2px); } 45.5% { transform: none; } 51% { transform: translateY(-2px); } 56.5% { transform: none; } 62% { transform: translateY(-2px); } 67.5% { transform: none; } 73% { transform: translateY(-2px); } 78.5% { transform: none; } 84% { transform: translateY(-2px); } 100% { transform: none; } }
.rgperso.emo-bravo .pe-head { animation: e-bravo-head 3.0s ease-in-out both; }
@keyframes e-bravo-head { 0% { transform: none; } 14% { transform: rotate(-5deg); } 86% { transform: rotate(-5deg); } 100% { transform: none; } }
.rgperso.emo-bravo .pe-happy { animation: e-bravo-happy 3.0s ease-in-out both; }
@keyframes e-bravo-happy { 0% { opacity: 0; } 4% { opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 96% { opacity: 0; } 100% { opacity: 0; } }
.rgperso.emo-bravo .pe-mouth { animation: e-bravo-mouth 3.0s ease-in-out both; }
@keyframes e-bravo-mouth { 0% { opacity: 0; } 6% { opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 94% { opacity: 0; } 100% { opacity: 0; } }
.rgperso.emo-bravo .pe-bmouth { animation: e-bravo-bmouth 3.0s ease-in-out both; }
@keyframes e-bravo-bmouth { 0% { opacity: 1; } 6% { opacity: 1; } 10% { opacity: 0; } 90% { opacity: 0; } 94% { opacity: 1; } 100% { opacity: 1; } }
.rgperso.emo-bravo .pe-beyes { animation: e-bravo-beyes 3.0s ease-in-out both; }
@keyframes e-bravo-beyes { 0% { opacity: 1; } 4% { opacity: 1; } 8% { opacity: 0; } 92% { opacity: 0; } 96% { opacity: 1; } 100% { opacity: 1; } }
.rgperso.emo-rire .pe-body { animation: e-rire-body 3.2s ease-in-out both; }
@keyframes e-rire-body { 0% { transform: none; } 8% { transform: rotate(-2deg) translateX(-1.5px); } 11.7273% { transform: rotate(2deg) translateX(1.5px); } 15.4545% { transform: rotate(-2deg) translateX(-1.5px); } 19.1818% { transform: rotate(2deg) translateX(1.5px); } 22.9091% { transform: rotate(-2deg) translateX(-1.5px); } 26.6364% { transform: rotate(2deg) translateX(1.5px); } 30.3636% { transform: rotate(-2deg) translateX(-1.5px); } 34.0909% { transform: rotate(2deg) translateX(1.5px); } 37.8182% { transform: rotate(-2deg) translateX(-1.5px); } 41.5455% { transform: rotate(2deg) translateX(1.5px); } 45.2727% { transform: rotate(-2deg) translateX(-1.5px); } 49% { transform: rotate(2deg) translateX(1.5px); } 52.7273% { transform: rotate(-2deg) translateX(-1.5px); } 56.4545% { transform: rotate(2deg) translateX(1.5px); } 60.1818% { transform: rotate(-2deg) translateX(-1.5px); } 63.9091% { transform: rotate(2deg) translateX(1.5px); } 67.6364% { transform: rotate(-2deg) translateX(-1.5px); } 71.3636% { transform: rotate(2deg) translateX(1.5px); } 75.0909% { transform: rotate(-2deg) translateX(-1.5px); } 78.8182% { transform: rotate(2deg) translateX(1.5px); } 82.5455% { transform: rotate(-2deg) translateX(-1.5px); } 86.2727% { transform: rotate(2deg) translateX(1.5px); } 90% { transform: rotate(-2deg) translateX(-1.5px); } 100% { transform: none; } }
.rgperso.emo-rire .pe-head { animation: e-rire-head 3.2s ease-in-out both; }
@keyframes e-rire-head { 0% { transform: none; } 12% { transform: rotate(-8deg) translateY(-2px); } 14% { transform: rotate(-8deg) translateY(-2px); } 21.4% { transform: rotate(-4deg) translateY(1px); } 28.8% { transform: rotate(-8deg) translateY(-2px); } 36.2% { transform: rotate(-4deg) translateY(1px); } 43.6% { transform: rotate(-8deg) translateY(-2px); } 51% { transform: rotate(-4deg) translateY(1px); } 58.4% { transform: rotate(-8deg) translateY(-2px); } 65.8% { transform: rotate(-4deg) translateY(1px); } 73.2% { transform: rotate(-8deg) translateY(-2px); } 80.6% { transform: rotate(-4deg) translateY(1px); } 88% { transform: rotate(-8deg) translateY(-2px); } 100% { transform: none; } }
.rgperso.emo-rire .pe-arm-l { animation: e-rire-arm-l 3.2s ease-in-out both; }
@keyframes e-rire-arm-l { 0% { transform: rotate(0deg); } 14% { transform: rotate(-38deg); } 86% { transform: rotate(-38deg); } 100% { transform: rotate(0deg); } }
.rgperso.emo-rire .pe-arm-r { animation: e-rire-arm-r 3.2s ease-in-out both; }
@keyframes e-rire-arm-r { 0% { transform: rotate(0deg); } 14% { transform: rotate(38deg); } 86% { transform: rotate(38deg); } 100% { transform: rotate(0deg); } }
.rgperso.emo-rire .pe-tail { animation: e-rire-tail 3.2s ease-in-out both; }
@keyframes e-rire-tail { 0% { transform: none; } 8% { transform: rotate(-12deg); } 14.8333% { transform: rotate(12deg); } 21.6667% { transform: rotate(-12deg); } 28.5% { transform: rotate(12deg); } 35.3333% { transform: rotate(-12deg); } 42.1667% { transform: rotate(12deg); } 49% { transform: rotate(-12deg); } 55.8333% { transform: rotate(12deg); } 62.6667% { transform: rotate(-12deg); } 69.5% { transform: rotate(12deg); } 76.3333% { transform: rotate(-12deg); } 83.1667% { transform: rotate(12deg); } 90% { transform: rotate(-12deg); } 100% { transform: none; } }
.rgperso.emo-rire .pe-happy { animation: e-rire-happy 3.2s ease-in-out both; }
@keyframes e-rire-happy { 0% { opacity: 0; } 2% { opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } 98% { opacity: 0; } 100% { opacity: 0; } }
.rgperso.emo-rire .pe-mouth { animation: e-rire-mouth 3.2s ease-in-out both; }
@keyframes e-rire-mouth { 0% { opacity: 0; } 2% { opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } 98% { opacity: 0; } 100% { opacity: 0; } }
.rgperso.emo-rire .pe-bmouth { animation: e-rire-bmouth 3.2s ease-in-out both; }
@keyframes e-rire-bmouth { 0% { opacity: 1; } 2% { opacity: 1; } 6% { opacity: 0; } 94% { opacity: 0; } 98% { opacity: 1; } 100% { opacity: 1; } }
.rgperso.emo-rire .pe-beyes { animation: e-rire-beyes 3.2s ease-in-out both; }
@keyframes e-rire-beyes { 0% { opacity: 1; } 2% { opacity: 1; } 6% { opacity: 0; } 94% { opacity: 0; } 98% { opacity: 1; } 100% { opacity: 1; } }
.rgperso.emo-pleure .pe-head { animation: e-pleure-head 4.0s ease-in-out both; }
@keyframes e-pleure-head { 0% { transform: none; } 15% { transform: translateY(5px) rotate(4deg); } 18% { transform: translateY(5px) rotate(4deg); } 26% { transform: translateY(7px) rotate(2deg); } 34% { transform: translateY(5px) rotate(4deg); } 42% { transform: translateY(7px) rotate(2deg); } 50% { transform: translateY(5px) rotate(4deg); } 58% { transform: translateY(7px) rotate(2deg); } 66% { transform: translateY(5px) rotate(4deg); } 74% { transform: translateY(7px) rotate(2deg); } 82% { transform: translateY(5px) rotate(4deg); } 85% { transform: translateY(5px) rotate(4deg); } 100% { transform: none; } }
.rgperso.emo-pleure .pe-arm-l { animation: e-pleure-arm-l 4.0s ease-in-out both; }
@keyframes e-pleure-arm-l { 0% { transform: rotate(0deg); } 18% { transform: rotate(162deg); } 82% { transform: rotate(162deg); } 100% { transform: rotate(0deg); } }
.rgperso.emo-pleure .pe-arm-r { animation: e-pleure-arm-r 4.0s ease-in-out both; }
@keyframes e-pleure-arm-r { 0% { transform: rotate(0deg); } 18% { transform: rotate(-162deg); } 82% { transform: rotate(-162deg); } 100% { transform: rotate(0deg); } }
.rgperso.emo-pleure .pe-body { animation: e-pleure-body 4.0s ease-in-out both; }
@keyframes e-pleure-body { 0% { transform: none; } 15% { transform: translateY(1px); } 20% { transform: translateY(-1px); } 25% { transform: translateY(1px); } 30% { transform: translateY(-1px); } 35% { transform: translateY(1px); } 40% { transform: translateY(-1px); } 45% { transform: translateY(1px); } 50% { transform: translateY(-1px); } 55% { transform: translateY(1px); } 60% { transform: translateY(-1px); } 65% { transform: translateY(1px); } 70% { transform: translateY(-1px); } 75% { transform: translateY(1px); } 80% { transform: translateY(-1px); } 85% { transform: translateY(1px); } 100% { transform: none; } }
.rgperso.emo-pleure .pe-ears { animation: e-pleure-ears 4.0s ease-in-out both; }
@keyframes e-pleure-ears { 0% { transform: none; } 15% { transform: translateY(5px) scaleY(.9); } 85% { transform: translateY(5px) scaleY(.9); } 100% { transform: none; } }
.rgperso.emo-pleure .pe-tail { animation: e-pleure-tail 4.0s ease-in-out both; }
@keyframes e-pleure-tail { 0% { transform: none; } 15% { transform: rotate(28deg); } 85% { transform: rotate(28deg); } 100% { transform: none; } }
.rgperso.emo-pleure .pe-lids { animation: e-pleure-lids 4.0s ease-in-out both; }
@keyframes e-pleure-lids { 0% { opacity: 0; } 8% { opacity: 0; } 12% { opacity: 1; } 90% { opacity: 1; } 94% { opacity: 0; } 100% { opacity: 0; } }
.rgperso.emo-pleure .pe-tears { animation: e-pleure-tears 4.0s ease-in-out both; }
@keyframes e-pleure-tears { 0% { opacity: 0; } 11% { opacity: 0; } 15% { opacity: 1; } 88% { opacity: 1; } 92% { opacity: 0; } 100% { opacity: 0; } }
.rgperso.emo-pleure .pe-beyes { animation: e-pleure-beyes 4.0s ease-in-out both; }
@keyframes e-pleure-beyes { 0% { opacity: 1; } 8% { opacity: 1; } 12% { opacity: 0; } 90% { opacity: 0; } 94% { opacity: 1; } 100% { opacity: 1; } }
.rgperso.emo-colere .pe-body { animation: e-colere-body 3.4s ease-in-out both; }
@keyframes e-colere-body { 0% { transform: none; } 6% { transform: translateX(-2px); } 10.7778% { transform: translateX(2px); } 15.5556% { transform: translateX(-2px); } 20.3333% { transform: translateX(2px); } 25.1111% { transform: translateX(-2px); } 29.8889% { transform: translateX(2px); } 34.6667% { transform: translateX(-2px); } 39.4444% { transform: translateX(2px); } 44.2222% { transform: translateX(-2px); } 49% { transform: translateX(2px); } 53.7778% { transform: translateX(-2px); } 58.5556% { transform: translateX(2px); } 63.3333% { transform: translateX(-2px); } 68.1111% { transform: translateX(2px); } 72.8889% { transform: translateX(-2px); } 77.6667% { transform: translateX(2px); } 82.4444% { transform: translateX(-2px); } 87.2222% { transform: translateX(2px); } 92% { transform: translateX(-2px); } 100% { transform: none; } }
.rgperso.emo-colere .pe-arm-l { animation: e-colere-arm-l 3.4s ease-in-out both; }
@keyframes e-colere-arm-l { 0% { transform: rotate(0deg); } 8% { transform: rotate(-12deg); } 14.6667% { transform: rotate(6deg); } 21.3333% { transform: rotate(-12deg); } 28% { transform: rotate(6deg); } 34.6667% { transform: rotate(-12deg); } 41.3333% { transform: rotate(6deg); } 48% { transform: rotate(-12deg); } 54.6667% { transform: rotate(6deg); } 61.3333% { transform: rotate(-12deg); } 68% { transform: rotate(6deg); } 74.6667% { transform: rotate(-12deg); } 81.3333% { transform: rotate(6deg); } 88% { transform: rotate(-12deg); } 100% { transform: rotate(0deg); } }
.rgperso.emo-colere .pe-arm-r { animation: e-colere-arm-r 3.4s ease-in-out both; }
@keyframes e-colere-arm-r { 0% { transform: rotate(0deg); } 8% { transform: rotate(12deg); } 14.6667% { transform: rotate(-6deg); } 21.3333% { transform: rotate(12deg); } 28% { transform: rotate(-6deg); } 34.6667% { transform: rotate(12deg); } 41.3333% { transform: rotate(-6deg); } 48% { transform: rotate(12deg); } 54.6667% { transform: rotate(-6deg); } 61.3333% { transform: rotate(12deg); } 68% { transform: rotate(-6deg); } 74.6667% { transform: rotate(12deg); } 81.3333% { transform: rotate(-6deg); } 88% { transform: rotate(12deg); } 100% { transform: rotate(0deg); } }
.rgperso.emo-colere .pe-leg-l { animation: e-colere-leg-l 3.4s ease-in-out both; }
@keyframes e-colere-leg-l { 0% { transform: none; } 14% { transform: none; } 20% { transform: translateY(-9px); } 28% { transform: none; } 42% { transform: none; } 48% { transform: translateY(-9px); } 56% { transform: none; } 100% { transform: none; } }
.rgperso.emo-colere .pe-leg-r { animation: e-colere-leg-r 3.4s ease-in-out both; }
@keyframes e-colere-leg-r { 0% { transform: none; } 28% { transform: none; } 34% { transform: translateY(-9px); } 42% { transform: none; } 56% { transform: none; } 62% { transform: translateY(-9px); } 70% { transform: none; } 100% { transform: none; } }
.rgperso.emo-colere .pe-tail { animation: e-colere-tail 3.4s ease-in-out both; }
@keyframes e-colere-tail { 0% { transform: none; } 10% { transform: rotate(-26deg); } 90% { transform: rotate(-26deg); } 100% { transform: none; } }
.rgperso.emo-colere .pe-head { animation: e-colere-head 3.4s ease-in-out both; }
@keyframes e-colere-head { 0% { transform: none; } 10% { transform: translateY(2px); } 90% { transform: translateY(2px); } 100% { transform: none; } }
.rgperso.emo-colere .pe-brows { animation: e-colere-brows 3.4s ease-in-out both; }
@keyframes e-colere-brows { 0% { opacity: 0; } 1% { opacity: 0; } 5% { opacity: 1; } 95% { opacity: 1; } 99% { opacity: 0; } 100% { opacity: 0; } }
.rgperso.emo-colere .pe-red { animation: e-colere-red 3.4s ease-in-out both; }
@keyframes e-colere-red { 0% { opacity: 0; } 4% { opacity: 0; } 8% { opacity: 0.3; } 92% { opacity: 0.3; } 96% { opacity: 0; } 100% { opacity: 0; } }
.rgperso.emo-colere .pe-steam { animation: e-colere-steam 3.4s ease-in-out both; }
@keyframes e-colere-steam { 0% { opacity: 0; } 6% { opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 94% { opacity: 0; } 100% { opacity: 0; } }
.rgperso.emo-colere .pe-pout { animation: e-colere-pout 3.4s ease-in-out both; }
@keyframes e-colere-pout { 0% { opacity: 0; } 1% { opacity: 0; } 5% { opacity: 1; } 95% { opacity: 1; } 99% { opacity: 0; } 100% { opacity: 0; } }
.rgperso.emo-colere .pe-bmouth { animation: e-colere-bmouth 3.4s ease-in-out both; }
@keyframes e-colere-bmouth { 0% { opacity: 1; } 1% { opacity: 1; } 5% { opacity: 0; } 95% { opacity: 0; } 99% { opacity: 1; } 100% { opacity: 1; } }
.rgperso.emo-colere .pe-bbrows { animation: e-colere-bbrows 3.4s ease-in-out both; }
@keyframes e-colere-bbrows { 0% { opacity: 1; } 1% { opacity: 1; } 5% { opacity: 0; } 95% { opacity: 0; } 99% { opacity: 1; } 100% { opacity: 1; } }
.rgperso.emo-dodo .pe-arm-r { animation: e-dodo-arm-r 4.8s ease-in-out both; }
@keyframes e-dodo-arm-r { 0% { transform: rotate(0deg); } 8% { transform: rotate(150deg); } 26% { transform: rotate(150deg); } 34% { transform: rotate(0deg); } 100% { transform: rotate(0deg); } }
.rgperso.emo-dodo .pe-arm-l { animation: e-dodo-arm-l 4.8s ease-in-out both; }
@keyframes e-dodo-arm-l { 0% { transform: rotate(0deg); } 8% { transform: rotate(34deg); } 26% { transform: rotate(34deg); } 34% { transform: rotate(0deg); } 100% { transform: rotate(0deg); } }
.rgperso.emo-dodo .pe-head { animation: e-dodo-head 4.8s ease-in-out both; }
@keyframes e-dodo-head { 0% { transform: none; } 10% { transform: rotate(-6deg) translateY(-2px); } 28% { transform: rotate(-6deg) translateY(-2px); } 36% { transform: none; } 44% { transform: translateY(6px) rotate(8deg); } 56% { transform: translateY(3px) rotate(5deg); } 68% { transform: translateY(7px) rotate(9deg); } 92% { transform: translateY(7px) rotate(9deg); } 100% { transform: none; } }
.rgperso.emo-dodo .pe-body { animation: e-dodo-body 4.8s ease-in-out both; }
@keyframes e-dodo-body { 0% { transform: none; } 40% { transform: none; } 48% { transform: translateY(2px) scaleY(.98); } 92% { transform: translateY(2px) scaleY(.98); } 100% { transform: none; } }
.rgperso.emo-dodo .pe-ears { animation: e-dodo-ears 4.8s ease-in-out both; }
@keyframes e-dodo-ears { 0% { transform: none; } 44% { transform: none; } 52% { transform: translateY(4px) scaleY(.92); } 92% { transform: translateY(4px) scaleY(.92); } 100% { transform: none; } }
.rgperso.emo-dodo .pe-mouth { animation: e-dodo-mouth 4.8s ease-in-out both; }
@keyframes e-dodo-mouth { 0% { opacity: 0; } 1% { opacity: 0; } 5% { opacity: 1; } 30% { opacity: 1; } 34% { opacity: 0; } 100% { opacity: 0; } }
.rgperso.emo-dodo .pe-lids { animation: e-dodo-lids 4.8s ease-in-out both; }
@keyframes e-dodo-lids { 0% { opacity: 0; } 30% { opacity: 0; } 34% { opacity: 1; } 96% { opacity: 1; } 100% { opacity: 0; } 100% { opacity: 0; } }
.rgperso.emo-dodo .pe-zz { animation: e-dodo-zz 4.8s ease-in-out both; }
@keyframes e-dodo-zz { 0% { opacity: 0; } 38% { opacity: 0; } 42% { opacity: 1; } 96% { opacity: 1; } 100% { opacity: 0; } 100% { opacity: 0; } }
.rgperso.emo-dodo .pe-bmouth { animation: e-dodo-bmouth 4.8s ease-in-out both; }
@keyframes e-dodo-bmouth { 0% { opacity: 1; } 1% { opacity: 1; } 5% { opacity: 0; } 30% { opacity: 0; } 34% { opacity: 1; } 100% { opacity: 1; } }
.rgperso.emo-dodo .pe-beyes { animation: e-dodo-beyes 4.8s ease-in-out both; }
@keyframes e-dodo-beyes { 0% { opacity: 1; } 30% { opacity: 1; } 34% { opacity: 0; } 96% { opacity: 0; } 100% { opacity: 1; } 100% { opacity: 1; } }
.rgperso.emo-salut .pe-av-salute { animation: e-salut-av-salute 2.8s ease-in-out both; }
@keyframes e-salut-av-salute { 0% { opacity: 0; } 10% { opacity: 0; } 14% { opacity: 1; } 82% { opacity: 1; } 86% { opacity: 0; } 100% { opacity: 0; } }
.rgperso.emo-salut .pe-arm-r .pe-anorm { animation: e-salut-arm-r--pe-anorm 2.8s ease-in-out both; }
@keyframes e-salut-arm-r--pe-anorm { 0% { opacity: 1; } 10% { opacity: 1; } 14% { opacity: 0; } 82% { opacity: 0; } 86% { opacity: 1; } 100% { opacity: 1; } }
.rgperso.emo-salut .pe-head { animation: e-salut-head 2.8s ease-in-out both; }
@keyframes e-salut-head { 0% { transform: none; } 16% { transform: rotate(-4deg); } 80% { transform: rotate(-4deg); } 100% { transform: none; } }
.rgperso.emo-salut .pe-body { animation: e-salut-body 2.8s ease-in-out both; }
@keyframes e-salut-body { 0% { transform: none; } 12% { transform: scaleY(1.02); } 84% { transform: scaleY(1.02); } 100% { transform: none; } }
.rgperso.emo-clin .pe-head { animation: e-clin-head 2.2s ease-in-out both; }
@keyframes e-clin-head { 0% { transform: none; } 20% { transform: rotate(-10deg); } 80% { transform: rotate(-10deg); } 100% { transform: none; } }
.rgperso.emo-clin .pe-arm-r { animation: e-clin-arm-r 2.2s ease-in-out both; }
@keyframes e-clin-arm-r { 0% { transform: rotate(0deg); } 20% { transform: rotate(-60deg); } 80% { transform: rotate(-60deg); } 100% { transform: rotate(0deg); } }
.rgperso.emo-clin .pe-wink { animation: e-clin-wink 2.2s ease-in-out both; }
@keyframes e-clin-wink { 0% { opacity: 0; } 21% { opacity: 0; } 25% { opacity: 1; } 75% { opacity: 1; } 79% { opacity: 0; } 100% { opacity: 0; } }
.rgperso.emo-clin .pe-spark { animation: e-clin-spark 2.2s ease-in-out both; }
@keyframes e-clin-spark { 0% { opacity: 0; } 24% { opacity: 0; } 28% { opacity: 1; } 72% { opacity: 1; } 76% { opacity: 0; } 100% { opacity: 0; } }
.rgperso.emo-pouce .pe-arm-r { animation: e-pouce-arm-r 2.6s ease-in-out both; }
@keyframes e-pouce-arm-r { 0% { transform: rotate(0deg); } 15% { transform: rotate(-70deg); } 85% { transform: rotate(-70deg); } 100% { transform: rotate(0deg); } }
.rgperso.emo-pouce .pe-head { animation: e-pouce-head 2.6s ease-in-out both; }
@keyframes e-pouce-head { 0% { transform: none; } 15% { transform: rotate(-6deg); } 85% { transform: rotate(-6deg); } 100% { transform: none; } }
.rgperso.emo-pouce .pe-thumb { animation: e-pouce-thumb 2.6s ease-in-out both; }
@keyframes e-pouce-thumb { 0% { opacity: 0; } 11% { opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 89% { opacity: 0; } 100% { opacity: 0; } }
.rgperso.emo-pouce .pe-wink { animation: e-pouce-wink 2.6s ease-in-out both; }
@keyframes e-pouce-wink { 0% { opacity: 0; } 24% { opacity: 0; } 28% { opacity: 1; } 70% { opacity: 1; } 74% { opacity: 0; } 100% { opacity: 0; } }
.rgperso.emo-reverence .pe-body { animation: e-reverence-body 3.2s ease-in-out both; }
@keyframes e-reverence-body { 0% { transform: none; } 30% { transform: translateY(8px) scaleY(.92); } 70% { transform: translateY(8px) scaleY(.92); } 100% { transform: none; } }
.rgperso.emo-reverence .pe-head { animation: e-reverence-head 3.2s ease-in-out both; }
@keyframes e-reverence-head { 0% { transform: none; } 30% { transform: translateY(10px); } 70% { transform: translateY(10px); } 100% { transform: none; } }
.rgperso.emo-reverence .pe-arm-r { animation: e-reverence-arm-r 3.2s ease-in-out both; }
@keyframes e-reverence-arm-r { 0% { transform: rotate(0deg); } 30% { transform: rotate(55deg); } 70% { transform: rotate(55deg); } 100% { transform: rotate(0deg); } }
.rgperso.emo-reverence .pe-arm-l { animation: e-reverence-arm-l 3.2s ease-in-out both; }
@keyframes e-reverence-arm-l { 0% { transform: rotate(0deg); } 30% { transform: rotate(35deg); } 70% { transform: rotate(35deg); } 100% { transform: rotate(0deg); } }
.rgperso.emo-reverence .pe-tail { animation: e-reverence-tail 3.2s ease-in-out both; }
@keyframes e-reverence-tail { 0% { transform: none; } 30% { transform: rotate(16deg); } 70% { transform: rotate(16deg); } 100% { transform: none; } }
.rgperso.emo-reverence .pe-happy { animation: e-reverence-happy 3.2s ease-in-out both; }
@keyframes e-reverence-happy { 0% { opacity: 0; } 21% { opacity: 0; } 25% { opacity: 1; } 78% { opacity: 1; } 82% { opacity: 0; } 100% { opacity: 0; } }
.rgperso.emo-reverence .pe-beyes { animation: e-reverence-beyes 3.2s ease-in-out both; }
@keyframes e-reverence-beyes { 0% { opacity: 1; } 21% { opacity: 1; } 25% { opacity: 0; } 78% { opacity: 0; } 82% { opacity: 1; } 100% { opacity: 1; } }
.rgperso.emo-victoire .pe-arm-l { animation: e-victoire-arm-l 3.6s ease-in-out both; }
@keyframes e-victoire-arm-l { 0% { transform: rotate(0deg); } 10% { transform: rotate(125deg); } 16% { transform: rotate(102deg); } 22.6% { transform: rotate(125deg); } 29.2% { transform: rotate(102deg); } 35.8% { transform: rotate(125deg); } 42.4% { transform: rotate(102deg); } 49% { transform: rotate(125deg); } 55.6% { transform: rotate(102deg); } 62.2% { transform: rotate(125deg); } 68.8% { transform: rotate(102deg); } 75.4% { transform: rotate(125deg); } 82% { transform: rotate(102deg); } 90% { transform: rotate(0deg); } 100% { transform: rotate(0deg); } }
.rgperso.emo-victoire .pe-arm-r { animation: e-victoire-arm-r 3.6s ease-in-out both; }
@keyframes e-victoire-arm-r { 0% { transform: rotate(0deg); } 10% { transform: rotate(-125deg); } 16% { transform: rotate(-102deg); } 22.6% { transform: rotate(-125deg); } 29.2% { transform: rotate(-102deg); } 35.8% { transform: rotate(-125deg); } 42.4% { transform: rotate(-102deg); } 49% { transform: rotate(-125deg); } 55.6% { transform: rotate(-102deg); } 62.2% { transform: rotate(-125deg); } 68.8% { transform: rotate(-102deg); } 75.4% { transform: rotate(-125deg); } 82% { transform: rotate(-102deg); } 90% { transform: rotate(0deg); } 100% { transform: rotate(0deg); } }
.rgperso.emo-victoire .pe-body { animation: e-victoire-body 3.6s ease-in-out both; }
@keyframes e-victoire-body { 0% { transform: none; } 15% { transform: translateY(-22px); } 25% { transform: none; } 45% { transform: translateY(-22px); } 55% { transform: none; } 100% { transform: none; } }
.rgperso.emo-victoire .pe-tail { animation: e-victoire-tail 3.6s ease-in-out both; }
@keyframes e-victoire-tail { 0% { transform: none; } 8% { transform: rotate(-16deg); } 16.2% { transform: rotate(16deg); } 24.4% { transform: rotate(-16deg); } 32.6% { transform: rotate(16deg); } 40.8% { transform: rotate(-16deg); } 49% { transform: rotate(16deg); } 57.2% { transform: rotate(-16deg); } 65.4% { transform: rotate(16deg); } 73.6% { transform: rotate(-16deg); } 81.8% { transform: rotate(16deg); } 90% { transform: rotate(-16deg); } 100% { transform: none; } }
.rgperso.emo-victoire .pe-spark { animation: e-victoire-spark 3.6s ease-in-out both; }
@keyframes e-victoire-spark { 0% { opacity: 0; } 6% { opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 94% { opacity: 0; } 100% { opacity: 0; } }
.rgperso.emo-victoire .pe-mouth { animation: e-victoire-mouth 3.6s ease-in-out both; }
@keyframes e-victoire-mouth { 0% { opacity: 0; } 6% { opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 94% { opacity: 0; } 100% { opacity: 0; } }
.rgperso.emo-victoire .pe-happy { animation: e-victoire-happy 3.6s ease-in-out both; }
@keyframes e-victoire-happy { 0% { opacity: 0; } 6% { opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 94% { opacity: 0; } 100% { opacity: 0; } }
.rgperso.emo-victoire .pe-bmouth { animation: e-victoire-bmouth 3.6s ease-in-out both; }
@keyframes e-victoire-bmouth { 0% { opacity: 1; } 6% { opacity: 1; } 10% { opacity: 0; } 90% { opacity: 0; } 94% { opacity: 1; } 100% { opacity: 1; } }
.rgperso.emo-victoire .pe-beyes { animation: e-victoire-beyes 3.6s ease-in-out both; }
@keyframes e-victoire-beyes { 0% { opacity: 1; } 6% { opacity: 1; } 10% { opacity: 0; } 90% { opacity: 0; } 94% { opacity: 1; } 100% { opacity: 1; } }
.rgperso.emo-boude .pe-arm-l { animation: e-boude-arm-l 3.4s ease-in-out both; }
@keyframes e-boude-arm-l { 0% { transform: rotate(0deg); } 15% { transform: rotate(-78deg); } 85% { transform: rotate(-78deg); } 100% { transform: rotate(0deg); } }
.rgperso.emo-boude .pe-arm-r { animation: e-boude-arm-r 3.4s ease-in-out both; }
@keyframes e-boude-arm-r { 0% { transform: rotate(0deg); } 15% { transform: rotate(78deg); } 85% { transform: rotate(78deg); } 100% { transform: rotate(0deg); } }
.rgperso.emo-boude .pe-head { animation: e-boude-head 3.4s ease-in-out both; }
@keyframes e-boude-head { 0% { transform: none; } 15% { transform: rotate(14deg); } 85% { transform: rotate(14deg); } 100% { transform: none; } }
.rgperso.emo-boude .pe-ears { animation: e-boude-ears 3.4s ease-in-out both; }
@keyframes e-boude-ears { 0% { transform: none; } 15% { transform: rotate(4deg); } 85% { transform: rotate(4deg); } 100% { transform: none; } }
.rgperso.emo-boude .pe-tail { animation: e-boude-tail 3.4s ease-in-out both; }
@keyframes e-boude-tail { 0% { transform: none; } 15% { transform: rotate(24deg); } 85% { transform: rotate(24deg); } 100% { transform: none; } }
.rgperso.emo-boude .pe-pout { animation: e-boude-pout 3.4s ease-in-out both; }
@keyframes e-boude-pout { 0% { opacity: 0; } 8% { opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 92% { opacity: 0; } 100% { opacity: 0; } }
.rgperso.emo-boude .pe-bmouth { animation: e-boude-bmouth 3.4s ease-in-out both; }
@keyframes e-boude-bmouth { 0% { opacity: 1; } 8% { opacity: 1; } 12% { opacity: 0; } 88% { opacity: 0; } 92% { opacity: 1; } 100% { opacity: 1; } }
.rgperso.emo-reflechit .pe-arm-r { animation: e-reflechit-arm-r 3.6s ease-in-out both; }
@keyframes e-reflechit-arm-r { 0% { transform: rotate(0deg); } 18% { transform: rotate(150deg); } 82% { transform: rotate(150deg); } 100% { transform: rotate(0deg); } }
.rgperso.emo-reflechit .pe-arm-l { animation: e-reflechit-arm-l 3.6s ease-in-out both; }
@keyframes e-reflechit-arm-l { 0% { transform: rotate(0deg); } 18% { transform: rotate(-30deg); } 82% { transform: rotate(-30deg); } 100% { transform: rotate(0deg); } }
.rgperso.emo-reflechit .pe-head { animation: e-reflechit-head 3.6s ease-in-out both; }
@keyframes e-reflechit-head { 0% { transform: none; } 18% { transform: rotate(8deg); } 22% { transform: rotate(8deg); } 31.6667% { transform: rotate(4deg); } 41.3333% { transform: rotate(8deg); } 51% { transform: rotate(4deg); } 60.6667% { transform: rotate(8deg); } 70.3333% { transform: rotate(4deg); } 80% { transform: rotate(8deg); } 100% { transform: none; } }
.rgperso.emo-reflechit .pe-tail { animation: e-reflechit-tail 3.6s ease-in-out both; }
@keyframes e-reflechit-tail { 0% { transform: none; } 10% { transform: rotate(-6deg); } 23.3333% { transform: rotate(6deg); } 36.6667% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } 63.3333% { transform: rotate(-6deg); } 76.6667% { transform: rotate(6deg); } 90% { transform: rotate(-6deg); } 100% { transform: none; } }
.rgperso.emo-reflechit .pe-q { animation: e-reflechit-q 3.6s ease-in-out both; }
@keyframes e-reflechit-q { 0% { opacity: 0; } 16% { opacity: 0; } 20% { opacity: 1; } 90% { opacity: 1; } 94% { opacity: 0; } 100% { opacity: 0; } }
.rgperso.emo-tour .pe-body { animation: e-tour-body 2.4s linear both; }
@keyframes e-tour-body { 0% { transform: scaleX(1); } 12.5% { transform: scaleX(.05) translateY(-8px); } 25% { transform: scaleX(-1) translateY(-12px); } 37.5% { transform: scaleX(.05) translateY(-8px); } 50% { transform: scaleX(1); } 62.5% { transform: scaleX(.05) translateY(-8px); } 75% { transform: scaleX(-1) translateY(-12px); } 87.5% { transform: scaleX(.05) translateY(-8px); } 100% { transform: scaleX(1); } }
.rgperso.emo-tour .pe-arm-l { animation: e-tour-arm-l 2.4s linear both; }
@keyframes e-tour-arm-l { 0% { transform: rotate(0deg); } 8% { transform: rotate(30deg); } 92% { transform: rotate(30deg); } 100% { transform: rotate(0deg); } }
.rgperso.emo-tour .pe-arm-r { animation: e-tour-arm-r 2.4s linear both; }
@keyframes e-tour-arm-r { 0% { transform: rotate(0deg); } 8% { transform: rotate(-30deg); } 92% { transform: rotate(-30deg); } 100% { transform: rotate(0deg); } }
.rgperso.emo-muscles .pe-av-flex { animation: e-muscles-av-flex 3.0s ease-in-out both; }
@keyframes e-muscles-av-flex { 0% { opacity: 0; } 8% { opacity: 0; } 12% { opacity: 1; } 86% { opacity: 1; } 90% { opacity: 0; } 100% { opacity: 0; } }
.rgperso.emo-muscles .pe-anorm { animation: e-muscles-anorm 3.0s ease-in-out both; }
@keyframes e-muscles-anorm { 0% { opacity: 1; } 8% { opacity: 1; } 12% { opacity: 0; } 86% { opacity: 0; } 90% { opacity: 1; } 100% { opacity: 1; } }
.rgperso.emo-muscles .pe-body { animation: e-muscles-body 3.0s ease-in-out both; }
@keyframes e-muscles-body { 0% { transform: none; } 15% { transform: scale(1.05); } 20% { transform: scale(1.08); } 27.75% { transform: scale(1.05); } 35.5% { transform: scale(1.08); } 43.25% { transform: scale(1.05); } 51% { transform: scale(1.08); } 58.75% { transform: scale(1.05); } 66.5% { transform: scale(1.08); } 74.25% { transform: scale(1.05); } 82% { transform: scale(1.08); } 100% { transform: none; } }
.rgperso.emo-muscles .pe-brows { animation: e-muscles-brows 3.0s ease-in-out both; }
@keyframes e-muscles-brows { 0% { opacity: 0; } 6% { opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 94% { opacity: 0; } 100% { opacity: 0; } }
.rgperso.emo-muscles .pe-spark { animation: e-muscles-spark 3.0s ease-in-out both; }
@keyframes e-muscles-spark { 0% { opacity: 0; } 16% { opacity: 0; } 20% { opacity: 1; } 85% { opacity: 1; } 89% { opacity: 0; } 100% { opacity: 0; } }
.rgperso.emo-muscles .pe-bbrows { animation: e-muscles-bbrows 3.0s ease-in-out both; }
@keyframes e-muscles-bbrows { 0% { opacity: 1; } 6% { opacity: 1; } 10% { opacity: 0; } 90% { opacity: 0; } 94% { opacity: 1; } 100% { opacity: 1; } }
.rgperso.emo-bof .pe-arm-l { animation: e-bof-arm-l 2.6s ease-in-out both; }
@keyframes e-bof-arm-l { 0% { transform: rotate(0deg); } 20% { transform: rotate(45deg); } 75% { transform: rotate(45deg); } 100% { transform: rotate(0deg); } }
.rgperso.emo-bof .pe-arm-r { animation: e-bof-arm-r 2.6s ease-in-out both; }
@keyframes e-bof-arm-r { 0% { transform: rotate(0deg); } 20% { transform: rotate(-45deg); } 75% { transform: rotate(-45deg); } 100% { transform: rotate(0deg); } }
.rgperso.emo-bof .pe-body { animation: e-bof-body 2.6s ease-in-out both; }
@keyframes e-bof-body { 0% { transform: none; } 20% { transform: translateY(-3px); } 75% { transform: translateY(-3px); } 100% { transform: none; } }
.rgperso.emo-bof .pe-head { animation: e-bof-head 2.6s ease-in-out both; }
@keyframes e-bof-head { 0% { transform: none; } 20% { transform: rotate(10deg); } 75% { transform: rotate(10deg); } 100% { transform: none; } }
.rgperso.emo-bof .pe-pout { animation: e-bof-pout 2.6s ease-in-out both; }
@keyframes e-bof-pout { 0% { opacity: 0; } 14% { opacity: 0; } 18% { opacity: 1; } 78% { opacity: 1; } 82% { opacity: 0; } 100% { opacity: 0; } }
.rgperso.emo-bof .pe-bmouth { animation: e-bof-bmouth 2.6s ease-in-out both; }
@keyframes e-bof-bmouth { 0% { opacity: 1; } 14% { opacity: 1; } 18% { opacity: 0; } 78% { opacity: 0; } 82% { opacity: 1; } 100% { opacity: 1; } }
.rgperso.emo-bisou .pe-arm-r { animation: e-bisou-arm-r 3.0s ease-in-out both; }
@keyframes e-bisou-arm-r { 0% { transform: rotate(0deg); } 18% { transform: rotate(150deg); } 38% { transform: rotate(150deg); } 50% { transform: rotate(-70deg); } 70% { transform: rotate(-70deg); } 100% { transform: rotate(0deg); } }
.rgperso.emo-bisou .pe-head { animation: e-bisou-head 3.0s ease-in-out both; }
@keyframes e-bisou-head { 0% { transform: none; } 18% { transform: rotate(-6deg); } 70% { transform: rotate(-6deg); } 100% { transform: none; } }
.rgperso.emo-bisou .pe-kiss { animation: e-bisou-kiss 3.0s ease-in-out both; }
@keyframes e-bisou-kiss { 0% { opacity: 0; } 8% { opacity: 0; } 12% { opacity: 1; } 42% { opacity: 1; } 46% { opacity: 0; } 100% { opacity: 0; } }
.rgperso.emo-bisou .pe-heart { animation: e-bisou-heart 3.0s ease-in-out both; }
@keyframes e-bisou-heart { 0% { opacity: 0; } 44% { opacity: 0; } 48% { opacity: 1; } 96% { opacity: 1; } 100% { opacity: 0; } 100% { opacity: 0; } }
.rgperso.emo-bisou .pe-happy { animation: e-bisou-happy 3.0s ease-in-out both; }
@keyframes e-bisou-happy { 0% { opacity: 0; } 44% { opacity: 0; } 48% { opacity: 1; } 90% { opacity: 1; } 94% { opacity: 0; } 100% { opacity: 0; } }
.rgperso.emo-bisou .pe-bmouth { animation: e-bisou-bmouth 3.0s ease-in-out both; }
@keyframes e-bisou-bmouth { 0% { opacity: 1; } 8% { opacity: 1; } 12% { opacity: 0; } 42% { opacity: 0; } 46% { opacity: 1; } 100% { opacity: 1; } }
.rgperso.emo-bisou .pe-beyes { animation: e-bisou-beyes 3.0s ease-in-out both; }
@keyframes e-bisou-beyes { 0% { opacity: 1; } 44% { opacity: 1; } 48% { opacity: 0; } 90% { opacity: 0; } 94% { opacity: 1; } 100% { opacity: 1; } }
/* ---- étape 61 : bouton Emotes en partie, panneau Emotes / Emojis, cartes flottantes, emotes dans les tchats ---- */
.emobtn { position: fixed; z-index: 69; right: 0; top: calc(var(--nav-h, 64px) + 136px); display: flex; align-items: center; gap: 7px; padding: 9px 12px 9px 13px; border: 0; border-radius: 14px 0 0 14px;
  background: var(--paper); color: var(--ink); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .7); }
.emobtn[hidden] { display: none; }
.emobtn svg { width: 17px; height: 17px; }
.emobtn:hover { background: #fffaf0; }
body.gtalk-open .emobtn { right: calc(312px + env(safe-area-inset-right, 0px)); box-shadow: -6px 10px 24px -10px rgba(0, 0, 0, .7); } /* (étape 62 : collé au bord du tchat de la partie, 300 px + 12 px) */
@media (max-width: 760px) { .emobtn { top: auto; bottom: calc(168px + env(safe-area-inset-bottom, 0px)); padding: 9px 10px 9px 11px; } .emobtn span { display: none; } body.gtalk-open .emobtn { display: none; } }
.emopick { position: fixed; z-index: 120; width: min(340px, calc(100vw - 16px)); max-height: min(420px, calc(100vh - 24px)); display: grid; grid-template-rows: auto minmax(0, 1fr); border-radius: 16px; overflow: hidden;
  background: var(--paper); color: var(--ink); box-shadow: 0 24px 50px -16px rgba(0, 0, 0, .75), inset 0 0 0 1px rgba(60, 40, 20, .12); animation: epIn .18s ease-out both; }
@keyframes epIn { from { opacity: 0; transform: translateY(6px) scale(.98); } }
.ep-tabs { display: flex; gap: 4px; padding: 8px 8px 0; }
.ep-tabs button { flex: 1; border: 0; padding: 8px; border-radius: 10px 10px 0 0; background: transparent; color: rgba(42, 29, 20, .6); font: inherit; font-weight: 700; font-size: 13.5px; cursor: pointer; }
.ep-tabs button[aria-selected="true"] { background: rgba(60, 40, 20, .08); color: var(--ink); }
.ep-body { overflow: auto; padding: 10px; background: rgba(60, 40, 20, .05); display: grid; gap: 8px; align-content: start; }
.ep-emos { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.ep-emo { display: grid; justify-items: center; gap: 3px; padding: 8px 4px; border: 0; border-radius: 12px; background: #fffaf0; color: var(--ink); font: inherit; cursor: pointer; box-shadow: 0 2px 0 rgba(60, 40, 20, .14); transition: transform .12s; }
.ep-emo:hover { transform: translateY(-2px); } .ep-emo span { font-size: 24px; line-height: 1; } .ep-emo small { font-size: 11.5px; font-weight: 600; text-align: center; line-height: 1.15; }
.ep-note { margin: 2px 2px 0; font-size: 12.5px; color: rgba(42, 29, 20, .65); }
.ep-q { height: 36px; font-size: 14px; }
.ep-cats { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; min-height: 34px; position: sticky; top: -10px; z-index: 1; margin: -2px -10px 0; padding: 2px 8px; background: #f1e9d6; } .ep-cats button { border: 0; background: transparent; font-size: 18px; padding: 4px 6px; border-radius: 8px; cursor: pointer; } .ep-cats button:hover { background: rgba(60, 40, 20, .1); }
.ep-scroll { display: grid; gap: 6px; }
.ep-h { font-size: 12px; font-weight: 700; color: rgba(42, 29, 20, .6); scroll-margin-top: 6px; }
.ep-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 2px; }
.ep-ch { border: 0; background: transparent; font-size: 22px; line-height: 1; padding: 5px 0; border-radius: 8px; cursor: pointer; } .ep-ch:hover { background: rgba(60, 40, 20, .1); transform: scale(1.12); }
.emofloat-box { position: fixed; z-index: 75; left: 14px; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 8px; pointer-events: none; }
.emofloat { display: flex; align-items: flex-end; gap: 8px; padding: 6px 14px 8px 6px; border-radius: 18px; background: rgba(251, 246, 234, .96); color: var(--ink); box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .7); animation: efIn .3s cubic-bezier(.2, 1.4, .4, 1) both; }
.emofloat.out { animation: efOut .35s ease-in both; }
@keyframes efIn { from { opacity: 0; transform: translateX(-20px) scale(.9); } } @keyframes efOut { to { opacity: 0; transform: translateX(-20px) scale(.9); } }
.emofloat .pfull { --h: 112px; }
.ef-n { display: grid; gap: 2px; padding-bottom: 8px; } .ef-n b { font-size: 14px; } .ef-n small { font-size: 12.5px; color: rgba(42, 29, 20, .7); }
.emomsg { display: grid; justify-items: center; gap: 2px; margin-top: 2px; padding: 4px 10px 6px; border: 0; border-radius: 14px; background: rgba(60, 40, 20, .06); color: inherit; font: inherit; cursor: pointer; }
.emomsg .pfull { --h: 92px; } .emomsg small { font-size: 12px; font-weight: 600; opacity: .8; }
.cp-emo, .gt-emo { flex: none; width: 40px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 12px; background: rgba(60, 40, 20, .07); color: inherit; cursor: pointer; }
.gt-emo { height: auto; width: 38px; } .cp-emo svg, .gt-emo svg { width: 20px; height: 20px; } .cp-emo:hover, .gt-emo:hover { background: rgba(60, 40, 20, .14); }
.pz-emohint { margin: 0; font-size: 13.5px; color: rgba(42, 29, 20, .7); }
.pz-items.emos { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.pz-emo .pz-esym { font-size: 30px; line-height: 1; display: grid; place-items: center; height: 52px; }
.apz-emo { position: relative; border: 0; background: transparent; cursor: pointer; padding: 0; } .apz-emo > span { position: absolute; right: 2px; bottom: 2px; font-size: 18px; }
/* ---- étape 62 : trois raretés de plus (Mythique, Secret, Événement) ---- */
.pz-it.r-mythique { position: relative; overflow: hidden; box-shadow: inset 0 0 0 2px transparent, 0 0 16px rgba(255, 120, 200, .35); background: linear-gradient(180deg, rgba(255, 140, 200, .16), rgba(120, 200, 255, .1) 60%, transparent); }
.pz-it.r-mythique::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; background: conic-gradient(from var(--pzA, 0deg), #ff6b9a, #ffd36e, #7fe0c4, #6aa8ff, #c39bff, #ff6b9a); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: pzSpin 4s linear infinite; pointer-events: none; }
@property --pzA { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes pzSpin { to { --pzA: 360deg; } }
.pz-it.r-mythique .pz-rar { background: linear-gradient(90deg, #ff6b9a, #c39bff, #6aa8ff); color: #fff; }
.pz-it.r-secret { box-shadow: inset 0 0 0 2px #2a2238, 0 0 14px rgba(80, 40, 120, .35); background: linear-gradient(180deg, rgba(42, 34, 56, .22), rgba(42, 34, 56, .06) 70%); position: relative; overflow: hidden; }
.pz-it.r-secret::after { content: ""; position: absolute; inset: -20%; background: radial-gradient(circle at 30% 30%, rgba(160, 120, 255, .25), transparent 40%), radial-gradient(circle at 70% 70%, rgba(80, 200, 180, .18), transparent 40%); animation: pzMist 6s ease-in-out infinite alternate; pointer-events: none; }
@keyframes pzMist { to { transform: translate(8%, -6%) rotate(20deg); } }
.pz-it.r-secret .pz-rar { background: #2a2238; color: #d9c8ff; }
.pz-it.r-evenement { box-shadow: inset 0 0 0 2px #e0533d, 0 0 14px rgba(224, 83, 61, .3); background: linear-gradient(180deg, rgba(224, 83, 61, .12), rgba(244, 191, 61, .08) 60%, transparent); position: relative; overflow: hidden; }
.pz-it.r-evenement::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle, #f4bf3d 1.4px, transparent 1.6px), radial-gradient(circle, #2bb069 1.2px, transparent 1.4px), radial-gradient(circle, #6aa8ff 1.2px, transparent 1.4px); background-size: 38px 38px, 46px 46px, 52px 52px; background-position: 4px 6px, 20px 14px, 30px 28px; opacity: .55; animation: pzConf 5s linear infinite; pointer-events: none; }
@keyframes pzConf { to { background-position: 4px 44px, 20px 60px, 30px 80px; } }
.pz-it.r-evenement .pz-rar { background: linear-gradient(90deg, #e0533d, #f4bf3d); color: #fff; }
.pz-it.on.r-mythique, .pz-it.on.r-secret, .pz-it.on.r-evenement { outline: 3px solid #b8914a; outline-offset: 1px; }
.pz-col.r-mythique { box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .14), 0 0 0 2px #fff, 0 0 0 4px #ff6b9a, 0 0 8px #c39bff; }
.pz-col.r-secret { box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .14), 0 0 0 2px #fff, 0 0 0 4px #2a2238; }
.pz-col.r-evenement { box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .14), 0 0 0 2px #fff, 0 0 0 4px #e0533d; }
.rar.r-mythique { color: #ffc8e6; background: rgba(255, 107, 154, .2); } .rar.r-secret { color: #d9c8ff; background: rgba(42, 34, 56, .6); } .rar.r-evenement { color: #ffd9a6; background: rgba(224, 83, 61, .22); }
@media (prefers-reduced-motion: reduce) { .pz-it.r-mythique::before, .pz-it.r-secret::after, .pz-it.r-evenement::after { animation: none !important; } }
.apz-sw { display: grid; place-items: center; } .apz-sw i { width: 46px; height: 46px; border-radius: 50%; background: var(--c); box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .15), 0 0 0 3px #fff, 0 0 0 4px rgba(26, 22, 17, .2); }

/* ---- étape 64 : pendant une emote, l'objet dans les mains se met de côté ; en partie, le rat grandit sur place ---- */
.rgperso .pe-main { transition: opacity .2s; }
.rgperso.emo .pe-main { opacity: 0; }
.rgperso.emo .pe-main * { animation-play-state: paused !important; }
.pfull.emo-big { transform: scale(var(--emo-k, 1.35)); transform-origin: 50% 100%; transition: transform .35s cubic-bezier(.2, 1.3, .4, 1); position: relative; z-index: 50; }
.pfull[style*="--emo-k"] { transition: transform .4s ease; }
.emo-up { z-index: 60 !important; }
.pemo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 6px; }
.pemo { display: grid; justify-items: center; gap: 3px; padding: 8px 4px; border: 0; border-radius: 12px; background: rgba(26, 22, 17, .05); color: inherit; font: inherit; cursor: pointer; box-shadow: inset 0 0 0 1.5px rgba(26, 22, 17, .08); }
.pemo span { font-size: 22px; line-height: 1; } .pemo small { font-size: 11.5px; font-weight: 600; text-align: center; line-height: 1.15; }
.pemo:hover { background: rgba(26, 22, 17, .09); } .pemo.on { box-shadow: inset 0 0 0 2.5px #b8914a; background: rgba(214, 176, 102, .18); }

/* ---- étape 64 : le son d'un écran partagé, réglé chez soi ---- */
.cb-sa { position: absolute; left: 8px; bottom: 8px; z-index: 3; display: flex; align-items: center; gap: 6px; padding: 5px 9px 5px 5px; border-radius: 999px; background: rgba(15, 12, 9, .72); color: #f6f0e2; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .8); }
.cb-sam { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: inherit; cursor: pointer; }
.cb-sam svg { width: 16px; height: 16px; } .cb-sam.off { background: rgba(226, 68, 90, .5); }
.cb-sa input[type="range"] { width: 90px; accent-color: #d6b066; cursor: pointer; }
.cb-t:not(.focus) .cb-sa input[type="range"] { display: none; }

/* ---- étape 65 : le drapeau du profil ---- */
img.flag { display: inline-block; vertical-align: -2px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .18), 0 2px 4px -2px rgba(0, 0, 0, .4); object-fit: cover; }
.pf-flag { display: inline-flex; margin-right: 9px; vertical-align: middle; } .pf-flag img.flag { vertical-align: 0; }
.pflag-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 18px; padding: 10px 12px; border-radius: 12px; background: rgba(26, 22, 17, .05); }
.pflag-cur { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.flagmodal .flagq { margin-top: 12px; height: 44px; font-size: 15px; position: sticky; top: 0; z-index: 1; }
.flaglist { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 4px; max-height: min(52vh, 460px); overflow: auto; margin-top: 10px; padding: 2px; }
.flagopt { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; color: inherit; font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.flagopt:hover { background: rgba(26, 22, 17, .07); } .flagopt.on { background: rgba(214, 176, 102, .25); box-shadow: inset 0 0 0 1.5px #b8914a; } .flagopt[hidden] { display: none; }
.flagopt span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flagnone { width: 27px; height: 20px; display: grid; place-items: center; border-radius: 3px; background: rgba(26, 22, 17, .08); } .flagnone svg { width: 13px; height: 13px; }

/* ---- étapes 69 et 70 : le style du profil (couleur, cadre, décor) ---- */
.pst { background: var(--pbg) !important; }
.pst-anim { background-size: 300% 300% !important; animation: pstFlow 12s ease-in-out infinite; }
@keyframes pstFlow { 50% { background-position: 100% 50%; } }
/* (étape 70) couleur foncée : le texte posé sur la carte devient clair ; tout ce qui a son propre fond (boutons, lignes de
   « Ses jeux », champs, étiquettes) garde un fond clair et une encre foncée : tout reste lisible, quelle que soit la couleur */
.pst-dark { --ink: #f6f0e2; --ink-2: rgba(246, 240, 226, .78); color: var(--ink); }
.pst-dark :is(.btn, .pm-g, .pm-b, .pm-where, .pm-more, .inp, .tag, .pflag-row, .pm-staff, .pst-fake > i) { --ink: #1a1611; --ink-2: #5d5546; }
.pst-dark :is(.pm-g, .pm-where) { background: rgba(255, 250, 240, .92); }
.pst-dark .pm-g:hover, .pst-dark .pm-g.open { background: #fffaf0; }
.pst-dark :is(.pm-b, .pm-more, .pflag-row, .pm-staff) { background: rgba(255, 250, 240, .9); color: #1a1611; }
.pst-dark .pm-b.warn { color: #8a3a2a; } .pst-dark .pm-b.danger { color: #b0281a; }
.pst-dark .tag { background: rgba(255, 250, 240, .92); color: #3a3328; } .pst-dark .tag.onl { color: #1f7a55; }
.pst-dark :is(.btn.xs, .btn.ghost) { background: rgba(255, 250, 240, .92); --fg: #1a1611; box-shadow: inset 0 0 0 1px rgba(26, 22, 17, .2); }
.pst-dark .inp { background: rgba(255, 250, 240, .94); color: #1a1611; } .pst-dark .inp::placeholder { color: rgba(26, 22, 17, .45); }
.pst-dark .inp:focus { background: #fff8ea; color: #1a1611; }
.pst-dark .pflag-row .muted { color: #5d5546; }
.pst-dark .field label, .pst-dark .count { color: rgba(246, 240, 226, .82) !important; }
/* le cadre : un anneau (--pfr) autour de la carte + des ornements dessinés aux coins (.pfc) et en haut (.pft) ;
   --k règle la taille (1 sur une carte, plus petit dans les vignettes) */
.pst-framed { position: relative; }
.pframe { --k: 1; --bw: calc(5px * var(--k)); --pfo: calc(var(--bw) - 1px); position: absolute; inset: calc(var(--pfo) * -1); border-radius: calc(var(--r, 18px) + var(--pfo)); pointer-events: none; z-index: 3; }
.pframe::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: var(--bw); background: var(--pfr, #c9a14a); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.pframe::after { content: ""; position: absolute; inset: calc(var(--bw) - 1px); border-radius: calc(var(--r, 18px) + var(--pfo) - var(--bw)); box-shadow: 0 0 0 calc(1.4px * var(--k)) var(--pfl, transparent); }
.pfc { --cs: calc(34px * var(--k)); position: absolute; width: var(--cs); height: var(--cs); display: block; }
.pfc svg, .pft svg { width: 100%; height: 100%; display: block; overflow: visible; }
.pfc.tl { left: calc(var(--cs) * -.2); top: calc(var(--cs) * -.2); }
.pfc.tr { right: calc(var(--cs) * -.2); top: calc(var(--cs) * -.2); transform: scaleX(-1); }
.pfc.bl { left: calc(var(--cs) * -.2); bottom: calc(var(--cs) * -.2); transform: scaleY(-1); }
.pfc.br { right: calc(var(--cs) * -.2); bottom: calc(var(--cs) * -.2); transform: scale(-1); }
.pfc.nomir { transform: none !important; }
.pfc-b { --cs: calc(40px * var(--k)); } .pfc-b.bl, .pfc-b.br { bottom: calc(var(--cs) * -.12); transform: none; } .pfc-b.br { transform: scaleX(-1); }
.pft { position: absolute; left: 50%; top: calc(var(--k) * -17px); width: calc(60px * var(--k)); height: calc(30px * var(--k)); transform: translateX(-50%); display: block; }
.pf-laiton { --pfr: linear-gradient(135deg, #f1d68e, #b8914a 28%, #f6e3a6 50%, #9a7633 74%, #e7c777); --pfl: rgba(110, 82, 32, .45); }
.pf-bois { --bw: calc(8px * var(--k)); --pfr: repeating-linear-gradient(115deg, rgba(0, 0, 0, .1) 0 2px, transparent 2px 9px), linear-gradient(135deg, #95633b, #6a4226 40%, #a06e43 65%, #5e3a20); --pfl: rgba(214, 170, 120, .55); }
.pf-dore { --pfr: linear-gradient(135deg, #fff1bf, #e2b84f 25%, #a37a26 45%, #f6d98a 62%, #c99a2e 85%, #fff1bf); box-shadow: 0 0 calc(18px * var(--k)) rgba(242, 200, 90, .45); }
.pf-cartes { --bw: calc(6px * var(--k)); --pfr: repeating-linear-gradient(45deg, #8c1f2a 0 3px, #b0323e 3px 6px); --pfl: #f6f0e2; }
.pf-pieces { --bw: calc(6px * var(--k)); --pfr: repeating-conic-gradient(from 0deg, #f0cc66 0 .7deg, #b8901f .7deg 1.4deg); --pfl: rgba(122, 90, 28, .6); }
.pf-fleurs { --pfr: linear-gradient(135deg, #f7b6cc, #fbd9a8 35%, #bfe5b8 65%, #f7b6cc); }
.pf-givre { --pfr: linear-gradient(135deg, #ffffff, #cfe9ff 35%, #9fd2f5 55%, #eef8ff 80%, #bfe2ff); box-shadow: 0 0 calc(16px * var(--k)) rgba(160, 210, 255, .65); }
.pf-flammes { --pfr: linear-gradient(0deg, #ff4d1a, #ff8a2a 50%, #ffd36e); animation: pfFlame 1.6s ease-in-out infinite alternate; }
@keyframes pfFlame { from { box-shadow: 0 0 calc(12px * var(--k)) rgba(255, 110, 40, .5); } to { box-shadow: 0 0 calc(24px * var(--k)) rgba(255, 170, 60, .75); } }
.pf-flammes .pf-fl { transform-box: fill-box; transform-origin: 50% 100%; animation: pfFl 1.1s ease-in-out infinite alternate; }
@keyframes pfFl { to { transform: scale(.92, 1.08) skewX(-3deg); } }
.pf-neon { --bw: calc(3px * var(--k)); --pfr: #ff5ad8; animation: pfNeon 3s ease-in-out infinite; }
@keyframes pfNeon { 0%, 100% { --pfr: #ff5ad8; box-shadow: 0 0 calc(10px * var(--k)) #ff5ad8, 0 0 calc(22px * var(--k)) rgba(255, 90, 216, .55); } 50% { --pfr: #4fe3ff; box-shadow: 0 0 calc(10px * var(--k)) #4fe3ff, 0 0 calc(22px * var(--k)) rgba(79, 227, 255, .55); } }
.pf-etoiles { --bw: calc(3px * var(--k)); --pfr: linear-gradient(135deg, #ffe9a6, #d6a63a, #ffe9a6); box-shadow: 0 0 calc(12px * var(--k)) rgba(255, 211, 110, .4); }
.pf-etoiles .pfc { animation: pfTw 2.4s ease-in-out infinite; } .pf-etoiles .pfc.tr { animation-delay: -.6s; } .pf-etoiles .pfc.bl { animation-delay: -1.2s; } .pf-etoiles .pfc.br { animation-delay: -1.8s; }
@keyframes pfTw { 50% { opacity: .45; } }
.pf-royal { --bw: calc(7px * var(--k)); --pfr: linear-gradient(135deg, #5a2d8c, #7b45b5 50%, #4a2373); --pfl: #e8c25e; box-shadow: 0 0 0 calc(2px * var(--k)) #e8c25e, 0 0 calc(16px * var(--k)) rgba(107, 63, 160, .45); }
.pf-royal .pft { top: calc(var(--k) * -19px); }
.pf-arcenciel { --pfr: conic-gradient(from var(--pfA, 0deg), #ff6b9a, #ffd36e, #7fe0c4, #6aa8ff, #c39bff, #ff6b9a); }
.pf-arcenciel::before { animation: pfSpin 5s linear infinite; }
@property --pfA { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
@keyframes pfSpin { to { --pfA: 360deg; } }
.pf-ombre { --pfr: linear-gradient(135deg, #3a2a50, #120e18 45%, #2a2236); box-shadow: 0 0 calc(22px * var(--k)) calc(3px * var(--k)) rgba(40, 20, 70, .7); --pfl: rgba(185, 163, 232, .5); }
.pf-fete { --pfr: repeating-linear-gradient(45deg, #f4bf3d 0 7px, #e0533d 7px 14px, #2d78e3 14px 21px, #2bb069 21px 28px); }
.pf-fete .pft { top: calc(var(--k) * -6px); }
/* le décor : sur toute la largeur de la carte, du haut jusqu'un peu sous les pieds (hauteur posée par pstyle.js), derrière tout */
.has-pdecor { position: relative; isolation: isolate; }
.pdecor { position: absolute; left: 0; right: 0; top: 0; height: 240px; z-index: -1; border-radius: var(--r, 18px) var(--r, 18px) 0 0; overflow: hidden; pointer-events: none; -webkit-mask: linear-gradient(#000 calc(100% - 26px), transparent); mask: linear-gradient(#000 calc(100% - 26px), transparent); }
.pdecor svg { width: 100%; height: 100%; display: block; }
/* le texte posé sur un décor : sur un verre doux (clair sur une carte claire, sombre sur une carte foncée) */
.has-pdecor :is(.prof-id, .pm-bio, .pm-nobio) { padding: 10px 14px; border-radius: 14px; background: rgba(250, 245, 233, .88); box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.has-pdecor.pst-dark :is(.prof-id, .pm-bio, .pm-nobio) { background: rgba(14, 12, 22, .66); }
.has-pdecor .pz-prof > .btn { background: rgba(255, 250, 240, .94); --fg: #1a1611; }
.has-pdecor .modal .x, .has-pdecor > .x { background: rgba(250, 245, 233, .85); color: #5d5546; }
.has-pdecor .pflag-row { background: rgba(255, 250, 240, .9); }
.pd-salle { background: radial-gradient(120% 90% at 50% 0%, #2f7a56, #123826); } .pd-ciel { background: linear-gradient(180deg, #0f1838, #2a3a74); }
.pd-casino { background: radial-gradient(120% 80% at 50% 0%, #6a1d28, #2a0b12); } .pd-foret { background: linear-gradient(180deg, #bfe3c2, #5e9a68); }
.pd-village { background: linear-gradient(180deg, #121f45, #3a4f88); } .pd-quiz { background: radial-gradient(120% 90% at 50% 0%, #5b2a8a, #1e0d33); }
.pd-bateau { background: linear-gradient(180deg, #ffcf9a, #8fc7e8 55%); } .pd-immo { background: linear-gradient(180deg, #123a2b, #2a6a4c 50%, #f0b860); } .pd-plage { background: linear-gradient(180deg, #ff9a6b, #ffcf8a 55%, #ffe3a8); }
.pd-ville { background: linear-gradient(180deg, #0c1230, #3b2e6e); } .pd-neige { background: linear-gradient(180deg, #a9cbe8, #e4f1fb); }
.pd-fonds { background: linear-gradient(180deg, #1f8fb0, #0b3a5a); } .pd-aurore { background: linear-gradient(180deg, #071226, #14324a); }
.pd-espace { background: radial-gradient(90% 70% at 30% 30%, #2b1d55, #05040d 70%); } .pd-mystere { background: radial-gradient(100% 80% at 50% 40%, #3a2363, #0e0819); }
.pd-fete { background: linear-gradient(180deg, #0d0a26, #2a1d55); }
.pdecor .pd-tw { animation: pdTw 3s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.45s); }
@keyframes pdTw { 50% { opacity: .25; } }
.pdecor .pd-snow { animation: pdSnow 7s linear infinite; animation-delay: calc(var(--i, 0) * -.8s); }
@keyframes pdSnow { to { transform: translate(var(--x, 0), 290px); } }
.pdecor .pd-bub { animation: pdBub 5s ease-in infinite; animation-delay: calc(var(--i, 0) * -.62s); }
@keyframes pdBub { to { transform: translateY(-240px); opacity: 0; } }
.pdecor .pd-wave { animation: pdWave 4s ease-in-out infinite alternate; } .pdecor .pd-wave.w2 { animation-duration: 5s; animation-direction: alternate-reverse; }
@keyframes pdWave { to { transform: translateX(-24px); } }
.pdecor .pd-sway { transform-box: fill-box; transform-origin: 50% 100%; animation: pdSway 4s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -.8s); }
@keyframes pdSway { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
.pdecor .pd-aur { animation: pdAur 7s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -2s); }
@keyframes pdAur { to { transform: translateX(-30px) scaleY(1.2); opacity: .5; } }
.pdecor .pd-beam { transform-box: fill-box; transform-origin: 50% 0; animation: pdBeam 5s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -1.6s); }
@keyframes pdBeam { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
.pdecor .pd-sun { animation: pdSun 4s ease-in-out infinite alternate; } @keyframes pdSun { to { opacity: .8; } }
.pdecor .pd-fw { animation: pdFw 2.6s ease-out infinite; animation-delay: calc(var(--i, 0) * -.9s); }
@keyframes pdFw { 0% { transform: scale(.1); opacity: 1; } 70% { opacity: .9; } 100% { transform: scale(1.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .pdecor *, .pframe, .pframe *, .pframe::before, .pst-anim { animation: none !important; } }
/* « Mon style » (étape 70) : l'aperçu reste visible en haut pendant qu'on choisit, les choix en trois onglets */
.pst-sticky { position: sticky; top: calc(var(--nav-hz, var(--nav-h, 72px)) + 10px); z-index: 5; display: grid; gap: 8px; padding: 10px 14px 16px; margin: 0 -10px; border-radius: 18px; background: linear-gradient(180deg, #17402f, #12382a); box-shadow: 0 14px 24px -18px rgba(0, 0, 0, .9); }
.pst-cap { color: var(--chalk-3); font-size: 12.5px; font-weight: 600; }
.pst-prev { --r: 18px; padding: 16px 18px 14px; display: grid; gap: 12px; margin: 8px 8px 4px; border-radius: 18px; }
.pst-prev .pm-head { grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; }
.pst-prev .pst-fig { position: relative; display: inline-grid; }
.pst-prev .pst-fig .pfull { filter: drop-shadow(0 10px 12px rgba(26, 22, 17, .3)); }
.pst-prev h3 { margin: 0; font: 800 21px/1.05 var(--display); overflow-wrap: anywhere; }
.pst-prev .prof-id { gap: 5px; } .pst-prev .prof-handle { font-size: 12.5px; } .pst-prev .tag { height: 24px; font-size: 11.5px; }
.pst-fake { display: grid; gap: 6px; } .pst-fake .sghead { font-size: 14px; }
.pst-fake > i { height: 30px; border-radius: 10px; background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px rgba(26, 22, 17, .1); } .pst-fake > i + i { width: 72%; }
.pst-dark .pst-fake > i { background: rgba(255, 250, 240, .9); }
.pst-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 14px; background: rgba(0, 0, 0, .22); box-shadow: inset 0 0 0 1px var(--line); }
.pst-tabs button { min-height: 40px; border-radius: 10px; font: 650 14.5px/1.1 var(--body); color: var(--chalk-2); transition: background .2s, color .2s; }
.pst-tabs button:hover { color: var(--chalk); background: rgba(255, 255, 255, .05); }
.pst-tabs button.on { background: var(--paper); color: var(--ink); box-shadow: 0 2px 0 var(--brass-2); }
.pst-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.pst-pick[hidden] { display: none; }
.pst-it { position: relative; display: grid; justify-items: center; align-content: start; gap: 6px; padding: 10px 4px 8px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .05); color: inherit; font: inherit; cursor: pointer; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .08); transition: background .2s, box-shadow .2s; }
.pst-it:hover { background: rgba(255, 255, 255, .09); }
.pst-it small { font-size: 12px; font-weight: 600; text-align: center; line-height: 1.15; overflow-wrap: anywhere; } .pst-it .pz-rar { font-size: 10.5px; font-weight: 500; color: var(--chalk-3); }
.pst-it.on { box-shadow: inset 0 0 0 2.5px var(--brass); background: rgba(214, 176, 102, .16); }
.pst-sw { width: 52px; height: 44px; border-radius: 12px; background: var(--pbg); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.pst-sw.pst-anim { background-size: 300% 300%; }
.pst-ft { position: relative; display: block; width: 58px; height: 44px; margin: 6px 0 2px; border-radius: 9px; background: #f3ecdc; --r: 9px; }
.pst-ft .pframe { --k: .45; }
.pst-dt { position: relative; display: block; width: 66px; height: 46px; border-radius: 10px; overflow: hidden; }
.pst-dt .pdecor { inset: 0; height: auto !important; border-radius: 10px; z-index: 0; -webkit-mask: none; mask: none; }
.pst-none { width: 52px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: rgba(255, 255, 255, .07); } .pst-none svg { width: 18px; height: 18px; }
.apz-pst { overflow: visible; } .apz-pst .pst-ft { margin: 4px; }
.pz-figwrap { position: relative; display: inline-grid; }
@media (max-width: 640px) {
  .pst-sticky { padding: 8px 10px 12px; margin: 0 -6px; }
  .pst-prev { padding: 12px 14px 12px; gap: 10px; } .pst-prev .pst-fig .pfull { width: 74px !important; height: auto !important; }
  .pst-prev h3 { font-size: 18px; } .pst-fake > i { height: 22px; } .pst-fake > i + i { display: none; }
  .pst-pick { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
}

/* ---- étape 70 : au salon, rien ne dépasse de la case d'un joueur (pseudo long, invité, bouton du micro) ---- */
.lseat { grid-template-columns: minmax(0, 1fr); }
.lseat > * { max-width: 100%; min-width: 0; }
.lseat .lnm { display: flex; justify-content: center; min-width: 0; width: 100%; }
.lseat .lnm > b { min-width: 0; flex: 0 1 auto; }
.lseat small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lseat small .role { display: inline-block; max-width: 100%; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; }

/* ---- étape 71 : la fiche d'un joueur plus grande, son décor bien visible, la croix toujours devant ---- */
/* la croix passe devant tout (le verre du texte, le cadre, le décor) */
.modal > .x { z-index: 8; }
.has-pdecor > .x { background: rgba(250, 245, 233, .9); color: #3a3328; box-shadow: 0 4px 12px -6px rgba(0, 0, 0, .55); }
.has-pdecor > .x:hover { background: #fffaf0; }
/* plus grande ; avec un décor, de la place au-dessus du rat (la croix est dans le ciel du décor) et en dessous */
.modal.pmodal { width: min(600px, 100%); --pd-below: 96; }
.pmodal.has-pdecor { padding-top: 58px; }
.pmodal.has-pdecor .pm-head { padding-bottom: 44px; }
/* le verre du texte ne prend que la place du texte : le décor se voit autour */
.pmodal.has-pdecor .prof-id { justify-self: start; max-width: 100%; }
@media (max-width: 420px) { .pmodal.has-pdecor { padding-top: 54px; } .pmodal.has-pdecor .pm-head { padding-bottom: 28px; } }

/* ---- étape 72 : la Cheese (2e monnaie), l'emote du profil dans « Mon style » ---- */
.ratpill.cheesepill { width: 92px; background: linear-gradient(180deg, rgba(255, 214, 92, .16), rgba(255, 214, 92, .05)); box-shadow: inset 0 0 0 1px rgba(255, 214, 92, .42); color: #ffe48a; }
.ratpill.cheesepill:hover { background: linear-gradient(180deg, rgba(255, 214, 92, .27), rgba(255, 214, 92, .1)); }
.cheesepill .cheeseic { flex: none; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35)); }
@media (max-width: 640px) { .ratpill.cheesepill { display: none; } } /* (sur téléphone : dans le menu ☰) */
.mmenu button.mm-rats { width: 100%; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.mmenu .mm-cheese { background: rgba(255, 214, 92, .1); box-shadow: inset 0 0 0 1px rgba(255, 214, 92, .38); }
.mmenu .mm-cheese .cheeseic { grid-row: span 2; } .mmenu .mm-cheese b { color: #ffe48a; }
.ratpop .rp-soon { margin: 0; font-size: 13px; line-height: 1.35; color: var(--ink-2); }
.pst-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pst-emo { width: 52px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: rgba(255, 255, 255, .08); font-size: 26px; line-height: 1; }

/* ---- étape 73 : cadres soignés qui ne cachent jamais rien, page « Passe de combat » ---- */
/* le cadre et ses objets passent SOUS le contenu de la carte (texte, boutons, croix, rat) mais au-dessus de son fond et
   de son décor : la carte devient sa propre couche, le cadre y est tout en dessous */
.pst-framed, .pst-ft { isolation: isolate; }
.pframe { z-index: -1; }
.pfc { --cs: calc(30px * var(--k)); }
.pfc.tl { left: calc(var(--bw) / 2 - var(--cs) * .25); top: calc(var(--bw) / 2 - var(--cs) * .25); }
.pfc.tr { right: calc(var(--bw) / 2 - var(--cs) * .25); top: calc(var(--bw) / 2 - var(--cs) * .25); }
.pfc.bl { left: calc(var(--bw) / 2 - var(--cs) * .25); bottom: calc(var(--bw) / 2 - var(--cs) * .25); }
.pfc.br { right: calc(var(--bw) / 2 - var(--cs) * .25); bottom: calc(var(--bw) / 2 - var(--cs) * .25); }
.pfc-b { --cs: calc(36px * var(--k)); } .pfc-b.bl, .pfc-b.br { bottom: calc(var(--cs) * -.1); }
.pft { top: calc(var(--k) * -15px); }
.pf-royal .pft { top: calc(var(--k) * -16px); } .pf-fete .pft { top: calc(var(--k) * -9px); }
.pfc svg, .pft svg { filter: drop-shadow(0 1px 1.4px rgba(0, 0, 0, .38)); }
/* un peu plus de place au bord quand il y a un cadre (les objets restent dans la marge) */
.pst-prev.pst-framed { padding: 22px 24px 18px; }
@media (max-width: 640px) { .paper.pst-framed:not(.pst-prev):not(.modal) { padding: 24px 20px; } }
/* la page « Passe de combat » : un chemin de paliers qui se remplit jusqu'au coffre */
.pass-art .pass-prog { stroke-dasharray: 1; stroke-dashoffset: 1; animation: passFill 8s ease-in-out infinite; }
@keyframes passFill { 0% { stroke-dashoffset: 1; opacity: 1; } 60%, 88% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.pass-art .pass-tier { transform-box: fill-box; transform-origin: center; animation: passTier 8s ease-in-out infinite; animation-delay: calc(var(--i) * .95s); }
@keyframes passTier { 0%, 6%, 100% { transform: scale(1); } 3% { transform: scale(1.22); } }
.pass-art .pass-lid { transform-box: fill-box; transform-origin: 0% 100%; animation: passLid 8s ease-in-out infinite; }
@keyframes passLid { 0%, 55%, 100% { transform: none; } 66%, 86% { transform: rotate(-22deg); } }
.pass-art .pass-glow { animation: passGlow 8s ease-in-out infinite; opacity: 0; }
@keyframes passGlow { 0%, 58%, 100% { opacity: 0; } 68%, 86% { opacity: 1; } }
.pass-art .pass-spark { transform-box: fill-box; transform-origin: center; animation: passSpark 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * -.6s); }
@keyframes passSpark { 0%, 100% { opacity: .2; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .pass-art * { animation: none !important; } .pass-art .pass-prog { stroke-dashoffset: .35; } .pass-art .pass-glow { opacity: 1; } }

/* ---- étape 74 : le bouton « Ajouter une image » propre partout ---- */
.imgpick .ip-add { width: auto; height: 44px; padding: 0 16px 0 12px; border: 0; border-radius: 12px; display: inline-flex; align-items: center; gap: 8px; background: rgba(26, 22, 17, .06); box-shadow: inset 0 0 0 1.5px rgba(26, 22, 17, .22); color: var(--ink); white-space: nowrap; transition: background .2s, box-shadow .2s; }
.imgpick .ip-add:hover, .imgpick .ip-add:focus-visible { background: rgba(214, 176, 102, .16); box-shadow: inset 0 0 0 1.5px var(--brass); outline: none; }
.imgpick .ip-add svg { width: 18px; height: 18px; flex: none; }
.imgpick .ip-add span { font: 650 14px/1 var(--body); }
.imgpick .ip-add small { font: 500 12px/1 var(--body); color: var(--ink-2); opacity: 1; }
.imgpick .ip-add small::before { content: "· "; }
.imgpick .ip-add[hidden] { display: none; }
.filepick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.filepick .btn.disabled { opacity: .5; pointer-events: none; }
label.btn.filebtn, .filepick label.btn { cursor: pointer; }
.pz-back { justify-self: start; margin-bottom: 14px; } /* (étape 74 : Mon personnage → retour au profil) */

/* ---- étape 74 : la boutique (page des joueurs) ---- */
.shop2 { display: grid; gap: 26px; }
.shp-head .row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.shp-bal { display: flex; gap: 10px; }
.shp-bal span { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px 0 10px; border-radius: 999px; background: rgba(242, 213, 138, .1); box-shadow: inset 0 0 0 1px rgba(242, 213, 138, .35); color: #ffe3a3; }
.shp-bal b { font: 800 17px/1 var(--display); }
.shp { display: grid; gap: 14px; padding: 22px; border-radius: var(--r); background: linear-gradient(180deg, rgba(22, 58, 47, .72), rgba(16, 44, 35, .72)); box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -40px rgba(0, 0, 0, .9); }
.shp-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.shp-h h2 { margin: 0; font-size: 26px; }
.shp-when { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(0, 0, 0, .25); color: var(--chalk-2); font-size: 13.5px; }
.shp-when svg { width: 15px; height: 15px; } .shp-when b { color: #ffe3a3; font-weight: 700; } .shp-when.ev { background: rgba(195, 155, 255, .16); color: #e5d4ff; }
.shp-g { margin: 6px 0 0; font: 700 15px/1.2 var(--display); color: var(--chalk-2); }
.shp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 12px; }
.shp-it { position: relative; display: grid; justify-items: center; align-content: start; gap: 5px; padding: 12px 10px 12px; border-radius: 16px; background: var(--paper); color: var(--ink); text-align: center; box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 16px 30px -22px rgba(0, 0, 0, .9); min-width: 0; transition: transform .25s var(--ease-out); }
.shp-it:hover { transform: translateY(-3px); }
.shp-it::before { content: ""; position: absolute; left: 12px; right: 12px; top: 0; height: 4px; border-radius: 0 0 6px 6px; background: var(--rc, #b8a98a); }
.shp-it.r-rare { --rc: #3f8fd8; } .shp-it.r-epique { --rc: #9b59d0; } .shp-it.r-legendaire { --rc: #e2b84f; } .shp-it.r-mythique { --rc: linear-gradient(90deg, #ff6b9a, #ffd36e, #7fe0c4, #6aa8ff, #c39bff); } .shp-it.r-secret { --rc: #3a2a50; } .shp-it.r-evenement { --rc: linear-gradient(90deg, #e0533d, #f4bf3d, #2d78e3); }
.shp-it.own { opacity: .78; }
.shp-th { width: 100%; height: 112px; display: grid; place-items: center; border-radius: 12px; background: radial-gradient(100% 90% at 50% 20%, #fff8e8, #ece2cc); overflow: hidden; }
.shp-th > svg { width: auto; height: 104px; max-width: 100%; }
.shp-th .pst-sw, .shp-th .pst-ft, .shp-th .pst-dt { transform: scale(1.5); }
.shp-sw { width: 54px; height: 54px; border-radius: 50%; background: var(--c); box-shadow: inset 0 -6px 10px rgba(0, 0, 0, .2), 0 4px 10px -4px rgba(0, 0, 0, .4); }
.shp-emo { font-size: 50px; line-height: 1; }
.shp-pack { display: grid; grid-template-columns: repeat(2, 48px); gap: 4px; } .shp-pack > span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 10px; background: rgba(255, 255, 255, .6); overflow: hidden; } .shp-pack svg { height: 46px; width: auto; max-width: 46px; }
.shp-pack .pst-sw, .shp-pack .pst-ft, .shp-pack .pst-dt { transform: scale(.7); }
.shp-nm { font: 700 15px/1.2 var(--display); overflow-wrap: anywhere; } .shp-nm svg { width: 14px; height: 14px; vertical-align: -2px; }
.shp-rar { color: var(--ink-2); font-size: 12px; } .shp-save { color: #23784a; font-size: 12px; font-weight: 600; text-decoration: line-through; text-decoration-color: rgba(35, 120, 74, .5); }
.shp-pr { display: inline-flex; align-items: center; gap: 6px; } .shp-pr b { font: 800 18px/1 var(--display); }
.shp-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.shp-acts .btn { height: auto; min-height: 32px; padding: 6px 10px; }
.shp-new { position: absolute; top: 8px; left: 8px; z-index: 1; padding: 3px 8px; border-radius: 999px; background: #e0533d; color: #fff; font: 700 11px/1.2 var(--body); box-shadow: 0 3px 8px -3px rgba(0, 0, 0, .5); }
.shp-conf { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center; } .shp-conf .shp-th { height: 96px; } .shp-conf .shp-th > svg { height: 88px; } .shp-conf h3 { font-size: 24px; margin: 0 0 4px; }
.shp-tryf { display: grid; place-items: center; padding: 14px; border-radius: 16px; background: radial-gradient(100% 90% at 50% 20%, #fff8e8, #e6dcc4); cursor: pointer; }
.shp-tryc { margin: 4px 0; }
.mybuy-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 320px; overflow: auto; }
.mybuy-l li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, .06); }
.mybuy-l li small { grid-column: 1 / -1; } .mybuy-l li.off { opacity: .55; } .mybuy-l .num { display: inline-flex; align-items: center; gap: 5px; }
@media (max-width: 560px) { .shp { padding: 16px 12px; } .shp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .shp-th { height: 92px; } .shp-th > svg { height: 86px; } }
@media (prefers-reduced-motion: reduce) { .shp-it, .shp-it:hover { transition: none; transform: none; } }
/* la régie › Boutique */
.ash { display: grid; gap: 14px; }
.ash-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; position: sticky; top: calc(var(--nav-hz, var(--nav-h, 72px)) + 6px); z-index: 4; padding: 8px 10px; border-radius: 14px; background: rgba(16, 44, 35, .94); box-shadow: 0 10px 20px -14px rgba(0, 0, 0, .8); }
.ash-save { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ash-help { margin: 0; font-size: 13.5px; }
.ash-list { display: grid; gap: 12px; }
.ash-card { display: grid; gap: 12px; padding: 16px; }
.ash-card.off { opacity: .7; }
.ash-ch { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .ash-ch .ash-name { flex: 1 1 220px; font-weight: 700; }
.ash-mv { display: inline-flex; gap: 4px; margin-left: auto; }
.ash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.ash-grid label { display: grid; gap: 5px; font-size: 13px; color: var(--chalk-2); }
.ash-items { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ash-live { margin: 0; overflow-wrap: anywhere; }
.ash-subs { display: grid; gap: 6px; padding-left: 14px; border-left: 2px solid var(--line); }
.ash-sub { display: flex; gap: 6px; align-items: center; } .ash-sub .inp { flex: 1; min-width: 0; height: 38px; }
.modal.ash-pmodal { width: min(760px, 100%); max-height: calc(100dvh - 40px); grid-template-rows: auto auto auto auto minmax(0, 1fr) auto; }
.ash-pf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 220px); gap: 8px; }
.ash-pfb { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ash-plist { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; overflow: auto; min-height: 120px; max-height: 52vh; padding: 2px; }
.ash-pk { display: grid; grid-template-columns: auto 42px minmax(0, 1fr); gap: 8px; align-items: center; padding: 6px 8px; border-radius: 10px; background: rgba(26, 22, 17, .05); cursor: pointer; }
.ash-pk[hidden] { display: none; } .ash-pk.no { opacity: .45; cursor: default; }
.ash-pk:has(input:checked) { background: rgba(214, 176, 102, .22); box-shadow: inset 0 0 0 1.5px var(--brass); }
.ash-pth { width: 42px; height: 42px; display: grid; place-items: center; overflow: hidden; border-radius: 8px; background: #fff8e8; } .ash-pth > svg { height: 40px; width: auto; max-width: 40px; }
.ash-pth .shp-sw { width: 28px; height: 28px; } .ash-pth .shp-emo { font-size: 24px; } .ash-pth .pst-sw, .ash-pth .pst-ft, .ash-pth .pst-dt { transform: scale(.62); }
.ash-pn { display: grid; gap: 1px; min-width: 0; } .ash-pn b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ash-pn small { font-size: 11.5px; color: var(--ink-2); }
@media (max-width: 560px) { .ash-pf { grid-template-columns: minmax(0, 1fr); } .ash-top { position: static; } }
.shp-it .btn.ghost { --fg: var(--ink); background: transparent; box-shadow: inset 0 0 0 1px rgba(26, 22, 17, .25); }
.shp-it .btn[data-buy] { --bg: #1a1611; --fg: #f6e3a6; box-shadow: 0 3px 0 #6e5220, 0 8px 14px -8px rgba(0, 0, 0, .6); }
.shp-it .btn[data-buy]:disabled { --bg: rgba(35, 120, 74, .14); --fg: #23784a; box-shadow: none; opacity: 1; }

/* ---- étape 75 : la Boutique refaite (grandes catégories, bulles, boutiques en couleurs, animations douces, cadeaux) ---- */
.shop2 { gap: 18px; }
.shp-tabs { display: flex; gap: 10px; overflow-x: auto; padding: 6px 4px 10px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.shp-tab { flex: 1 0 128px; scroll-snap-align: start; position: relative; display: grid; justify-items: center; gap: 4px; padding: 12px 10px 10px; border-radius: 18px; border: 0; cursor: pointer; color: var(--chalk); font: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03)); box-shadow: inset 0 0 0 1px var(--line); transition: transform .25s var(--ease-out), background .25s, box-shadow .25s; }
.shp-tab:hover { transform: translateY(-3px); background: linear-gradient(180deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .05)); }
.shp-tab .shp-tico { width: 46px; height: 46px; display: grid; place-items: center; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .35)); transition: transform .3s var(--ease-out); }
.shp-tab .shp-tico svg { width: 100%; height: 100%; }
.shp-tab:hover .shp-tico { transform: rotate(-6deg) scale(1.08); }
.shp-tab b { font: 700 15px/1.1 var(--display); white-space: nowrap; }
.shp-tab small { font-size: 11.5px; color: var(--chalk-3); }
.shp-tab.shp-none:not(.on) { opacity: .75; } .shp-tab.shp-none:not(.on) small { color: #e5d4ff; } /* (étape 76 : « empty » était déjà une classe du site, qui rendait le texte clair) */
.shp-tab.on { background: linear-gradient(180deg, #fff6df, #ecdcb4); color: var(--ink); box-shadow: 0 4px 0 #a37a26, 0 16px 28px -14px rgba(0, 0, 0, .8), inset 0 0 0 2px #e2b84f; transform: translateY(-4px); }
.shp-tab.on b { color: #1a1611; } .shp-tab.on small { color: #5d5546; }
.shp-tab.on .shp-tico { animation: shpBob 2.8s ease-in-out infinite; }
.shp-tab.on::after { content: ""; position: absolute; left: 50%; bottom: -10px; width: 14px; height: 14px; background: #ecdcb4; transform: translateX(-50%) rotate(45deg); border-radius: 3px; box-shadow: 2px 2px 0 #a37a26; }
@keyframes shpBob { 50% { transform: translateY(-4px) rotate(4deg); } }
.shp-bubs { display: flex; gap: 8px; flex-wrap: wrap; min-height: 0; }
.shp-bubs:empty { display: none; }
.shp-bub { height: 34px; padding: 0 14px; border-radius: 999px; border: 0; cursor: pointer; font: 600 13.5px/1 var(--body); color: var(--chalk-2); background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px var(--line); transition: background .2s, color .2s, transform .2s; white-space: nowrap; }
.shp-bub:hover { color: var(--chalk); transform: translateY(-1px); }
.shp-bub.on { background: #f2d58a; color: #1a1611; box-shadow: 0 2px 0 #a37a26; }
.shp-body { display: grid; gap: 18px; }
/* chaque boutique a sa couleur et son ambiance */
.shp { position: relative; overflow: hidden; isolation: isolate; border: 0; }
.shp::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .07) 50%, transparent 60%); background-size: 260% 100%; animation: shpSheen 9s ease-in-out infinite; }
@keyframes shpSheen { 0%, 60% { background-position: 130% 0; } 100% { background-position: -130% 0; } }
.shp.k-always { background: radial-gradient(120% 90% at 0% 0%, rgba(242, 213, 138, .14), transparent 55%), linear-gradient(160deg, #1f5c45, #10362a); box-shadow: inset 0 0 0 1.5px rgba(226, 184, 79, .35), 0 30px 60px -40px rgba(0, 0, 0, .9); }
.shp.k-daily { background: radial-gradient(90% 80% at 100% 0%, rgba(255, 211, 110, .22), transparent 55%), linear-gradient(160deg, #6b3d14, #2e1a0c); box-shadow: inset 0 0 0 1.5px rgba(255, 196, 92, .4), 0 30px 60px -40px rgba(0, 0, 0, .9); }
.shp.k-rotate { background: radial-gradient(90% 80% at 100% 0%, rgba(201, 180, 255, .2), transparent 55%), linear-gradient(160deg, #3b2a6a, #1b1436); box-shadow: inset 0 0 0 1.5px rgba(201, 180, 255, .35), 0 30px 60px -40px rgba(0, 0, 0, .9); }
.shp.k-event { background: radial-gradient(90% 80% at 0% 0%, rgba(244, 191, 61, .22), transparent 55%), linear-gradient(160deg, #7a1f2a, #33101a); box-shadow: inset 0 0 0 1.5px rgba(244, 191, 61, .45), 0 30px 60px -40px rgba(0, 0, 0, .9); }
.shp-h { align-items: center; }
.shp-kico { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); flex: none; }
.shp-kico svg { width: 24px; height: 24px; }
.shp-h h2 { flex: 1; min-width: 0; color: #fff8e6; }
.shp-when.soon { background: rgba(224, 83, 61, .3); color: #ffd9cf; animation: shpBeat 1s ease-in-out infinite; }
@keyframes shpBeat { 50% { transform: scale(1.06); } }
/* les cases */
.shp-it { --rcs: #b8a98a; animation: shpIn .5s var(--ease-out) backwards; animation-delay: calc(var(--d, 0) * 45ms); overflow: hidden; isolation: isolate; }
.shp-it.r-rare { --rcs: #3f8fd8; } .shp-it.r-epique { --rcs: #9b59d0; } .shp-it.r-legendaire { --rcs: #e2b84f; } .shp-it.r-mythique { --rcs: #c39bff; } .shp-it.r-secret { --rcs: #5a4a78; } .shp-it.r-evenement { --rcs: #e0533d; }
.shp-it:not(.r-commun) { box-shadow: inset 0 0 0 2px var(--rcs), 0 16px 30px -22px rgba(0, 0, 0, .9); }
.shp-it:hover { transform: translateY(-5px); box-shadow: inset 0 0 0 2px var(--rcs), 0 0 22px -4px var(--rcs), 0 22px 36px -20px rgba(0, 0, 0, .9); }
.shp-it .shp-th { transition: transform .3s var(--ease-out); } .shp-it:hover .shp-th > svg { transform: scale(1.06) rotate(-2deg); transition: transform .3s var(--ease-out); }
@keyframes shpIn { from { opacity: 0; transform: translateY(14px) scale(.96); } }
.shp-it.shine::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .55) 50%, transparent 62%); background-size: 250% 100%; animation: shpShine 4.5s ease-in-out infinite; mix-blend-mode: soft-light; }
@keyframes shpShine { 0%, 55% { background-position: 140% 0; } 100% { background-position: -140% 0; } }
.shp-it.own { opacity: 1; } .shp-it.own .shp-th { filter: saturate(.85); }
.shp-mine { position: absolute; top: 8px; right: 8px; z-index: 3; display: inline-flex; align-items: center; gap: 3px; padding: 3px 8px; border-radius: 999px; background: #23784a; color: #fff; font: 700 11px/1.2 var(--body); }
.shp-mine svg { width: 11px; height: 11px; }
.shp-new { z-index: 3; animation: shpNew 2.4s ease-in-out infinite; }
@keyframes shpNew { 50% { transform: scale(1.08) rotate(-3deg); } }
.shp-it .btn[data-buy] svg { flex: none; }
/* rien à vendre ici */
.shp-empty { display: grid; justify-items: center; gap: 8px; padding: 40px 20px; border-radius: var(--r); text-align: center; background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); box-shadow: inset 0 0 0 1px var(--line); }
.shp-empty b { font: 800 24px/1.1 var(--display); color: #fff8e6; } .shp-empty span:last-child { color: var(--chalk-2); max-width: 46ch; }
.shp-eico { width: 84px; height: 84px; display: block; animation: shpBob 3.2s ease-in-out infinite; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .4)); } .shp-eico svg { width: 100%; height: 100%; }
/* acheter : pour moi ou pour un ami */
.shp-for { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.shp-for button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 8px 10px; border-radius: 12px; border: 0; cursor: pointer; font: 650 14.5px/1.2 var(--body); color: var(--ink); background: rgba(26, 22, 17, .05); box-shadow: inset 0 0 0 1.5px rgba(26, 22, 17, .16); transition: background .2s, box-shadow .2s; }
.shp-for button svg { width: 18px; height: 18px; flex: none; }
.shp-for button small { font-size: 11px; color: var(--ink-2); }
.shp-for button.on { background: rgba(214, 176, 102, .22); box-shadow: inset 0 0 0 2px var(--brass); }
.shp-for button:disabled { opacity: .5; cursor: default; }
.shp-gift { display: grid; gap: 10px; }
.shp-gift[hidden] { display: none; }
.shp-frs { display: grid; gap: 6px; max-height: 220px; overflow: auto; padding: 2px; }
.shp-fr { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 12px; background: rgba(26, 22, 17, .05); cursor: pointer; }
.shp-fr b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shp-fr small { color: var(--ink-2); font-size: 12px; }
.shp-fr.no { opacity: .5; cursor: default; }
.shp-fr:has(input:checked) { background: rgba(214, 176, 102, .22); box-shadow: inset 0 0 0 1.5px var(--brass); }
/* l'effet de fête */
.shp-burst { position: absolute; left: 50%; top: 40%; z-index: 5; width: 0; height: 0; pointer-events: none; }
.shp-burst i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 2px; background: var(--c); transform: rotate(var(--a)) translateY(0); animation: shpBurst 1.1s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes shpBurst { 70% { opacity: 1; } to { transform: rotate(var(--a)) translateY(-90px) rotate(200deg); opacity: 0; } }
/* les cadeaux reçus */
.shp-gifthead { position: relative; display: flex; align-items: center; gap: 14px; }
.shp-gico { width: 64px; height: 64px; flex: none; animation: shpBob 2.4s ease-in-out infinite; } .shp-gico svg { width: 100%; height: 100%; }
.shp-gifthead h3 { margin: 2px 0 0; }
.shp-gifts { display: grid; gap: 8px; max-height: 300px; overflow: auto; }
.shp-gl { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px; border-radius: 12px; background: rgba(26, 22, 17, .05); }
.shp-gl .shp-th { height: 64px; } .shp-gl .shp-th > svg { height: 60px; } .shp-gl p { margin: 4px 0 0; font-style: italic; }
.ash-ico { width: 34px; height: 34px; flex: none; display: grid; place-items: center; } .ash-ico svg { width: 100%; height: 100%; }
.ash-icsel { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--chalk-2); } .ash-icsel .inp { height: 38px; width: auto; }
.ash-pl { display: grid; gap: 5px; font-size: 13px; color: var(--chalk-2); max-width: 360px; }
@media (max-width: 640px) {
  .shp-tabs { margin: 0 -16px; padding: 6px 16px 12px; }
  .shp-tab { flex: 0 0 104px; padding: 10px 6px 8px; } .shp-tab .shp-tico { width: 38px; height: 38px; } .shp-tab b { font-size: 13.5px; }
  .shp-bubs { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; }
  .shp-for { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .shp::before, .shp-it, .shp-it.shine::after, .shp-tab.on .shp-tico, .shp-when.soon, .shp-new, .shp-eico, .shp-gico { animation: none !important; } .shp-it:hover, .shp-tab:hover, .shp-tab.on { transform: none; } }
.shp-acts .shp-giftb { padding-inline: 8px; } .shp-acts .shp-giftb svg { width: 16px; height: 16px; } /* (étape 76) */

/* ---- étape 77 : trois niveaux dans la Boutique (petites bulles) et dans la régie ---- */
.shp-bubs3 { margin-top: -8px; padding-left: 14px; border-left: 2px solid rgba(242, 213, 138, .35); }
.shp-bub.sm { height: 28px; padding: 0 11px; font-size: 12.5px; background: rgba(255, 255, 255, .05); }
.shp-bub.sm.on { background: #fff6df; color: #1a1611; box-shadow: 0 2px 0 #a37a26; }
.ash-subb { display: grid; gap: 6px; }
.ash-tiny { display: grid; gap: 5px; margin-left: 18px; padding-left: 10px; border-left: 2px dashed var(--line); }
.ash-sub.small .inp { height: 34px; font-size: 13.5px; }
.ash-tadd { justify-self: start; }
@media (max-width: 640px) { .shp-bubs3 { margin-left: -16px; margin-right: -16px; padding-left: 16px; border-left: 0; } }

/* ---- étape 79 : l'objet en grand, les prix par rareté, les Récompenses ---- */
.modal.izmodal { width: min(720px, 100%); }
.iz { --rcs: #b8a98a; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 22px; align-items: center; }
.iz.r-rare { --rcs: #3f8fd8; } .iz.r-epique { --rcs: #9b59d0; } .iz.r-legendaire { --rcs: #e2b84f; } .iz.r-mythique { --rcs: #c39bff; } .iz.r-secret { --rcs: #5a4a78; } .iz.r-evenement { --rcs: #e0533d; }
.iz-stage { position: relative; display: grid; gap: 10px; justify-items: center; animation: izIn .45s var(--ease-out) backwards; }
.iz-fig { position: relative; display: grid; place-items: center; width: 100%; min-height: 300px; padding: 14px; border-radius: 20px; cursor: pointer; background: radial-gradient(70% 55% at 50% 38%, color-mix(in srgb, var(--rcs) 30%, #fff8e8), #e6dcc4 75%); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--rcs) 55%, transparent), 0 18px 30px -20px rgba(0, 0, 0, .7); overflow: hidden; }
.iz-fig::after { content: ""; position: absolute; left: 50%; bottom: 14px; width: 60%; height: 16px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(26, 22, 17, .28), transparent); }
.iz-fig .pfull { position: relative; z-index: 1; filter: drop-shadow(0 10px 14px rgba(26, 22, 17, .3)); }
.iz-hop .pfull { animation: izHop .6s var(--ease-out); }
@keyframes izHop { 40% { transform: translateY(-14px) rotate(-3deg); } }
@keyframes izIn { from { opacity: 0; transform: scale(.9) translateY(10px); } }
.iz-card { width: 100%; margin: 0; }
.iz-pack { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.iz-pack > span { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 12px; background: rgba(26, 22, 17, .06); overflow: hidden; }
.iz-pack svg { height: 48px; width: auto; max-width: 48px; } .iz-pack .pst-sw, .iz-pack .pst-ft, .iz-pack .pst-dt { transform: scale(.75); }
.iz-info { display: grid; gap: 8px; justify-items: start; align-content: center; }
.iz-info h3 { margin: 0; font-size: 30px; line-height: 1.05; overflow-wrap: anywhere; }
.iz-pr { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; } .iz-pr b { font: 800 30px/1 var(--display); }
.iz-free { font: 700 18px/1.2 var(--display); color: #23784a; }
.iz-rew { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(195, 155, 255, .2); color: #5b3a9a; font: 700 14px/1 var(--body); }
.iz-mine { position: static; }
.iz-acts { justify-content: flex-end; }
@media (max-width: 600px) { .iz { grid-template-columns: minmax(0, 1fr); gap: 14px; } .iz-fig { min-height: 220px; } .iz-fig .pfull { height: 220px !important; width: auto !important; } .iz-info h3 { font-size: 24px; } .iz-acts .btn { flex: 1; } }
@media (prefers-reduced-motion: reduce) { .iz-stage, .iz-hop .pfull { animation: none; } }
/* la régie : le prix qui vient de la rareté, le tableau des prix, les récompenses */
.apz-price { font-size: 13px; color: var(--chalk-2); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; } .apz-price svg { flex: none; }
.apz-th { cursor: zoom-in; }
.ash-rp td { vertical-align: middle; } .ash-rp .inp { height: 38px; max-width: 150px; }
.ash-rewl { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.ash-rw { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; }
.ash-rw .ash-pth { width: 52px; height: 52px; border: 0; cursor: zoom-in; } .ash-rw .ash-pth > svg { height: 48px; max-width: 48px; }
/* Mon style : une Récompense pas encore obtenue */
.pst-it.locked { opacity: .55; cursor: not-allowed; } .pst-it.locked .pz-lock { font-size: 10.5px; }
.iz .rar { font-size: 12px; padding: 4px 10px; color: #3a3328; background: rgba(26, 22, 17, .08); }
.iz .rar.r-rare { color: #1f5fa8; background: rgba(63, 143, 216, .16); } .iz .rar.r-epique { color: #6b3aa8; background: rgba(155, 89, 208, .16); } .iz .rar.r-legendaire { color: #8a6a1e; background: rgba(226, 184, 79, .25); }
.iz .rar.r-mythique { color: #a8306a; background: rgba(255, 107, 154, .16); } .iz .rar.r-secret { color: #f0e6ff; background: #3a2a50; } .iz .rar.r-evenement { color: #a8301f; background: rgba(224, 83, 61, .16); }

/* ---- étape 81 : les cadeaux dans les messages privés, « Mes achats / Cadeaux reçus » ---- */
.cp-gift { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 10px; align-items: center; margin: 2px 0 4px; padding: 8px 10px; border-radius: 14px; background: linear-gradient(135deg, rgba(61, 165, 122, .16), rgba(242, 213, 138, .22)); box-shadow: inset 0 0 0 1.5px rgba(214, 176, 102, .55); }
.cp-gth { width: 54px; height: 54px; display: grid; place-items: center; overflow: hidden; border-radius: 12px; background: #fff8e8; }
.cp-gth > svg { height: 50px; width: auto; max-width: 50px; } .cp-gth .shp-sw { width: 34px; height: 34px; } .cp-gth .shp-emo { font-size: 30px; } .cp-gth .pst-sw, .cp-gth .pst-ft, .cp-gth .pst-dt { transform: scale(.72); }
.cp-gtx { display: grid; gap: 2px; min-width: 0; } .cp-gtx small { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 12px; opacity: .85; } .cp-gtx > b { overflow-wrap: anywhere; } .cp-gtx p { margin: 2px 0 0; font-style: italic; overflow-wrap: anywhere; }
.mybuy-l li { grid-template-columns: auto minmax(0, 1fr) auto; } .mybuy-l li small { grid-column: 2 / -1; }
.mybuy-k { align-self: start; padding: 2px 8px; border-radius: 999px; font: 700 11px/1.4 var(--body); background: rgba(255, 255, 255, .1); color: var(--chalk-2); }
.mybuy-l li.gave .mybuy-k { background: rgba(195, 155, 255, .2); color: #e5d4ff; } .mybuy-l li.got .mybuy-k { background: rgba(61, 165, 122, .25); color: #b6f0d4; }

/* ---- étape 83 : les cases de la Boutique centrées et à la bonne taille, quel que soit leur nombre ---- */
.shp-grid { grid-template-columns: repeat(auto-fit, minmax(168px, 200px)); justify-content: center; }
.shp-grid.few { grid-template-columns: repeat(auto-fit, minmax(200px, 250px)); gap: 16px; }
.shp-grid.few .shp-th { height: 150px; } .shp-grid.few .shp-th > svg { height: 140px; }
.shp-grid.few .shp-nm { font-size: 17px; } .shp-grid.few .shp-pr b { font-size: 21px; }
@media (max-width: 560px) { .shp-grid, .shp-grid.few { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; gap: 8px; } .shp-grid.few .shp-th { height: 110px; } .shp-grid.few .shp-th > svg { height: 100px; } }
@media (max-width: 560px) { .shp-grid:has(> .shp-it:only-child) { grid-template-columns: minmax(0, 230px); justify-content: center; } }
/* (étape 83) en rangées souples : la dernière rangée est centrée elle aussi */
@media (min-width: 561px) {
  .shp-grid, .shp-grid.few { display: flex; flex-wrap: wrap; justify-content: center; }
  .shp-grid > .shp-it { flex: 0 1 204px; min-width: 170px; }
  .shp-grid.few > .shp-it { flex-basis: 236px; }
}

/* ---- étape 84 : jusqu'à 6 objets sur une seule ligne ; « Acheter » en grand sur sa ligne ---- */
@media (min-width: 561px) {
  .shp-grid.row1 { flex-wrap: nowrap; }
  .shp-grid.row1 > .shp-it { flex: 1 1 0; min-width: 0; max-width: 204px; }
  .shp-grid.row1.few > .shp-it { max-width: 236px; }
}
.shp-acts .shp-buyb { flex: 1 0 100%; }
.shp-acts .btn { white-space: nowrap; }
.shp-it.own .shp-acts .shp-giftb { order: -1; flex: 1 0 100%; justify-content: center; } /* (étape 84 : objet déjà à moi : « Offrir » en grand) */

/* ---- étape 85 : dans la Boutique, l'objet sur une souris toute simple ; « Essayer » le met sur ma souris ---- */
.iz-slot { width: 100%; display: grid; }
.iz-who { font-size: 12.5px; text-align: center; }

/* ---- étape 87 : la régie, filtrer les objets par rareté ---- */
.apz-rbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; }
.apz-rbar > label { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.apz-rbar > label svg { width: 16px; height: 16px; }
.apz-rbar .inp { height: 38px; width: auto; min-width: 190px; }
.apz-cats .pz-cat small { margin-left: 4px; opacity: .7; font-size: 11.5px; }
.apz-cn { font-size: 12px; font-weight: 700; color: var(--chalk-2); }
.apz-none { grid-column: 1 / -1; }

/* ======== étapes 88 et 89 : les animaux de compagnie ======== */
/* la rareté VIP : de l'or, la plus brillante du site */
.rar.r-vip { color: #2a1d06; background: linear-gradient(90deg, #f6d36a, #fff2b8, #e2a92c); box-shadow: 0 0 10px rgba(246, 211, 106, .55); font-weight: 800; }
.iz .rar.r-vip { color: #4a3005; background: linear-gradient(90deg, #f6d36a, #fff2b8, #e2a92c); }
.pz-it.r-vip { position: relative; overflow: hidden; box-shadow: inset 0 0 0 2px #e2a92c, 0 0 18px rgba(246, 211, 106, .55); background: linear-gradient(180deg, rgba(255, 226, 120, .3), rgba(255, 245, 210, .1)); }
.pz-it.r-vip .pz-rar { background: linear-gradient(90deg, #f6d36a, #e2a92c); color: #3a2706; }
.shp-it.r-vip { --rc: linear-gradient(90deg, #e2a92c, #fff2b8, #f6d36a, #e2a92c); --rcs: #e2a92c; }
.iz.r-vip { --rcs: #e2a92c; }

/* (étape 89) le compagnon à côté de la souris : la boîte s'élargit du côté de l'animal (il ne sort plus du cadre), la
   souris se pousse de l'autre côté ; tout est en proportion de la souris (--h) */
.pfull.has-pet { position: relative; }
.pfull.has-pet > svg.rgperso { position: relative; z-index: 1; }
.pfpet { position: absolute; z-index: 2; pointer-events: none; width: calc(var(--h) * var(--pw, .4)); height: calc(var(--h) * var(--pw, .4)); }
.pfpet > svg { width: 100%; height: 100%; display: block; overflow: visible; }
/* en partie (pet-sm) : plus petit, contre ses pieds, sans élargir sa place */
/* les mouvements de la boîte, toujours autour de ses pieds (plus de demi-tour ni de toupie) */
.pfull.anim .pfpet.pp-bouchon:not(.ps-sleep):not(.ps-egg) { transform-origin: 50% 96%; animation: petWaddle 3.2s ease-in-out infinite; }
.pfull.anim .pfpet.pp-ducat:not(.ps-sleep):not(.ps-egg) { animation: petHover 7s ease-in-out infinite; }
@keyframes petWaddle { 0%, 100% { transform: rotate(0) translateX(0); } 20% { transform: rotate(-3deg) translateX(-2%); } 40% { transform: rotate(2deg) translateX(1%); } 60% { transform: rotate(-2deg) translateX(-1%); } 80% { transform: rotate(3deg) translateX(2%); } }
@keyframes petHover { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(5%, -7%); } 50% { transform: translate(0, -2%); } 75% { transform: translate(-5%, -8%); } }
@keyframes petPerch { 0%, 72%, 100% { transform: translateY(0); } 78% { transform: translateY(-26%); } 86% { transform: translateY(-34%); } 93% { transform: translateY(-4%); } 96% { transform: translateY(0); } }

/* les mouvements dans les dessins (à côté de la souris, Mes animaux, Boutique) : chaque morceau tourne autour de son
   point d'appui (donné dans le dessin), jamais autour du coin de l'image */
.rgpet .pt-eye, .rgpet .pt-head, .rgpet .pt-tail, .rgpet .pt-bell, .rgpet .pt-wing, .rgpet .pt-egg, .rgpet .pt-grass { transform-box: view-box; }
.rgpet .pt-eye { animation: ppBlink 4.6s ease-in-out infinite; }
.rgpet .pt-body { transform-box: fill-box; transform-origin: 50% 100%; animation: petBreath 3.2s ease-in-out infinite; }
.rgpet .pt-zz { animation: petZz 2.6s ease-in-out infinite; }
.rgpet .pt-spark { transform-box: fill-box; transform-origin: center; animation: petSpark 2.2s ease-in-out infinite; } .rgpet .pt-spark.s2 { animation-delay: -.8s; } .rgpet .pt-spark.s3 { animation-delay: -1.5s; } .rgpet .pt-spark.s4 { animation-delay: -.4s; }
.rgpet .pt-glow { transform-box: fill-box; transform-origin: center; animation: petGlow 3s ease-in-out infinite; }
.pet-meuh:not(.st-sleep) .pt-head { animation: petGraze 7s ease-in-out infinite; }
.pet-meuh .pt-tail { animation: petSwish 2.6s ease-in-out infinite; } .pet-meuh:not(.st-sleep) .pt-bell { animation: petSwing 2.2s ease-in-out infinite; } .pet-meuh .pt-grass { animation: petSwish 3.8s ease-in-out infinite; }
.pet-chipie:not(.st-sleep) .pt-head { animation: petTilt 4s ease-in-out infinite; } .pet-chipie:not(.st-sleep) .pt-hop { animation: petHop 3s ease-in-out infinite; }
.pet-chipie .pt-wing { animation: petFlapS 3s ease-in-out infinite; } .pet-chipie .pt-tail { animation: petSwish 3.4s ease-in-out infinite; }
.pet-ducat:not(.st-sleep) .pt-fly { animation: petBob 2.6s ease-in-out infinite; }
.pet-ducat:not(.st-sleep) .pt-wl { animation: petFlapL .8s ease-in-out infinite alternate; } .pet-ducat:not(.st-sleep) .pt-wr { animation: petFlapR .8s ease-in-out infinite alternate; }
.pet-ducat .pt-tail { animation: petSwish 2.4s ease-in-out infinite; }
.rgpet.st-egg .pt-egg { animation: petWobble 3s ease-in-out infinite; }
@keyframes petBreath { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.03); } }
@keyframes petCurl { 0%, 84%, 100% { transform: none; } 88%, 93% { transform: scale(1.05, .9); } }
@keyframes petGraze { 0%, 35%, 100% { transform: rotate(0); } 45%, 62% { transform: rotate(-16deg); } 50%, 58% { transform: rotate(-13deg); } }
@keyframes petSwish { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(9deg); } }
@keyframes petSwing { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(14deg); } }
@keyframes petTilt { 0%, 40%, 100% { transform: rotate(0); } 50%, 65% { transform: rotate(-12deg); } 75% { transform: rotate(6deg); } }
@keyframes petHop { 0%, 60%, 100% { transform: translateY(0); } 66% { transform: translateY(-6px); } 72% { transform: translateY(0); } 78% { transform: translateY(-4px); } 84% { transform: translateY(0); } }
@keyframes petFlapS { 0%, 70%, 100% { transform: rotate(0); } 76%, 88% { transform: rotate(-20deg); } 82%, 94% { transform: rotate(4deg); } }
@keyframes petCoin { 0%, 55%, 100% { opacity: 0; } 62%, 88% { opacity: 1; } }
@keyframes petBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes petFlapL { from { transform: rotate(-8deg); } to { transform: rotate(14deg); } }
@keyframes petFlapR { from { transform: rotate(8deg); } to { transform: rotate(-14deg); } }
@keyframes petWobble { 0%, 60%, 100% { transform: rotate(0); } 66% { transform: rotate(-5deg); } 72% { transform: rotate(5deg); } 78% { transform: rotate(-3deg); } 84% { transform: rotate(2deg); } }
@keyframes petZz { 0% { opacity: 0; transform: translate(0, 4px); } 30%, 70% { opacity: 1; } 100% { opacity: 0; transform: translate(4px, -8px); } }
@keyframes petSpark { 0%, 100% { transform: scale(.4); opacity: .3; } 50% { transform: scale(1.15); opacity: 1; } }
@keyframes petGlow { 0%, 100% { opacity: .7; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
/* les objets du sac à dos */
.rgpetit { overflow: visible; }
.rgpetit .pt-heat { animation: petHeat 2s ease-in-out infinite; }
.rgpetit .pt-ring { transform-box: view-box; animation: petRing 2.4s ease-in-out infinite; } .rgpetit .pt-ringl { animation: petHeat 2.4s ease-in-out infinite; }
@keyframes petHeat { 0%, 100% { opacity: .35; transform: translateY(2px); } 50% { opacity: 1; transform: translateY(-2px); } }
@keyframes petRing { 0%, 60%, 100% { transform: rotate(0); } 66%, 78% { transform: rotate(-14deg); } 72%, 84% { transform: rotate(14deg); } }

/* la Boutique : les animaux et leurs objets dans les cases */
.shp-pet, .shp-pit { display: grid; place-items: center; width: 100%; height: 100%; }
.shp-pet > svg { height: 104px; width: 104px; } .shp-pit > svg { height: 78px; width: 78px; }
.shp-conf .shp-pet > svg { height: 86px; width: 86px; } .shp-conf .shp-pit > svg { height: 66px; width: 66px; }
.ash-pth .shp-pet > svg, .ash-pth .shp-pit > svg { height: 38px; width: 38px; }
.cp-gth .shp-pet > svg, .cp-gth .shp-pit > svg { height: 44px; width: 44px; }
.shp-qty { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .shp-qty label { font-weight: 700; } .shp-qty .inp { width: 74px; height: 36px; text-align: center; } .shp-tot { margin-left: auto; }
.iz-forms { display: flex; align-items: flex-end; justify-content: center; gap: 4px; width: 100%; min-height: 230px; padding: 14px 8px; border-radius: 20px; background: radial-gradient(70% 55% at 50% 38%, color-mix(in srgb, var(--rcs) 26%, #fff8e8), #e6dcc4 75%); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--rcs) 55%, transparent); }
.iz-form { display: grid; justify-items: center; gap: 4px; animation: izIn .45s var(--ease-out) backwards; animation-delay: calc(var(--i) * .12s); }
.iz-form > span { display: block; } .iz-form:nth-child(1) svg { width: 76px; height: 76px; } .iz-form:nth-child(3) svg { width: 100px; height: 100px; } .iz-form:nth-child(5) svg { width: 136px; height: 136px; }
.iz-form small { font-weight: 700; color: #5a4a30; } .iz-arr { font-style: normal; font-size: 26px; color: #8a7a5a; align-self: center; }
.iz-petit svg { width: 170px; height: 170px; } .iz-pw { margin: 0; font-size: 14.5px; line-height: 1.45; } .iz-pw svg { vertical-align: -3px; }

/* la barre du haut : les rats et la Cheese dans une seule pilule (sur deux lignes), pour que tout tienne */
/* le sac à dos : pas de chiffre, sauf quand on m'a offert quelque chose (il disparaît en l'ouvrant) */
.bagbtn { position: relative; }
.bagbtn .bagn { position: absolute; top: -3px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 99px; background: #e0533d; color: #fff; font: 800 10.5px/18px var(--body); text-align: center; box-shadow: 0 0 0 2px #0d3a2a; animation: walletPop .6s var(--ease-out); }
@media (max-width: 640px) { .bagbtn { display: none; } }
.mm-bag svg { width: 26px; height: 26px; }
.bagmodal { width: min(560px, 100%); }
.bagmodal .eyebrow svg { width: 16px; height: 16px; vertical-align: -3px; }
.bag-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bag-it { display: grid; justify-items: center; gap: 5px; text-align: center; padding: 14px 10px 12px; border-radius: 16px; background: linear-gradient(180deg, #fffaf0, #f1e6cf); box-shadow: inset 0 0 0 1px rgba(26, 22, 17, .1), 0 6px 14px -10px rgba(0, 0, 0, .5); color: #2a1d14; }
.bag-it.zero { opacity: .62; }
.bag-ic { position: relative; display: grid; place-items: center; width: 72px; height: 72px; } .bag-ic svg { width: 66px; height: 66px; }
.bag-n { position: absolute; right: -8px; bottom: 0; padding: 2px 8px; border-radius: 99px; background: #1a1611; color: #f2d58a; font-size: 12.5px; }
.bag-it small { font-size: 12.5px; line-height: 1.35; color: #5a4a3a; }
.pet-pick { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.pet-pk { display: grid; justify-items: center; gap: 2px; width: 124px; padding: 10px; border: 0; border-radius: 16px; background: linear-gradient(180deg, #fffaf0, #efe3c9); box-shadow: inset 0 0 0 1px rgba(26, 22, 17, .1); cursor: pointer; font: inherit; color: #2a1d14; }
.pet-pk:hover { box-shadow: inset 0 0 0 2px #e9b44c; } .pet-pk svg { width: 72px; height: 72px; } .pet-pk small { color: #6a5a48; }
.pet-food { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.pet-food .bag-it .btn { width: 100%; }

/* la page « Mes animaux » (étape 89 : sur du carton crème, tout bien lisible ; plus de reflet raté) */
.pets-hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.pets-hb { display: flex; gap: 8px; flex-wrap: wrap; } .pets-hb svg { width: 17px; height: 17px; }
.pet-me { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 22px; padding: 18px 24px 12px; margin-bottom: 18px; color: #2a1d14; }
.pet-me h3 { margin: 4px 0 6px; font-size: 28px; color: #1a1611; } .pet-me p { color: #5a4a3a; } .pet-mefig { display: grid; place-items: end center; }
.pet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.pet-card { --rcs: #b8a98a; display: grid; gap: 12px; padding: 14px; color: #2a1d14; border-radius: 22px; animation: izIn .45s var(--ease-out) backwards; }
.pet-card.r-epique { --rcs: #9b59d0; } .pet-card.r-mythique { --rcs: #c39bff; } .pet-card.r-vip { --rcs: #e2a92c; }
.pet-card.comp { box-shadow: 0 0 0 3px #e9b44c, 0 14px 30px -18px rgba(0, 0, 0, .7); }
.pet-card.fresh { animation: petFresh 1.2s var(--ease-out); } @keyframes petFresh { 0% { transform: scale(.85); box-shadow: 0 0 0 0 #ffe48a; } 50% { transform: scale(1.03); box-shadow: 0 0 0 10px rgba(255, 228, 138, .5); } }
.pet-hab { position: relative; display: grid; place-items: center; height: 190px; border-radius: 18px; overflow: hidden; background: radial-gradient(60% 55% at 50% 42%, color-mix(in srgb, var(--rcs) 30%, #fffaf0), color-mix(in srgb, var(--rcs) 12%, #e9dcc0) 80%); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--rcs) 45%, transparent), inset 0 -26px 30px -20px rgba(80, 60, 30, .25); }
.pet-hab::before { content: ""; position: absolute; left: 10%; right: 10%; bottom: 14px; height: 18px; border-radius: 50%; background: radial-gradient(closest-side, rgba(80, 60, 30, .22), transparent); }
.pet-card.r-vip .pet-hab { background: radial-gradient(60% 55% at 50% 42%, #fff6cf, #f3d98a 70%, #d9a83a); }
.pet-fig { position: relative; display: grid; place-items: center; width: 170px; height: 170px; }
.pet-fig > svg { width: 166px; height: 166px; } .pet-fig.st-egg > svg { width: 130px; height: 130px; } .pet-fig.st-baby > svg, .pet-fig.st-sleep > svg { width: 140px; height: 140px; }
.pet-chip { position: absolute; top: 10px; left: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 99px; background: rgba(255, 252, 244, .92); color: #3a2a1a; font: 700 12px/1.2 var(--body); box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
.pet-eq { position: absolute; top: 10px; right: 10px; z-index: 2; padding: 4px 10px; border-radius: 99px; font: 800 12px/1.2 var(--body); }
.pet-eq.on { background: #2f8a5a; color: #fff; } .pet-eq.off { background: rgba(255, 252, 244, .92); color: #6a5a48; }
.pet-info { display: grid; gap: 8px; min-width: 0; }
.pet-hd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .pet-nm { font: 800 22px/1.1 var(--display); color: #1a1611; }
.pet-what { color: #6a5a48; font-size: 13px; }
.pet-st { margin: 0; font-size: 14.5px; color: #2a1d14; } .pet-st b { color: #1a1611; }
.pet-bar { height: 11px; border-radius: 99px; background: rgba(26, 22, 17, .12); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .15); } .pet-bar > i { display: block; height: 100%; width: calc(var(--v) * 100%); border-radius: inherit; background: linear-gradient(90deg, #e9b44c, #f6d36a); transition: width 1.1s var(--ease-out); }
.pet-bar.xp > i { background: linear-gradient(90deg, #2f9a6a, #8ad6a8); } .pet-bar.sleep > i { background: linear-gradient(90deg, #5a6fb0, #9aa8e0); }
.pet-acts { display: flex; gap: 8px; flex-wrap: wrap; } .pet-acts .btn { display: inline-flex; align-items: center; gap: 6px; } .pet-uic svg { width: 22px; height: 22px; display: block; } .pet-acts small { opacity: .8; }
.pet-req { display: grid; gap: 6px; padding: 10px 12px; border-radius: 14px; background: rgba(90, 111, 176, .1); color: #2a1d14; }
.pet-req > b { font-size: 13px; } .pet-rq { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 13px; }
.pet-rq i { width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; background: rgba(26, 22, 17, .12); font-style: normal; font-size: 11px; } .pet-rq.ok i { background: #2f8a5a; color: #fff; } .pet-rq.ok span { color: #2f6a4a; }
.pet-rq b { font-variant-numeric: tabular-nums; }
.pet-note { margin: 0; font-size: 12.5px; color: #6a5a48; }
.pet-pw { display: grid; gap: 6px; padding: 10px 12px; border-radius: 14px; background: rgba(233, 180, 76, .16); font-size: 13px; line-height: 1.4; color: #3a2a1a; } .pet-pw svg { vertical-align: -3px; }
.pet-harv { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; } .pet-full { color: #a8301f; font-weight: 700; }
.pet-cp { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding-top: 4px; border-top: 1px dashed rgba(26, 22, 17, .16); }
.pet-cp > span { font-weight: 800; font-size: 13.5px; } .pet-cp > span.on { color: #2f8a5a; } .pet-cp > span.off { color: #8a7a68; }
.pet-cp svg, .pets-hb svg, .pet-acts svg { width: 16px; height: 16px; }
.pet-empty { color: #e6dcc8; } .pet-empty .pet-eggs { display: flex; gap: 8px; justify-content: center; } .pet-empty .pet-eggs svg { width: 70px; height: 70px; }
.pet-mini { display: inline-grid; place-items: center; width: 30px; height: 30px; flex: none; } .pet-mini svg { width: 30px; height: 30px; }
@media (max-width: 560px) { .pet-me { grid-template-columns: minmax(0, 1fr); text-align: center; } .pet-hab { height: 160px; } .pet-fig, .pet-fig > svg { width: 140px; height: 140px; } .bag-grid { grid-template-columns: minmax(0, 1fr); } }
.pet-heart, .pet-xpf { position: absolute; left: 50%; top: 30%; pointer-events: none; z-index: 3; animation: petFloat 1.6s ease-out forwards; }
.pet-heart { color: #e0533d; font-size: 28px; margin-left: -12px; } .pet-xpf { margin-left: 20px; font: 800 16px/1 var(--display); color: #23784a; animation-delay: .15s; opacity: 0; }
@keyframes petFloat { 0% { opacity: 0; transform: translateY(8px) scale(.6); } 25% { opacity: 1; transform: translateY(0) scale(1.1); } 100% { opacity: 0; transform: translateY(-50px) scale(1); } }
.pet-eat > svg { animation: petChomp .5s ease-in-out 3; } @keyframes petChomp { 50% { transform: scale(1.06, .94); } }
.pet-coin { position: fixed; left: 0; top: 0; z-index: 120; pointer-events: none; margin: -11px 0 0 -11px; }

/* (étape 89) les grands moments à l'écran : l'œuf qui casse et l'animal qui sort, le réveil en grand ; l'œuf qui part
   de la Boutique vers « Mes animaux » */
.pmo { position: fixed; inset: 0; z-index: 140; display: grid; place-items: center; background: radial-gradient(60% 55% at 50% 45%, rgba(40, 30, 10, .55), rgba(6, 10, 8, .9)); animation: pmoIn .35s ease-out; cursor: pointer; }
@keyframes pmoIn { from { opacity: 0; } }
.pmo-in { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 20px; }
.pmo-stage { position: relative; width: min(300px, 70vw); height: min(300px, 70vw); }
.pmo-stage > * { position: absolute; inset: 0; display: grid; place-items: center; }
.pmo-stage svg { width: 100%; height: 100%; overflow: visible; }
.pmo-rays { opacity: 0; background: repeating-conic-gradient(from 0deg, rgba(255, 228, 138, .32) 0 10deg, transparent 10deg 24deg); border-radius: 50%; -webkit-mask: radial-gradient(closest-side, #000 30%, transparent); mask: radial-gradient(closest-side, #000 30%, transparent); transform: scale(1.7); }
.pmo.go .pmo-rays { animation: pmoRays 6s linear forwards; } @keyframes pmoRays { 0% { opacity: 0; transform: scale(1.2) rotate(0); } 10% { opacity: 1; } 100% { opacity: .8; transform: scale(1.8) rotate(120deg); } }
.pmo-flash { opacity: 0; border-radius: 50%; background: radial-gradient(closest-side, #fff, rgba(255, 240, 180, .6) 40%, transparent); }
.pmo.go .pmo-flash { animation: pmoFlash .7s ease-out forwards; } @keyframes pmoFlash { 0% { opacity: 0; transform: scale(.3); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(2.2); } }
.pmo-egg.shake { animation: pmoShake .5s ease-in-out infinite; } .pmo-egg.shake2 { animation: pmoShake .26s ease-in-out infinite; }
@keyframes pmoShake { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-7deg) translateX(-3%); } 75% { transform: rotate(7deg) translateX(3%); } }
.pmo-top { opacity: 0; } .pmo-bot { opacity: 0; }
.pmo.go .pmo-top { animation: pmoTop 1.2s ease-out forwards; } .pmo.go .pmo-bot { animation: pmoBot 1.2s ease-out forwards; }
@keyframes pmoTop { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate(-46%, -70%) rotate(-55deg); } }
@keyframes pmoBot { 0% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translate(40%, 50%) rotate(40deg); } }
.pmo-bits i { position: absolute; left: 50%; top: 52%; width: 12px; height: 9px; margin: -4px -6px; background: #fff6e2; border: 1.5px solid #2a1d14; border-radius: 2px 6px 3px 5px; opacity: 0; }
.pmo.go .pmo-bits i { animation: pmoBit .9s ease-out forwards; }
@keyframes pmoBit { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0) rotate(0); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-150px) rotate(240deg); } }
.pmo-new { opacity: 0; } .pmo.go .pmo-new { animation: pmoPop 1s cubic-bezier(.2, 1.6, .4, 1) .15s forwards; }
@keyframes pmoPop { 0% { opacity: 0; transform: scale(.1) translateY(30%); } 70% { opacity: 1; transform: scale(1.1); } 100% { opacity: 1; transform: none; } }
.pmo-stars i { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px; opacity: 0; background: #ffe48a; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.pmo.go .pmo-stars i { animation: pmoStar 1.6s ease-out forwards; animation-delay: calc(.2s + var(--d)); }
@keyframes pmoStar { 0% { opacity: 0; transform: rotate(var(--a)) translateY(0) scale(.4); } 20% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-170px) scale(1.2); } }
.pmo-old { transition: opacity .6s, transform .6s; } .pmo.go .pmo-old { opacity: 0; transform: scale(.6); }
.pmo-txt { opacity: 0; transform: translateY(12px); transition: opacity .5s .5s, transform .5s .5s; color: #fff6dc; }
.pmo.go .pmo-txt { opacity: 1; transform: none; }
.pmo-txt h2 { margin: 0; font: 800 clamp(26px, 5vw, 40px)/1.1 var(--display); color: #ffe9a6; text-shadow: 0 3px 0 rgba(0, 0, 0, .35); }
.pmo-txt p { margin: 6px 0 12px; color: #f1e6cc; }
.pegg-fly { position: fixed; left: 0; top: 0; z-index: 130; width: 110px; height: 110px; margin: -55px 0 0 -55px; pointer-events: none; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .45)); }
.pegg-fly svg { width: 100%; height: 100%; overflow: visible; }

/* la régie : les réglages des animaux, les conditions pour grandir */
.ash-pset { display: grid; gap: 10px; padding: 14px; } .ash-pset h4 { margin: 0; }
.ash-plist2 { display: grid; gap: 8px; }
.ash-prow { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; padding: 8px 10px; border-radius: 12px; background: rgba(26, 22, 17, .04); }
.ash-prow .ash-pth { width: 52px; height: 52px; } .ash-prow .ash-pth > svg { width: 48px; height: 48px; max-width: 48px; }
.ash-prow .ash-pn { flex: 1 1 200px; display: grid; } .ash-prow label { display: grid; gap: 3px; font-size: 12.5px; } .ash-prow .inp { height: 36px; width: 110px; }
.ash-reqs { flex: 1 1 100%; display: grid; gap: 6px; } .ash-reqs > small { font-weight: 700; }
.ash-rq { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .ash-rq .inp { height: 34px; width: auto; } .ash-rq .inp[type=number] { width: 80px; }
@media (prefers-reduced-motion: reduce) { .rgpet *, .rgpetit *, .pfpet, .pet-card, .iz-form, .pet-fig *, .pmo, .pmo * { animation: none !important; transition: none !important; } .pmo .pmo-new, .pmo .pmo-txt { opacity: 1; transform: none; } .pmo .pmo-top, .pmo .pmo-bot, .pmo .pmo-old { opacity: 0; } .pet-bar > i { transition: none; } }

/* (étape 89) la barre du haut se resserre avant d'utiliser « Plus » ; un invité n'a que ses rats dans la pilule */
.links.t1 a { padding-left: 10px; padding-right: 10px; } .links.t2 a { padding-left: 7px; padding-right: 7px; font-size: 13.5px; }

/* ======== étape 90 : les animaux autour d'une souris centrée, leurs gestes, l'évolution, et les monnaies ======== */
/* la souris reste au milieu de sa boîte : l'animal se place autour (il peut dépasser de la boîte), à sa place à lui */
/* Chipie : posée sur la tête (--ht : le haut de la tête de cette souris, calculé d'après elle) */
/* pas d'ombre au sol pour un animal qui vole ou qui est perché sur la tête */
.pfpet.pp-ducat:not(.ps-sleep) .pt-ground, .pfpet.pp-chipie .pt-ground { display: none; }
.pfull.anim .pfpet.pp-chipie:not(.ps-sleep):not(.ps-egg) { animation: petHeadHop 10s ease-in-out infinite; animation-delay: -2s; }
@keyframes petHeadHop { 0%, 40%, 52%, 100% { transform: none; } 44% { transform: translateY(-14%); } 48% { transform: translateY(0) scaleY(.94); } }

/* les petits gestes, environ toutes les 10 s, accrochés à l'animal (chaque morceau tourne autour de son point d'appui) */
.rgpet .pt-ball, .rgpet .pt-fire, .rgpet .pt-glint, .rgpet .pt-moo { transform-box: view-box; opacity: 0; }
.pet-bouchon:not(.st-sleep) .pt-body { animation: petBreath 3.2s ease-in-out infinite, petBodyHide 10s steps(1) infinite; }
.pet-bouchon:not(.st-sleep) .pt-ball { animation: petBall 10s ease-in-out infinite; }
@keyframes petBodyHide { 0%, 84% { opacity: 1; } 85%, 95% { opacity: 0; } 96%, 100% { opacity: 1; } }
@keyframes petBall { 0%, 84% { opacity: 0; transform: none; } 85% { opacity: 1; transform: scale(.92); } 88% { transform: translateX(-5px) rotate(-50deg); } 91% { transform: translateX(5px) rotate(50deg); } 94% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; } }
.pet-ducat:not(.st-sleep) .pt-head { animation: petRoar 10s ease-in-out infinite; animation-delay: -3s; }
.pet-ducat:not(.st-sleep) .pt-fire { animation: petFire 10s ease-out infinite; animation-delay: -3s; }
@keyframes petRoar { 0%, 78%, 100% { transform: none; } 82% { transform: rotate(5deg) translateY(-1px); } 86%, 93% { transform: rotate(-4deg); } 97% { transform: none; } }
@keyframes petFire { 0%, 83% { opacity: 0; transform: scale(.15); } 86% { opacity: 1; transform: scale(.7); } 89% { opacity: 1; transform: scale(1.1); } 93% { opacity: 1; transform: scale(1); } 96%, 100% { opacity: 0; transform: scale(.9); } }
.pet-chipie .pt-coin { opacity: 0; animation: petCoin2 10s ease-in-out infinite; animation-delay: -6s; }
.pet-chipie:not(.st-sleep) .pt-glint { animation: petGlint 10s ease-in-out infinite; animation-delay: -6s; }
@keyframes petCoin2 { 0%, 80%, 100% { opacity: 0; } 83%, 96% { opacity: 1; } }
@keyframes petGlint { 0%, 85%, 100% { opacity: 0; transform: scale(.2) rotate(0); } 89% { opacity: 1; transform: scale(1.3) rotate(45deg); } 93% { opacity: 0; transform: scale(.4) rotate(90deg); } }
.pet-meuh:not(.st-sleep) .pt-moo { animation: petMoo 10s ease-out infinite; animation-delay: -1s; }
@keyframes petMoo { 0%, 84%, 100% { opacity: 0; transform: scale(.6); } 87% { opacity: 1; transform: scale(1); } 91% { opacity: 1; transform: scale(1.15) translateX(-2px); } 95% { opacity: 0; transform: scale(1.3) translateX(-4px); } }
/* il s'endort (après « Évoluer ») : il se couche doucement */
.pet-fig.pet-lie > svg { animation: petLie 1.6s ease-out; transform-origin: 50% 92%; }
@keyframes petLie { 0% { transform: translateY(-10px) scaleY(1.08); opacity: .4; } 45% { transform: translateY(2px) scaleY(.9); opacity: 1; } 70% { transform: scaleY(1.03); } 100% { transform: none; } }

/* l'évolution, à l'écran : tout blanc, il brille, clignote entre ses deux tailles, puis apparaît grand d'un coup */
.pmo-w { opacity: 0; filter: brightness(0) invert(1) drop-shadow(0 0 10px #fff) drop-shadow(0 0 26px #ffe9a6); }
.pmo-w1 { transform: scale(.82); }
.pmo.whiten .pmo-old { filter: brightness(0) invert(1) drop-shadow(0 0 14px #fff) drop-shadow(0 0 30px #ffe9a6); transition: filter .6s ease-in; }
.pmo.evo .pmo-old { opacity: 0; transition: opacity .15s; }
.pmo.evo .pmo-w1 { animation: evoA 2.4s linear forwards; } .pmo.evo .pmo-w2 { animation: evoB 2.4s linear forwards; }
@keyframes evoA { 0%, 14% { opacity: 1; } 15%, 26% { opacity: 0; } 27%, 36% { opacity: 1; } 37%, 44% { opacity: 0; } 45%, 51% { opacity: 1; } 52%, 57% { opacity: 0; } 58%, 62% { opacity: 1; } 63%, 66% { opacity: 0; } 67%, 69% { opacity: 1; } 70%, 100% { opacity: 0; } }
@keyframes evoB { 0%, 14% { opacity: 0; } 15%, 26% { opacity: 1; } 27%, 36% { opacity: 0; } 37%, 44% { opacity: 1; } 45%, 51% { opacity: 0; } 52%, 57% { opacity: 1; } 58%, 62% { opacity: 0; } 63%, 66% { opacity: 1; } 67%, 69% { opacity: 0; } 70%, 100% { opacity: 1; } }
.pmo.pmo-evo.evo .pmo-rays { animation: pmoRays 6s linear forwards; }
.pmo.go .pmo-w { animation: none; opacity: 0; transition: opacity .25s; }

/* « Mes animaux » : prêt à évoluer, son histoire, des raretés lisibles sur le carton */
.pet-ready { display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: linear-gradient(135deg, rgba(255, 228, 138, .35), rgba(155, 220, 180, .3)); box-shadow: inset 0 0 0 2px rgba(233, 180, 76, .6); }
.pet-ready p { margin: 0; font-weight: 700; color: #3a2a1a; }
.btn.pet-evo { justify-self: start; font-size: 16px; padding: 10px 20px; animation: petEvoGlow 1.8s ease-in-out infinite; }
@keyframes petEvoGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 220, 120, .0), 0 4px 0 #8a5e1c; } 50% { box-shadow: 0 0 18px 4px rgba(255, 220, 120, .8), 0 4px 0 #8a5e1c; } }
.pet-story { display: grid; gap: 6px; padding: 10px 12px; border-radius: 14px; background: rgba(26, 22, 17, .05); color: #2a1d14; }
.pet-story > b { font-size: 13px; }
.pet-story ol, ol.pet-story { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pet-story li { display: grid; gap: 2px; padding-left: 14px; position: relative; }
.pet-story li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: #e9b44c; box-shadow: 0 0 0 2px rgba(233, 180, 76, .3); }
.pet-story time { font-size: 11.5px; color: #8a7a68; font-weight: 600; }
.pet-story p { margin: 0; font-size: 13px; line-height: 1.45; color: #3a2a1a; }
.pet-more { justify-self: start; border: 0; background: none; padding: 0; color: #8a5e1c; font: 700 12.5px/1.2 var(--body); cursor: pointer; text-decoration: underline; }
.storymodal { width: min(560px, 100%); }
.pet-storym { display: flex; align-items: center; gap: 14px; } .pet-sfig { display: block; width: 92px; height: 92px; flex: none; } .pet-sfig svg { width: 100%; height: 100%; }
.pet-storyl { max-height: 55vh; overflow-y: auto; background: none; padding: 4px 0; }
.pet-card .rar { color: #3a3328; background: rgba(26, 22, 17, .09); font-weight: 700; }
.pet-card .rar.r-epique { color: #5e2a92; background: rgba(155, 89, 208, .16); } .pet-card .rar.r-mythique { color: #9a2a60; background: rgba(255, 107, 154, .18); }
.pet-card .rar.r-legendaire { color: #7a5214; background: rgba(214, 176, 102, .25); } .pet-card .rar.r-rare { color: #1f5aa0; background: rgba(63, 143, 216, .16); }
.pet-card .rar.r-vip { color: #3a2706; background: linear-gradient(90deg, #f6d36a, #fff2b8, #e2a92c); }

/* la barre du haut : les rats et la Cheese, deux vraies pilules en relief, grosses icônes et gros chiffres */
.wallet { display: flex; align-items: center; gap: 8px; flex: none; }
.wallet > button { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px 0 5px; border: 0; border-radius: 999px; cursor: pointer; color: #2a1806; font: 800 17px/1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -.01em;
  background: linear-gradient(180deg, #ffe7a0 0%, #f2c35a 55%, #d99a2c 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -2px 0 rgba(120, 70, 0, .3), 0 3px 0 #7a4e10, 0 7px 14px -8px rgba(0, 0, 0, .7); transition: transform .12s, box-shadow .12s; }
.wallet > button.cheese { background: linear-gradient(180deg, #fff6b8 0%, #ffd84a 55%, #f0b21a 100%); color: #3a2400; }
.wallet > button > svg { width: 30px; height: 30px; flex: none; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35)); }
.wallet > button b { min-width: 2ch; text-align: left; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }
.wallet > button:hover { transform: translateY(-1px); } .wallet > button:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 1px 0 #7a4e10; }
.wallet > button.pop { animation: walletPop .5s var(--ease-out); } @keyframes walletPop { 40% { transform: scale(1.12); } }
@media (max-width: 640px) { .wallet > button.cheese { display: none; } .wallet > button { height: 36px; font-size: 15px; } .wallet > button > svg { width: 26px; height: 26px; } }
.links.t3 a { padding-left: 5px; padding-right: 5px; font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .btn.pet-evo, .pet-fig.pet-lie > svg, .pmo-w, .pfpet { animation: none !important; } }
/* (étape 90) les trois formes dans la fenêtre de la Boutique restent dans leur colonne (le dragon et ses ailes ne
   passent plus sur les textes) */
.iz-forms { gap: 2px; overflow: hidden; } .iz-form { flex: 1 1 0; min-width: 0; } .iz-form > span { display: grid; place-items: end center; width: 100%; } .iz-arr { flex: none; }
.iz-form:nth-child(1) svg { width: min(66px, 100%); height: auto; aspect-ratio: 1; } .iz-form:nth-child(3) svg { width: min(88px, 100%); height: auto; aspect-ratio: 1; } .iz-form:nth-child(5) svg { width: min(118px, 100%); height: auto; aspect-ratio: 1; }
.iz-info { min-width: 0; position: relative; z-index: 1; }

/* ======== étape 91 ======== */
/* l'animal s'adapte à la souris : --rl / --rr = les bords de son corps, --ht = le haut de sa tête ou de son chapeau
   (mesurés sur son dessin, de 0 à 1) ; la souris reste au milieu, la boîte prend de la place des deux côtés (même
   marge à gauche et à droite) pour que l'animal ne dépasse plus des cadres */
.pfull.has-pet:not(.pet-sm) { margin-inline: calc(var(--h) * var(--pm, 0)); }
.pfull.pk-meuh { --pm: .3; } .pfull.pk-ducat { --pm: .28; } .pfull.pk-bouchon { --pm: .22; } .pfull.pks-egg { --pm: .14; } .pfull.pk-chipie:not(.pks-egg) { --pm: .04; }
.pfpet.pp-meuh { --pw: .5; right: calc((1 - var(--rl, .3)) * 100% - var(--h) * .03); bottom: -1%; } .pfpet.pp-meuh.ps-baby { --pw: .4; } .pfpet.pp-meuh.ps-sleep { --pw: .44; }
.pfpet.pp-bouchon { --pw: .4; left: calc(var(--rr, .7) * 100% - var(--h) * .05); bottom: -1%; } .pfpet.pp-bouchon.ps-baby, .pfpet.pp-bouchon.ps-sleep { --pw: .33; }
.pfpet.pp-ducat { --pw: .42; right: calc((1 - var(--rl, .3)) * 100% - var(--h) * .02); top: calc(var(--ht, .3) * 100% - var(--h) * .08); }
.pfpet.pp-ducat.ps-baby { --pw: .34; } .pfpet.pp-ducat.ps-sleep { --pw: .38; top: auto; bottom: -1%; }
/* Chipie posée sur le dessus de la tête ou du chapeau, bien en vue (devant le chapeau) */
.pfpet.pp-chipie { --pw: .3; z-index: 3; left: calc(50% - var(--h) * var(--pw) * .55); bottom: calc((1 - var(--ht, .3)) * 100% - var(--h) * .035); }
.pfpet.pp-chipie.ps-baby, .pfpet.pp-chipie.ps-sleep { --pw: .25; }
.pfpet.ps-egg { --pw: .26; left: calc(var(--rr, .7) * 100% - var(--h) * .03); right: auto; top: auto; bottom: -1%; }
.pfull.pet-sm .pfpet { --pw: .3; } .pfull.pet-sm .pfpet.pp-chipie { --pw: .24; } .pfull.pet-sm .pfpet.ps-egg { --pw: .2; }
.pet-hab { height: 214px; } .pet-fig { width: 190px; height: 190px; } .pet-fig > svg { width: 180px; height: 180px; }
@media (max-width: 560px) { .pet-hab { height: 176px; } .pet-fig, .pet-fig > svg { width: 150px; height: 150px; } }

/* les objets du sac à dos : chacun sa petite animation */
.rgpetit .pt-glow2 { transform-box: view-box; animation: itGlow 2.4s ease-in-out infinite; }
.rgpetit .pt-ember circle { animation: itEmber 2.6s ease-out infinite; } .rgpetit .pt-ember circle:nth-child(2) { animation-delay: -.9s; } .rgpetit .pt-ember circle:nth-child(3) { animation-delay: -1.7s; }
.rgpetit .pt-bob { transform-box: view-box; animation: itBob 2.8s ease-in-out infinite; }
.rgpetit .pt-crumb { animation: itCrumb 2.8s ease-in-out infinite; }
.rgpetit .pt-steam { animation: itSteam 2.6s ease-in-out infinite; }
@keyframes itGlow { 0%, 100% { opacity: .65; transform: scale(.94); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes itEmber { 0% { opacity: 0; transform: translateY(6px); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }
@keyframes itBob { 0%, 60%, 100% { transform: none; } 70% { transform: translateY(-4px) rotate(-3deg); } 80% { transform: translateY(0) scale(1.03, .97); } 88% { transform: translateY(-1.5px); } }
@keyframes itCrumb { 0%, 68%, 100% { opacity: .5; transform: none; } 76% { opacity: 1; transform: translateY(-3px); } }
@keyframes itSteam { 0% { opacity: .2; transform: translateY(4px); } 50% { opacity: .95; } 100% { opacity: 0; transform: translateY(-6px); } }

/* Mes animaux : le petit bouton « Pouvoir » (avec ce qui attend d'être récolté), sa fenêtre ; boutons sans objet lisibles */
.pet-powb { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 0; border-radius: 99px; cursor: pointer; font: 700 13px/1 var(--body); color: #5a3a08; background: linear-gradient(180deg, #fff2c8, #f2d48a); box-shadow: inset 0 0 0 1px rgba(138, 94, 28, .35), 0 2px 0 rgba(138, 94, 28, .45); }
.pet-powb:hover { transform: translateY(-1px); } .pet-powb svg { width: 16px; height: 16px; }
.pet-powb b { padding: 2px 7px; border-radius: 99px; background: #2f8a5a; color: #fff; font-size: 12px; }
.pet-powb.has { animation: petPowHas 2s ease-in-out infinite; } @keyframes petPowHas { 50% { box-shadow: inset 0 0 0 1px rgba(138, 94, 28, .35), 0 2px 0 rgba(138, 94, 28, .45), 0 0 12px 2px rgba(47, 138, 90, .45); } }
.powmodal { width: min(460px, 100%); } .pet-pwt { margin: 0; line-height: 1.5; } .pet-pwt svg { vertical-align: -3px; }
.pet-card .btn.ghost, .bag-it .btn.ghost { --fg: #3a2a1a; box-shadow: inset 0 0 0 1.5px rgba(58, 42, 26, .35); }
.pet-card .btn.ghost:disabled, .bag-it .btn.ghost:disabled { opacity: .72; --fg: #4a3a2a; background: rgba(26, 22, 17, .05); }

/* la fenêtre de la Boutique : les flèches entre les trois formes, à la hauteur des animaux */
.iz-forms { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; }
.iz-form > span { height: 124px; align-items: end; }
.iz-arr { height: 124px; display: grid; place-items: center; align-self: start; padding-top: 30px; }

/* la Boutique : « Mes animaux » dans l'onglet Animaux */
.shp-mypets { display: flex; justify-content: center; margin: 2px 0 10px; } .shp-mypets[hidden] { display: none; } .shp-mypets svg { width: 16px; height: 16px; }
/* Profil : chercher dans mes achats et cadeaux */
.mybuy-q { margin-bottom: 10px; }

/* les monnaies : la même forme, des couleurs plus proches d'avant (laiton sombre pour les rats, Cheese plus douce) */
.wallet > button { color: #f6d98a; background: linear-gradient(180deg, #4f3d1c 0%, #3a2c12 60%, #2e220c 100%); box-shadow: inset 0 0 0 1.5px rgba(214, 176, 102, .55), inset 0 1px 0 rgba(255, 230, 160, .25), 0 3px 0 #1a1206, 0 7px 14px -8px rgba(0, 0, 0, .7); }
.wallet > button.cheese { color: #ffe48a; background: linear-gradient(180deg, #4a4014 0%, #352d0c 60%, #2a2308 100%); box-shadow: inset 0 0 0 1.5px rgba(255, 214, 92, .5), inset 0 1px 0 rgba(255, 240, 170, .22), 0 3px 0 #1a1504, 0 7px 14px -8px rgba(0, 0, 0, .7); }
.wallet > button b { text-shadow: 0 1px 0 rgba(0, 0, 0, .45); }
.wallet > button:hover { background: linear-gradient(180deg, #5c4822 0%, #44331a 60%, #34270e 100%); } .wallet > button.cheese:hover { background: linear-gradient(180deg, #57491a 0%, #3e3410 60%, #30280a 100%); }

/* le mode classé : « Annuler la recherche » bien visible */
.rk-hub .rk-cancel { --fg: #fff; background: linear-gradient(180deg, #d0533c, #a8301f); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 3px 0 #6a1d12; color: #fff; font-weight: 700; }
.rk-hub .rk-cancel:hover { background: linear-gradient(180deg, #dc6048, #b8382a); }
.rqchip .btn.xs { --fg: #fff; color: #fff; background: linear-gradient(180deg, #d0533c, #a8301f); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 2px 0 #6a1d12; font-weight: 700; padding: 6px 12px; }

/* Bataille navale : les coordonnées visées dans le coin vide de la grille (hors des cases) */
.nvcorner { position: relative; display: grid; place-items: center; }
.nvcorner .nvcoord { position: static; inset: auto; padding: 2px 4px; font-size: 12px; background: rgba(0, 0, 0, .55); border-radius: 5px; }
.nv-en:has(.nvarea.hov) .nvcoord { opacity: 1; }

/* le gagnant assis sur la fenêtre de fin de partie (ses emotes s'y jouent) */
.endbox:has(.endwin) { align-content: center; }
.endbox .endwin { position: relative; z-index: 3; display: flex; justify-content: center; align-items: flex-end; gap: 6px; margin-bottom: -30px; pointer-events: none; animation: endWinIn .8s var(--ease-out) .35s backwards, endFloat 6s ease-in-out 1.4s infinite; }
.endbox .endwin .pav.full { display: inline-grid; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .35)); }
.endbox:has(.endwin) .endcard { max-height: calc(100dvh - 210px); }
@keyframes endWinIn { from { opacity: 0; transform: translateY(-40px) scale(.7); } 60% { opacity: 1; transform: translateY(4px) scale(1.04); } }
@media (max-width: 560px) { .endbox .endwin .pfull { --h: 96px !important; } .endbox .endwin { margin-bottom: -22px; } }
@media (prefers-reduced-motion: reduce) { .rgpetit *, .pet-powb.has, .endbox .endwin { animation: none !important; } }

/* ======== étape 92 ======== */
/* Chipie posée dans le dessin de la souris (elle suit sa tête) ; pendant une emote, elle s'envole un peu puis se repose */
.pfull.perched > .pfpet { display: none; }
.pp-perch .pt-ground { display: none; }
.rgperso .pp-perch .perch-fly { transition: transform .7s cubic-bezier(.3, 1.35, .5, 1); }
.rgperso.emo .pp-perch .perch-fly { transform: translateY(-30px); transition: transform .45s ease-out; }
.rgperso.emo .pp-perch .pt-wing { animation: perchFlap .16s ease-in-out infinite alternate !important; }
.rgperso.emo .pp-perch .pt-hop { animation: perchHover 1.1s ease-in-out infinite !important; }
@keyframes perchFlap { from { transform: rotate(-32deg); } to { transform: rotate(10deg); } }
@keyframes perchHover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* Mes animaux : notes, « Relâcher », la fenêtre « Évoluer » */
.pet-note.warn { color: #a8301f; font-weight: 700; } .pet-note.ok { color: #23784a; font-weight: 700; }
.pet-rel { margin-left: auto; border: 0; background: none; padding: 4px 6px; cursor: pointer; color: #a8301f; font: 700 12.5px/1 var(--body); text-decoration: underline; opacity: .8; } .pet-rel:hover { opacity: 1; }
.evomodal { width: min(500px, 100%); }
.evo-top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.3fr); align-items: center; gap: 6px; padding: 12px; border-radius: 18px; background: radial-gradient(70% 70% at 60% 45%, #fff6d8, #ecdfc0 80%); box-shadow: inset 0 0 0 2px rgba(214, 176, 102, .45); }
.evo-f { display: grid; justify-items: center; gap: 2px; } .evo-f svg { width: 100%; max-width: 110px; height: auto; aspect-ratio: 1; } .evo-f.big svg { max-width: 160px; filter: drop-shadow(0 0 10px rgba(255, 220, 120, .55)); }
.evo-f small { font-weight: 700; color: #5a4a30; } .evo-arr { font-style: normal; font-size: 34px; color: #b8914a; }
.evo-h { margin: 4px 0 0; }

/* tchats : un cadeau ou une emote, sans la bulle autour */
.cp-m.bare .cp-bub { background: none !important; box-shadow: none !important; border: 0 !important; padding: 2px 0 !important; }

/* fin de partie : le gagnant debout sur le bord de la fenêtre ; le bouton Emotes au-dessus du voile */
.endbox .endwin { margin-bottom: -5px; }
body:has(.endbox) .emobtn { z-index: 86; }

/* ======== étape 93 ======== */
/* la Boutique : « Mes animaux » à droite du titre (à la place des monnaies, déjà dans la barre du haut) */
.row > .shp-mypets { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
/* la fenêtre des trois formes : chaque animal centré dans sa colonne, les flèches sur la même ligne que leur milieu
   (un peu remontées : l'étiquette sous chaque animal ne compte pas) */
.iz-forms { align-items: center; }
.iz-form > span { height: auto; }
.iz-arr { height: auto; padding-top: 0; align-self: center; margin-bottom: 22px; }

/* (étape 94) la régie : les animaux et leurs objets dans la liste des articles */
.apz-th.apz-pet { display: grid; place-items: center; } .apz-th.apz-pet > svg { width: 100%; height: 100%; max-width: 72px; max-height: 72px; }

/* (étape 95) les pouvoirs : la prochaine récolte qui défile (barre et compte à rebours), aussi en petit sur le bouton */
.pow-next { display: grid; gap: 6px; padding: 10px 12px; border-radius: 14px; background: rgba(233, 180, 76, .14); }
.pow-row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 14px; color: #3a2a1a; } .pow-row.full b { color: #a8301f; }
.pet-bar.pow > i { background: linear-gradient(90deg, #e9b44c, #ffd86a); transition: width .95s linear; } .pet-bar.pow.full > i { background: linear-gradient(90deg, #d0533c, #f08a6a); }
.pet-powb { position: relative; overflow: hidden; }
.pet-powb b[hidden] { display: none; }
.pow-mini { position: absolute; left: 10px; right: 10px; bottom: 3px; height: 3px; border-radius: 99px; background: rgba(138, 94, 28, .2); overflow: hidden; }
.pow-mini > i { display: block; height: 100%; width: calc(var(--v) * 100%); background: #2f8a5a; transition: width .95s linear; }

/* (étape 96) le bouton à droite du titre de la Boutique : seulement dans les onglets qui en ont un */
.row > .shp-mypets[hidden] { display: none; } .row > .shp-mypets svg { width: 16px; height: 16px; }

/* (étape 97) Mon personnage (souris de 340 px) et les fenêtres « Essayer » : pas de marge autour de la souris pour l'animal
   (elle rendait la boîte plus large que sa colonne : la souris et les boutons dessous partaient à droite) ; l'animal
   dépasse un peu, la souris reste bien au milieu */
.pz-fig .pfull.has-pet, .iz-fig .pfull.has-pet, .shp-tryf .pfull.has-pet { margin-inline: 0; }
.pz-fig { overflow: visible; }

/* (étape 98) la régie : l'XP à atteindre pour chaque rareté */
.ash-xpr label { display: grid; gap: 4px; } .ash-xpr .rar { justify-self: start; }

/* (étape 99) les niveaux de chaque jeu : le bloc « Ton niveau » de la page du jeu, l'XP sous la fenêtre de fin,
   la bannière d'un niveau atteint, les badges (sac à dos, profil, fiche) et la régie */
.bdg { display: inline-grid; place-items: center; width: var(--s, 48px); height: calc(var(--s, 48px) * 1.25); flex: none; position: relative; }
.bdg > svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .3)); }
.bdg.lock > svg { filter: grayscale(1) brightness(.8) contrast(.85); opacity: .5; }
.bdg:not(.lock)::after { content: ""; position: absolute; left: 12%; right: 12%; top: 8%; height: 64%; border-radius: 50%; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 250, 225, .55) 50%, transparent 62%) -160% 0 / 300% 100% no-repeat; animation: bdgShine 5.5s ease-in-out infinite; }
@keyframes bdgShine { 0%, 62% { background-position: 160% 0; } 100% { background-position: -160% 0; } }

.gxp { margin-top: 44px; position: relative; padding: 22px 24px 18px; border-radius: var(--r, 22px); background: linear-gradient(180deg, #fbf5e8, var(--paper)); color: var(--ink); box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(26, 22, 17, .08); overflow: hidden; display: grid; gap: 16px; }
.gxp::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: var(--acc); }
.gxp-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; }
.gxp-lv { width: 78px; height: 78px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: radial-gradient(circle at 35% 30%, #fff3c8, #e3b552 60%, #a97a26); box-shadow: inset 0 0 0 3px rgba(122, 84, 24, .55), 0 6px 14px -6px rgba(0, 0, 0, .5); color: #3e2a0e; }
.gxp-lv span { font-size: 12px; font-weight: 600; line-height: 1; } .gxp-lv b { font: 800 32px/1 var(--display, inherit); }
.gxp-main { display: grid; gap: 8px; min-width: 0; } .gxp-main h2 { margin: 0; color: var(--ink); }
.gxp-bar { height: 14px; border-radius: 99px; background: rgba(26, 22, 17, .1); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .18); overflow: hidden; }
.gxp-bar > i { display: block; height: 100%; width: calc(var(--v, 0) * 100%); border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--acc) 70%, #fff), var(--acc)); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15); transition: width 1.2s var(--ease-out, ease-out); }
.gxp-nums { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; font-size: 14px; color: var(--ink-2); }
.gxp-nums b { color: var(--ink); } .gxp-next { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gxp-badge { display: grid; justify-items: center; gap: 2px; text-align: center; } .gxp-badge small { font-size: 12px; color: var(--ink-2); }
.gx-rw { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px 2px 4px; border-radius: 99px; background: rgba(233, 180, 76, .2); font-size: 12.5px; color: #3e2a0e; white-space: nowrap; }
.gx-rw svg { width: 15px; height: 15px; flex: none; } .gx-rw.it { background: rgba(125, 140, 255, .18); } .gx-rw.bd { background: rgba(200, 51, 45, .14); } .gx-rw .bdg { --s: 16px !important; }
.gx-rw .bdg svg { width: 100%; height: 100%; }
.gx-rw.it b { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.gxp-track { list-style: none; margin: 0; padding: 4px 2px 8px; display: grid; grid-template-columns: repeat(10, minmax(84px, 1fr)); gap: 6px; overflow-x: auto; scrollbar-width: thin; position: relative; }
.gxp-track li { position: relative; display: grid; justify-items: center; align-content: start; gap: 6px; padding: 10px 4px; border-radius: 14px; background: rgba(26, 22, 17, .045); text-align: center; }
.gxp-track li::before { content: ""; position: absolute; top: 25px; left: -6px; width: 6px; height: 3px; background: rgba(26, 22, 17, .14); }
.gxp-track li:first-child::before { display: none; }
.gxp-track .gx-n { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: #fff; color: var(--ink-2); box-shadow: inset 0 0 0 2px rgba(26, 22, 17, .14); }
.gxp-track .gx-rws { display: grid; justify-items: center; gap: 4px; } .gxp-track small { font-size: 12px; color: var(--ink-2); }
.gxp-track li.done { background: color-mix(in srgb, var(--acc) 14%, transparent); }
.gxp-track li.done .gx-n { background: var(--acc); color: #fff; box-shadow: none; text-shadow: 0 1px 1px rgba(0, 0, 0, .35); }
.gxp-track li.done::before { background: var(--acc); }
.gxp-track li.cur { background: #fff; box-shadow: 0 0 0 2px var(--acc), 0 8px 16px -10px rgba(0, 0, 0, .5); }
.gxp-track li.cur .gx-n { background: #fff3c8; color: #3e2a0e; box-shadow: inset 0 0 0 2px #c9952e; animation: gxPulse 2.4s ease-in-out infinite; }
@keyframes gxPulse { 50% { transform: scale(1.12); } }
.gxp-how { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; color: var(--ink-2); }
.gxp-how span { display: inline-flex; align-items: center; gap: 4px; } .gxp-how svg { vertical-align: -2px; } .gxp-how b { color: var(--ink); }
.gxp-today { margin-left: auto; }
@media (max-width: 640px) {
  .gxp { padding: 18px 16px 14px; } .gxp-top { grid-template-columns: auto minmax(0, 1fr); } .gxp-badge { position: absolute; top: 14px; right: 14px; } .gxp-badge small { display: none; } .gxp-badge .bdg { --s: 46px !important; }
  .gxp-lv { width: 62px; height: 62px; } .gxp-lv b { font-size: 26px; } .gxp-main h2 { padding-right: 52px; font-size: 20px; }
  .gxp-track { grid-template-columns: repeat(10, 78px); } .gxp-today { margin-left: 0; }
}

/* l'XP gagnée, sous la fenêtre de fin de partie */
.endbox:has(.endxp) { align-content: center; gap: 12px; }
.endxp { width: min(560px, 100%); display: grid; gap: 10px; padding: 14px 18px; border-radius: 18px; position: relative; overflow: hidden; color: var(--ink); animation: exIn .6s var(--ease-out, ease-out) .4s backwards; }
.endxp::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; background: var(--acc); }
.ex-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.ex-lv { width: 52px; height: 52px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: radial-gradient(circle at 35% 30%, #fff3c8, #e3b552 60%, #a97a26); color: #3e2a0e; box-shadow: inset 0 0 0 2px rgba(122, 84, 24, .5); }
.ex-lv small { font-size: 10px; line-height: 1; } .ex-lv b { font: 800 22px/1 var(--display, inherit); }
.ex-mid { display: grid; gap: 5px; min-width: 0; } .ex-mid small { font-size: 13px; color: var(--ink-2); }
.ex-gain { display: grid; justify-items: end; gap: 3px; color: #2f6b1f; } .ex-gain > b { font-size: 18px; } .ex-gain span { display: inline-flex; align-items: center; gap: 3px; color: #6b4a12; font-weight: 700; } .ex-gain small { font-size: 12px; color: var(--ink-2); }
.ex-up { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: linear-gradient(90deg, rgba(233, 180, 76, .28), rgba(233, 180, 76, .08)); animation: exUp .7s cubic-bezier(.3, 1.5, .5, 1) 1.2s backwards; }
.ex-up > span { display: grid; gap: 4px; } .ex-up b { color: #6b4a12; font-size: 16px; } .ex-up small { font-size: 13px; color: var(--ink-2); }
.ex-rws { display: flex; flex-wrap: wrap; gap: 5px; }
.ex-bdg { animation: exBdg 1.4s cubic-bezier(.3, 1.6, .5, 1) 1.3s backwards; }
@keyframes exIn { from { opacity: 0; transform: translateY(16px); } }
@keyframes exUp { from { opacity: 0; transform: scale(.85); } }
@keyframes exBdg { from { opacity: 0; transform: scale(.2) rotate(-40deg); } }
@media (max-width: 480px) { .ex-row { grid-template-columns: auto minmax(0, 1fr); } .ex-gain { grid-column: 1 / -1; grid-template-columns: auto auto; justify-content: start; gap: 10px; } }

/* un niveau atteint ailleurs (Black Rat…) : une bannière en haut de l'écran */
.lvup { position: fixed; z-index: 95; top: calc(var(--nav-h, 72px) + 12px); left: 50%; translate: -50% 0; width: min(440px, calc(100vw - 32px)); display: flex; align-items: center; gap: 12px; padding: 12px 40px 12px 14px; border-radius: 18px; color: var(--ink); box-shadow: 0 0 0 2px var(--acc), 0 18px 40px -14px rgba(0, 0, 0, .7); animation: lvIn .6s cubic-bezier(.3, 1.5, .5, 1) both; }
.lvup.out { animation: lvOut .4s ease-in both; }
.lvup > span:not(.bdg):not(.lvup-n) { display: grid; gap: 5px; min-width: 0; } .lvup b { color: #6b4a12; }
.lvup-n { width: 50px; height: 50px; flex: none; border-radius: 50%; display: grid; place-content: center; text-align: center; background: radial-gradient(circle at 35% 30%, #fff3c8, #e3b552 60%, #a97a26); color: #3e2a0e; }
.lvup-n small { font-size: 10px; line-height: 1; } .lvup .lvup-n b { font: 800 21px/1 var(--display, inherit); color: #3e2a0e; }
.lvup > .x { position: absolute; top: 8px; right: 8px; }
@keyframes lvIn { from { opacity: 0; transform: translateY(-30px) scale(.9); } }
@keyframes lvOut { to { opacity: 0; transform: translateY(-20px); } }

/* le sac à dos : deux onglets ; les badges */
.bag-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; border-radius: 14px; background: rgba(26, 22, 17, .07); }
.bag-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 6px 10px; border: 0; border-radius: 11px; background: transparent; color: var(--ink-2); font: inherit; font-weight: 600; cursor: pointer; }
.bag-tabs button svg { width: 17px; height: 17px; flex: none; } .bag-tabs button b { font-size: 12px; padding: 1px 7px; border-radius: 99px; background: rgba(26, 22, 17, .1); }
.bag-tabs button[aria-selected="true"] { background: #fffaf0; color: var(--ink); box-shadow: 0 2px 6px -2px rgba(0, 0, 0, .3); }
.bag-pane { display: grid; gap: 12px; } .bag-pane[hidden] { display: none; }
.bdg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.bdg-it { display: grid; justify-items: center; gap: 5px; text-align: center; padding: 12px 10px; border-radius: 16px; background: linear-gradient(180deg, #fffaf0, #f1e6cf); box-shadow: inset 0 0 0 1px rgba(26, 22, 17, .1), 0 6px 14px -10px rgba(0, 0, 0, .5); color: #2a1d14; }
.bdg-it small { font-size: 12.5px; line-height: 1.35; color: #5a4a3a; } .bdg-it.zero b { color: #6a5a48; }
.bdg-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.prof-bdgs { display: grid; gap: 8px; justify-items: start; margin-top: 18px; padding-top: 14px; border-top: 1px dashed rgba(26, 22, 17, .16); }
.prof-bdgs .btn svg { width: 15px; height: 15px; }
.pm-badges { margin-top: 6px; }

/* la régie : Niveaux des jeux */
.agx { display: grid; gap: 16px; }
.agx-t .inp { width: 96px; min-height: 34px; padding: 4px 8px; } .agx-t input[list] { width: 190px; }
.agx-g { display: inline-flex; align-items: center; gap: 8px; } .agx-in { display: block; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .bdg::after, .gxp-track li.cur .gx-n, .endxp, .ex-up, .ex-bdg, .lvup { animation: none !important; } .gxp-bar > i { transition: none; } }

/* (étape 100) le salon : la souris reste au milieu de sa case (même avec un animal), « Hôte » bien dans sa pastille,
   le bouton de l'hôte pour retirer un joueur */
.lseat .pfull.has-pet:not(.pet-sm) { margin-inline: 0; }
.lseat small .role { height: 22px; line-height: 22px; padding: 0 9px 0 calc(9px + .1em); box-sizing: border-box; }
.lboot { display: inline-flex; align-items: center; gap: 4px; min-height: 26px; padding: 2px 10px; }
.lboot svg { width: 13px; height: 13px; }

/* la fenêtre de fin défile elle-même : ses boutons restent collés en bas, sans séparation */
.endbox .endcard { max-height: calc(100dvh - 40px); overflow-y: auto; overscroll-behavior: contain; }
.endbox:has(.endwin) .endcard { max-height: calc(100dvh - 210px); }
.endbox .endcard > .acts { background: var(--paper); box-shadow: 0 -14px 18px -6px var(--paper); }

/* l'XP gagnée, dans la fenêtre de fin (au-dessus des boutons) */
.endbox .endxp { width: auto; padding: 12px 14px 12px 18px; border-radius: 16px; background: rgba(233, 180, 76, .12); box-shadow: inset 0 0 0 1px rgba(122, 84, 24, .18); animation-delay: .3s; }
.ex-up small { display: block; }

/* les badges : trophées (plus de reflet en forme de médaille) ; badges de rang (l'emblème + la pastille du jeu) */
.bdg::after { content: none !important; }
.bdg.rkb { position: relative; display: inline-grid; place-items: center; }
.bdg.rkb .bdg-em { display: grid; place-items: center; width: 100%; }
.bdg.rkb .bdg-em > svg { width: 100%; height: auto; }
.bdg.rkb > .bdg-mini { position: absolute; right: -2%; bottom: 2%; width: 40%; height: auto; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
.gxp-badge.lock .bdg > svg { filter: grayscale(1) brightness(.8) contrast(.85); opacity: .5; }
.bdg-none { display: grid; gap: 4px; padding: 22px 16px; border-radius: 16px; text-align: center; background: rgba(26, 22, 17, .05); color: #3a2a1a; }
.bdg-none span { font-size: 13.5px; color: #5a4a3a; }

/* la page d'un jeu : récupérer les récompenses */
.gxp-pend { margin: 2px 0 0; display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 5px 12px; border-radius: 99px; background: #fff3c8; color: #6b4a12; font-size: 13.5px; font-weight: 600; box-shadow: inset 0 0 0 1.5px #e3b552; }
.gxp-pend svg { width: 15px; height: 15px; }
.gxp-track li.ready { background: #fff8e2; box-shadow: 0 0 0 2px #e3b552, 0 10px 18px -12px rgba(0, 0, 0, .5); }
.gxp-track li.ready .gx-n { background: #ffd86a; color: #3e2a0e; box-shadow: none; animation: gxPulse 2s ease-in-out infinite; }
.gxp-track li.next { background: #fff; box-shadow: 0 0 0 2px var(--acc); }
.gx-claim { margin-top: 2px; animation: gxGlow 1.8s ease-in-out infinite; }
@keyframes gxGlow { 50% { box-shadow: 0 0 0 4px rgba(233, 180, 76, .35); } }
.gx-ok { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; color: #2f6b1f; font-weight: 600; } .gx-ok svg { width: 12px; height: 12px; }
.gx-wait { font-size: 11.5px; color: #8a6a2a; font-weight: 600; }
.gxp-track li.gx-open { animation: gxOpen .7s cubic-bezier(.3, 1.6, .5, 1); z-index: 2; }
@keyframes gxOpen { 40% { transform: scale(1.18) rotate(-3deg); } }
.gx-burst { position: absolute; left: 50%; top: 26px; width: 0; height: 0; pointer-events: none; }
.gx-burst i { position: absolute; width: 6px; height: 18px; margin: -9px 0 0 -3px; border-radius: 3px; background: #ffd86a; transform: rotate(var(--a)) translateY(-10px); opacity: 0; animation: gxRay .8s ease-out forwards; }
@keyframes gxRay { 20% { opacity: 1; } to { opacity: 0; transform: rotate(var(--a)) translateY(-46px) scaleY(.4); } }
/* le moment « Niveau récupéré » : la récompense en grand, au milieu de l'écran */
.gxc { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; pointer-events: none; background: radial-gradient(circle at 50% 45%, rgba(4, 12, 9, .55), rgba(4, 12, 9, .2) 60%, transparent); animation: gxcIn .3s ease-out both; }
.gxc.small { background: none; align-items: start; padding-top: calc(var(--nav-h, 72px) + 20px); }
.gxc.out { animation: gxcOut .4s ease-in both; }
.gxc-in { display: grid; justify-items: center; gap: 8px; padding: 18px 26px; border-radius: 22px; background: var(--paper); color: var(--ink); box-shadow: 0 0 0 2px #e3b552, 0 24px 50px -16px rgba(0, 0, 0, .8); text-align: center; animation: gxcPop .6s cubic-bezier(.3, 1.6, .5, 1) both; }
.gxc-in b { font: 800 20px/1.1 var(--display, inherit); color: #6b4a12; } .gxc-in small { max-width: 280px; font-size: 13px; color: var(--ink-2); }
.gxc-big { animation: gxcBig 1.1s cubic-bezier(.3, 1.6, .5, 1) both; }
.gxc-it { display: grid; place-items: center; width: 120px; height: 120px; } .gxc-it svg { width: 100%; height: 100%; }
@keyframes gxcIn { from { opacity: 0; } } @keyframes gxcOut { to { opacity: 0; } }
@keyframes gxcPop { from { transform: scale(.6); opacity: 0; } }
@keyframes gxcBig { from { transform: scale(.2) rotate(-25deg); opacity: 0; } 60% { transform: scale(1.12) rotate(4deg); } }

/* le podium du Classement : les points sous le pseudo */
.pod-pts { display: inline-flex; align-items: baseline; gap: 4px; padding: 3px 10px; border-radius: 99px; background: rgba(0, 0, 0, .35); color: #fff3c8; font-size: 13px; }
.pod-pts b { font-size: 15px; }

.pm-inv { justify-self: start; }
@media (prefers-reduced-motion: reduce) { .gxp-track li.ready .gx-n, .gx-claim, .gxp-track li.gx-open, .gx-burst i, .gxc, .gxc-in, .gxc-big { animation: none !important; } }

/* (étape 101) le vocal d'une partie : sa propre petite bulle sur le bord droit, sous « Tchat » et « Emotes » (le menu du
   haut ne bouge plus) */
.vcfloat { position: fixed; z-index: 69; right: 0; top: calc(var(--nav-h, 64px) + 186px); padding: 6px 8px 6px 8px; border-radius: 14px 0 0 14px; background: var(--paper); color: var(--ink); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .7); }
.vcfloat:empty { display: none; }
body.gtalk-open .vcfloat { right: calc(312px + env(safe-area-inset-right, 0px)); border-radius: 14px; }
body:has(.endbox) .vcfloat { z-index: 86; }
body.guest .vcfloat { display: none !important; }
.vcfloat .vcdock { background: transparent; box-shadow: none; padding: 0; gap: 5px; flex-wrap: nowrap; }
.vcfloat .vcb { background: rgba(26, 22, 17, .07); color: var(--ink); }
.vcfloat .vcb:hover { background: rgba(26, 22, 17, .14); }
.vcfloat .vcb.off { background: #f8d9d2; color: #a8301f; }
.vcfloat .vcb.on { background: #d4f0e2; color: #1f7a4c; }
.vcfloat .vcb.leave { background: #e2553f; color: #fff; }
.vcfloat .vcb.join { font-weight: 700; font-size: 13px; line-height: 1; font-family: inherit; color: var(--ink); background: transparent; padding: 0 6px; height: 30px; }
.vcfloat .vcb.join svg { width: 17px; height: 17px; }
.vcfloat .vcdock .vcn { color: var(--ink-2); font-weight: 700; }
@media (max-width: 760px) {
  .vcfloat { top: auto; bottom: calc(218px + env(safe-area-inset-bottom, 0px)); padding: 5px 6px; }
  body.gtalk-open .vcfloat { display: none; }
}

/* le sac à dos : « Montrer sur mon profil » tient toujours dans la case du badge */
.bdg-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.bdg-it { min-width: 0; }
.bdg-it .btn { max-width: 100%; height: auto; min-height: 34px; padding: 6px 10px; white-space: normal; line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
@media (max-width: 420px) { .bdg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bdg-it .btn { font-size: 12.5px; padding: 6px 8px; } }

/* les badges de niveau : l'objet seul (plus de socle), qui bouge doucement */
.bdg:not(.rkb) { height: calc(var(--s, 48px) * .94); }
.bdg-svg .b-cl, .bdg-svg .b-cr, .bdg-svg .b-cm, .bdg-svg .b-glow, .bdg-svg .b-eye, .bdg-svg .b-q, .bdg-svg .b-ray, .bdg-svg .b-btn, .bdg-svg .b-k, .bdg-svg .b-chip, .bdg-svg .b-glint, .bdg-svg .b-ship, .bdg-svg .b-wave { transform-box: view-box; }
.bdg-svg .b-cl { transform-origin: 60px 136px; animation: bCl 4.4s ease-in-out infinite; }
.bdg-svg .b-cr { transform-origin: 60px 136px; animation: bCr 4.4s ease-in-out infinite; }
.bdg-svg .b-cm { animation: bCm 4.4s ease-in-out infinite; }
@keyframes bCl { 0%, 60%, 100% { transform: none; } 75% { transform: rotate(-7deg); } }
@keyframes bCr { 0%, 60%, 100% { transform: none; } 75% { transform: rotate(7deg); } }
@keyframes bCm { 0%, 60%, 100% { transform: none; } 75% { transform: translateY(-4px); } }
.bdg-svg .b-glow { animation: bGlow 3.6s ease-in-out infinite; }
@keyframes bGlow { 50% { opacity: .45; } }
.bdg-svg .b-eye { transform-origin: 60px 78px; animation: bBlink 4s ease-in-out infinite; }
@keyframes bBlink { 0%, 44%, 52%, 100% { transform: none; } 48% { transform: scaleY(.1); } }
.bdg-svg .b-q { transform-origin: 60px 34px; animation: bQ 3.2s ease-in-out infinite; }
@keyframes bQ { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-4px) rotate(5deg); } }
.bdg-svg .b-ray { animation: bGlow 1.6s ease-in-out infinite; }
.bdg-svg .b-btn { animation: bPress 3.2s ease-in-out infinite; }
@keyframes bPress { 0%, 70%, 100% { transform: none; } 78%, 84% { transform: translateY(3.5px) scaleY(.92); } }
.bdg-svg .b-k { transform-origin: 74px 96px; animation: bK 5s ease-in-out infinite; }
@keyframes bK { 0%, 55%, 100% { transform: none; } 70% { transform: rotate(5deg) translateY(-2px); } }
.bdg-svg .b-chip { animation: bChip 2.6s ease-in-out infinite; }
@keyframes bChip { 0%, 100% { transform: none; } 50% { transform: translateY(-2.5px); } }
.bdg-svg .b-glint { opacity: 0; animation: bGlint 2.6s ease-in-out infinite; }
@keyframes bGlint { 0%, 60%, 100% { opacity: 0; } 75% { opacity: .9; } }
.bdg-svg .b-ship { transform-origin: 60px 92px; animation: bShip 3.8s ease-in-out infinite; }
@keyframes bShip { 0%, 100% { transform: rotate(-2.6deg) translateY(0); } 50% { transform: rotate(2.6deg) translateY(-2px); } }
.bdg-svg .b-wave { animation: bWave 2.4s ease-in-out infinite alternate; }
@keyframes bWave { to { transform: translateX(-6px); } }
@media (prefers-reduced-motion: reduce) { .bdg-svg * { animation: none !important; } }

/* le top 3 du Classement : la colonne grandit avec ce qu'elle montre (rang et points toujours lisibles) */
.rk-podium .pod .col { height: auto; overflow: visible; padding: 12px 6px 16px; gap: 6px; }
.rk-podium .pod.p1 .col { min-height: 200px; } .rk-podium .pod.p2 .col { min-height: 160px; } .rk-podium .pod.p3 .col { min-height: 132px; }
.rk-podium .pod .col .place { font-size: 46px; }
.rk-podium .pod .col .w { opacity: 1; font-weight: 700; font-size: 13px; line-height: 1.25; font-family: inherit; letter-spacing: 0; text-transform: none; padding: 0 4px; overflow-wrap: anywhere; }
@media (max-width: 560px) { .rk-podium .pod .col .place { font-size: 34px; } .rk-podium .pod .col .w { font-size: 11.5px; } .rk-podium .pod.p1 .col { min-height: 170px; } .rk-podium .pod.p2 .col { min-height: 140px; } .rk-podium .pod.p3 .col { min-height: 118px; } .pod-pts { font-size: 11.5px; padding: 2px 7px; } .pod-pts b { font-size: 13px; } }

/* l'inventaire d'un joueur : tout d'un coup d'œil (le personnage à gauche, le reste rangé à droite) */
.modal.invmodal { width: min(1040px, 100%); padding: 0; overflow: hidden; max-height: calc(100dvh - 32px); }
.ivx { position: relative; display: grid; grid-template-columns: 300px minmax(0, 1fr); min-height: 0; max-height: calc(100dvh - 32px); }
.ivx-left { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; gap: 8px; padding: 22px 18px 20px; background: linear-gradient(180deg, #f8f0dd, #e9dcc0); border-radius: var(--r) 0 0 var(--r); overflow: hidden; }
.ivx-left .eyebrow { justify-self: start; }
.ivx-fig { position: relative; display: grid; place-items: end center; min-height: 0; }
.ivx-fig .pfull.has-pet:not(.pet-sm) { margin-inline: 0; }
.ivx-id { display: grid; justify-items: center; gap: 2px; text-align: center; position: relative; z-index: 1; }
.ivx-id h3 { margin: 0; font-size: 22px; } .ivx-id small { font-size: 12.5px; color: var(--ink-2); }
.ivx-right { display: grid; align-content: start; gap: 14px; padding: 22px 22px 20px; min-width: 0; overflow-y: auto; }
.ivx-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 14px; }
.ivx-sec { display: grid; gap: 8px; align-content: start; min-width: 0; }
.ivx-sec h4 { margin: 0; font-size: 14px; color: #6b4a12; display: flex; align-items: center; gap: 6px; }
.ivx-sec h4 .num { font-size: 11.5px; padding: 1px 7px; border-radius: 99px; background: rgba(26, 22, 17, .08); color: var(--ink-2); }
.ivx-none { margin: 0; font-size: 13px; color: var(--ink-2); }
.ivt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 7px; }
.ivt-grid.sm { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); }
.ivt { --rc: rgba(26, 22, 17, .14); display: grid; justify-items: center; gap: 2px; padding: 5px 4px 6px; border-radius: 12px; background: #fffaf0; box-shadow: inset 0 0 0 2px var(--rc); min-width: 0; cursor: default; transition: transform .2s; }
.ivt:hover, .ivt:focus-visible { transform: translateY(-2px); }
.ivt b { font-size: 11px; line-height: 1.2; font-weight: 600; color: #3a2a1a; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ivt-th { display: grid; place-items: center; width: 58px; height: 58px; overflow: hidden; }
.ivt-th > svg, .ivt-th > span { max-width: 100%; max-height: 100%; }
.ivt-emo { font-size: 36px; line-height: 1; }
.ivt.r-rare { --rc: #4a8ee0; } .ivt.r-epique { --rc: #9b59d0; } .ivt.r-legendaire { --rc: #d6a03c; } .ivt.r-mythique { --rc: #e0559a; }
.ivt.r-secret { --rc: #3a2f4e; } .ivt.r-evenement { --rc: #e0533d; } .ivt.r-vip { --rc: #c8952e; background: linear-gradient(180deg, #fff6d8, #fffaf0); }
.ivp { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 14px; background: rgba(26, 22, 17, .045); flex-wrap: wrap; }
.ivp-forms { display: flex; align-items: center; gap: 2px; }
.ivp-f { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 12px; background: #fffaf0; box-shadow: inset 0 0 0 1px rgba(26, 22, 17, .1); }
.ivp-f svg { width: 86%; height: 86%; }
.ivp-f.now { box-shadow: 0 0 0 2.5px #e3b552; width: 62px; height: 62px; }
.ivp-f.next svg { filter: brightness(0) opacity(.18); }
.ivp-arr { font-style: normal; color: #b08a4a; font-weight: 800; }
.ivp-info { display: grid; gap: 3px; justify-items: start; } .ivp-info small { font-size: 12px; color: var(--ink-2); }
.ivx .rar { color: #3a3328; background: rgba(26, 22, 17, .09); font-weight: 700; }
.ivx .rar.r-rare { color: #1f5aa0; background: rgba(63, 143, 216, .16); } .ivx .rar.r-epique { color: #5e2a92; background: rgba(155, 89, 208, .16); }
.ivx .rar.r-legendaire, .ivx .rar.r-vip { color: #7a5214; background: rgba(214, 176, 102, .25); } .ivx .rar.r-mythique { color: #9a2a60; background: rgba(255, 107, 154, .18); }
.ivb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ivx-story { position: absolute; inset: 12px 12px 12px auto; width: min(420px, calc(100% - 24px)); z-index: 3; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 8px; padding: 14px 16px; border-radius: 18px; background: var(--paper); box-shadow: 0 0 0 2px #e3b552, 0 20px 40px -16px rgba(0, 0, 0, .6); animation: gxcPop .35s ease-out both; }
.ivx-story[hidden] { display: none; }
.ivx-sh { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ivx-sh .x { position: static; }
.ivx-story .pet-story { overflow-y: auto; min-height: 0; }
@media (max-width: 760px) {
  .ivx { grid-template-columns: minmax(0, 1fr); overflow-y: auto; }
  .ivx-left { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; justify-items: start; align-items: center; border-radius: var(--r) var(--r) 0 0; padding: 14px 14px 10px; column-gap: 12px; }
  .ivx-left .eyebrow { grid-column: 1 / -1; }
  .ivx-fig .pfull { --h: 120px !important; }
  .ivx-id { justify-items: start; text-align: left; }
  .ivx-right { overflow: visible; padding: 14px; }
  .ivx-row { grid-template-columns: minmax(0, 1fr); }
  .ivt-grid { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); } .ivt-th { width: 48px; height: 48px; }
  .ivx-story { inset: 10px; width: auto; }
}

/* (étape 102) Régie › Badges : l'inventaire de tous les badges, et un badge en grand */
.abd { display: grid; gap: 16px; }
.abd .sghead .dim { font-weight: 500; font-size: 13px; }
.abd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.abd-it { display: grid; justify-items: center; gap: 4px; padding: 12px 8px 10px; border: 0; border-radius: 16px; background: linear-gradient(180deg, #fffaf0, #f1e6cf); box-shadow: inset 0 0 0 1px rgba(26, 22, 17, .1); color: #2a1d14; font: inherit; text-align: center; cursor: zoom-in; transition: transform .2s, box-shadow .2s; min-width: 0; }
.abd-it:hover, .abd-it:focus-visible { transform: translateY(-3px); box-shadow: inset 0 0 0 2px #e3b552, 0 10px 18px -12px rgba(0, 0, 0, .5); }
.abd-it b { font-size: 13.5px; } .abd-it small { font-size: 12px; color: #6a5a48; }
.abd-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.abd-tabs button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 6px; border: 0; border-radius: 99px; background: rgba(26, 22, 17, .07); color: var(--ink-2); font: inherit; font-weight: 600; font-size: 13.5px; cursor: pointer; }
.abd-tabs button svg { width: 22px; height: 22px; }
.abd-tabs button[aria-selected="true"] { background: #fffaf0; color: var(--ink); box-shadow: inset 0 0 0 2px var(--acc); }
.modal.bdzmodal { width: min(640px, 100%); }
.bdz { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: center; }
.bdz-art { display: grid; place-items: center; width: 250px; height: 270px; border-radius: 22px; background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--acc) 26%, #fffaf0), #efe3c8 70%); box-shadow: inset 0 0 0 1px rgba(26, 22, 17, .1); }
.bdz-info { display: grid; gap: 10px; } .bdz-info h3 { margin: 0; }
@media (max-width: 600px) { .bdz { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; } .bdz-art { width: 220px; height: 240px; } .bdz-info .acts { justify-content: center !important; } }

/* (étape 103) la bulle du vocal ENTRE « Tchat » et « Emotes » (Emotes descend d'une place quand la bulle est là) */
.vcfloat { top: calc(var(--nav-h, 64px) + 136px); }
body:has(.vcfloat .vcdock) .emobtn { top: calc(var(--nav-h, 64px) + 192px); }
@media (max-width: 760px) {
  .vcfloat { top: auto; bottom: calc(168px + env(safe-area-inset-bottom, 0px)); }
  body:has(.vcfloat .vcdock) .emobtn { top: auto; bottom: calc(222px + env(safe-area-inset-bottom, 0px)); }
}

/* la fin de partie : l'XP et les rats gagnés bien visibles */
.endbox .endxp { padding: 14px 16px 14px 20px; background: linear-gradient(180deg, #fff7df, #f4e3b8); box-shadow: inset 0 0 0 2px #d9a441, 0 8px 18px -12px rgba(0, 0, 0, .5); }
.endbox .endxp .ex-row { gap: 16px; }
.endbox .endxp .ex-lv { width: 62px; height: 62px; } .endbox .endxp .ex-lv b { font-size: 27px; } .endbox .endxp .ex-lv small { font-size: 11px; font-weight: 700; }
.endbox .endxp .gxp-bar { height: 20px; background: #3a2a14; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .45); }
.endbox .endxp .gxp-bar > i { background: linear-gradient(90deg, #8ee07a, #2fae5a); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18), 0 0 12px rgba(80, 220, 120, .55); }
.endbox .endxp .ex-mid small { font-size: 14.5px; font-weight: 600; color: #3a2a14; }
.endbox .endxp .ex-gain { gap: 6px; }
.endbox .endxp .ex-gain > b { font-size: 24px; color: #1f7a3c; text-shadow: 0 1px 0 #fff; }
.endbox .endxp .ex-gain span { padding: 4px 10px 4px 6px; border-radius: 99px; background: #2a1d10; color: #ffd86a; font-size: 17px; }
.endbox .endxp .ex-gain span svg { width: 22px; height: 22px; }
.endbox .endxp .ex-up b { font-size: 17px; } .endbox .endxp .ex-up small { font-size: 14px; color: #3a2a14; }

/* les badges spéciaux : animations douces */
.sb-first100 .s-tw, .sb-first1k .s-tw, .sb-first10k .s-tw, .sb-vip .s-tw, .sb-etoile .s-tw, .sb-cle .s-tw, .sb-de .s-tw, .sb-daily7 .s-tw, .sb-daily30 .s-tw, .sb-bp1 .s-tw, .sb-bp1v .s-tw { transform-box: fill-box; transform-origin: center; animation: sTw 2.4s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes sTw { 0%, 100% { transform: scale(.4); opacity: .3; } 50% { transform: scale(1); opacity: 1; } }
.bdg-svg .s-glow { animation: bGlow 3s ease-in-out infinite; }
.bdg-svg .s-glow2 { animation: sFlick 1.6s ease-in-out infinite; }
@keyframes sFlick { 0%, 100% { opacity: 1; } 30% { opacity: .7; } 60% { opacity: .9; } }
.bdg-svg .s-wing { transform-box: view-box; animation: sWing 2.6s ease-in-out infinite; }
.bdg-svg .s-wing.l { transform-origin: 30px 64px; } .bdg-svg .s-wing.r { transform-origin: 90px 64px; animation-name: sWingR; }
@keyframes sWing { 50% { transform: rotate(-10deg); } } @keyframes sWingR { 50% { transform: rotate(10deg); } }
.bdg-svg .s-gem { animation: sGem 2.8s ease-in-out infinite; } @keyframes sGem { 50% { filter: brightness(1.5); } }
.bdg-svg .s-rays { transform-box: view-box; transform-origin: 60px 62px; animation: sRays 12s linear infinite; } @keyframes sRays { to { transform: rotate(360deg); } }
.bdg-svg .s-float { animation: sFloat 3.2s ease-in-out infinite; } @keyframes sFloat { 50% { transform: translateY(-3px); } }
.bdg-svg .s-shine { animation: sShine 3.2s ease-in-out infinite; } @keyframes sShine { 0%, 70%, 100% { opacity: 0; } 80% { opacity: .7; } }
.bdg-svg .s-bob { transform-box: view-box; transform-origin: 60px 100px; animation: sBob 3s ease-in-out infinite; } @keyframes sBob { 50% { transform: rotate(-3deg) translateY(-2px); } }
.bdg-svg .s-paw { transform-box: view-box; transform-origin: 60px 80px; animation: sPaw 2.6s ease-in-out infinite; } @keyframes sPaw { 0%, 70%, 100% { transform: none; } 80% { transform: scale(1.08) rotate(-4deg); } 90% { transform: scale(1.04) rotate(3deg); } }
.bdg-svg .s-spin { transform-box: view-box; transform-origin: 60px 60px; animation: sSpin 5s ease-in-out infinite; } @keyframes sSpin { 0%, 60%, 100% { transform: none; } 80% { transform: rotate(72deg) scale(1.05); } }
.bdg-svg .s-swing { transform-box: view-box; transform-origin: 58px 14px; animation: sSwing 3.4s ease-in-out infinite; } @keyframes sSwing { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
.bdg-svg .s-flame { transform-box: view-box; transform-origin: 60px 72px; animation: sFlame 1.2s ease-in-out infinite; } @keyframes sFlame { 0%, 100% { transform: scale(1, 1); } 40% { transform: scale(.92, 1.08); } 70% { transform: scale(1.05, .95); } }
.bdg-svg .s-drip { animation: bGlow 2.4s ease-in-out infinite; }
.bdg-svg .s-fl7 { transform-box: view-box; transform-origin: 95px 40px; animation: sFlame 1.1s ease-in-out infinite; } /* (étape 108 : la flamme du badge « 7 jours d'affilée ») */
.sb-daily30 .s-rays { transform-origin: 60px 62px; }
.bdg-svg .s-aura { animation: sAura 2.8s ease-in-out infinite; } @keyframes sAura { 50% { opacity: .5; } }
.bdg-svg .s-roll { transform-box: view-box; transform-origin: 60px 62px; animation: sRoll 5s ease-in-out infinite; } @keyframes sRoll { 0%, 70%, 100% { transform: none; } 80% { transform: rotate(-12deg); } 90% { transform: rotate(8deg); } }
@media (prefers-reduced-motion: reduce) { .bdg-svg * { animation: none !important; } }
.bdg.sbb { height: calc(var(--s, 48px) * .94); }

/* la Boutique : les badges, « Plus que X » */
.shp-bdg { display: grid; place-items: center; width: 100%; height: 100%; } .shp-bdg > svg { width: 82%; height: 82%; }
.shp-left { display: inline-block; justify-self: center; padding: 2px 9px; border-radius: 99px; background: #fff0c4; color: #8a4a10; font-size: 12px; font-weight: 700; box-shadow: inset 0 0 0 1px #e3b552; }
.shp-left.out { background: #f3d6d0; color: #8a2a1a; box-shadow: inset 0 0 0 1px #d0533c; }
.shp-left.big { justify-self: start; font-size: 13.5px; padding: 4px 12px; }
.bdz-shop .iz-stage { display: grid; place-items: center; }
.bdz-shop .bdz-art { width: 240px; height: 240px; }
.bdz-story { margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(26, 22, 17, .05); font-size: 14px; line-height: 1.5; font-style: italic; color: #3a2a1a; }

/* la régie : un badge en grand avec Donner / Retirer */
.modal.bdzmodal.wide { width: min(820px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; }
.bdz.adm { align-items: start; }
.bdz-stock { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-weight: 600; font-size: 14px; } .bdz-stock .inp { width: 100px; }
.bdz-give { display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: rgba(26, 22, 17, .05); }
.bdz-give .btn { justify-self: start; }
.bdz-dur { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; } .bdz-dur .inp { width: 80px; }
.bdz-who { display: grid; gap: 6px; }
.bdz-list { display: grid; gap: 4px; max-height: 200px; overflow-y: auto; }
.bdz-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; background: #fffaf0; box-shadow: inset 0 0 0 1px rgba(26, 22, 17, .08); }
.bdz-row small { color: var(--ink-2); font-size: 12.5px; flex: 1; } .bdz-row .btn { flex: none; }

/* (étape 104) tous les badges : une case carrée, l'objet centré (vue calculée par badges.js), les lueurs débordent
   doucement autour (dégradés sans bord) */
.bdg, .bdg:not(.rkb), .bdg.sbb, .bdg.rkb { width: var(--s, 48px); height: var(--s, 48px); }
.bdg > svg.bdg-svg { width: 100%; height: 100%; overflow: visible; }
.bdg.rkb .bdg-em { width: 100%; height: 100%; } .bdg.rkb .bdg-em > svg { width: 100%; height: 100%; }
.bdg-measure * { animation: none !important; transition: none !important; }
#rgb-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.bdg[data-bdginfo] { cursor: zoom-in; border-radius: 12px; }
.bdg[data-bdginfo]:focus-visible { outline: 2px solid #e3b552; outline-offset: 3px; }
.bdg[data-bdginfo]:hover > svg { transform: scale(1.06); transition: transform .2s; }

/* le nom en haut d'un tchat privé ouvre la fiche */
.cp-title.cp-who { cursor: pointer; text-decoration: underline; text-decoration-color: rgba(26, 22, 17, .25); text-underline-offset: 3px; }
.cp-title.cp-who:hover { text-decoration-color: currentColor; }

/* la fin de partie : le bloc d'XP reste compact, même avec des niveaux atteints */
.endbox .endxp { gap: 8px; }
.endbox .endxp .ex-up { padding: 6px 10px; gap: 8px; align-items: center; }
.endbox .endxp .ex-up > span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.endbox .endxp .ex-up b { font-size: 15px; } .endbox .endxp .ex-up small { font-size: 13px; }
.endbox .endxp .ex-bdg .bdg { --s: 34px !important; }
@media (max-width: 480px) { .endbox .endxp .ex-bdg { display: none; } .endbox .endxp .ex-lv { width: 50px; height: 50px; } .endbox .endxp .ex-lv b { font-size: 22px; } .endbox .endxp .ex-gain > b { font-size: 20px; } }

/* Régie › Badges : la recherche */
.abd-search .inp { width: 100%; max-width: 420px; }
.abd .sheet[hidden], .abd-it[hidden] { display: none; }

/* (étape 105) le marché des badges : vente entre joueurs et échanges (Boutique, onglet Badges) */
.mk { display: grid; gap: 14px; }
.mk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between; }
.mk-bar .asearch { flex: 1 1 260px; max-width: 460px; }
.mk-help { margin: 0; font-size: 14px; }
.mk-load { display: grid; place-items: center; padding: 40px; }
.mk-none { margin: 0; color: var(--chalk-2); }
.mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.mk-it, .mk-tr { --rc: rgba(26, 22, 17, .14); display: grid; justify-items: center; gap: 6px; padding: 14px 12px 12px; border-radius: 18px; background: linear-gradient(180deg, #fffaf0, #f1e6cf); color: #2a1d14; box-shadow: inset 0 0 0 2px var(--rc), 0 10px 22px -16px rgba(0, 0, 0, .7); text-align: center; min-width: 0; }
.mk-it[hidden], .mk-tr[hidden] { display: none; }
.mk-it.mine, .mk-tr.mine { box-shadow: inset 0 0 0 2px #2f8a5a, 0 10px 22px -16px rgba(0, 0, 0, .7); }
:is(.mk-it, .mk-tr).r-rare { --rc: #4a8ee0; } :is(.mk-it, .mk-tr).r-epique { --rc: #9b59d0; } :is(.mk-it, .mk-tr).r-legendaire { --rc: #d6a03c; } :is(.mk-it, .mk-tr).r-mythique { --rc: #e0559a; } :is(.mk-it, .mk-tr).r-secret { --rc: #3a2f4e; } :is(.mk-it, .mk-tr).r-vip { --rc: #c8952e; }
.mk-th { display: grid; place-items: center; height: 92px; }
.mk-nm { font-size: 15px; line-height: 1.2; }
.mk-pr { display: inline-flex; align-items: center; gap: 5px; padding: 3px 12px 3px 6px; border-radius: 99px; background: #2a1d10; color: #ffd86a; font-size: 16px; }
.mk-by { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px; font-size: 12.5px; color: #5a4a3a; }
.mk-who { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 2px; border: 0; border-radius: 99px; background: rgba(26, 22, 17, .07); color: #2a1d14; font: inherit; font-weight: 700; font-size: 13px; cursor: pointer; max-width: 100%; }
.mk-who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mk-who:hover { background: rgba(26, 22, 17, .14); }
.mk-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; } .mk-acts .btn svg { width: 14px; height: 14px; }
.mk-tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.mk-swap { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.4fr); align-items: center; gap: 8px; width: 100%; }
.mk-side { display: grid; justify-items: center; gap: 4px; min-width: 0; } .mk-side > small { font-size: 12px; color: #6a5a48; } .mk-side > b { font-size: 14px; }
.mk-arr { font-size: 26px; color: #b08a4a; font-weight: 800; }
.mk-wants { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.mk-want { display: grid; justify-items: center; gap: 2px; max-width: 76px; } .mk-want small { font-size: 11px; line-height: 1.15; color: #5a4a3a; }
.mk-n { font-weight: 700; color: #6b4a12; }
.mk-offs { display: grid; gap: 6px; width: 100%; }
.mk-off { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px rgba(26, 22, 17, .1); text-align: left; }
.mk-off.accepted { box-shadow: inset 0 0 0 2px #2f8a5a; background: #f1fbf4; }
.mk-give { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; } .mk-give small { font-size: 12px; color: #5a4a3a; }
.mk-oacts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.mk-oacts em { font-style: normal; font-size: 12.5px; font-weight: 700; color: #8a6414; } .mk-oacts em.ok { color: #1f7a3c; } .mk-oacts em svg { width: 13px; height: 13px; vertical-align: -2px; }
.mk-dot { display: inline-block; width: 9px; height: 9px; margin-left: 6px; border-radius: 50%; background: #e0533d; box-shadow: 0 0 0 2px rgba(255, 255, 255, .8); vertical-align: 2px; animation: gxPulse 1.6s ease-in-out infinite; }
.shp-tab .mk-dot { position: absolute; top: 6px; right: 8px; margin: 0; }
.links a.mk-has, .nmore-m a.mk-has { position: relative; } .links a.mk-has::after, .nmore-m a.mk-has::after { content: ""; position: absolute; top: 6px; right: -2px; width: 8px; height: 8px; border-radius: 50%; background: #e0533d; }
/* choisir des badges (vente, échange, proposition) */
.modal.mkmodal { width: min(640px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; }
.mk-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; max-height: 340px; overflow-y: auto; padding: 2px; }
.mk-pi { position: relative; display: grid; justify-items: center; gap: 3px; padding: 10px 6px 8px; border: 0; border-radius: 14px; background: #fffaf0; box-shadow: inset 0 0 0 1px rgba(26, 22, 17, .12); color: #2a1d14; font: inherit; cursor: pointer; }
.mk-pi b { font-size: 12.5px; line-height: 1.2; } .mk-pi small { font-size: 11px; color: #6a5a48; }
.mk-pi.on { box-shadow: inset 0 0 0 2.5px #2f8a5a; background: #eefaf2; } .mk-pi:disabled { opacity: .45; cursor: default; }
.mk-pi > i { position: absolute; top: 4px; right: 6px; font-style: normal; font-weight: 800; font-size: 12px; color: #1f7a3c; }
.mk-price { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 700; } .mk-price .inp { width: 140px; }
/* le sac à dos (×N), le profil (mes ventes et échanges), la régie */
.bdg-n { font-size: 12px; padding: 1px 6px; border-radius: 99px; background: #2a1d10; color: #ffd86a; }
.mymk-k { display: inline-block; flex: none; padding: 1px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 700; background: rgba(26, 22, 17, .08); color: #3a2a1a; }
.mymk-k.sell, .mymk-k.sold { background: #e4f4ea; color: #1f6a3c; } .mymk-k.buy { background: #e6eefb; color: #1f4f8a; } .mymk-k.trade, .mymk-k.done { background: #fff0c4; color: #8a5a14; } .mymk-k.removed, .mymk-k.cancelled { background: #f3d6d0; color: #8a2a1a; }
.mymk-l li { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .mymk-t small { color: var(--ink-2); }
.abd-mk { display: grid; gap: 10px; }
.amk-l { display: grid; gap: 6px; max-height: 360px; overflow-y: auto; }
.amk-r { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; background: #fffaf0; box-shadow: inset 0 0 0 1px rgba(26, 22, 17, .08); }
.amk-r > span:nth-child(2) { flex: 1; min-width: 0; } .amk-r small { color: var(--ink-2); }
.amk-done summary { cursor: pointer; font-weight: 600; margin-bottom: 6px; }
@media (max-width: 560px) { .mk-tgrid { grid-template-columns: minmax(0, 1fr); } .mk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mk-swap { grid-template-columns: minmax(0, 1fr); } .mk-arr { transform: rotate(90deg); justify-self: center; } }
@media (prefers-reduced-motion: reduce) { .mk-dot { animation: none; } }

/* (étape 106) la fenêtre de fin : les boutons du bas ne mangent plus le bas du bloc d'XP (plus d'ombre qui le recouvre) ;
   le bloc d'XP a toujours son cadre fermé, avec un peu d'air sous lui */
.endbox .endcard > .acts { box-shadow: none; background: var(--paper); border-top: 1px solid rgba(26, 22, 17, .08); }
.endbox .endcard .endxp { margin-bottom: 4px; }

/* la Boutique : un badge tient dans sa case, avec de la marge (comme les autres objets) */
.shp-bdg > svg { width: 62%; height: 62%; }
.mk-th { height: 76px; } .mk-th .bdg { --s: 62px !important; }

/* le marché : tous les boutons lisibles sur le carton */
.mk-it .btn.ghost, .mk-tr .btn.ghost, .mk-off .btn.ghost, .mkmodal .btn.ghost { --fg: var(--ink); color: var(--ink); background: rgba(26, 22, 17, .05); box-shadow: inset 0 0 0 1.5px rgba(26, 22, 17, .28); }
.mk-it .btn.ghost:hover, .mk-tr .btn.ghost:hover, .mk-off .btn.ghost:hover { background: rgba(26, 22, 17, .1); box-shadow: inset 0 0 0 1.5px #8a6414; }
.mk-it .btn:not(.ghost), .mk-tr .btn:not(.ghost), .mk-off .btn:not(.ghost) { color: var(--ink); }
.mk-it .btn:disabled, .mk-tr .btn:disabled, .mk-off .btn:disabled { opacity: .5; }

/* les cartes du marché dans les messages privés */
.cp-mk { background: linear-gradient(135deg, rgba(125, 140, 255, .14), rgba(242, 213, 138, .2)); box-shadow: inset 0 0 0 1.5px rgba(122, 110, 200, .4); }
.cp-mk.done, .cp-mk.buy { background: linear-gradient(135deg, rgba(61, 165, 122, .18), rgba(242, 213, 138, .22)); box-shadow: inset 0 0 0 1.5px rgba(61, 165, 122, .55); }
.cp-mk.refuse, .cp-mk.ocancel, .cp-mk.unaccept { background: rgba(26, 22, 17, .05); box-shadow: inset 0 0 0 1.5px rgba(26, 22, 17, .15); }
.cp-mk .cp-gth > svg { width: 44px; height: 44px; max-width: none; }
.cp-mk2 { display: flex; align-items: center; gap: 1px; } .cp-mk2 > svg { width: 22px; height: 22px; } .cp-mk2 i { font-style: normal; font-size: 11px; color: #8a6414; }
.cp-mk .cp-gtx span { font-size: 13.5px; line-height: 1.4; } .cp-mk .cp-gtx svg { vertical-align: -2px; }
.mymk-l li[hidden], .amk-r[hidden] { display: none; }
.amk-q { max-width: 420px; }

/* (étape 107) la fenêtre de fin : les boutons sont toujours SOUS le contenu (plus collés en bas par-dessus le bloc d'XP) ;
   si la fenêtre est plus haute que l'écran, c'est le fond qui défile, la fenêtre reste d'un seul bloc */
.endbox, .endbox:has(.endwin), .endbox:has(.endxp) { align-content: safe center; }
.endbox .endcard, .endbox:has(.endwin) .endcard { max-height: none; overflow: visible; }
.endbox .endcard .acts, .endbox .endcard > .acts { position: static; margin: 2px 0 0; padding: 0; background: none; border-top: 0; box-shadow: none; border-radius: 0; }
.endbox .endcard .endxp { margin-bottom: 0; }

/* la fenêtre « Adversaire trouvé » du mode classé : le bouton « Refuser » était clair sur le carton (invisible) */
.rqf-card .btn.ghost { --fg: var(--ink); color: var(--ink); background: rgba(26, 22, 17, .05); box-shadow: inset 0 0 0 1.5px rgba(26, 22, 17, .3); }
.rqf-card .btn.ghost:hover { background: rgba(26, 22, 17, .1); }
.rqf-card .btn:disabled { opacity: .55; }
.rqf-card .acts { flex-wrap: wrap; }

/* ===== essai : le rat en mouvement (public/persos3.js) — bloc à part, ne touche rien d'autre ===== */
.pz-walk { grid-column: 1 / -1; width: 100%; justify-content: center; }
.modal.rw-modal { width: min(780px, 100%); gap: 12px; padding: 26px 24px 22px; }
.rw { display: grid; gap: 12px; min-width: 0; }
.rw h3 { margin: 0; padding-right: 34px; }
.rw-lead { margin: 0; }
.rw-stage { border-radius: 16px; background: radial-gradient(120% 90% at 50% 30%, #4a6b8a 0%, #2c3e55 70%, #22303f 100%); padding: 6px 8px 10px; box-shadow: inset 0 0 0 1.5px rgba(26, 22, 17, .25); }
.rw-floor { display: block; width: 100%; height: auto; touch-action: manipulation; user-select: none; }
.rw-tile { stroke: rgba(70, 52, 30, .35); stroke-width: 1; cursor: pointer; transition: fill .15s; }
.rw-tile.a { fill: #eadcbd; }
.rw-tile.b { fill: #c9b48c; }
.rw-tile:hover { fill: #f6e6a8; }
.rw-edge.l { fill: #9c8460; }
.rw-edge.r { fill: #7d6748; }
.rw-target { fill: none; stroke: #e2b84f; stroke-width: 3; pointer-events: none; transform-box: fill-box; transform-origin: center; animation: rwPing 1s ease-in-out infinite; }
.rw-rat { pointer-events: none; }
.rw-turn { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.rw-turn .btn.ghost { color: var(--ink); background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1.5px rgba(26, 22, 17, .22); }
.rw-turn .btn.ghost:hover { background: #fff; }
.rw-turn .btn svg { width: 17px; height: 17px; }
.rw-now { min-width: 170px; text-align: center; font-weight: 700; color: var(--ink); }
.rw-angles { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.rw-angles figure { margin: 0; display: grid; justify-items: center; align-content: start; gap: 2px; padding: 6px 3px 5px; border-radius: 12px; background: rgba(26, 22, 17, .05); box-shadow: inset 0 0 0 1.5px transparent; transition: background .15s, box-shadow .15s; }
.rw-angles figure.on { background: rgba(226, 184, 79, .22); box-shadow: inset 0 0 0 1.5px #c9a03a; }
.rw-angles figcaption { font-size: 11.5px; line-height: 1.25; color: var(--ink); text-align: center; }
.rw-ang { width: 100%; max-width: 64px; aspect-ratio: 200 / 220; }
.rw-ang > svg { width: 100%; height: 100%; display: block; overflow: visible; }
.rw-ang.flip > svg { transform: scaleX(-1); }
.rw-note { margin: 0; font-size: 13px; color: rgba(26, 22, 17, .7); }
@keyframes rwPing { 0%, 100% { transform: scale(.85); opacity: .9; } 50% { transform: scale(1.08); opacity: .45; } }
/* la marche : le corps sautille, les jambes et les bras se balancent, la queue remue */
.rw-walk .pe-body { animation: rwBob .25s ease-in-out infinite alternate; }
.rw-walk .pe-tail { animation: rwTail .5s ease-in-out infinite alternate; }
/* de trois quarts (rw-v-qf / rw-v-qb) et de profil (rw-v-side) : chaque jambe avance vers la droite (le sens de la marche)
   en se levant, le bras du même côté part dans l'autre sens (de profil, de plus grands pas) ; vers la gauche, tout le dessin
   est en miroir. De face et de dos (rw-v-front / rw-v-back) : les pieds se lèvent l'un après l'autre, les bras se balancent */
.rw-walk .pe-leg-l { animation: rwStep .5s ease-in-out infinite; }
.rw-walk .pe-leg-r { animation: rwStep .5s ease-in-out infinite -.25s; }
.rw-walk .pe-arm-l { animation: rwSwing .5s ease-in-out infinite -.25s; }
.rw-walk .pe-arm-r { animation: rwSwing .5s ease-in-out infinite; }
.rw-walk .pe-head { animation: rwNod .25s ease-in-out infinite alternate; }
.rw-v-side.rw-walk .pe-leg-l { animation-name: rwStride; }
.rw-v-side.rw-walk .pe-leg-r { animation-name: rwStride; }
.rw-v-side.rw-walk .pe-arm-l, .rw-v-side.rw-walk .pe-arm-r { animation-name: rwSwingBig; }
.rw-v-front.rw-walk .pe-leg-l, .rw-v-back.rw-walk .pe-leg-l { animation: rwLift .5s linear infinite; }
.rw-v-front.rw-walk .pe-leg-r, .rw-v-back.rw-walk .pe-leg-r { animation: rwLift .5s linear infinite -.25s; }
.rw-v-front.rw-walk .pe-arm-l, .rw-v-back.rw-walk .pe-arm-l { animation: rwSwayL .5s ease-in-out infinite; }
.rw-v-front.rw-walk .pe-arm-r, .rw-v-back.rw-walk .pe-arm-r { animation: rwSwayR .5s ease-in-out infinite; }
.rw-v-front.rw-walk .pe-head, .rw-v-back.rw-walk .pe-head { animation: none; }
@keyframes rwBob { from { transform: translateY(0); } to { transform: translateY(-3px); } }
@keyframes rwTail { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@keyframes rwStep { 0%, 100% { transform: rotate(-14deg); } 25% { transform: translateY(-4px); } 50% { transform: rotate(14deg); } 75% { transform: none; } }
@keyframes rwSwing { 0%, 100% { transform: rotate(-16deg); } 50% { transform: rotate(16deg); } }
@keyframes rwStride { 0%, 100% { transform: rotate(-24deg); } 25% { transform: translateY(-3px); } 50% { transform: rotate(24deg); } 75% { transform: none; } }
@keyframes rwSwingBig { 0%, 100% { transform: rotate(-26deg); } 50% { transform: rotate(26deg); } }
@keyframes rwLift { 0%, 50%, 100% { transform: none; } 25% { transform: translateY(-6px); } }
@keyframes rwSwayL { 0%, 100% { transform: rotate(7deg); } 50% { transform: rotate(-4deg); } }
@keyframes rwSwayR { 0%, 100% { transform: rotate(4deg); } 50% { transform: rotate(-7deg); } }
@keyframes rwNod { from { transform: rotate(-1.5deg); } to { transform: rotate(1.5deg); } }
/* lot 7 : l'animal qui suit le rat (sur le sol, sur sa tête pour la pie, en vol pour le dragon) et le choix de l'animal */
.rw-pet { pointer-events: none; }
.rw-pin { transform-box: fill-box; transform-origin: 50% 100%; }
.rw-pet.walk .rw-pin { animation: rwHop .3s ease-in-out infinite alternate; }
.rw-pet.walk.rw-ps-egg .rw-pin { animation: rwRoll .36s ease-in-out infinite alternate; }
.rw-pet.fly .rw-pin { animation: rwHover 1.8s ease-in-out infinite; }
.rw-pet.perch-walk .rw-pin { animation: rwHop .25s ease-in-out infinite alternate; }
@keyframes rwHop { from { transform: translateY(0); } to { transform: translateY(-6px); } }
@keyframes rwRoll { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
@keyframes rwHover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.rw-petsel { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; font-size: 13.5px; color: var(--ink); }
.rw-petsel label { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.rw-petsel select { font: inherit; font-weight: 500; color: var(--ink); background: rgba(255, 255, 255, .7); border: 1.5px solid rgba(26, 22, 17, .25); border-radius: 10px; padding: 5px 8px; }
.rw-petsel select:disabled { opacity: .5; }
/* de profil, le bras et la jambe de devant sont dans un repère en miroir (pour les emotes) : leur pas est décalé pour que les
   deux jambes (et les deux bras) restent opposés en marchant */
.rw-v-side.rw-walk .pe-leg-l { animation-delay: -.25s; }
.rw-v-side.rw-walk .pe-arm-l { animation-delay: 0s; }
/* les emotes de l'essai */
.rw-emos { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 6px; }
.rw-emo { display: grid; justify-items: center; gap: 1px; padding: 6px 4px 5px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1.5px rgba(26, 22, 17, .18); color: var(--ink); cursor: pointer; font: inherit; }
.rw-emo:hover { background: #fff; }
.rw-emo span { font-size: 20px; line-height: 1.1; }
.rw-emo small { font-size: 11.5px; line-height: 1.2; text-align: center; }
.rw-emohint { margin: 0; font-size: 12.5px; color: rgba(26, 22, 17, .7); text-align: center; }
/* les animations des objets tenus, du chapeau, des yeux, de l'aura… comme sur le rat de face du site (.pfull.anim) */
/* rw-anim : début (fabriqué par node tools/rw-anim.mjs, ne pas modifier à la main) */
.rw.rw-anim .pp-blink { transform-box: fill-box; transform-origin: 50% 50%; animation: ppBlink 5s ease-in-out infinite; }
.rw.rw-anim .pp-tail { transform-box: fill-box; transform-origin: 0% 100%; animation: ppTail 3.6s ease-in-out infinite; }
.rw.rw-anim .pp-breath { transform-box: fill-box; transform-origin: 50% 100%; animation: ppBreath 3.8s ease-in-out infinite; }
.rw.rw-anim .pp-head { transform-box: fill-box; transform-origin: 50% 100%; animation: ppHead 5.6s ease-in-out infinite; }
.rw.rw-anim .pp-aura { transform-box: fill-box; transform-origin: center; animation: ppAura 3.4s ease-in-out infinite; }
.rw-anim .pp-aura { transform-box: fill-box; transform-origin: center; animation: ppAura2 3.2s ease-in-out infinite; }
.rw-anim .pp-spark { transform-box: fill-box; transform-origin: center; animation: ppSpark 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.45s); }
.rw.rw-anim .pp-sparks { transform-box: view-box; transform-origin: 100px 130px; animation: ppOrbit 18s linear infinite; }
.rw.rw-anim .pp-swing { transform-box: view-box; animation: ppSwing 2.4s ease-in-out infinite; }
.rw.rw-anim .pp-flut { transform-box: view-box; animation: ppFlut 2.8s ease-in-out infinite; }
.rw.rw-anim .pp-gem { transform-box: fill-box; transform-origin: center; animation: ppSpark 2.2s ease-in-out infinite; }
.rw.rw-anim .pp-glow { transform-box: fill-box; transform-origin: center; animation: ppGlow 2.2s ease-in-out infinite; }
.rw.rw-anim .pp-press { transform-box: fill-box; transform-origin: 50% 100%; animation: ppPress 3.4s ease-in-out infinite; }
.rw.rw-anim .pp-fan { transform-box: fill-box; transform-origin: 30% 100%; animation: ppFan 4s ease-in-out infinite; }
.rw.rw-anim .pp-wing { animation: ppWing 2.6s ease-in-out infinite; }
.rw.rw-anim .pp-jet { transform-box: view-box; animation: ppJet .18s ease-in-out infinite alternate; }
.rw.rw-anim .pp-float { transform-box: view-box; animation: ppFloat 3s ease-in-out infinite; }
.rw-anim .pp-bub { transform-box: fill-box; transform-origin: center; animation: ppBub 3.6s ease-in infinite; animation-delay: calc(var(--i) * -.45s); }
.rw-anim .pp-afl { transform-box: fill-box; transform-origin: 50% 100%; animation: ppAfl .5s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -.13s); }
.rw.rw-anim .pp-eyefl { transform-box: fill-box; transform-origin: 50% 100%; animation: ppAfl .4s ease-in-out infinite alternate; }
.rw.rw-anim .pp-spin { transform-box: view-box; animation: ppSpin 2.4s linear infinite; }
.rw.rw-anim .pp-pom { transform-box: fill-box; transform-origin: 50% 100%; animation: ppPom 2.6s ease-in-out infinite; }
.rw.rw-anim .pp-cape { transform-box: fill-box; transform-origin: 50% 0; animation: ppCape 3.6s ease-in-out infinite; }
.rw.rw-anim .pp-glint { animation: ppGlint 3.4s ease-in-out infinite; }
.rw.rw-anim .pp-dice { transform-box: fill-box; transform-origin: 50% 80%; animation: ppDice 4s ease-in-out infinite; }
.rw.rw-anim .pp-ystr { transform-box: view-box; animation: ppYStr 2.8s ease-in-out infinite; }
.rw.rw-anim .pp-ydisc { transform-box: view-box; animation: ppYDisc 2.8s ease-in-out infinite; }
.rw.rw-anim .pp-yspin { transform-box: view-box; animation: ppSpin .45s linear infinite; }
.rw.rw-anim .pp-yrot { transform-box: view-box; animation: ppYRot 2.8s ease-in-out infinite; }
.rw.rw-anim .pp-top { transform-box: view-box; animation: ppTop .5s linear infinite, ppWobble 2.4s ease-in-out infinite; }
.rw.rw-anim .pp-jcard { transform-box: view-box; animation: ppJCard 3.4s linear infinite; }
.rw.rw-anim .pp-flip { transform-box: view-box; animation: ppFlip 2.2s cubic-bezier(.3, .6, .5, 1) infinite; }
.rw.rw-anim .pp-coin { transform-box: view-box; animation: ppCoin .3s linear infinite; }
.rw.rw-anim .pp-dribble { transform-box: view-box; animation: ppDribble 1.1s cubic-bezier(.5, 0, .5, 1) infinite; }
.rw.rw-anim .pp-coinspin { transform-box: view-box; animation: ppCoin 2.6s ease-in-out infinite; }
.rw.rw-anim .pp-cardtilt { transform-box: view-box; animation: ppCardTilt 3.2s ease-in-out infinite; }
.rw.rw-anim .pp-viprays { transform-box: view-box; animation: ppVipRays 26s linear infinite; }
.rw.rw-anim .pp-vipw { transform-box: view-box; animation: ppVipW 2.8s ease-in-out infinite; }
.rw.rw-anim .pp-moon { transform-box: fill-box; transform-origin: center; animation: ppMoon 6s ease-in-out infinite; }
.rw.rw-anim .pp-mist { transform-box: fill-box; transform-origin: center; animation: ppMist 7s ease-in-out infinite; animation-delay: calc(var(--i) * -1.7s); }
/* rw-anim : fin */
@media (prefers-reduced-motion: reduce) { .rw-anim [class*="pp-"] { animation: none !important; } }
/* les animaux : en marchant, ils battent des ailes plus vite */
.rw-pet.walk .pet-chipie .pt-wing, .rw-pet.walk .pet-ducat .pt-wl, .rw-pet.walk .pet-ducat .pt-wr { animation-duration: .3s; }
@media (max-width: 560px) {
  .modal.rw-modal { padding: 22px 12px 16px; }
  .rw-angles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .rw-now { order: -1; flex-basis: 100%; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .rw-pet .rw-pin { animation: none !important; }
  .rw-target, .rw-walk .pe-body, .rw-walk .pe-tail, .rw-walk .pe-head, .rw-walk .pe-leg-l, .rw-walk .pe-leg-r, .rw-walk .pe-arm-l, .rw-walk .pe-arm-r { animation: none; }
}

/* (étape 108) le calendrier de connexion : le bouton de la barre du haut, sa fenêtre et la régie */
.calbtn { position: relative; }
.calbtn .caln { position: absolute; top: -2px; right: -3px; width: 12px; height: 12px; border-radius: 50%; background: #ffd34d; box-shadow: 0 0 0 2px #0d3a2a, 0 0 10px rgba(255, 211, 77, .9); animation: calPulse 1.8s ease-in-out infinite; }
.calbtn.ready svg { color: #ffd86a; }
@keyframes calPulse { 50% { transform: scale(1.3); box-shadow: 0 0 0 2px #0d3a2a, 0 0 16px rgba(255, 211, 77, 1); } }
.mm-cal svg { width: 26px; height: 26px; } .mm-cal.ready b { color: #b8860b; }
.modal.dlymodal { width: min(760px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; gap: 14px; }
.dly { display: grid; gap: 14px; }
.dly-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-right: 34px; }
.dly-top h3 { margin: 4px 0 0; }
.dly-top .eyebrow svg { width: 16px; height: 16px; vertical-align: -3px; }
.dly-streak { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 8px; padding: 8px 14px 8px 10px; border-radius: 16px; background: #2a1d10; color: #ffe9b8; box-shadow: inset 0 0 0 1.5px #c9952e; }
.dly-streak .dly-fl { grid-row: span 2; width: 34px; height: 34px; animation: dlyFl 1.3s ease-in-out infinite; transform-origin: 50% 90%; }
.dly-streak .dly-fl svg { width: 100%; height: 100%; display: block; }
.dly-streak b { font: 800 24px/1 var(--display, inherit); color: #ffd86a; } .dly-streak small { font-size: 12.5px; color: #f3ddb0; }
@keyframes dlyFl { 0%, 100% { transform: scale(1, 1); } 40% { transform: scale(.92, 1.08); } 70% { transform: scale(1.05, .95); } }
.dly-rule { margin: 0; padding: 10px 14px; border-radius: 12px; background: rgba(201, 149, 46, .12); color: var(--ink); font-size: 14.5px; box-shadow: inset 0 0 0 1px rgba(201, 149, 46, .4); }
.dly-lost { margin: 0; padding: 8px 14px; border-radius: 12px; background: #fde4dc; color: #8a2a1a; font-size: 14px; font-weight: 600; }
.dly-goals { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dly-goal { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; background: linear-gradient(135deg, #fff8e2, #f4e6c2); box-shadow: inset 0 0 0 1.5px #e3b552; }
.dly-goal.daily30 { background: linear-gradient(135deg, #f6ecff, #ead6ff); box-shadow: inset 0 0 0 1.5px #a070e0; }
.dly-goal > span:last-child { display: grid; gap: 2px; min-width: 0; } .dly-goal b { font-size: 15px; color: var(--ink); } .dly-goal small { font-size: 12.5px; color: var(--ink-2); }
.dly-now { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 16px; border-radius: 16px; background: #fbf4e4; box-shadow: inset 0 0 0 2px #e3b552; }
.dly-now.can { background: linear-gradient(135deg, #fff6d0, #ffe9a6); box-shadow: inset 0 0 0 2px #e3b552, 0 0 0 4px rgba(255, 211, 77, .35); animation: dlyGlow 2.2s ease-in-out infinite; }
.dly-now.done { justify-content: flex-start; background: #e6f6ea; box-shadow: inset 0 0 0 2px #7cc48c; }
.dly-now.done > div { display: grid; gap: 3px; } .dly-now.done b { font-size: 16px; color: #1f6a3a; } .dly-now.done small { font-size: 13.5px; color: #2c4a34; }
.dly-big { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #2fae5a; color: #fff; flex: none; } .dly-big svg { width: 24px; height: 24px; }
@keyframes dlyGlow { 50% { box-shadow: inset 0 0 0 2px #e3b552, 0 0 0 7px rgba(255, 211, 77, .2); } }
.dly-nowr { display: grid; gap: 6px; } .dly-nowt { font-size: 14px; font-weight: 700; color: #6b4a12; } .dly-nowt b { font-size: 17px; }
.dly-claim { font-size: 17px; padding: 12px 22px; }
.dly-need { display: grid; gap: 8px; justify-items: start; max-width: 300px; } .dly-need small { font-size: 13.5px; color: var(--ink-2); } .dly-need small svg { width: 14px; height: 14px; vertical-align: -2px; }
.dly-rws { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 6px; }
.dly-rws.big { justify-content: flex-start; gap: 8px 12px; }
.dly-rw { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; color: var(--ink); } .dly-rw b { font-weight: 800; }
.dly-rws.big .dly-rw { font-size: 17px; }
.dly-it { display: inline-grid; place-items: center; width: 30px; height: 30px; } .dly-it > *, .dly-it svg { width: 100%; height: 100%; }
.dly-rws.big .dly-it { width: 44px; height: 44px; }
.gxc-in .dly-rws.big { justify-content: center; }
.dly-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.dly-d { position: relative; display: grid; align-content: start; justify-items: center; gap: 4px; min-height: 92px; padding: 7px 4px 8px; border-radius: 12px; background: #fbf4e4; box-shadow: inset 0 0 0 1.5px #dccba6; text-align: center; }
.dly-n { font-size: 12px; color: var(--ink-2); } .dly-n b { font-size: 14px; color: var(--ink); }
.dly-d.done { background: #e9f5ec; box-shadow: inset 0 0 0 1.5px #9ccfa8; } .dly-d.done .dly-rws { opacity: .55; }
.dly-ok { position: absolute; top: 5px; right: 5px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #2fae5a; color: #fff; } .dly-ok svg { width: 12px; height: 12px; }
.dly-lk { position: absolute; top: 5px; right: 6px; color: #8a6a3a; } .dly-lk svg { width: 13px; height: 13px; }
.dly-d.now { background: #fff6d0; box-shadow: inset 0 0 0 2.5px #e3b552; }
.dly-d.now.can { animation: dlyCell 1.6s ease-in-out infinite; }
@keyframes dlyCell { 50% { transform: translateY(-3px); box-shadow: inset 0 0 0 2.5px #e3b552, 0 6px 14px -6px rgba(201, 149, 46, .8); } }
.dly-d.bd { background: linear-gradient(160deg, #fff8e2, #f2dfae); box-shadow: inset 0 0 0 2px #e3b552; }
.dly-d.bd.daily30 { background: linear-gradient(160deg, #f6ecff, #e2c8ff); box-shadow: inset 0 0 0 2px #a070e0; }
.dly-d.bd.done { opacity: .8; }
.dly-d.gx-open { animation: gxOpen .7s cubic-bezier(.3, 1.6, .5, 1); z-index: 2; }
.dly-foot { margin: 0; font-size: 13px; color: var(--ink-2); text-align: center; }
@media (max-width: 640px) {
  .modal.dlymodal { padding: 22px 16px; }
  .dly-top h3 { font-size: 22px; }
  .dly-streak { padding: 6px 10px 6px 8px; } .dly-streak .dly-fl { width: 26px; height: 26px; } .dly-streak b { font-size: 20px; }
  .dly-rule { font-size: 13.5px; }
  .dly-goals { gap: 6px; } .dly-goal { gap: 6px; padding: 6px 8px; } .dly-goal .bdg { --s: 38px !important; } .dly-goal b { font-size: 13px; } .dly-goal small { font-size: 11.5px; }
  .dly-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
  .dly-d { min-height: 74px; padding: 16px 2px 6px; }
  .dly-n { position: absolute; top: 3px; left: 5px; } .dly-nw { display: none; } .dly-n b { font-size: 12.5px; }
  .dly-ok { top: 3px; right: 3px; width: 15px; height: 15px; } .dly-ok svg { width: 10px; height: 10px; } .dly-lk { top: 3px; right: 4px; }
  .dly-rw { font-size: 11.5px; } .dly-it { width: 24px; height: 24px; }
  .dly-now { padding: 12px; } .dly-claim { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .calbtn .caln, .dly-streak .dly-fl, .dly-now.can, .dly-d.now.can { animation: none; } }
.adly-stats { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; font-size: 14px; } .adly-stats > span { display: inline-flex; align-items: center; gap: 6px; }
.adly-bd { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-2); }

/* (étape 109) l'onglet Monnaie de la Boutique : Rats, Cheese, Packs */
.shp-bub.mnybub { display: inline-flex; align-items: center; gap: 6px; } .shp-bub.mnybub svg { width: 18px; height: 18px; flex: none; }
.mny { display: grid; gap: 16px; }
.mny-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.mny-card { position: relative; display: grid; justify-items: center; align-content: start; gap: 6px; padding: 18px 16px 16px; border-radius: 18px; background: var(--paper); color: var(--ink); text-align: center; box-shadow: inset 0 0 0 2px #dccba6, 0 14px 30px -18px rgba(0, 0, 0, .7); }
.mny-card small { color: var(--ink-2); font-size: 13.5px; } .mny-card small svg { width: 15px; height: 15px; vertical-align: -3px; }
.mny-t { font: 800 19px/1.15 var(--display, inherit); color: #4a2f10; }
.mny-art { position: relative; display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #fff6d6, #f2dfae 70%); box-shadow: inset 0 0 0 2px #e3b552; }
.mny-art > svg { width: 64px; height: 64px; }
.mny-art.sm { width: 86px; height: 70px; border-radius: 16px; }
.mny-plus { position: absolute; right: -10px; bottom: -4px; padding: 2px 9px; border-radius: 99px; background: #2fae5a; color: #fff; font-weight: 800; font-size: 14px; box-shadow: 0 0 0 2px var(--paper); }
.mny-free.ready { box-shadow: inset 0 0 0 2.5px #e3b552, 0 0 0 4px rgba(255, 211, 77, .35), 0 14px 30px -18px rgba(0, 0, 0, .7); animation: mnyGlow 2.2s ease-in-out infinite; }
.mny-free.ready .mny-art { animation: mnyBob 2.4s ease-in-out infinite; }
@keyframes mnyGlow { 50% { box-shadow: inset 0 0 0 2.5px #e3b552, 0 0 0 8px rgba(255, 211, 77, .18), 0 14px 30px -18px rgba(0, 0, 0, .7); } }
@keyframes mnyBob { 50% { transform: translateY(-4px) rotate(-3deg); } }
.mny-go { font-size: 16px; padding: 10px 20px; margin-top: 4px; }
.mny-wait { margin-top: 4px; font-size: 14px; color: var(--ink-2); } .mny-wait b { color: var(--ink); }
.mny-ad .mny-art { background: radial-gradient(circle at 50% 40%, #e6f0f6, #c9dbe6 70%); box-shadow: inset 0 0 0 2px #8fb3c9; }
.mny-dots { display: flex; gap: 6px; margin: 2px 0; } .mny-dots i { width: 10px; height: 10px; border-radius: 50%; background: #dccba6; box-shadow: inset 0 0 0 1.5px #b9a57e; }
.mny-dots i.on { background: #e3b552; box-shadow: inset 0 0 0 1.5px #8a5a14; } /* (étape 128 : les pubs déjà regardées aujourd'hui) */
.mny-test { display: block; margin-top: 4px; color: #8a5a14; font-size: 12px; }
.amny-ads { margin: 0 0 8px; }
.mny-soon { display: inline-block; margin-top: 4px; padding: 4px 12px; border-radius: 99px; background: #2a1d10; color: #ffd86a; font-size: 12.5px; font-weight: 700; }
.mny-card.soon > .mny-art, .mny-off.soon > .mny-art { filter: saturate(.75); }
.mny-xchg { justify-items: start; text-align: left; gap: 8px; }
.mny-xh { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .mny-xi { display: inline-flex; align-items: center; gap: 6px; } .mny-xi i { font-style: normal; color: #8a6a3a; font-weight: 800; }
.mny-xrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .mny-xrow .inp { width: 96px; } .mny-xrow > span { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; }
.mny-cost b { font-size: 18px; }
.mny-h { margin: 6px 0 0; }
.mny-lock { margin: 0; padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, .06); color: var(--chalk-2, #e6dcc6); font-size: 14px; box-shadow: inset 0 0 0 1px var(--line, rgba(255, 255, 255, .15)); }
.mny-lock svg, .mny-note svg { width: 15px; height: 15px; vertical-align: -2px; }
.mny-offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.mny-off { position: relative; display: grid; justify-items: center; gap: 5px; padding: 14px 10px 12px; border-radius: 16px; background: var(--paper); color: var(--ink); text-align: center; box-shadow: inset 0 0 0 2px #dccba6; opacity: .9; }
.mny-on { font-size: 15px; color: #4a2f10; } .mny-am { display: inline-flex; align-items: center; gap: 4px; font-size: 16px; } .mny-am b { font-weight: 800; }
.mny-bonus { position: absolute; top: 8px; right: 8px; padding: 2px 8px; border-radius: 99px; background: #e0533d; color: #fff; font-style: normal; font-size: 12px; font-weight: 800; }
.mny-off .mny-plus2 { font-size: 12px; color: var(--ink-2); text-align: center; line-height: 1.3; } /* (étape 118) les objets en plus d'un achat */
.mny-off .mny-once { font-size: 11.5px; font-weight: 700; color: #8a5a12; }
.mny-pile { display: flex; align-items: flex-end; justify-content: center; } .mny-pile > svg { width: 34px; height: 34px; margin-left: -14px; } .mny-pile > svg:first-child { margin-left: 0; }
.mny-pile > svg:nth-child(2) { transform: translateY(-6px); } .mny-pile > svg:nth-child(3) { transform: translateY(-2px); } .mny-pile > svg:nth-child(4) { transform: translateY(-9px); }
.mny-note { margin: 0; font-size: 13px; color: var(--chalk-2, #e6dcc6); text-align: center; }
.mny-packs { display: grid; gap: 14px; }
.mny-pack { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 18px; align-items: center; padding: 18px; border-radius: 20px; background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 2px #e3b552, 0 16px 34px -20px rgba(0, 0, 0, .8); }
.mny-pack.r-epique { box-shadow: inset 0 0 0 2px #a070e0, 0 16px 34px -20px rgba(0, 0, 0, .8); }
.mny-chest { display: grid; place-items: center; height: 150px; border-radius: 16px; background: radial-gradient(circle at 50% 45%, #fff3c8, #e9cf8e 75%); }
.mny-chest svg { width: 130px; } .mny-chest .mny-lid { transform-box: view-box; transform-origin: 10px 34px; animation: mnyLid 4s ease-in-out infinite; } .mny-chest .mny-spark { animation: sTw 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes mnyLid { 0%, 70%, 100% { transform: none; } 80% { transform: rotate(-12deg); } 88% { transform: rotate(-4deg); } }
.mny-pack.open .mny-lid { animation: none; transform: rotate(-35deg); transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.mny-pi { display: grid; gap: 8px; } .mny-pn { font: 800 22px/1.1 var(--display, inherit); color: #4a2f10; }
.mny-cont { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px 12px; }
.mny-cont li { display: flex; align-items: center; gap: 8px; font-size: 14px; } .mny-th { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: #fbf4e4; box-shadow: inset 0 0 0 1px #dccba6; flex: none; overflow: hidden; } .mny-th > *, .mny-th svg { max-width: 100%; max-height: 100%; }
.mny-pf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .mny-price { display: inline-flex; align-items: center; gap: 5px; font-size: 20px; } .mny-price b { font-weight: 800; }
.mny-pack.own { opacity: .85; }
.mk-warn { display: block; margin-top: 6px; color: #ffd86a; font-weight: 700; }
@media (max-width: 640px) {
  .mny-row { grid-template-columns: 1fr 1fr; gap: 10px; } .mny-card { padding: 14px 10px 12px; } .mny-art { width: 74px; height: 74px; } .mny-art > svg { width: 50px; height: 50px; } .mny-t { font-size: 16px; }
  .mny-pack { grid-template-columns: 1fr; } .mny-chest { height: 120px; }
}
@media (prefers-reduced-motion: reduce) { .mny-free.ready, .mny-free.ready .mny-art, .mny-chest .mny-lid, .mny-chest .mny-spark { animation: none; } }
/* la régie de la Monnaie */
.amny-lock { margin: 0; padding: 10px 14px; border-radius: 12px; background: #fff3d6; color: #6b4a12; font-size: 14px; box-shadow: inset 0 0 0 1.5px #e3b552; } .amny-lock svg { width: 15px; height: 15px; vertical-align: -2px; }
.amny-packs { display: grid; gap: 12px; } .amny-pack { display: grid; gap: 10px; }
.amny-items { display: grid; gap: 6px; } .amny-it { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .amny-it .inp:first-child { flex: 1 1 220px; }
.ash-one { display: grid; gap: 4px; max-width: 320px; margin-top: 8px; }
.mny-card small > svg, .mny-xchg small svg, .mny-am > svg { display: inline-block !important; vertical-align: -3px; }
.mny-xrow .inp { background: #fff; color: var(--ink); font-weight: 700; font-size: 16px; box-shadow: inset 0 0 0 1.5px #c9b48a; }

/* (étape 110) acheter de la Cheese avec des rats : dans la fenêtre de la Cheese (barre du haut), plus dans la Boutique */
.rp-buy { display: grid; gap: 6px; margin: 2px 0 10px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 216, 106, .1); box-shadow: inset 0 0 0 1.5px rgba(227, 181, 82, .55); }
.rp-bt { display: flex; align-items: center; gap: 5px; font-size: 14px; } .rp-bt i { font-style: normal; opacity: .7; } .rp-bt svg { width: 18px; height: 18px; flex: none; }
.rp-buy small { font-size: 12.5px; opacity: .85; } .rp-buy small svg { width: 14px; height: 14px; vertical-align: -2px; }
.rp-brow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rp-brow .inp { width: 74px; padding: 6px 8px; background: #fff; color: #1a1611; font-weight: 700; font-size: 15px; box-shadow: inset 0 0 0 1.5px #c9b48a; }
.rp-cost { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; } .rp-cost svg { width: 16px; height: 16px; } .rp-cost b { font-size: 16px; }
.rp-max { color: #ffd86a; opacity: 1 !important; }
.mny-tip { margin: 0; padding: 10px 14px; border-radius: 12px; background: rgba(255, 216, 106, .1); color: #ffe9b8; font-size: 14px; box-shadow: inset 0 0 0 1px rgba(227, 181, 82, .5); } .mny-tip svg { width: 18px; height: 18px; vertical-align: -4px; }
.rp-price { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 14px; } .rp-price svg { width: 16px; height: 16px; } .rp-price b { font-size: 17px; }
.rp-up { font-style: normal; margin-left: 4px; padding: 1px 7px; border-radius: 99px; background: #e0533d; color: #fff; font-size: 12px; font-weight: 800; } .rp-base { font-style: normal; margin-left: 4px; padding: 1px 7px; border-radius: 99px; background: #2fae5a; color: #fff; font-size: 12px; font-weight: 700; }

/* (étape 112) le VIP : pseudo en couleur, prix réduits, pack VIP, récompense du jour, couleur du pseudo, tchat VIP */
.vipnm { text-shadow: 0 0 1px rgba(0, 0, 0, .45), 0 0 8px color-mix(in srgb, currentColor 35%, transparent); }
.vip-old { opacity: .55; font-weight: 500; font-size: .85em; margin-right: 2px; } .vip-new { color: #7a3fc0; }
.shp-it .vip-new, .iz-pr .vip-new { color: #8f4fe0; }
.vip-tag { display: inline-block; padding: 1px 7px; border-radius: 99px; background: #5a2a9a; color: #ffd86a; font-size: 11.5px; font-weight: 800; }
.vippack { position: relative; display: grid; gap: 14px; padding: 20px; border-radius: 22px; color: #fff4dc; background: radial-gradient(circle at 15% 0%, rgba(255, 216, 106, .22), transparent 45%), linear-gradient(150deg, #3a1766, #5a2a9a 55%, #2a1048); box-shadow: inset 0 0 0 2px #e3b552, 0 0 0 4px rgba(227, 181, 82, .18), 0 20px 40px -22px rgba(0, 0, 0, .9); overflow: hidden; }
.vippack::before { content: ""; position: absolute; inset: -40% -10%; background: linear-gradient(110deg, transparent 40%, rgba(255, 246, 214, .14) 50%, transparent 60%); animation: vipSheen 6s ease-in-out infinite; pointer-events: none; }
@keyframes vipSheen { 0%, 60% { transform: translateX(-60%); } 100% { transform: translateX(60%); } }
.vippack-h { position: relative; display: flex; align-items: center; gap: 16px; }
.vippack-gem { width: 96px; height: 96px; flex: none; } .vippack-gem svg { width: 100%; height: 100%; overflow: visible; }
.vippack-tag { display: inline-block; padding: 2px 10px; border-radius: 99px; background: #e3b552; color: #2a1048; font-weight: 800; font-size: 12px; letter-spacing: .04em; }
.vippack-n { margin: 4px 0 2px; font: 800 28px/1.05 var(--display, inherit); color: #ffd86a; } .vippack-h small { color: #e8d6ff; font-size: 13.5px; }
.vippack-adv { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 16px; }
.vippack-adv li { display: flex; gap: 10px; align-items: flex-start; } .vippack-adv li > span:last-child { display: grid; gap: 1px; }
.vippack-adv b { font-size: 14.5px; color: #fff4dc; } .vippack-adv small { font-size: 12.5px; color: #d9c6f5; }
.vipadv-i { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px; background: rgba(255, 216, 106, .14); box-shadow: inset 0 0 0 1px rgba(227, 181, 82, .5); color: #ffd86a; }
.vipadv-i svg { width: 22px; height: 22px; overflow: visible; } .vipadv-nc { font-style: normal; font-weight: 800; background: linear-gradient(90deg, #ff5fa2, #ffb020, #3fd07a, #29c4e6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vippack-f { position: relative; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vippack-on { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 99px; background: #2fae5a; color: #fff; font-weight: 700; font-size: 14px; } .vippack-on svg { width: 16px; height: 16px; }
.vippack .mny-soon { background: #e3b552; color: #2a1048; font-size: 14px; padding: 6px 16px; }
.vippack-note { position: relative; color: #cdb8ee; font-size: 12.5px; } .vippack-note svg { width: 14px; height: 14px; vertical-align: -2px; }
.vipdaymodal { width: min(380px, 100%); text-align: center; } .vipday { display: grid; justify-items: center; gap: 10px; }
.vipday-art { width: 120px; height: 120px; animation: mnyBob 2.4s ease-in-out infinite; } .vipday-art svg { width: 100%; height: 100%; overflow: visible; }
.vipday h3 { margin: 0; } .vipday-rw { display: flex; gap: 18px; justify-content: center; } .vipday-rw span { display: inline-flex; align-items: center; gap: 6px; font-size: 22px; } .vipday-rw b { font-weight: 800; }
.vipc-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.vipc-row input[type="color"] { width: 52px; height: 40px; padding: 2px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; }
.vipc-prev { font: 800 24px/1.1 var(--display, inherit); text-shadow: 0 0 1px rgba(0, 0, 0, .45); padding: 6px 12px; border-radius: 10px; background: #13261d; }
.vipc-sw { display: flex; gap: 8px; flex-wrap: wrap; } .vipc-sw button { width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--c); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6), 0 0 0 1.5px rgba(0, 0, 0, .25); cursor: pointer; }
.cp-item.cp-vip { background: linear-gradient(120deg, rgba(90, 42, 154, .16), rgba(227, 181, 82, .14)); box-shadow: inset 0 0 0 1.5px rgba(160, 112, 224, .6); }
.cp-ico.vipi { background: linear-gradient(140deg, #5a2a9a, #2a1048); color: #ffd86a; font-weight: 800; font-size: 12px; }
@media (max-width: 640px) { .vippack { padding: 16px; } .vippack-gem { width: 72px; height: 72px; } .vippack-n { font-size: 22px; } }
@media (prefers-reduced-motion: reduce) { .vippack::before, .vipday-art { animation: none; } }

/* (étape 113) le VIP en doré (plus de violet) : le pack, les prix, la fenêtre du jour, le tchat VIP */
.vip-new, .shp-it .vip-new, .iz-pr .vip-new { color: #b07a18; }
.vip-tag { background: #2a1d10; color: #ffd86a; }
.vippack { color: #2a1d06; background: radial-gradient(circle at 12% 0%, rgba(255, 255, 255, .55), transparent 42%), linear-gradient(150deg, #fff1b0, #f6cb45 48%, #e0a224); box-shadow: inset 0 0 0 2px #9a6a14, 0 0 0 4px rgba(255, 207, 58, .25), 0 20px 40px -22px rgba(0, 0, 0, .9); }
.vippack::before { background: linear-gradient(110deg, transparent 40%, rgba(255, 255, 255, .45) 50%, transparent 60%); }
.vippack-tag { background: #2a1d10; color: #ffd86a; }
.vippack-n { color: #4a2f06; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
.vippack-h small { color: #5a3c0a; }
.vippack-adv b { color: #2a1d06; } .vippack-adv small { color: #5a3c0a; }
.vipadv-i { background: rgba(255, 255, 255, .45); box-shadow: inset 0 0 0 1px rgba(154, 106, 20, .55); color: #7a4e10; font-size: 18px; }
.vipadv-nc { background: linear-gradient(90deg, #7a4e10, #c98a12, #7a4e10); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 12px; }
.vippack .mny-soon { background: #2a1d10; color: #ffd86a; }
.vippack-note { color: #5a3c0a; }
.vipday-rw { color: #2a1d06; }
.vipdaymodal { background: linear-gradient(170deg, #fff6d0, #fbe7a2); box-shadow: inset 0 0 0 2px #e3b552, 0 24px 50px -18px rgba(0, 0, 0, .7); }
.cp-item.cp-vip { background: linear-gradient(120deg, rgba(255, 207, 58, .28), rgba(227, 162, 36, .18)); box-shadow: inset 0 0 0 1.5px rgba(201, 138, 18, .7); }
.cp-ico.vipi { background: linear-gradient(140deg, #ffd84d, #c98a12); color: #2a1d06; }
/* l'aura VIP : les rayons qui tournent, le mot « VIP » qui respire */
.pfull.anim .pp-viprays { transform-box: view-box; animation: ppVipRays 26s linear infinite; }
@keyframes ppVipRays { to { transform: rotate(360deg); } }
.pfull.anim .pp-vipw { transform-box: view-box; animation: ppVipW 2.8s ease-in-out infinite; }
@keyframes ppVipW { 50% { transform: translateY(-2px) scale(1.05); filter: brightness(1.18); } }
@media (prefers-reduced-motion: reduce) { .pfull .pp-viprays, .pfull .pp-vipw { animation: none !important; } }
/* l'emote VIP : le trône (il apparaît, le rat s'assoit, la couronne tombe sur sa tête, puis tout repart) */
.rgperso .pe-throne { transform-box: view-box; }
.rgperso.emo-trone .pe-throne { animation: e-trone-throne 6.4s ease-in-out both; }
@keyframes e-trone-throne { 0% { opacity: 0; transform: scale(.4); } 10% { opacity: 1; transform: scale(1.06); } 15% { opacity: 1; transform: scale(1); } 88% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.92); } }
.rgperso.emo-trone .pe-body { animation: e-trone-body 6.4s ease-in-out both; }
@keyframes e-trone-body { 0%, 12% { transform: none; } 22% { transform: translateY(14px); } 86% { transform: translateY(14px); } 96%, 100% { transform: none; } }
.rgperso.emo-trone .pe-leg-l, .rgperso.emo-trone .pe-leg-r { animation: e-trone-leg 6.4s ease-in-out both; }
@keyframes e-trone-leg { 0%, 12% { transform: none; } 22%, 86% { transform: scaleY(.6); } 96%, 100% { transform: none; } }
.rgperso.emo-trone .pe-arm-r { animation: e-trone-arm-r 6.4s ease-in-out both; }
@keyframes e-trone-arm-r { 0%, 14% { transform: none; } 24%, 86% { transform: rotate(-14deg); } 96%, 100% { transform: none; } }
.rgperso.emo-trone .pe-arm-l { animation: e-trone-arm-l 6.4s ease-in-out both; }
@keyframes e-trone-arm-l { 0%, 14% { transform: none; } 24%, 86% { transform: rotate(14deg); } 96%, 100% { transform: none; } }
.rgperso.emo-trone .pe-head { animation: e-trone-head 6.4s ease-in-out both; }
@keyframes e-trone-head { 0%, 36% { transform: none; } 44% { transform: rotate(-5deg) translateY(-2px); } 80% { transform: rotate(-5deg) translateY(-2px); } 90%, 100% { transform: none; } }
.rgperso.emo-trone .pe-crown { animation: e-trone-crown 6.4s ease both; }
@keyframes e-trone-crown { 0%, 24% { opacity: 0; transform: translateY(-40px); } 34% { opacity: 1; transform: translateY(0); } 38% { opacity: 1; transform: translateY(-4px); } 42% { opacity: 1; transform: translateY(0); } 88% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
.rgperso.emo-trone .pe-spark { animation: e-trone-spark 6.4s ease both; }
@keyframes e-trone-spark { 0%, 32% { opacity: 0; } 40% { opacity: 1; } 70% { opacity: 1; } 80%, 100% { opacity: 0; } }

/* (étape 114) le cadre et le décor VIP, « Réservé aux VIP » à la place d'un prix */
.pf-vip { --bw: calc(7px * var(--k)); --pfr: linear-gradient(135deg, #fff1b0, #f0c23a 32%, #b07a18 58%, #ffd84d 82%, #c98a12); --pfl: #2a1d10; box-shadow: 0 0 0 calc(2px * var(--k)) #7a4e10, 0 0 calc(18px * var(--k)) rgba(255, 200, 40, .5); }
.pf-vip .pft { top: calc(var(--k) * -16px); }
.pd-vip { background: radial-gradient(120% 90% at 50% 0%, #6a4a10, #1c1306); }
.apz-vip { margin: 0; padding: 6px 10px; border-radius: 10px; background: #fff3c8; color: #6b4a12; font-size: 12.5px; font-weight: 600; box-shadow: inset 0 0 0 1px #e3b552; }
.iz-rew.iz-vip { background: linear-gradient(135deg, #ffd84d, #e0a224); color: #2a1d06; }

/* (étape 114) l'inventaire complet d'un joueur, dans la régie */
.modal.ainvmodal { width: min(860px, calc(100vw - 24px)); }
.ainv-b { max-height: min(62vh, 620px); overflow: auto; margin: 12px -6px 0; padding: 0 6px 6px; }
.ainv-h { margin: 14px 0 8px; font-size: 15px; } .ainv-h:first-child { margin-top: 4px; }
.ainv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 8px; }
.ainv-it { display: grid; grid-template-columns: 52px minmax(0, 1fr); grid-template-rows: auto auto; gap: 4px 10px; align-items: center; padding: 8px; border-radius: 12px; background: rgba(26, 22, 17, .05); box-shadow: inset 0 0 0 1px rgba(26, 22, 17, .08); }
.ainv-th { grid-row: 1 / 3; width: 52px; height: 52px; display: grid; place-items: center; overflow: hidden; border-radius: 10px; background: rgba(255, 255, 255, .55); }
.ainv-th > svg, .ainv-th > span, .ainv-th .bdg { max-width: 52px; max-height: 52px; }
.ainv-th svg { width: 100%; height: 100%; }
.ainv-n { display: grid; min-width: 0; } .ainv-n b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ainv-n small { font-size: 11.5px; }
.ainv-it > .btn { justify-self: start; }
.ainv-r { color: var(--ink-2); } .ainv-r.r-rare { color: #2f6fb8; } .ainv-r.r-epique { color: #7b45b8; } .ainv-r.r-legendaire, .ainv-r.r-vip { color: #9a6a14; } .ainv-r.r-mythique { color: #b8357a; }
.ainv-vip { display: inline-block; font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: #2a1d10; color: #ffd86a; vertical-align: middle; }
.ainv-none { margin: 6px 0; }
.ainv-gtop { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 8px; margin-bottom: 10px; position: sticky; top: 0; z-index: 2; background: var(--paper, #f6efdf); padding: 4px 0; }
.ainv-more { margin: 8px 0 0; text-align: center; }
@media (max-width: 640px) { .ainv-gtop { grid-template-columns: 1fr; } .ainv-grid { grid-template-columns: 1fr; } }

/* ---- (étape 115) le passe de combat « Pleine Lune » : les auras, la pierre de lune, et le rat-garou ---- */
.pfull.anim .pp-moon { transform-box: fill-box; transform-origin: center; animation: ppMoon 6s ease-in-out infinite; }
@keyframes ppMoon { 50% { opacity: .78; transform: scale(1.03); } }
.pfull.anim .pp-mist { transform-box: fill-box; transform-origin: center; animation: ppMist 7s ease-in-out infinite; animation-delay: calc(var(--i) * -1.7s); }
@keyframes ppMist { 0%, 100% { transform: translateX(-6px) scaleX(.94); opacity: .3; } 50% { transform: translateX(7px) scaleX(1.06); opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .pfull .pp-moon, .pfull .pp-mist { animation: none !important; } }
/* le hurlement : la figure se tasse, lève la tête et hurle (ondes au-dessus de la tête), tremble, s'assombrit ; un nuage */
.rgperso.emo-garou { animation: e-gw-dark 1.7s ease-in both; }
@keyframes e-gw-dark { 0%, 72% { filter: none; } 100% { filter: brightness(.5) saturate(.6); } }
.rgperso.emo-garou .pe-body { animation: e-gw-body 1.7s ease-in-out both; }
@keyframes e-gw-body { 0% { transform: none; } 18% { transform: translateY(5px) scaleY(.94); } 40%, 70% { transform: translateY(-2px); } 76% { transform: translateX(-2.5px); } 82% { transform: translateX(2.5px); } 88% { transform: translateX(-2.5px); } 94% { transform: translateX(2.5px); } 100% { transform: scale(1.05); } }
.rgperso.emo-garou .pe-head { animation: e-gw-head 1.7s ease-in-out both; }
@keyframes e-gw-head { 0%, 14% { transform: none; } 32%, 86% { transform: rotate(-15deg) translateY(-4px); } 100% { transform: rotate(-6deg); } }
.rgperso.emo-garou .pe-arm-l { animation: e-gw-arm-l 1.7s ease-in-out both; } .rgperso.emo-garou .pe-arm-r { animation: e-gw-arm-r 1.7s ease-in-out both; }
@keyframes e-gw-arm-l { 0%, 18% { transform: none; } 36%, 90% { transform: rotate(16deg); } 100% { transform: rotate(8deg); } }
@keyframes e-gw-arm-r { 0%, 18% { transform: none; } 36%, 90% { transform: rotate(-16deg); } 100% { transform: rotate(-8deg); } }
.rgperso.emo-garou .pe-mouth { animation: e-gw-mouth 1.7s ease-in-out both; }
.rgperso.emo-garou .pe-bmouth { animation: e-gw-bmouth 1.7s ease-in-out both; }
@keyframes e-gw-mouth { 0%, 26% { opacity: 0; } 32%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes e-gw-bmouth { 0%, 26% { opacity: 1; } 32%, 94% { opacity: 0; } 100% { opacity: 1; } }
.rgperso.emo-garou .pe-ears { animation: e-gw-ears 1.7s ease-in-out both; }
@keyframes e-gw-ears { 0%, 20% { transform: none; } 40%, 90% { transform: scaleY(.88) translateY(4px); } }
/* la nouvelle forme apparaît dans le nuage et se redresse */
.rgperso.emo-garou2 { animation: e-gw2-flash 2.3s ease-out both; }
@keyframes e-gw2-flash { 0% { filter: brightness(2.4); } 22%, 100% { filter: none; } }
.rgperso.emo-garou2 .pe-body { animation: e-gw2-body 2.3s cubic-bezier(.3, 1.3, .5, 1) both; }
@keyframes e-gw2-body { 0% { transform: translateY(6px) scale(.84); opacity: 0; } 10% { opacity: 1; } 32% { transform: translateY(-3px) scale(1.05); } 44%, 100% { transform: none; } }
/* (étape 117) la nouvelle forme ne hurle pas une 2e fois : elle se redresse, griffes sorties, puis se calme */
.rgperso.emo-garou2 .pe-arm-l { animation: e-gw2-arm-l 2.3s ease-in-out both; } .rgperso.emo-garou2 .pe-arm-r { animation: e-gw2-arm-r 2.3s ease-in-out both; }
@keyframes e-gw2-arm-l { 0%, 30% { transform: none; } 44%, 76% { transform: rotate(22deg); } 92%, 100% { transform: none; } }
@keyframes e-gw2-arm-r { 0%, 30% { transform: none; } 44%, 76% { transform: rotate(-22deg); } 92%, 100% { transform: none; } }
/* les ondes du hurlement et le nuage de la transformation (ajoutés par persos.js le temps de l'animation) */
.rgperso .gw-howl path { fill: none; stroke: #eef2ff; stroke-width: 3.2; stroke-linecap: round; opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; animation: gwHowl 1s ease-out .45s 2 both; animation-delay: calc(.45s + var(--i) * .16s); }
@keyframes gwHowl { 0% { opacity: 0; transform: scale(.6); } 25% { opacity: .9; } 100% { opacity: 0; transform: translateY(-10px) scale(1.4); } }
.rgperso .gw-smoke circle { fill: #8f86a8; opacity: 0; transform-box: fill-box; transform-origin: center; animation: gwPuff .9s ease-out both; animation-delay: calc(var(--i) * .03s); }
.rgperso .gw-smoke.gw-out circle { fill: #9a92b4; animation: gwPuffOut 1.2s ease-out both; animation-delay: calc(var(--i) * .02s); }
.rgperso .gw-smoke .gw-flash { fill: #fff6dc; animation: gwFlash .9s ease-out both; }
.rgperso .gw-smoke.gw-out .gw-flash { animation: gwFlashOut .7s ease-out both; }
@keyframes gwPuff { 0% { opacity: 0; transform: scale(.3); } 60% { opacity: .92; } 100% { opacity: .95; transform: scale(1.15); } }
@keyframes gwPuffOut { 0% { opacity: .95; transform: scale(1.15); } 100% { opacity: 0; transform: translateY(-14px) scale(1.7); } }
@keyframes gwFlash { 0%, 50% { opacity: 0; } 100% { opacity: .55; } }
@keyframes gwFlashOut { 0% { opacity: .55; } 100% { opacity: 0; transform: scale(1.4); } }
/* le rat-garou doré : une lueur qui respire */
.rgperso.garou.gold .pp-glow { transform-box: fill-box; transform-origin: center; animation: ppGlow 2.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .rgperso.emo-garou, .rgperso.emo-garou2, .rgperso.emo-garou *, .rgperso.emo-garou2 * { animation-duration: .01s !important; } .rgperso .gw-howl, .rgperso .gw-smoke { display: none; } }
/* (étape 115) le passe de combat : le cadre « Clair de lune », le cadre « Éclipse dorée », le décor « Forêt sous la lune » */
.pf-lune { --bw: calc(6px * var(--k)); --pfr: linear-gradient(135deg, #eef2ff, #9aa8d6 35%, #46548c 60%, #c9d3e6 85%); --pfl: #1f2a4f; box-shadow: 0 0 0 calc(2px * var(--k)) #2a3460, 0 0 calc(16px * var(--k)) rgba(170, 190, 255, .45); }
.pf-lune .pft { top: calc(var(--k) * -14px); }
.pf-eclipse { --bw: calc(7px * var(--k)); --pfr: linear-gradient(135deg, #ffe58a, #c98a12 30%, #120f1c 52%, #ffd45a 76%, #7a4e10); --pfl: #ffd45a; box-shadow: 0 0 0 calc(2px * var(--k)) #120f1c, 0 0 calc(20px * var(--k)) rgba(255, 196, 60, .5); }
.pf-eclipse .pft { top: calc(var(--k) * -16px); }
.pd-foretlune { background: linear-gradient(180deg, #1c2650, #0d1330 70%, #0a0f24); }

/* ---- (étape 115) la page du passe de combat : la nuit de pleine lune, les 50 niveaux sur deux lignes ---- */
.wrap.bpp { max-width: 1180px; display: grid; gap: 18px; }
.bpp-hero { position: relative; overflow: hidden; border-radius: 22px; padding: 30px 30px 26px; min-height: 230px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 22px; align-items: end;
  background: radial-gradient(60% 90% at 82% 18%, rgba(140, 160, 230, .32), transparent 60%), linear-gradient(170deg, #1c2650, #0d1330 72%, #0a0f24); color: #eef2ff; box-shadow: inset 0 0 0 1px rgba(201, 211, 230, .18), 0 24px 50px -28px rgba(0, 0, 0, .8); }
.bpp-sky { position: absolute; inset: 0; pointer-events: none; }
.bpp-sky > i { position: absolute; left: var(--x); top: var(--y); width: 3px; height: 3px; border-radius: 50%; background: #fff; opacity: .55; animation: bppTw 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * -.45s); }
@keyframes bppTw { 50% { opacity: .15; transform: scale(.6); } }
.bpp-moon { position: absolute; right: 7%; top: -34px; width: 170px; height: 170px; border-radius: 50%; background: radial-gradient(circle at 36% 34%, #ffffff, #e9eefc 40%, #c6d0ea 75%, #9aa8d6); box-shadow: 0 0 60px 18px rgba(200, 214, 255, .35), 0 0 140px 40px rgba(140, 160, 230, .22); }
.bpp-moon::before, .bpp-moon::after { content: ""; position: absolute; border-radius: 50%; background: rgba(150, 165, 210, .45); }
.bpp-moon::before { width: 30px; height: 30px; left: 34%; top: 46%; } .bpp-moon::after { width: 18px; height: 18px; left: 62%; top: 30%; }
.bpp-head { position: relative; z-index: 1; display: grid; gap: 6px; }
.bpp-head .eyebrow { color: #c9d3e6; } .bpp-head .eyebrow svg { vertical-align: -3px; }
.bpp-head h1 { margin: 0; color: #fff; text-shadow: 0 2px 18px rgba(170, 190, 255, .35); }
.bpp-end { margin: 0; color: #c9d3e6; font-size: 14px; } .bpp-end b { color: #ffe58a; }
.bpp-me { position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px 16px; border-radius: 18px; background: rgba(10, 15, 36, .62); box-shadow: inset 0 0 0 1px rgba(201, 211, 230, .2); backdrop-filter: blur(4px); }
.bpp-me.guest { grid-template-columns: 1fr; } .bpp-me.guest p { margin: 0; color: #dfe6fb; }
.bpp-ring { width: 86px; height: 86px; border-radius: 50%; display: grid; place-content: center; text-align: center; line-height: 1; background: conic-gradient(#ffd45a calc(var(--p) * 360deg), rgba(201, 211, 230, .2) 0); position: relative; }
.bpp-ring::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #121a3a; }
.bpp-ring > * { position: relative; } .bpp-ring small { font-size: 10.5px; color: #c9d3e6; } .bpp-ring b { font: 800 30px/1 var(--display); color: #fff; } .bpp-ring i { font-style: normal; font-size: 10.5px; color: #8f9cc8; }
.bpp-xp { display: grid; gap: 7px; min-width: 0; } .bpp-xp small { color: #c9d3e6; font-size: 12.5px; } .bpp-xp .dim { color: #8f9cc8; }
.bpp-bar { height: 12px; border-radius: 999px; background: rgba(201, 211, 230, .16); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(201, 211, 230, .2); }
.bpp-bar > i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #8fa4ff, #e9eefc 60%, #ffe58a); transition: width 1.1s cubic-bezier(.2, .8, .2, 1); }
.bpp-hero.in .bpp-bar > i { width: calc(var(--p) * 100%); }
.bpp-all { justify-self: start; background: linear-gradient(180deg, #ffe58a, #e9b44c); color: #2a1d06; animation: bppPulse 2.2s ease-in-out infinite; }
@keyframes bppPulse { 50% { box-shadow: 0 0 0 6px rgba(255, 213, 90, .22); } }
.bpp-how { display: flex; flex-wrap: wrap; gap: 8px; }
.bpp-chip { display: grid; gap: 1px; padding: 8px 13px; border-radius: 13px; background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(26, 22, 17, .1); }
.bpp-chip small { font-size: 11.5px; color: var(--ink-2); } .bpp-chip b { font-size: 14px; } .bpp-chip i { font-style: normal; font-size: 11px; color: #1f7a55; display: inline-flex; gap: 3px; align-items: center; } .bpp-chip i svg { width: 12px; height: 12px; }
.bpp-chip.done { box-shadow: inset 0 0 0 1.5px rgba(31, 122, 85, .45); }
/* les deux lignes */
.bpp-track { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 10px; padding: 14px; border-radius: 20px; background: linear-gradient(180deg, #141b38, #0e1430); box-shadow: inset 0 0 0 1px rgba(201, 211, 230, .14); }
.bpp-rows { display: grid; grid-template-rows: 34px 168px 168px; gap: 10px; }
.bpp-rl { display: grid; align-content: center; justify-items: start; padding-left: 4px; font: 800 15px/1.1 var(--display); color: #eef2ff; }
.bpp-rl.lvl { font-size: 12px; font-weight: 600; color: #8f9cc8; } .bpp-rl small { font-size: 11px; font-weight: 500; line-height: 1.3; color: #8f9cc8; margin-top: 3px; }
.bpp-rl.vip { color: #ffd45a; }
.bpp-scroll { overflow-x: auto; overflow-y: hidden; padding-bottom: 8px; scroll-behavior: smooth; scrollbar-color: #46548c transparent; }
.bpp-cols { display: flex; gap: 10px; width: max-content; }
.bpp-col { display: grid; grid-template-rows: 34px 168px 168px; gap: 10px; width: 112px; }
.bpp-col.big { width: 132px; }
.bpp-lv { position: relative; display: grid; place-items: center; }
.bpp-lv::before { content: ""; position: absolute; left: -5px; right: -5px; top: 50%; height: 4px; margin-top: -2px; background: rgba(201, 211, 230, .16); }
.bpp-col.on .bpp-lv::before { background: linear-gradient(90deg, #8fa4ff, #e9eefc); }
.bpp-lv b { position: relative; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; font-size: 13px; background: #1c2650; color: #8f9cc8; box-shadow: inset 0 0 0 1.5px rgba(201, 211, 230, .25); }
.bpp-col.on .bpp-lv b { background: #e9eefc; color: #1c2650; }
.bpp-col.cur .bpp-lv b { background: #ffd45a; color: #2a1d06; box-shadow: 0 0 0 4px rgba(255, 212, 90, .25); }
.bpp-cell { position: relative; display: grid; grid-template-rows: 1fr auto auto; justify-items: center; align-items: center; gap: 4px; padding: 10px 8px 9px; border-radius: 16px; cursor: pointer; text-align: center;
  background: linear-gradient(180deg, #232d55, #1a2245); box-shadow: inset 0 0 0 1px rgba(201, 211, 230, .16); color: #eef2ff; transition: transform .18s, box-shadow .18s; }
.bpp-cell:hover, .bpp-cell:focus-visible { transform: translateY(-3px); box-shadow: inset 0 0 0 1.5px rgba(201, 211, 230, .5), 0 12px 24px -14px rgba(0, 0, 0, .8); outline: none; }
.bpp-cell.vip { background: linear-gradient(180deg, #3a2c10, #241a08); box-shadow: inset 0 0 0 1px rgba(255, 212, 90, .3); }
.bpp-cell.big { box-shadow: inset 0 0 0 2px rgba(201, 211, 230, .55), 0 0 22px -6px rgba(170, 190, 255, .6); }
.bpp-cell.vip.big { box-shadow: inset 0 0 0 2px rgba(255, 212, 90, .75), 0 0 24px -6px rgba(255, 200, 60, .7); }
.bpp-cell.big::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(70% 55% at 50% 30%, rgba(200, 214, 255, .2), transparent 70%); pointer-events: none; }
.bpp-cell.vip.big::before { background: radial-gradient(70% 55% at 50% 30%, rgba(255, 212, 90, .22), transparent 70%); }
.bpp-th { width: 78px; height: 78px; display: grid; place-items: center; }
.bpp-cell.big .bpp-th { width: 96px; height: 96px; }
.bpp-th > svg, .bpp-th > span, .bpp-th > span > svg { max-width: 100%; max-height: 100%; }
.bpp-th svg { width: 100%; height: 100%; }
.bpp-th .shp-bdg, .bpp-th .shp-pit, .bpp-th .bpp-wolf { width: 100%; height: 100%; display: grid; place-items: center; }
.bpp-cur { display: flex; align-items: center; justify-content: center; gap: 2px; } .bpp-cur svg { filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .4)); }
.bpp-cur.big { gap: 8px; }
.bpp-nm { font-size: 11.5px; line-height: 1.25; color: #dfe6fb; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bpp-cell.vip .bpp-nm { color: #ffe9b0; }
.bpp-get { padding-inline: 10px; background: linear-gradient(180deg, #ffe58a, #e9b44c); color: #2a1d06; animation: bppPulse 2s ease-in-out infinite; }
.bpp-ok, .bpp-lock { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; }
.bpp-ok { background: #2fae86; color: #fff; } .bpp-ok svg { width: 14px; height: 14px; }
.bpp-lock { background: rgba(10, 15, 36, .6); color: #8f9cc8; } .bpp-lock svg { width: 12px; height: 12px; }
.bpp-cell.st-lock .bpp-th { filter: saturate(.55) brightness(.75); }
.bpp-cell.st-got .bpp-th { opacity: .55; }
.bpp-cell.st-ready { box-shadow: inset 0 0 0 2px #ffd45a, 0 0 20px -4px rgba(255, 212, 90, .65); }
.bpp-foot { display: grid; gap: 10px; } .bpp-foot p { margin: 0; }
.bpp-vipnote { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; background: #fff3c8; color: #4a3208; box-shadow: inset 0 0 0 1px #e3b552; }
.bpp-vipnote svg { flex: none; }
@media (max-width: 760px) {
  .bpp-hero { grid-template-columns: 1fr; padding: 22px 16px 18px; }
  .bpp-moon { width: 120px; height: 120px; right: -14px; top: -24px; }
  .bpp-track { grid-template-columns: 58px minmax(0, 1fr); padding: 10px; gap: 6px; }
  .bpp-rows, .bpp-col { grid-template-rows: 30px 150px 150px; } .bpp-rl { font-size: 13px; } .bpp-rl small { display: none; }
  .bpp-col { width: 96px; } .bpp-col.big { width: 110px; } .bpp-th { width: 64px; height: 64px; } .bpp-cell.big .bpp-th { width: 78px; height: 78px; }
}
@media (prefers-reduced-motion: reduce) { .bpp-sky > i, .bpp-all, .bpp-get { animation: none; } .bpp-bar > i { transition: none; } }
/* le zoom (rats, Cheese, VIP) et « récompense récupérée » */
.bpz { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 20px; align-items: center; }
.bpz-art { display: grid; place-items: center; min-height: 170px; border-radius: 18px; background: radial-gradient(70% 70% at 50% 40%, #2b3666, #121a3a); }
.bpz-bdg { width: 130px; height: 130px; } .bpz-bdg svg { width: 100%; height: 100%; }
.bpz-info { display: grid; gap: 8px; } .bpz-info h3 { margin: 0; }
@media (max-width: 560px) { .bpz { grid-template-columns: 1fr; } }
.bpg { display: grid; gap: 12px; text-align: center; justify-items: center; } .bpg h3 { margin: 0; }
.bpg-wolf { width: 190px; height: 209px; display: grid; place-items: end center; border-radius: 22px; background: radial-gradient(60% 50% at 50% 30%, #e9eefc 0 18%, #2b3666 19%, #121a3a 75%); padding-bottom: 6px; }
.bpg-say { margin: 0; font-size: 13.5px; color: var(--ink-2); max-width: 420px; }
.bpg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; width: min(440px, 100%); max-height: 46vh; overflow: auto; text-align: left; }
.bpg-it { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px; border-radius: 12px; background: rgba(26, 22, 17, .05); }
.bpg-it > span:first-child { width: 54px; height: 54px; display: grid; place-items: center; } .bpg-it > span:first-child svg { width: 100%; height: 100%; }
.bpg-it span:last-child { display: grid; } .bpg-it small { color: var(--ink-2); font-size: 12px; }
.bpg-it .bpp-cur svg { width: 26px !important; height: 26px !important; }
.bpg-wolf ~ .bpg-list { max-height: 24vh; }
.bpp-cur svg { width: 44px !important; height: 44px !important; } .bpp-cur svg + svg, .bpp-cur svg:has(+ svg) { width: 32px !important; height: 32px !important; } .bpz-art .bpp-cur svg { width: 76px !important; height: 76px !important; }
/* la fenêtre de fin : l'XP du passe */
.ex-bp { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 7px 10px; border-radius: 10px; background: #1c2650; color: #eef2ff; font-size: 13px; text-decoration: none; }
.ex-bp b { color: #ffe58a; } .ex-bp small { color: #c9d3e6; }
.iz-rew.iz-bp { background: #1c2650; color: #eef2ff; } .iz-rew.iz-bp svg { vertical-align: -3px; }
/* la régie */
.abp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.abp-grid .field span { font-size: 12.5px; }

/* ---- (étape 115) les trois places de l'animal ---- */
.pfull > svg.rgperso { position: relative; z-index: 1; }
.pfpet.flip > svg { transform: scaleX(-1); }
.pet-pos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }
.pet-pos small { font-size: 12px; color: var(--ink-2); margin-right: 2px; }
.ppos-b { font: inherit; font-size: 12px; padding: 5px 10px; border-radius: 999px; border: 0; cursor: pointer; background: rgba(26, 22, 17, .06); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(26, 22, 17, .14); }
.ppos-b.on { background: #2a1d10; color: #ffe58a; box-shadow: none; }
/* Bouchon : à ses pieds à gauche ; sur son épaule */
.pfpet.pp-bouchon.pos-1 { left: auto; right: calc((1 - var(--rl, .3)) * 100% - var(--h) * .05); }
.pfpet.pp-bouchon.pos-2:not(.ps-egg) { --pw: .26; z-index: 3; left: calc(var(--rr, .7) * 100% - var(--h) * .04); bottom: calc((1 - var(--rt, .62)) * 100% - var(--h) * .06); }
/* Meuh-zarella : à sa droite ; derrière lui (on la voit dépasser des deux côtés) */
.pfpet.pp-meuh.pos-1 { right: auto; left: calc(var(--rr, .7) * 100% - var(--h) * .03); }
.pfpet.pp-meuh.pos-2:not(.ps-egg) { z-index: 0; right: auto; left: calc(50% - var(--h) * var(--pw) * .5 - var(--h) * .16); bottom: 5%; }
.pfpet.pp-meuh.pos-2 > svg { filter: brightness(.92); }
/* Chipie : sur son épaule ; au sol */
.pfpet.pp-chipie.pos-1:not(.ps-egg) { --pw: .26; z-index: 3; left: auto; right: calc((1 - var(--rl, .3)) * 100% - var(--h) * .04); bottom: calc((1 - var(--rt, .62)) * 100% - var(--h) * .06); }
.pfpet.pp-chipie.pos-2:not(.ps-egg) { --pw: .3; z-index: 2; left: calc(var(--rr, .7) * 100% - var(--h) * .02); bottom: -1%; }
.pfpet.pp-chipie.pos-2 .pt-ground { display: inline; }
/* Ducat : en vol à droite ; sur son épaule */
.pfpet.pp-ducat.pos-1 { right: auto; left: calc(var(--rr, .7) * 100% - var(--h) * .02); }
.pfpet.pp-ducat.pos-2:not(.ps-egg) { --pw: .28; z-index: 3; top: auto; left: calc(var(--rr, .7) * 100% - var(--h) * .05); bottom: calc((1 - var(--rt, .62)) * 100% - var(--h) * .07); }
.pfull.anim .pfpet.pp-ducat.pos-2:not(.ps-sleep):not(.ps-egg) { animation: none; }
/* un œuf : à gauche ; devant lui */
.pfpet.ps-egg.pos-1 { left: auto; right: calc((1 - var(--rl, .3)) * 100% - var(--h) * .03); }
.pfpet.ps-egg.pos-2 { z-index: 3; left: calc(50% - var(--h) * var(--pw) * .5); bottom: -3%; }
/* en partie (plus petit) */
.pfull.pet-sm .pfpet.pos-2.pp-bouchon, .pfull.pet-sm .pfpet.pos-1.pp-chipie, .pfull.pet-sm .pfpet.pos-2.pp-ducat { --pw: .2; }
.abp-give { display: grid; grid-template-columns: minmax(0, 1fr) 140px minmax(0, 1.2fr) auto; gap: 10px; align-items: end; }
@media (max-width: 760px) { .abp-give { grid-template-columns: 1fr; } }

/* ---------- étape 119 : ce qu'on gagne à la fin de la semaine (sous les classements, page du jeu) ---------- */
.rkpay { margin-top: 26px; padding: 20px 22px 22px; border-radius: 18px; background: var(--paper); color: var(--ink); box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 24px 44px -28px rgba(0, 0, 0, .9); display: grid; gap: 10px; }
.rkpay.compact { margin-top: 16px; padding: 14px 0 0; border-radius: 0; background: none; box-shadow: none; border-top: 1px dashed rgba(26, 22, 17, .18); }
.rkpay-h { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; }
.rkpay-h b { font-family: var(--display); font-size: 19px; display: block; }
.rkpay-h small { color: var(--ink-2); font-size: 13px; }
.rkpay-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(160deg, #f2d58a, #b48d45); color: #3b2a0c; box-shadow: inset 0 0 0 1px rgba(59, 42, 12, .25); }
.rkpay-ico svg { width: 22px; height: 22px; }
.rkpay-t { margin: 6px 0 0; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.rkpay-sub { margin: -4px 0 0; font-size: 12.5px; color: var(--ink-2); }
.rkpay-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.25fr); gap: 8px; }
.rkpay-p { display: grid; gap: 6px; justify-items: center; padding: 10px 8px; border-radius: 14px; background: rgba(26, 22, 17, .05); box-shadow: inset 0 0 0 1px rgba(26, 22, 17, .08); text-align: center; }
.rkpay-p.p1 { background: linear-gradient(170deg, #fbe7a8, #e9c36a); box-shadow: inset 0 0 0 1px rgba(120, 84, 20, .35); }
.rkpay-p.p2 { background: linear-gradient(170deg, #f1f1f3, #cfd2d8); box-shadow: inset 0 0 0 1px rgba(70, 76, 88, .3); }
.rkpay-p.p3 { background: linear-gradient(170deg, #f3d3b6, #d49a6a); box-shadow: inset 0 0 0 1px rgba(110, 60, 25, .3); }
.rkpay-n { font-family: var(--display); font-size: 20px; font-weight: 800; line-height: 1; }
.rkpay-p.rest .rkpay-n { font-size: 15px; }
.rkpay-n sup { font-size: .55em; }
.rkpay-rw { display: grid; gap: 3px; justify-items: center; font-size: 14px; }
.rkpay-rw > span { display: inline-flex; align-items: center; gap: 5px; }
.rkpay-st { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.rkpay-s { display: grid; gap: 5px; justify-items: center; text-align: center; padding: 8px 6px 10px; border-radius: 14px; background: rgba(26, 22, 17, .04); box-shadow: inset 0 0 0 1px rgba(26, 22, 17, .07); min-width: 0; }
.rkpay-th { display: grid; place-items: center; width: 100%; max-width: 110px; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; }
.rkpay-th > * { width: 100%; height: 100%; }
.rkpay-rk { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; }
.rkpay-rk svg { width: 26px; height: 26px; flex: none; }
.rkpay-s small { font-size: 12px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
@media (max-width: 640px) {
  .rkpay { padding: 16px 14px 18px; }
  .rkpay-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rkpay-p.rest { grid-column: 1 / -1; grid-template-columns: auto auto; justify-content: center; align-items: center; gap: 12px; }
  .rkpay-p.rest .rkpay-rw { grid-auto-flow: column; gap: 12px; }
  .rkpay-st { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* la fenêtre « Fin de la semaine » */
.rkp-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.rkp-head h3 { margin: 2px 0 0; }
.rkp-cup { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: linear-gradient(160deg, #f2d58a, #b48d45); color: #3b2a0c; flex: none; }
.rkp-cup svg { width: 28px; height: 28px; }
.rkp-list { display: grid; gap: 8px; }
.rkp-l { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: rgba(26, 22, 17, .05); }
.rkp-l small { display: block; }
.rkp-pl { display: grid; place-items: center; min-width: 42px; height: 42px; border-radius: 50%; font-family: var(--display); font-weight: 800; font-size: 17px; background: rgba(26, 22, 17, .08); }
.rkp-pl sup { font-size: .55em; }
.rkp-pl.p1 { background: linear-gradient(170deg, #fbe7a8, #e9c36a); }
.rkp-pl.p2 { background: linear-gradient(170deg, #f1f1f3, #cfd2d8); }
.rkp-pl.p3 { background: linear-gradient(170deg, #f3d3b6, #d49a6a); }
.rkp-g { display: grid; gap: 3px; justify-items: end; }
.rkp-g b { margin-left: 4px; }
.rkp-tot { margin: 12px 0 0; font-weight: 600; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.gxc-it.gxc-st { width: 190px; height: 140px; border-radius: 14px; overflow: hidden; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .8); }
.gxc-it.gxc-st > * { width: 100%; height: 100%; }

/* ---------- étape 120 : lancer un aliment sur la souris d'un autre joueur ---------- */
.thrpop { position: fixed; z-index: 90; display: grid; gap: 8px; padding: 10px 12px 12px; border-radius: 16px; background: var(--paper); color: var(--ink); box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 18px 40px -14px rgba(0, 0, 0, .75), 0 0 0 1px rgba(26, 22, 17, .12); animation: thrPop .22s cubic-bezier(.2, 1.3, .4, 1) both; max-width: min(260px, calc(100vw - 16px)); }
.thrpop::before { content: ""; position: absolute; top: calc(50% - 7px); width: 14px; height: 14px; background: var(--paper); transform: rotate(45deg); box-shadow: -1px 1px 0 rgba(26, 22, 17, .12); }
.thrpop.at-r::before { left: -6px; }
.thrpop.at-l::before { right: -6px; box-shadow: 1px -1px 0 rgba(26, 22, 17, .12); }
.thr-h { position: relative; font-size: 12.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thr-h b { color: var(--ink); }
.thr-foods { position: relative; display: flex; gap: 8px; flex-wrap: wrap; }
.thr-food { display: grid; justify-items: center; gap: 2px; padding: 8px 10px 6px; border: 0; border-radius: 12px; background: rgba(26, 22, 17, .05); box-shadow: inset 0 0 0 1px rgba(26, 22, 17, .1); color: var(--ink); cursor: pointer; transition: transform .15s, background .15s; }
.thr-food:hover, .thr-food:focus-visible { background: rgba(214, 176, 102, .25); transform: translateY(-2px); }
.thr-food:active { transform: scale(.94); }
.thr-fi { display: grid; place-items: center; width: 44px; height: 36px; }
.thr-fi svg { width: 100%; height: 100%; }
.thr-food:hover .thr-fi svg { animation: thrWig .5s ease-in-out; }
.thr-food small { font-size: 12px; font-weight: 600; }
@keyframes thrPop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@keyframes thrWig { 0%, 100% { transform: none; } 30% { transform: rotate(-10deg); } 65% { transform: rotate(8deg); } }
.thrfly { position: fixed; left: 0; top: 0; z-index: 91; width: 34px; height: 28px; pointer-events: none; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .35)); }
.thrfly svg { width: 100%; height: 100%; }
.thrboom { position: fixed; z-index: 91; width: 0; height: 0; pointer-events: none; }
.thrboom i { position: absolute; left: -2px; top: -2px; width: 4px; height: 12px; border-radius: 3px; background: #ffd36e; transform: rotate(var(--a)) translateY(-10px); opacity: 0; animation: thrBoom .5s ease-out forwards; }
@keyframes thrBoom { 0% { opacity: 1; transform: rotate(var(--a)) translateY(-6px) scaleY(.4); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-26px) scaleY(1); } }
/* la souris touchée : elle recule, la tête part en arrière, elle grimace (yeux plissés, bouche ouverte, joues rouges) */
.rgperso.thr-hit .pe-body { animation: thrBody .9s cubic-bezier(.2, .8, .3, 1) both; }
.rgperso.thr-hit .pe-head { animation: thrHead 1s cubic-bezier(.2, .8, .3, 1) both; }
.rgperso.thr-hit .pe-happy, .rgperso.thr-hit .pe-mouth, .rgperso.thr-hit .pe-red { animation: thrOn 1.3s ease both; }
.rgperso.thr-hit .pe-beyes, .rgperso.thr-hit .pe-bmouth { animation: thrOff 1.3s ease both; }
@keyframes thrBody { 0% { transform: none; } 14% { transform: translateX(calc(var(--td, 1) * 5px)) rotate(calc(var(--td, 1) * 4deg)); } 40% { transform: translateX(calc(var(--td, 1) * -2px)) rotate(calc(var(--td, 1) * -2deg)); } 65% { transform: translateX(calc(var(--td, 1) * 1px)) rotate(calc(var(--td, 1) * 1deg)); } 100% { transform: none; } }
@keyframes thrHead { 0% { transform: none; } 12% { transform: rotate(calc(var(--td, 1) * 14deg)) translateY(-3px); } 38% { transform: rotate(calc(var(--td, 1) * -6deg)); } 62% { transform: rotate(calc(var(--td, 1) * 3deg)); } 100% { transform: none; } }
@keyframes thrOn { 0% { opacity: 0; } 6% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; } }
@keyframes thrOff { 0% { opacity: 1; } 6% { opacity: 0; } 82% { opacity: 0; } 100% { opacity: 1; } }
/* la tache : elle s'écrase, reste un moment, coule un peu, puis s'efface ; les miettes tombent */
.thr-splat .thr-sq { transform-box: fill-box; transform-origin: 50% 30%; animation: thrSplat 5s ease both; }
.thr-splat .thr-cr { opacity: 0; animation: thrCrumb .9s cubic-bezier(.4, 0, .9, .6) var(--dl, 0s) both; }
.thr-splat.rm .thr-sq { animation: thrFade 5s ease both; }
@keyframes thrSplat { 0% { transform: scale(1.5, .3); opacity: 0; } 5% { transform: scale(1.25, .7); opacity: 1; } 11% { transform: scale(.92, 1.1); } 17% { transform: none; } 70% { transform: scaleY(1.08) translateY(1px); opacity: 1; } 100% { transform: scaleY(1.14) translateY(3px); opacity: 0; } }
@keyframes thrCrumb { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(var(--dx, 0), 70px) rotate(200deg); } }
@keyframes thrFade { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rgperso.thr-hit .pe-body, .rgperso.thr-hit .pe-head { animation: none; } .thrpop, .thr-food:hover .thr-fi svg { animation: none; } }

/* ---------- étape 120 : les deux monnaies dans un seul cadre (qui tourne), et la page Communauté ---------- */
.wallet.duo { position: relative; }
.wallet.duo > .wl-main { perspective: 260px; transition: background .5s, box-shadow .5s, color .5s; }
.wallet.duo.alt > .wl-main { color: #ffe48a; background: linear-gradient(180deg, #4a4014 0%, #352d0c 60%, #2a2308 100%); box-shadow: inset 0 0 0 1.5px rgba(255, 214, 92, .5), inset 0 1px 0 rgba(255, 240, 170, .22), 0 3px 0 #1a1504, 0 7px 14px -8px rgba(0, 0, 0, .7); }
.wl-rot { display: grid; align-items: center; }
.wl-f { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 6px; backface-visibility: hidden; transform-origin: 50% 50% -10px; transition: transform .55s cubic-bezier(.3, 1.25, .5, 1), opacity .35s; }
.wl-f > svg { width: 30px; height: 30px; flex: none; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35)); }
.wl-f.cheese { transform: rotateX(-100deg); opacity: 0; }
.wallet.duo.alt .wl-f.rats { transform: rotateX(100deg); opacity: 0; }
.wallet.duo.alt .wl-f.cheese { transform: none; opacity: 1; }
.wallet.duo.open > .wl-main { border-radius: 20px 20px 8px 8px; }
.wl-drop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 80; min-width: max(100%, 196px); display: none; gap: 4px; padding: 6px; border-radius: 16px; background: linear-gradient(180deg, #3e2f14 0%, #2b200b 100%); box-shadow: inset 0 0 0 1.5px rgba(214, 176, 102, .55), 0 18px 34px -14px rgba(0, 0, 0, .85); }
.wallet.duo.open .wl-drop { display: grid; transform-origin: 50% 0; animation: wlDrop .22s cubic-bezier(.2, 1.2, .4, 1) both; } /* (étape 122 : centrée sous le cadre, left calculé par place() d'app.js) */
@keyframes wlDrop { from { opacity: 0; transform: translateY(-6px) scale(.96); } to { opacity: 1; transform: none; } }
.wl-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 11px; background: rgba(255, 230, 160, .06); color: #f6d98a; cursor: pointer; text-align: left; font: inherit; }
.wl-row.cheese { color: #ffe48a; }
.wl-row:hover, .wl-row:focus-visible { background: rgba(255, 230, 160, .14); }
.wl-row > svg:first-child { width: 28px; height: 28px; }
.wl-row > svg:last-child { width: 16px; height: 16px; opacity: .7; }
.wl-rt { display: grid; line-height: 1.15; }
.wl-rt b { font: 800 17px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.wl-rt small { font-size: 12px; color: rgba(246, 217, 138, .7); }
@media (max-width: 640px) { .wallet.duo > .wl-main { display: inline-flex; } .wl-f > svg { width: 26px; height: 26px; } }
@media (prefers-reduced-motion: reduce) { .wl-f { transition: opacity .2s; } .wl-f.cheese, .wallet.duo.alt .wl-f.rats { transform: none; } }
/* la page Communauté (vide pour l'instant) */
.cmy-soon { margin-top: 30px; }
.cmy-soon .ill { display: grid; place-items: center; color: var(--brass); } .cmy-soon .ill svg { width: 54px; height: 54px; }

/* ---------- étape 125 : les achats en argent réel ---------- */
.eur-hint { display: block; font-size: 11.5px; font-weight: 500; color: var(--ink-2); line-height: 1.2; }
.shp-pr .eur-hint { margin-left: 4px; display: inline; }
.mny-buy { margin-top: 6px; }
.mny-lock.mny-open { background: rgba(28, 122, 82, .1); }
.pay-what { margin: 6px 0 0; }
.pay-price { margin: 10px 0 6px; font: 800 26px/1.1 var(--display); display: grid; gap: 4px; }
.pay-price small { font: 500 12.5px/1.3 var(--body); }
.pay-chk { align-items: flex-start; margin-top: 8px; font-size: 14px; }
.pay-chk input { margin-top: 3px; flex: none; }
.pay-note { display: block; margin-top: 10px; font-size: 12.5px; }

/* ---------- (étape 145) le soutien (pourboire) : « Soutenir Rats Game » ---------- */
body.no-don .foot-don, body.no-don [data-don], body.no-don [data-donm] { display: none; } /* (fermé dans la régie, ou paiements pas branchés) */
.foot-don { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px 0 12px; border-radius: 999px; font: 600 13.5px/1 var(--body); color: var(--chalk);
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(227, 181, 82, .35); transition: transform .18s, background .18s, color .18s; }
.foot-don svg { width: 17px; height: 17px; color: #ff8f7a; transition: transform .3s var(--ease-out); }
.foot-don:hover, .foot-don:focus-visible { transform: translateY(-2px); color: #2a1d10; background: #e3b552; }
.foot-don:hover svg, .foot-don:focus-visible svg { color: #b3261e; animation: donBeat 1s ease-in-out infinite; }
.drop [data-don] svg, .mm [data-donm] svg { color: #e0533d; }
.modal.donmodal { width: min(460px, 100%); gap: 16px; }
.don-heart { flex: none; width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; color: #fff4ea;
  background: radial-gradient(circle at 35% 30%, #ff8a73, #c9372a 70%); box-shadow: 0 4px 0 #8a1c15, 0 14px 26px -12px rgba(0, 0, 0, .7); animation: donBeat 2.2s ease-in-out infinite; }
.don-heart svg { width: 30px; height: 30px; fill: currentColor; }
.don-amts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.don-a { display: grid; place-items: center; height: 78px; border-radius: 18px; color: var(--ink); background: #fffaf0;
  box-shadow: inset 0 0 0 1.5px rgba(180, 141, 69, .35), 0 3px 0 rgba(26, 22, 17, .08); transition: transform .3s var(--ease-out), background .2s, box-shadow .2s; }
.don-v { display: inline-flex; align-items: baseline; gap: 3px; }
.don-v b { font: 800 34px/1 var(--display); font-variation-settings: "wdth" 80; letter-spacing: -.02em; }
.don-v i { font: 700 17px/1 var(--display); font-style: normal; color: var(--brass-2); }
.don-a:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1.5px var(--brass), 0 6px 0 rgba(26, 22, 17, .08); }
.don-a.on { background: radial-gradient(circle at 35% 25%, #f6dc95, var(--brass) 60%, var(--brass-2)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 4px 0 #8f6a2c, 0 14px 22px -12px rgba(0, 0, 0, .55); transform: translateY(-3px); }
.don-a.on .don-v i { color: #2a1d06; }
.don-free { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 14px; color: var(--ink-2); }
.don-inw { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border-radius: 12px; background: #fffaf0; box-shadow: inset 0 0 0 1.5px rgba(180, 141, 69, .35); }
.don-inw:focus-within { box-shadow: inset 0 0 0 2px var(--ink); }
.don-inw input { all: unset; width: 70px; text-align: center; font: 700 17px/1 var(--body); color: var(--ink); }
.don-inw input::placeholder { color: rgba(26, 22, 17, .35); font-weight: 500; font-size: 14px; }
.don-inw i { font: 700 15px/1 var(--display); font-style: normal; color: var(--brass-2); }
.don-go { --bg: var(--table-2); --fg: var(--chalk); width: 100%; height: 56px; font-size: 16px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 4px 0 #06120e, 0 14px 26px -12px rgba(0, 0, 0, .7); }
.don-go:hover { --bg: var(--table-3); }
.donmodal .err:empty { display: none; }
.bugmodal #bg-send { --bg: var(--table-2); --fg: var(--chalk); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 4px 0 #06120e, 0 14px 26px -12px rgba(0, 0, 0, .7); } .bugmodal #bg-send:hover { --bg: var(--table-3); } /* (étape 146 : l'action principale en vert tapis, comme le soutien) */
.don-go svg { width: 18px; height: 18px; fill: currentColor; color: #ff7a63; }
.don-go b { color: #f1d27e; }
.don-go b { font: 800 19px/1 var(--display); }
.don-fine { margin: -2px 0 0; text-align: center; font-size: 12px; line-height: 1.5; color: rgba(26, 22, 17, .55); }
@keyframes donBeat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.12); } 30% { transform: scale(.98); } 45% { transform: scale(1.06); } 60% { transform: scale(1); } }
@media (max-width: 480px) { .don-amts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .don-a { height: 64px; } }
@media (prefers-reduced-motion: reduce) { .don-heart, .foot-don:hover svg { animation: none; } }
.winfx.k-don { background: radial-gradient(circle at 50% 45%, rgba(70, 20, 18, .55), rgba(8, 14, 11, .88) 70%); }
.k-don .wfx-rays { background: repeating-conic-gradient(from 0deg, rgba(255, 140, 120, .2) 0 7deg, transparent 7deg 20deg); }
.wfx-heart { display: grid; place-items: center; width: 100%; height: 100%; color: #ff6b57; }
.wfx-heart svg { width: 100%; height: 100%; fill: currentColor; }

/* ---------- (étape 129) l'animation « c'est réussi » : paiement confirmé, récompense d'une pub ---------- */
.winfx { position: fixed; inset: 0; z-index: 140; display: grid; place-items: center; padding: 16px; overflow: hidden;
  background: radial-gradient(circle at 50% 45%, rgba(40, 30, 8, .55), rgba(8, 14, 11, .88) 70%); animation: wfxIn .3s ease-out both; }
.winfx.out { animation: wfxOut .3s ease-in forwards; }
.winfx.k-ad { background: radial-gradient(circle at 50% 45%, rgba(18, 40, 60, .55), rgba(8, 14, 11, .88) 70%); }
.wfx-rays { position: absolute; left: 50%; top: 45%; width: 1100px; height: 1100px; margin: -550px 0 0 -550px; pointer-events: none; opacity: .55;
  background: repeating-conic-gradient(from 0deg, rgba(255, 216, 106, .22) 0 7deg, transparent 7deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 0 18%, transparent 62%); mask: radial-gradient(circle, #000 0 18%, transparent 62%);
  animation: wfxSpin 18s linear infinite, wfxRays .9s ease-out both; }
.k-ad .wfx-rays { background: repeating-conic-gradient(from 0deg, rgba(130, 200, 255, .2) 0 7deg, transparent 7deg 20deg); }
.wfx-burst { position: absolute; left: 50%; top: 42%; width: 0; height: 0; pointer-events: none; }
.wfx-burst i { position: absolute; left: -13px; top: -13px; width: 26px; height: 26px; display: grid; place-items: center; opacity: 0;
  transform: rotate(var(--a)) translateY(0) scale(.4); animation: wfxBurst 1.5s cubic-bezier(.15, .7, .3, 1) calc(.45s + var(--d)) forwards; }
.wfx-burst i > * { width: 100%; height: 100%; }
.wfx-card { position: relative; width: min(400px, 100%); padding: 30px 26px 24px; border-radius: 22px; text-align: center; color: var(--ink, #2a1d10);
  background: linear-gradient(180deg, #fffaf0, #f3e6c8); box-shadow: 0 0 0 3px #c9952e, 0 0 0 7px rgba(201, 149, 46, .25), 0 30px 80px rgba(0, 0, 0, .55);
  display: grid; justify-items: center; gap: 8px; animation: wfxPop .55s cubic-bezier(.2, 1.4, .4, 1) .1s both; }
.k-ad .wfx-card { box-shadow: 0 0 0 3px #4f8fc0, 0 0 0 7px rgba(79, 143, 192, .25), 0 30px 80px rgba(0, 0, 0, .55); }
.wfx-check { width: 84px; height: 84px; margin-top: -72px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe9a6, #e3b552 55%, #a67a26);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35), 0 0 0 5px #fffaf0; display: grid; place-items: center; animation: wfxGlow 2.4s ease-in-out 1.2s infinite; }
.k-ad .wfx-check { background: radial-gradient(circle at 35% 30%, #c9ecff, #5aa5d8 55%, #2c6a99); }
.wfx-check svg { width: 70px; height: 70px; fill: none; stroke: #fffaf0; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.wfx-ring { stroke-dasharray: 214; stroke-dashoffset: 214; stroke-width: 3.5; opacity: .7; animation: wfxDraw .6s ease-out .35s forwards; }
.wfx-tick { stroke-dasharray: 60; stroke-dashoffset: 60; animation: wfxDraw .4s ease-out .75s forwards; }
.wfx-card .eyebrow { margin-top: 4px; }
.wfx-card h3 { margin: 0; font-size: 1.7rem; }
.wfx-gain { display: flex; align-items: center; gap: 10px; margin: 6px 0 2px; padding: 10px 18px; border-radius: 16px; background: #2a1d10; color: #ffd86a;
  box-shadow: inset 0 0 0 2px rgba(255, 216, 106, .35); animation: wfxPop .5s cubic-bezier(.2, 1.4, .4, 1) .55s both; }
.wfx-gain .num { font-size: 2.3rem; line-height: 1; font-weight: 800; }
.wfx-ico { display: grid; width: 44px; height: 44px; animation: wfxBob 2s ease-in-out 1.2s infinite; }
.wfx-ico > * { width: 100%; height: 100%; }
.wfx-unit { font-weight: 700; font-size: 1.05rem; }
.wfx-lines { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; color: var(--ink-2, #5a4630); font-size: .95rem; }
.wfx-lines li { animation: wfxUp .4s ease-out both; } .wfx-lines li:nth-child(1) { animation-delay: .9s; } .wfx-lines li:nth-child(2) { animation-delay: 1.05s; }
.wfx-test { color: #8a5a14; font-style: italic; }
.wfx-ok { margin-top: 8px; min-width: 160px; animation: wfxUp .4s ease-out 1.15s both; }
.wfx-tests { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 8px; }
@keyframes wfxIn { from { opacity: 0; } }
@keyframes wfxOut { to { opacity: 0; } }
@keyframes wfxSpin { to { transform: rotate(360deg); } }
@keyframes wfxRays { from { opacity: 0; } }
@keyframes wfxPop { from { opacity: 0; transform: scale(.6); } }
@keyframes wfxUp { from { opacity: 0; transform: translateY(8px); } }
@keyframes wfxDraw { to { stroke-dashoffset: 0; } }
@keyframes wfxGlow { 50% { box-shadow: 0 6px 18px rgba(0, 0, 0, .35), 0 0 0 5px #fffaf0, 0 0 28px 8px rgba(255, 216, 106, .55); } }
@keyframes wfxBob { 50% { transform: translateY(-4px) rotate(-6deg); } }
@keyframes wfxBurst { 0% { opacity: 0; transform: rotate(var(--a)) translateY(0) scale(.4); } 15% { opacity: 1; }
  80% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(200deg) scale(1); } }
.winfx.still *, .winfx.still { animation: none !important; }
.winfx.still .wfx-ring, .winfx.still .wfx-tick { stroke-dashoffset: 0; }
.winfx.still .wfx-burst { display: none; }
@media (prefers-reduced-motion: reduce) { .winfx *, .winfx { animation: none !important; } .wfx-ring, .wfx-tick { stroke-dashoffset: 0; } .wfx-burst { display: none; } }
@media (max-width: 520px) { .wfx-card { padding: 28px 18px 20px; } .wfx-card h3 { font-size: 1.4rem; } .wfx-gain .num { font-size: 1.9rem; } }

/* (étape 134) le choix de l'offre de Cloudflare dans Régie › Consommation */
.useplan { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }

/* ---------- (étape 147) Classement : un podium plus vivant ---------- */
.rk-podium { position: relative; isolation: isolate; }
.rk-podium::before { content: ""; position: absolute; left: -6%; right: -6%; top: -60px; bottom: 30%; z-index: -1; pointer-events: none; filter: blur(8px); transform-origin: 50% 0;
  background: conic-gradient(from 180deg at 50% -6%, transparent 0 158deg, rgba(255, 226, 150, .10) 168deg, rgba(255, 226, 150, .18) 180deg, rgba(255, 226, 150, .10) 192deg, transparent 202deg 360deg);
  animation: rkSpot 7s ease-in-out infinite alternate; }
.rk-podium::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: -24px; height: 56px; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(214, 176, 102, .3), transparent); animation: rkFloor 4.2s ease-in-out infinite; }
.rk-podium .pod .col::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, .45) 50%, transparent 62%) no-repeat; background-size: 260% 100%; background-position: 140% 0; animation: rkShine 6.5s ease-in-out infinite; }
.rk-podium .pod.p2 .col::after { animation-delay: -2.2s; } .rk-podium .pod.p3 .col::after { animation-delay: -4.4s; }
.rk-podium .pod.ghost .col::after { display: none; }
.rk-podium .pod.p1 .col { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 0 40px -6px rgba(241, 213, 142, .55), 0 30px 50px -30px #000; animation: rkGlow 3.4s ease-in-out infinite; }
.rk-podium .pod .col .place { animation: rkNum 3.6s ease-in-out infinite; }
.rk-podium .pod.p2 .col .place { animation-delay: -1.2s; } .rk-podium .pod.p3 .col .place { animation-delay: -2.4s; }
.rk-podium .pod.p1 .who::before { content: ""; position: absolute; left: 50%; top: 10px; width: 150px; height: 150px; margin-left: -75px; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, #fff3c8 0 1.5px, transparent 2.5px) 20px 30px / 46px 52px, radial-gradient(circle, #f1d58e 0 1.2px, transparent 2px) 0 0 / 38px 44px;
  opacity: .8; animation: rkSparkle 3s ease-in-out infinite; }
.lb-seasonbar .rk-season { position: relative; padding-left: 28px; }
.lb-seasonbar .rk-season::before { content: ""; position: absolute; left: 12px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 0 rgba(61, 224, 166, .6); animation: rkLive 2s ease-out infinite; }
.lb-more { position: relative; overflow: hidden; }
.lb-more:not([open])::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 40%, rgba(214, 176, 102, .14) 50%, transparent 60%) no-repeat; background-size: 250% 100%; background-position: 140% 0; animation: rkShine 5s ease-in-out infinite; }
.lb-more summary > span { display: inline-flex; align-items: center; gap: 10px; }
.lb-more summary > span::before { content: ""; width: 9px; height: 9px; border-radius: 2px; transform: rotate(45deg); background: var(--brass); box-shadow: 0 0 10px rgba(214, 176, 102, .7); }
.rk-row { transition: transform .35s var(--ease-out), background .2s, box-shadow .2s; }
.rk-row:hover { transform: translateX(4px); box-shadow: inset 3px 0 0 var(--brass), inset 0 0 0 1px var(--line-2); }
@media (max-width: 560px) { /* (étape 147) sur téléphone, une ligne du classement respire : pas d'emblème, texte sur une ligne */
  .rk-row { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; padding: 10px 12px 10px 8px; }
  .rk-row .rk-cell > svg, .rk-row .rk-cell > .rkem, .rk-row .rk-cell > :not(.wins) { display: none; }
  .rk-row small.dim { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rk-row .wins { font-size: 22px; }
}
@keyframes rkSpot { from { transform: rotate(-7deg); opacity: .7; } to { transform: rotate(7deg); opacity: 1; } }
@keyframes rkFloor { 0%, 100% { opacity: .6; transform: scaleX(.94); } 50% { opacity: 1; transform: scaleX(1.04); } }
@keyframes rkShine { 0%, 55% { background-position: 140% 0; } 85%, 100% { background-position: -40% 0; } }
@keyframes rkGlow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.08); } }
@keyframes rkNum { 0%, 100% { transform: none; } 50% { transform: translateY(-3px); } }
@keyframes rkSparkle { 0%, 100% { opacity: .25; transform: translateY(6px) scale(.96); } 50% { opacity: .9; transform: translateY(-4px) scale(1.03); } }
@keyframes rkLive { 0% { box-shadow: 0 0 0 0 rgba(61, 224, 166, .6); } 100% { box-shadow: 0 0 0 9px rgba(61, 224, 166, 0); } }

/* ---------- (étape 147) « À gagner chaque lundi » : carte tapis vert et laiton, récompenses cliquables ---------- */
.rkw { position: relative; margin-top: 30px; display: grid; gap: 14px; padding: 24px; border-radius: 22px; overflow: hidden; isolation: isolate; color: var(--chalk);
  background: radial-gradient(120% 100% at 0% 0%, #1f5444, var(--table-2) 55%, var(--table)); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .35), 0 30px 60px -36px #000; }
.rkw::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 80% at 100% 0%, rgba(214, 176, 102, .16), transparent 70%); }
.rkw.compact { margin-top: 4px; padding: 18px; gap: 12px; }
.rkw-h { display: flex; align-items: center; gap: 14px; }
.rkw-ico { flex: none; width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; color: #2a1d06;
  background: radial-gradient(circle at 35% 30%, #f6dc95, var(--brass) 60%, var(--brass-2)); box-shadow: 0 4px 0 #8f6a2c, 0 14px 26px -12px rgba(0, 0, 0, .7); animation: rkTrophy 3.4s ease-in-out infinite; }
.rkw-ico svg { width: 28px; height: 28px; }
.rkw-h h3 { font-size: clamp(24px, 3vw, 32px); color: var(--chalk); }
.rkw-h p { margin: 4px 0 0; color: var(--chalk-2); font-size: 14px; line-height: 1.45; max-width: 62ch; }
.rkw.compact .rkw-h h3 { font-size: 22px; } .rkw.compact .rkw-ico { width: 46px; height: 46px; }
.rkw-t { margin: 4px 0 0; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font: 700 14px/1.2 var(--body); color: var(--brass); }
.rkw-t::before { content: ""; width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg); background: currentColor; }
.rkw-t small { font-weight: 500; color: var(--chalk-3); }
.rkw-top { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.rkw-p, .rkw-s { all: unset; box-sizing: border-box; cursor: pointer; display: grid; justify-items: center; align-content: start; gap: 8px; text-align: center; min-width: 0; border-radius: 16px;
  background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 1px var(--line-2); transition: transform .3s var(--ease-out), box-shadow .2s, background .2s; }
.rkw-p { padding: 14px 8px 12px; }
.rkw-p:hover, .rkw-s:hover, .rkw-p:focus-visible, .rkw-s:focus-visible { transform: translateY(-3px); background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1.5px var(--brass), 0 12px 24px -14px #000; }
.rkw-medal { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font: 800 21px/1 var(--display); font-variation-settings: "wdth" 80; color: #2a1d06; position: relative; overflow: hidden;
  background: radial-gradient(circle at 35% 30%, #fff, #d9dce2 60%, #9aa0a8); box-shadow: 0 3px 0 rgba(0, 0, 0, .35); }
.rkw-p.p1 .rkw-medal, .rkw-medal.p1 { background: radial-gradient(circle at 35% 30%, #fff1c2, #e9c36a 55%, #a87f30); }
.rkw-p.p2 .rkw-medal, .rkw-medal.p2 { background: radial-gradient(circle at 35% 30%, #fff, #d9dce2 60%, #9aa0a8); }
.rkw-p.p3 .rkw-medal, .rkw-medal.p3 { background: radial-gradient(circle at 35% 30%, #ffdcc0, #cf8a55 55%, #8f5527); }
.rkw-p.rest .rkw-medal, .rkw-medal.rest { color: var(--brass); font-size: 14px; background: rgba(214, 176, 102, .12); box-shadow: inset 0 0 0 1.5px rgba(214, 176, 102, .55); }
.rkw-p.p1 .rkw-medal::after, .rkw-medal.p1::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .7) 50%, transparent 65%) no-repeat; background-size: 260% 100%; animation: rkShine 4s ease-in-out infinite; }
.rkw-pl { font-size: 13px; color: var(--chalk-2); } .rkw-pl sup, .rkz-band sup { font-size: .6em; }
.rkw-gs { display: grid; gap: 4px; justify-items: center; }
.rkw-g { display: inline-flex; align-items: center; gap: 6px; } .rkw-g b { font: 800 17px/1 var(--display); color: var(--chalk); }
.rkw-st { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.rkw-s { padding: 8px 8px 10px; }
.rkw-th { display: grid; width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; box-shadow: 0 6px 14px -8px #000; }
.rkw-th > * { width: 100%; height: 100%; }
.rkw-th.fr { position: relative; display: block; } .rkw-th.fr > :first-child { position: absolute; inset: 0; } .rkw-th > .rkw-fig { position: absolute; inset: 0; display: grid; place-items: end center; padding-bottom: 6%; pointer-events: none; }
.rkw-fig .pfull { filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .35)); }
.rkw-rk { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; color: var(--chalk); }
.rkw-rk svg { width: 24px; height: 24px; flex: none; }
.rkw-tip { justify-self: center; font-size: 12px; color: var(--chalk-3); }
@media (max-width: 640px) { .rkw-top, .rkw-st { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rkw { padding: 18px; } }
.rkzmodal { width: min(440px, 100%); gap: 16px; }
.rkw-medal.big { width: 62px; height: 62px; font-size: 28px; flex: none; } .rkw-medal.big.rest { font-size: 17px; }
.rkz-gains { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.rkz-g { display: grid; justify-items: center; gap: 4px; min-width: 130px; padding: 16px 18px 14px; border-radius: 18px; background: #fffaf0; box-shadow: inset 0 0 0 1.5px rgba(180, 141, 69, .35), 0 3px 0 rgba(26, 22, 17, .08); }
.rkz-g b { font: 800 34px/1 var(--display); font-variation-settings: "wdth" 80; color: var(--ink); }
.rkz-g span { font-size: 13px; color: var(--ink-2); }
.rkz-how { margin: 0; padding-left: 18px; display: grid; gap: 5px; font-size: 13.5px; color: var(--ink-2); }
@keyframes rkTrophy { 0%, 100% { transform: rotate(0); } 10% { transform: rotate(-8deg); } 20% { transform: rotate(6deg); } 30% { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) {
  .rk-podium::before, .rk-podium::after, .rk-podium .pod .col::after, .rk-podium .pod.p1 .col, .rk-podium .pod .col .place, .rk-podium .pod.p1 .who::before,
  .lb-seasonbar .rk-season::before, .lb-more::after, .rkw-ico, .rkw-medal::after { animation: none; }
}

/* ---------- (étape 149) les cadres de « À gagner chaque lundi » : grands, sur le tapis, avec un petit profil dedans ---------- */
.rkw-th.fr { background: radial-gradient(70% 70% at 50% 45%, rgba(214, 176, 102, .22), transparent 70%), radial-gradient(120% 100% at 50% 0%, #1f5444, #0b2219); }
.rkw-th.fr > .pst-ft { position: absolute; inset: 17% 21% 19%; width: auto; height: auto; margin: 0; --r: 12px; border-radius: 12px; background: #f6efdf; box-shadow: 0 10px 22px -10px #000; }
.rkw-th.fr .pframe { --k: 1; }
.rkw-sk { position: absolute; inset: 17% 21% 19%; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-content: center; gap: 6px 8px; padding: 0 16%; pointer-events: none; }
.rkw-sk i { grid-row: 1 / span 2; width: 22px; height: 22px; border-radius: 50%; background: #d9cdb2; }
.rkw-sk b { height: 6px; border-radius: 3px; background: #ddd2b9; } .rkw-sk b + b { width: 60%; }
.rkw-s:hover .rkw-th.fr > .pst-ft { animation: rkwFr 1.6s ease-in-out infinite; }
@keyframes rkwFr { 0%, 100% { transform: none; } 50% { transform: translateY(-3px) scale(1.02); } }

/* ---------- (étape 149) l'objet en grand : une vitrine tapis vert à gauche, la fiche crème à droite ---------- */
.modal.izmodal { width: min(760px, 100%); padding: 0; gap: 0; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: 1fr auto; }
.izmodal .iz { display: contents; }
.izmodal .iz-stage { grid-row: 1 / span 2; grid-column: 1; align-content: center; padding: 36px 30px; position: relative;
  background: radial-gradient(70% 60% at 50% 42%, color-mix(in srgb, var(--rcs) 32%, transparent), transparent 72%), radial-gradient(130% 110% at 30% 0%, #1f5444, var(--table-2) 55%, var(--table)); }
.izmodal .iz-stage::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 2px; background: linear-gradient(180deg, rgba(214, 176, 102, 0), var(--brass) 20%, #f3d995 50%, var(--brass) 80%, rgba(214, 176, 102, 0)); }
.izmodal .iz-fig { background: none; min-height: 300px; }
.izmodal .iz-fig::after { background: radial-gradient(closest-side, rgba(0, 0, 0, .45), transparent); }
.izmodal .iz-fig .pfull { filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .45)); }
.izmodal .iz-card { box-shadow: 0 22px 40px -22px #000; }
.izmodal .iz-forms { background: radial-gradient(70% 55% at 50% 38%, color-mix(in srgb, var(--rcs) 30%, transparent), transparent 70%); }
.izmodal .iz-form small { color: var(--chalk-2); } .izmodal .iz-arr { color: var(--brass); }
.izmodal .iz-who { color: var(--chalk-2); }
.izmodal .iz-pack > span { background: rgba(255, 255, 255, .08); }
.izmodal .iz-info { grid-column: 2; padding: 40px 30px 12px; align-content: center; gap: 10px; }
.izmodal .iz-info h3 { font-size: clamp(30px, 4vw, 40px); }
.izmodal .iz-info small.dim { line-height: 1.5; }
.izmodal .iz-acts { grid-column: 2; padding: 6px 30px 26px; margin: 0; }
.izmodal .iz-acts .btn:not(.ghost) { --bg: var(--table-2); --fg: var(--chalk); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 4px 0 #06120e, 0 14px 26px -12px rgba(0, 0, 0, .7); }
.izmodal .iz-acts .btn:not(.ghost):hover { --bg: var(--table-3); }
.modal.izmodal > .x { z-index: 3; }
@media (max-width: 640px) {
  .modal.izmodal { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; }
  .izmodal .iz-stage { grid-row: 1; padding: 22px 16px; } .izmodal .iz-stage::after { top: auto; left: 0; width: auto; height: 2px; background: linear-gradient(90deg, rgba(214, 176, 102, 0), var(--brass) 20%, #f3d995 50%, var(--brass) 80%, rgba(214, 176, 102, 0)); }
  .izmodal .iz-info { grid-column: 1; grid-row: 2; padding: 22px 20px 8px; } .izmodal .iz-acts { grid-column: 1; grid-row: 3; padding: 6px 20px 20px; }
  .modal.izmodal > .x { color: var(--chalk-2); }
}

/* ---------- (étape 150) l'objet en grand : plus de ligne claire aux coins de gauche (le fond de la fenêtre est vert à gauche, crème à droite) ---------- */
.modal.izmodal { background: linear-gradient(90deg, #143a2d 30%, var(--paper) 30%); box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .95), 0 8px 18px -10px rgba(0, 0, 0, .5); }
@media (max-width: 640px) { .modal.izmodal { background: linear-gradient(180deg, #143a2d 60px, var(--paper) 60px); } }

/* ---------- (étape 150) le petit profil dessiné dans les cadres de « À gagner chaque lundi » ne dépasse plus ---------- */
.rkw-th > .rkw-sk { width: auto; height: auto; }

/* ---------- (étape 150) la fenêtre d'un rang : les emblèmes sur le tapis vert, le nom et les seuils sur le crème ---------- */
.tzmodal .tz-band { display: block; padding: 34px 30px 24px; margin-bottom: 0;
  background: radial-gradient(60% 90% at 50% 45%, color-mix(in srgb, var(--tzg) 34%, transparent), transparent 72%), radial-gradient(120% 160% at 0% 0%, #1f5444, var(--table-2) 55%, var(--table)); }
.tz-row { display: flex; justify-content: center; align-items: flex-end; gap: 10px 36px; flex-wrap: wrap; }
.tz-d { display: grid; justify-items: center; gap: 2px; }
.tz-d svg { filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .45)); }
.tz-d b { font: 800 18px/1 var(--display); color: var(--brass); margin-top: 4px; }
.tz-d small { color: var(--chalk-2); font-size: 12.5px; }
.tz-info { display: grid; gap: 6px; justify-items: center; text-align: center; padding: 14px 0 0; }
.tz-info h3 { margin: 0; font-size: clamp(32px, 5vw, 42px); }
.tz-range { margin: 0; font-size: 17px; color: var(--ink); } .tz-range b { font: 800 22px/1 var(--display); }
.tz-note { margin: 0; color: var(--ink-2); font-size: 14px; max-width: 40ch; }
.tzmodal .tz-acts { justify-content: center; }
.tzmodal .tz-acts .btn { --bg: var(--table-2); --fg: var(--chalk); min-width: 140px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 4px 0 #06120e, 0 14px 26px -12px rgba(0, 0, 0, .7); }
.tzmodal .tz-acts .btn:hover { --bg: var(--table-3); }
@media (max-width: 520px) { .tzmodal .tz-band { padding: 30px 12px 20px; } .tz-row { gap: 6px 10px; } .tz-d svg { width: 88px; height: auto; } }


/* ---------- (étape 150) le décor d'une fiche dépasse d'un pixel : le fond crème ne se voit plus en fin trait aux coins du haut ---------- */
.has-pdecor > .pdecor { top: -1px; left: -1px; right: -1px; border-radius: calc(var(--r, 18px) + 1px) calc(var(--r, 18px) + 1px) 0 0; }

/* ---------- (étape 150) podium : plus de reflet blanc en haut des marches (le trait clair que Nico voyait) ---------- */
.pod .col { box-shadow: inset 0 -10px 24px -12px rgba(0, 0, 0, .35), 0 30px 50px -30px #000; }
.rk-podium .pod.p1 .col { box-shadow: 0 0 40px -6px rgba(241, 213, 142, .55), 0 30px 50px -30px #000; }

/* ---------- (étape 150) plus de bouton « Fermer » dans l'objet en grand et la fenêtre d'un rang (la croix suffit) ---------- */
.izmodal .iz-acts:empty { display: none; }
.tzmodal .tz-info { padding-bottom: 8px; }

/* ---------- (étape 150) fenêtres à bandeau vert : le fond derrière le bandeau a le même dégradé que lui (plus de trait clair dans le coin en haut à droite) ---------- */
.modal.has-band { background: radial-gradient(120% 160% at 0% 0%, #1f5444, var(--table-2) 55%, var(--table)) 0 0 / 100% 60px no-repeat, var(--paper); }

/* ---------- (étape 151) la barre du haut refaite ----------
   le cadre : verre vert sombre, liseré laiton en bas ; les catégories dans un « rail » creusé, chacune avec son icône,
   celle de la page en carton crème (la pastille glisse d'une catégorie à l'autre) ; à droite : les monnaies, un petit
   séparateur, les boutons (calendrier, sac, tchats, amis, réglages) et le pseudo. Une catégorie en plus : une ligne dans
   NAV d'app.js ; quand la place manque, fitNav resserre, enlève les icônes, puis range la fin dans « Plus ». */
.nav-in { background: linear-gradient(180deg, rgba(22, 58, 47, .82), rgba(9, 26, 20, .86)); box-shadow: inset 0 0 0 1px rgba(236, 229, 212, .07), inset 0 1px 0 rgba(236, 229, 212, .06), 0 22px 50px -24px rgba(0, 0, 0, .85); }
.nav-in::after { content: ""; position: absolute; left: 22px; right: 22px; bottom: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, rgba(214, 176, 102, 0), rgba(214, 176, 102, .55) 25%, rgba(243, 217, 149, .8) 50%, rgba(214, 176, 102, .55) 75%, rgba(214, 176, 102, 0)); }
.links { flex: 0 1 auto; margin: 0 auto; padding: 4px; gap: 2px; border-radius: 15px; background: rgba(0, 0, 0, .24); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(236, 229, 212, .05); }
.links > a { display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border-radius: 11px; font-size: 14px; font-weight: 600; color: var(--chalk-2); transition: color .25s; }
.links > a .nv-ic { display: grid; flex: none; transition: transform .35s var(--ease-out), color .25s; }
.links > a .nv-ic svg { width: 17px; height: 17px; }
.links > a:hover { color: var(--chalk); } .links > a:hover .nv-ic { transform: translateY(-1px) rotate(-6deg); color: var(--brass); }
.links > a.on { color: var(--ink); } .links > a.on .nv-ic { color: #8f6a2c; }
.links .ind { top: 4px; height: auto; bottom: 4px; border-radius: 11px; background: linear-gradient(180deg, #f8f1e1, var(--paper)); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .6), 0 0 0 1px rgba(214, 176, 102, .35); }
.links .ind::after { display: none; }
.links.t1 > a { padding-left: 10px; padding-right: 10px; }
.links.t2 > a .nv-ic { display: none; } .links.t2 > a { padding-left: 10px; padding-right: 10px; font-size: 14px; }
.links.t3 > a { padding-left: 7px; padding-right: 7px; font-size: 13px; }
.nmore > summary { padding: 9px 12px; font-weight: 600; font-size: 14px; }
.nv-sep { width: 1px; height: 26px; margin: 0 4px; flex: none; background: linear-gradient(180deg, transparent, rgba(214, 176, 102, .45), transparent); }
.nav-r { gap: 4px; }
.nav-r .ic-btn { border-radius: 12px; }
.nav-r .ic-btn:hover { background: rgba(214, 176, 102, .1); color: var(--chalk); }
.nav-r .me-chip { margin-left: 4px; padding: 0 12px 0 4px; background: rgba(0, 0, 0, .22); box-shadow: inset 0 0 0 1px rgba(236, 229, 212, .06); }
.nav-r .me-chip:hover, .nav-r .me-chip[aria-expanded="true"] { background: rgba(214, 176, 102, .12); }
/* la petite fenêtre « Réglages » */
.setpop .lp-opt { gap: 12px; }
.setpop .sp-ic { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px; background: #fffaf0; box-shadow: inset 0 0 0 1px rgba(180, 141, 69, .35); color: #8f6a2c; }
.setpop .sp-ic svg { width: 18px; height: 18px; } .setpop .sp-ic .flag { width: 22px; height: 15px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }
.setpop .lp-opt small { margin-left: auto; color: var(--ink-2); font-weight: 600; font-size: 12.5px; }
@media (max-width: 1100px) { .nv-sep { display: none; } }
@media (max-width: 640px) { .nav-r > #setbtn { display: none; } .nav-r .me-chip { padding: 0 2px; margin-left: 0; background: none; box-shadow: none; } } /* (son et langue restent dans le menu ☰) */

/* ---------- (étape 151) la fenêtre des rats et de la Cheese, plus simple ----------
   en haut le solde sur le tapis vert (la pièce dans un médaillon laiton), dessous sur le crème : le bouton d'achat
   (Cheese), la courbe avec 4 petits onglets, une seule phrase. Le fond du haut de la fenêtre est vert (aucun coin crème). */
.ratpop { padding: 0; gap: 0; width: min(310px, calc(100vw - 24px)); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .85);
  background: radial-gradient(120% 160% at 0% 0%, #1f5444, var(--table-2) 55%, var(--table)) 0 0 / 100% 40px no-repeat, var(--paper); }
.ratpop .rp-top { position: relative; display: flex; align-items: center; gap: 14px; padding: 18px 20px 16px; color: var(--chalk);
  background: radial-gradient(120% 160% at 0% 0%, #1f5444, var(--table-2) 55%, var(--table)); }
.ratpop .rp-top::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, rgba(214, 176, 102, 0), var(--brass) 18%, #f3d995 50%, var(--brass) 82%, rgba(214, 176, 102, 0)); }
.ratpop .rp-med { display: grid; place-items: center; width: 54px; height: 54px; flex: none; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(246, 220, 149, .28), rgba(214, 176, 102, .08) 70%); box-shadow: inset 0 0 0 1.5px rgba(214, 176, 102, .55), 0 8px 18px -8px rgba(0, 0, 0, .7); }
.ratpop .rp-bal { display: grid; gap: 4px; min-width: 0; }
.ratpop .rp-bal small { font: 600 12.5px/1 var(--body); letter-spacing: 0; text-transform: none; color: var(--chalk-2); }
.ratpop .rp-bal b { font: 800 34px/1 var(--display); font-variation-settings: "wdth" 80; letter-spacing: -.02em; color: var(--chalk); overflow-wrap: anywhere; }
.ratpop .rp-body { display: grid; gap: 12px; padding: 16px; }
.ratpop .rp-buybtn { justify-self: stretch; justify-content: center; gap: 8px; height: 46px; --bg: var(--table-2); --fg: var(--chalk);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 4px 0 #06120e, 0 12px 22px -12px rgba(0, 0, 0, .7); }
.ratpop .rp-buybtn:hover { --bg: var(--table-3); }
.ratpop .rp-buybtn > svg:last-child { width: 15px; height: 15px; transform: rotate(-90deg); opacity: .7; }
.ratpop .rp-chart { padding: 10px; gap: 8px; border-radius: 14px; background: #fffaf0; box-shadow: inset 0 0 0 1px rgba(180, 141, 69, .25); }
.ratpop .rp-ch-h { display: block; }
.ratpop .rp-ch-h .seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; padding: 3px; gap: 2px; border-radius: 10px; background: rgba(26, 22, 17, .07); }
.ratpop .rp-ch-h .seg button { height: 28px; min-height: 0; padding: 0 4px; font-size: 12.5px; font-weight: 700; white-space: nowrap; border-radius: 8px; }
.ratpop .rp-virt { display: block; margin: 0; padding: 0; background: none; text-align: center; font-size: 12px; color: var(--ink-2); opacity: 1; }

/* ---------- (étape 151) la bulle d'achat de Cheese ---------- */
.modal.cbmodal { width: min(430px, 100%); gap: 14px; }
.cbmodal .cb-med { display: grid; place-items: center; width: 54px; height: 54px; flex: none; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(246, 220, 149, .28), rgba(214, 176, 102, .08) 70%); box-shadow: inset 0 0 0 1.5px rgba(214, 176, 102, .55); }
.cbmodal .mband p { margin: 4px 0 0; color: var(--chalk-2); font-size: 14px; }
.cb-body { display: grid; gap: 12px; justify-items: center; text-align: center; }
.cb-price { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; font-weight: 700; }
.cb-price .cb-one { display: inline-flex; align-items: center; gap: 4px; font: 800 20px/1 var(--display); }
.cb-price .cb-eq { color: var(--ink-2); font-size: 18px; }
.cb-price b { font: 800 30px/1 var(--display); font-variation-settings: "wdth" 80; }
.cb-up { font-style: normal; font-size: 12px; font-weight: 800; padding: 3px 8px; border-radius: 999px; color: #fff; background: #c4452f; }
.cb-why { color: var(--ink-2); font-size: 12.5px; margin-top: -4px; }
.cb-step { display: flex; align-items: center; gap: 10px; }
.cb-pm { width: 46px; height: 46px; border-radius: 14px; font: 800 24px/1 var(--display); color: var(--ink); background: #fffaf0; box-shadow: inset 0 0 0 1.5px rgba(180, 141, 69, .45), 0 3px 0 rgba(143, 106, 44, .35); }
.cb-pm:hover { background: #fff3d6; } .cb-pm:active { transform: translateY(2px); box-shadow: inset 0 0 0 1.5px rgba(180, 141, 69, .45); }
.cb-n { display: flex; align-items: center; gap: 8px; height: 52px; padding: 0 14px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 2px rgba(180, 141, 69, .55); }
.cb-n input { width: 84px; border: 0; outline: 0; background: none; font: 800 26px/1 var(--display); color: var(--ink); text-align: center; -moz-appearance: textfield; }
.cb-n input::-webkit-outer-spin-button, .cb-n input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cb-n:focus-within { box-shadow: inset 0 0 0 2.5px var(--brass-2); }
.cb-quick { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.cb-quick .chip { height: 32px; padding: 0 14px; color: var(--ink); background: rgba(26, 22, 17, .06); box-shadow: none; font-weight: 700; }
.cb-quick .chip.on { background: var(--brass); color: #2a1d06; }
.cb-total { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-radius: 14px; background: #fffaf0; box-shadow: inset 0 0 0 1px rgba(180, 141, 69, .3); font-weight: 700; }
.cb-total .cb-tv { display: inline-flex; align-items: center; gap: 6px; } .cb-total b { font: 800 26px/1 var(--display); }
.cb-have { color: var(--ink-2); font-size: 13px; margin-top: -4px; } .cb-have.bad { color: #b4311f; font-weight: 700; }
.cb-go { width: 100%; justify-content: center; height: 50px; font-size: 16px; --bg: var(--table-2); --fg: var(--chalk); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 4px 0 #06120e, 0 14px 26px -12px rgba(0, 0, 0, .7); }
.cb-go:hover:not(:disabled) { --bg: var(--table-3); } .cb-go:disabled { opacity: .5; cursor: not-allowed; }
.cb-go b { color: var(--brass); }
.cb-fine { color: var(--ink-2); font-size: 11.5px; }
.cb-max { margin: 6px 0; color: var(--ink-2); }
.nav-in { max-width: 1480px; margin-left: max(12px, env(safe-area-inset-left, 0px), calc((100% - 1480px) / 2)); margin-right: max(12px, env(safe-area-inset-right, 0px), calc((100% - 1480px) / 2)); } /* (étape 151 : un peu plus large, pour que les catégories gardent leurs icônes) */
.ratpop .seg button { color: var(--ink-2); } .ratpop .seg button:hover { color: var(--ink); }
.ratpop .seg button.on { color: var(--chalk); } .ratpop .seg .ind { background: var(--table-2); box-shadow: 0 3px 8px -4px rgba(0, 0, 0, .6); }
.ratpop .seg .ind { top: 3px; bottom: 3px; border-radius: 8px; }

/* ---------- (étape 151, suite) la barre du haut revue avec Nico ----------
   plus de bande sombre derrière les catégories (elles sont directement sur la barre verte), plus de trait doré fixe en bas,
   plus de séparateur après les monnaies, plus de fond sombre derrière le pseudo. À la place, une animation douce :
   un reflet doré très léger qui traverse la barre de temps en temps, et la pastille crème de la page qui brille. */
.links { background: none; box-shadow: none; padding: 0; gap: 2px; }
.links .ind { top: 0; bottom: 0; overflow: hidden; }
.links .ind::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .75) 50%, transparent 65%) no-repeat; background-size: 250% 100%; background-position: 150% 0; animation: navInd 6s ease-in-out infinite; }
@keyframes navInd { 0%, 70% { background-position: 150% 0; } 100% { background-position: -60% 0; } }
.nav-in::after { left: 0; right: 0; top: 0; bottom: 0; height: auto; border-radius: inherit; opacity: 1;
  background: linear-gradient(105deg, transparent 42%, rgba(243, 217, 149, .09) 50%, transparent 58%) no-repeat; background-size: 300% 100%; background-position: 130% 0; animation: navSheen 11s ease-in-out infinite; }
@keyframes navSheen { 0%, 62% { background-position: 130% 0; } 100% { background-position: -30% 0; } }
.nv-sep { display: none; }
.nav-r .me-chip { background: none; box-shadow: none; margin-left: 2px; }
.nav-r .me-chip:hover, .nav-r .me-chip[aria-expanded="true"] { background: rgba(214, 176, 102, .12); }
@media (prefers-reduced-motion: reduce) { .links .ind::before, .nav-in::after { animation: none; display: none; } }
/* (étape 151, suite) la barre répartie en trois blocs avec le même espace entre eux (logo | catégories | monnaies, boutons
   et pseudo) ; la monnaie a de l'air avant le calendrier ; les deux bords de la barre ont la même marge intérieure */
.nav-in { justify-content: space-between; padding-left: 16px; padding-right: 16px; }
.links { margin: 0; }
.nav-r > .wallet { margin-right: 12px; }
.nav-r { gap: 6px; }
@media (max-width: 1100px) { .nav-r > .wallet { margin-right: 4px; } .nav-r { gap: 4px; } }

/* ---------- (étape 152) plus de fins traits blancs selon l'écran ----------
   Sur un écran agrandi (125 %, 150 %…), le bord d'une image sombre posée sur une carte crème tombe entre deux pixels :
   le crème de dessous se voyait en fin trait clair (Nico ne le voyait pas, d'autres joueurs oui). Les cartes ont donc
   un fond sombre derrière leur image, et l'image n'a plus ses propres coins arrondis (c'est la carte qui coupe).
   Aussi retiré : le reflet blanc d'un pixel en haut de chaque carte crème (.paper) et le liseré blanc des affiches. */
.tk { background: linear-gradient(180deg, #0f1c18 0, #0f1c18 140px, var(--paper) 140px); }
.tk-art { background: #0f1c18; }
.tk-art .gart, .gtile .art .gart { border-radius: 0; }
.poster { box-shadow: 0 40px 70px -30px rgba(0, 0, 0, .9), inset 0 0 0 1px rgba(214, 176, 102, .16); }


/* ---------- (étape 152, suite) page Jeux : plus de ligne entre l'image et le bas de la carte ----------
   le fondu de l'image se termine en couleur pleine un peu avant son bord, et déborde de 3 px sur le bas de la carte
   (la carte est penchée en 3D : le bord de l'image se voyait en fine ligne sur certains écrans) */
.gtile .art::after { bottom: -3px; height: calc(60% + 3px); }
.gtile.t-scuno .art::after, .gtile.t-navale .art::after { background: linear-gradient(transparent, #0c261e 82%); }
.gtile.t-loup .art::after { background: linear-gradient(transparent, #0e1230 82%); }
.gtile.t-quiz .art::after { background: linear-gradient(transparent, #160e07 82%); }
.gtile.t-blackjack .art::after { background: linear-gradient(transparent, #071d14 82%); }
.gtile .art { z-index: 0; }

/* ---------- (étape 153) le trait de couleur des tickets de l'Accueil ne disparaît plus au survol ----------
   il était tout en bas de l'image : quand le ticket bouge, certains ordinateurs le cachaient sous l'image. Il est
   maintenant en haut de la partie crème (rien ne peut le recouvrir). */
.tk-art::after { display: none; }
.tk-body { box-shadow: inset 0 4px 0 var(--acc); padding-top: 18px; }

/* ---------- (étape 153) le bandeau « nouvelle version » ---------- */
.verbar { position: fixed; z-index: 95; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 0); width: max-content; max-width: calc(100vw - 24px);
  display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 16px; border-radius: 16px; color: var(--chalk); font-size: 14px; font-weight: 600;
  background: radial-gradient(120% 160% at 0% 0%, #1f5444, var(--table-2) 55%, var(--table)); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .35), 0 20px 40px -16px rgba(0, 0, 0, .8); }
.verbar .vb-dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--brass); box-shadow: 0 0 0 0 rgba(214, 176, 102, .6); animation: vbPulse 1.8s ease-out infinite; }
@keyframes vbPulse { to { box-shadow: 0 0 0 10px rgba(214, 176, 102, 0); } }
.verbar .vb-x { width: 32px; height: 32px; flex: none; border-radius: 10px; display: grid; place-items: center; color: var(--chalk-2); }
.verbar .vb-x:hover { background: rgba(236, 229, 212, .1); color: var(--chalk); } .verbar .vb-x svg { width: 16px; height: 16px; }
@media (max-width: 560px) { .verbar { flex-wrap: wrap; justify-content: center; text-align: center; } }
@media (prefers-reduced-motion: reduce) { .verbar .vb-dot { animation: none; } }


/* ---------- (étape 154) page Jeux : la vraie cause de la ligne au-dessus du titre ----------
   le fin contour clair de la carte (ombre intérieure) était caché par l'image en haut mais visible en bas : une marche
   au bord de l'image (la lumière « s'arrêtait »), et le bas paraissait un peu moins large. Le contour est maintenant
   posé par-dessus toute la carte, pareil en haut et en bas. */
.gtile:not(.idea) { box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .95); }
.gtile:not(.idea)::before { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px var(--line-2); }

/* =========================== (étape 154) la Boutique, plus prestigieuse ===========================
   onglets en petites vitrines de tapis (médaillon, liseré laiton), bulles cerclées de laiton, boutiques encadrées d'un
   double filet doré avec des coins ouvragés, horloge à cases pour les comptes à rebours, éditions limitées en velours
   bordeaux avec un liseré d'or qui court, jauge de stock, marché sans texte en trop, Monnaie allégée, pack VIP refait. */
.shp-head { margin-bottom: 4px; }
/* les onglets */
.shop2 .shp-tab { background: linear-gradient(180deg, rgba(31, 84, 68, .62), rgba(10, 29, 23, .78)); color: var(--chalk); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .26), inset 0 1px 0 rgba(255, 255, 255, .07), 0 14px 26px -18px #000; transition: transform .3s var(--ease-out), box-shadow .3s; }
.shop2 .shp-tab .shp-tico { width: 54px; height: 54px; padding: 6px; border-radius: 50%; background: radial-gradient(circle at 50% 38%, rgba(243, 217, 149, .22), rgba(214, 176, 102, .05) 70%); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .3); }
.shop2 .shp-tab small { color: rgba(236, 229, 212, .55); }
.shop2 .shp-tab:hover { transform: translateY(-3px); background: linear-gradient(180deg, rgba(38, 98, 79, .7), rgba(12, 34, 27, .82)); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .6), 0 0 22px -6px rgba(214, 176, 102, .45), 0 16px 28px -16px #000; }
.shop2 .shp-tab.on { background: linear-gradient(180deg, #fff6df, #ecdcb4); color: var(--ink); box-shadow: 0 4px 0 #a37a26, 0 16px 28px -14px rgba(0, 0, 0, .8), inset 0 0 0 2px #e2b84f; }
.shop2 .shp-tab.on .shp-tico { background: radial-gradient(circle at 50% 38%, #fffaf0, #f3e2b8 70%); box-shadow: inset 0 0 0 1.5px rgba(180, 141, 69, .55); }
.shop2 .shp-tab.on small { color: #5d5546; }
/* les bulles */
.shop2 .shp-bub { height: 36px; padding: 0 16px; color: var(--chalk); font-weight: 700; background: linear-gradient(180deg, rgba(31, 84, 68, .55), rgba(10, 29, 23, .7)); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .4), 0 6px 14px -10px #000; }
.shop2 .shp-bub:hover { box-shadow: inset 0 0 0 1.5px rgba(243, 217, 149, .8), 0 0 14px -4px rgba(214, 176, 102, .5); }
.shop2 .shp-bub.on { color: #2a1d06; background: linear-gradient(180deg, #f6dd98, #d9b25c); box-shadow: 0 3px 0 #8f6a2c, inset 0 1px 0 rgba(255, 255, 255, .5); }
.shop2 .shp-bub.sm { height: 30px; } .shop2 .shp-bub.sm.on { background: #fff6df; color: #1a1611; }
/* les boutiques : double filet doré et coins ouvragés */
.shop2 .shp { padding: 26px; border-radius: 22px; box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .55), inset 0 0 0 7px rgba(0, 0, 0, .16), inset 0 0 0 8px rgba(214, 176, 102, .22), 0 34px 60px -38px rgba(0, 0, 0, .95); }
.shop2 .shp::after { content: ""; position: absolute; inset: 12px; z-index: -1; pointer-events: none; border-radius: 14px; opacity: .85;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M2 22V8a6 6 0 0 1 6-6h14' fill='none' stroke='%23d6b066' stroke-width='1.6'/%3E%3Cpath d='M7 16V12a5 5 0 0 1 5-5h4' fill='none' stroke='%23d6b066' stroke-width='1.2' opacity='.7'/%3E%3Ccircle cx='6' cy='6' r='2' fill='%23f3d995'/%3E%3C/svg%3E") left top / 34px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M38 22V8a6 6 0 0 0-6-6H18' fill='none' stroke='%23d6b066' stroke-width='1.6'/%3E%3Cpath d='M33 16V12a5 5 0 0 0-5-5h-4' fill='none' stroke='%23d6b066' stroke-width='1.2' opacity='.7'/%3E%3Ccircle cx='34' cy='6' r='2' fill='%23f3d995'/%3E%3C/svg%3E") right top / 34px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M2 18v14a6 6 0 0 0 6 6h14' fill='none' stroke='%23d6b066' stroke-width='1.6'/%3E%3Ccircle cx='6' cy='34' r='2' fill='%23f3d995'/%3E%3C/svg%3E") left bottom / 34px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M38 18v14a6 6 0 0 1-6 6H18' fill='none' stroke='%23d6b066' stroke-width='1.6'/%3E%3Ccircle cx='34' cy='34' r='2' fill='%23f3d995'/%3E%3C/svg%3E") right bottom / 34px no-repeat; }
.shop2 .shp-h { padding: 0 6px 10px; border-bottom: 1px solid rgba(214, 176, 102, .22); margin-bottom: 4px; }
.shop2 .shp-kico { width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, rgba(243, 217, 149, .3), rgba(0, 0, 0, .25) 75%); box-shadow: inset 0 0 0 1.5px rgba(214, 176, 102, .6), 0 6px 14px -8px #000; }
.shop2 .shp-h h2 { font-size: 30px; letter-spacing: -.01em; }
.shop2 .shp-when { background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .35); }
/* l'horloge à cases */
.shp-clock { display: inline-flex; align-items: center; gap: 10px; padding: 6px 8px 6px 14px; border-radius: 14px; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .4); }
.shp-clock .ck-l { color: var(--chalk-2); font-size: 13px; font-weight: 600; }
.shp-clock .ck-c { display: flex; gap: 4px; }
.shp-clock .ck { display: grid; justify-items: center; min-width: 42px; padding: 5px 6px 4px; border-radius: 9px; overflow: hidden; background: linear-gradient(180deg, #2a2016, #120d09); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(214, 176, 102, .35), 0 4px 10px -6px #000; }
.shp-clock .ck[hidden] { display: none; }
.shp-clock .ck b { font: 800 20px/1 var(--display); color: #f3d995; letter-spacing: .01em; }
.shp-clock .ck small { font-size: 10px; font-weight: 700; color: rgba(236, 229, 212, .55); margin-top: 2px; }
.shp-clock .ck b.ck-flip { animation: ckTick .45s var(--ease-out); }
@keyframes ckTick { 0% { transform: translateY(-60%); opacity: 0; } 100% { transform: none; opacity: 1; } }
.shp-clock.soon .ck { box-shadow: inset 0 0 0 1px rgba(224, 83, 61, .8), 0 0 14px -4px rgba(224, 83, 61, .7); } .shp-clock.soon .ck b { color: #ffc2b4; }
/* les éditions limitées : velours bordeaux, un liseré d'or qui fait le tour */
@property --ga { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.shop2 .shp.k-event { background: radial-gradient(90% 70% at 50% 0%, rgba(244, 191, 61, .18), transparent 60%), linear-gradient(165deg, #6a1626, #3a0d18 60%, #24070f); }
.shop2 .shp.k-event::before { inset: 0; padding: 1.5px; border-radius: inherit; z-index: 0; background: conic-gradient(from var(--ga), transparent 0 70%, rgba(243, 217, 149, .95) 80%, transparent 90%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: shpRun 7s linear infinite; }
@keyframes shpRun { to { --ga: 360deg; } }
.shop2 .shp.k-event .shp-kico { background: radial-gradient(circle at 50% 35%, rgba(255, 216, 106, .4), rgba(60, 10, 20, .5) 75%); }
.shop2 .shp.k-event .shp-clock { background: rgba(30, 4, 10, .45); }
/* les cases */
.shop2 .shp-it { padding: 12px 12px 14px; border-radius: 18px; background: linear-gradient(180deg, #fffaf0, #f1e6cf); }
.shop2 .shp-it .shp-th { border-radius: 14px; background: radial-gradient(90% 80% at 50% 30%, color-mix(in srgb, var(--rcs) 18%, #fffaf0), #ece0c4); box-shadow: inset 0 0 0 1px rgba(180, 141, 69, .25); }
.shop2 .shp-it .shp-nm { font-size: 15.5px; }
.shop2 .shp-it .shp-pr { padding: 4px 12px 4px 8px; border-radius: 999px; background: #1a1611; color: #f3d995; } .shop2 .shp-it .shp-pr b { color: #f3d995; font-size: 17px; }
.shop2 .shp-it .shp-pr small { color: rgba(243, 217, 149, .7); }
.shop2 .shp-it .btn[data-buy] { --bg: var(--table-2); --fg: var(--chalk); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 3px 0 #06120e, 0 8px 14px -8px rgba(0, 0, 0, .6); }
.shop2 .shp-it .btn[data-buy]:hover { --bg: var(--table-3); }
/* la jauge du stock */
.shp-stock { display: grid; gap: 4px; width: 100%; padding: 0 6px; }
.shp-sbar { position: relative; height: 7px; border-radius: 99px; background: rgba(26, 22, 17, .12); overflow: hidden; }
.shp-sbar i { position: absolute; inset: 0 auto 0 0; width: calc(var(--p) * 100%); border-radius: inherit; overflow: hidden; background: linear-gradient(90deg, #c4452f, #e3b552); }
.shp-sbar i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent) no-repeat; background-size: 60% 100%; animation: shpBar 2.4s ease-in-out infinite; }
@keyframes shpBar { from { background-position: -80% 0; } to { background-position: 180% 0; } }
.shp-stock small { font-size: 12px; color: #6b4a12; font-weight: 600; } .shp-stock small b { color: #8a2a1a; }
.shp-stock.out small { color: #8a2a1a; }
/* le marché */
.mk-info { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.mk-pill { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--chalk-2); background: rgba(0, 0, 0, .22); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .35); }
.mk-pill b { color: #f3d995; }
.mk-rule { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: rgba(236, 229, 212, .6); } .mk-rule svg { width: 13px; height: 13px; }
.mk-it, .mk-tr { background: linear-gradient(180deg, #fffaf0, #f1e6cf); box-shadow: inset 0 0 0 1px rgba(180, 141, 69, .35), 0 16px 30px -22px rgba(0, 0, 0, .9); transition: transform .3s var(--ease-out), box-shadow .3s; }
.mk-it:hover, .mk-tr:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1.5px rgba(214, 176, 102, .8), 0 0 22px -6px rgba(214, 176, 102, .6), 0 22px 36px -22px rgba(0, 0, 0, .9); }
.mk-th, .mk-vit { display: grid; place-items: center; width: 100%; height: 104px; border-radius: 14px; background: radial-gradient(70% 70% at 50% 40%, rgba(214, 176, 102, .25), transparent 70%), radial-gradient(130% 110% at 30% 0%, #1f5444, var(--table-2) 55%, var(--table)); }
.mk-vit { height: 92px; }
.mk-th .bdg, .mk-vit .bdg { filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .45)); }
.mk-nm { font: 700 15.5px/1.2 var(--body); }
.mk-acts { width: 100%; flex-wrap: nowrap; }
.mk-acts .mk-main { flex: 1; justify-content: center; --bg: var(--table-2); --fg: var(--chalk); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 3px 0 #06120e; }
.mk-acts .mk-ico { flex: none; width: 34px; padding: 0; justify-content: center; }
.mk-arr { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #8f6a2c; background: #fffaf0; box-shadow: inset 0 0 0 1.5px rgba(180, 141, 69, .5); }
.mk-arr svg { width: 20px; height: 20px; }
.mk-tr:hover .mk-arr svg { animation: mkSwap .8s var(--ease-out); } @keyframes mkSwap { to { transform: rotate(360deg); } }
.mk-side > small { font-size: 11px; font-weight: 700; letter-spacing: .02em; color: #8f6a2c; }
.mk-want { padding: 6px; border-radius: 12px; background: rgba(214, 176, 102, .12); }
/* la Monnaie */
.mny-card { background: linear-gradient(180deg, #fffaf0, #f1e6cf); box-shadow: inset 0 0 0 1px rgba(180, 141, 69, .35), 0 16px 30px -22px rgba(0, 0, 0, .9); }
.mny-art, .mny-ad .mny-art { background: radial-gradient(circle at 50% 38%, rgba(214, 176, 102, .25), transparent 70%), radial-gradient(130% 110% at 30% 0%, #1f5444, var(--table-2) 55%, var(--table)); box-shadow: inset 0 0 0 2px rgba(214, 176, 102, .6), 0 10px 20px -10px rgba(0, 0, 0, .7); }
.mny-ad .mny-art > svg { width: 60px; height: 60px; }
.mny-art .mny-pl { transform-box: fill-box; transform-origin: center; animation: mnyPl 2.4s ease-in-out infinite; } @keyframes mnyPl { 50% { transform: scale(1.12); } }
.mny-art .mny-tw { transform-box: fill-box; transform-origin: center; animation: mnyTw 2s ease-in-out infinite; } @keyframes mnyTw { 50% { transform: scale(.4) rotate(45deg); opacity: .4; } }
.mny-gain { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.mny-gain > span { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #2a1d06; background: #fff0c4; box-shadow: inset 0 0 0 1px #e3b552; }
.mny-gain svg { width: 15px; height: 15px; }
.mny-note { color: rgba(236, 229, 212, .6); font-size: 12.5px; }
.mny-tip { text-align: center; }
/* le pack VIP refait */
.vip2 { position: relative; display: grid; grid-template-columns: minmax(180px, 260px) minmax(0, 1fr); border-radius: 24px; overflow: hidden; color: var(--chalk);
  background: linear-gradient(135deg, #1b1610, #0e0b08 60%, #19130a); box-shadow: inset 0 0 0 1px rgba(243, 210, 122, .45), 0 34px 60px -34px rgba(0, 0, 0, .95); }
.vip2::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 40%, rgba(243, 210, 122, .1) 50%, transparent 60%) no-repeat; background-size: 260% 100%; animation: vip2Sheen 7s ease-in-out infinite; }
@keyframes vip2Sheen { 0%, 55% { background-position: 140% 0; } 100% { background-position: -60% 0; } }
.vip2-art { position: relative; display: grid; place-items: center; padding: 30px 20px; background: radial-gradient(80% 70% at 50% 45%, rgba(243, 210, 122, .22), transparent 70%); border-right: 1px solid rgba(243, 210, 122, .18); }
.vip2-glow { position: absolute; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(closest-side, rgba(243, 210, 122, .35), transparent); animation: vip2Glow 3.6s ease-in-out infinite; }
@keyframes vip2Glow { 50% { transform: scale(1.12); opacity: .7; } }
.vip2-gem { position: relative; width: 150px; height: 150px; display: grid; place-items: center; }
.vip2-gem > svg { width: 100%; height: 100%; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .6)); }
.vip2-main { position: relative; display: grid; gap: 10px; align-content: center; padding: 26px 28px; }
.vip2-k { justify-self: start; padding: 4px 10px; border-radius: 999px; font: 800 11px/1 var(--body); letter-spacing: .04em; color: #1a1306; background: linear-gradient(180deg, #f6dd98, #d6a83c); }
.vip2-n { margin: 0; font-size: clamp(30px, 4vw, 42px); color: #fff6df; }
.vip2-d { margin: -4px 0 0; color: rgba(236, 229, 212, .65); font-size: 14px; }
.vip2-top { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.vip2-top li, .vip2-more li { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; font-size: 14px; font-weight: 600; background: rgba(243, 210, 122, .07); box-shadow: inset 0 0 0 1px rgba(243, 210, 122, .18); }
.vip2-i { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 8px; color: #f3d27a; background: rgba(243, 210, 122, .12); }
.vip2-i svg { width: 16px; height: 16px; }
.vip2-i .vipadv-nc { font-style: normal; font-weight: 800; font-size: 11px; color: #f3d27a; }
.vip2-more summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 700; color: #f3d27a; }
.vip2-more summary::-webkit-details-marker { display: none; }
.vip2-more summary svg { width: 14px; height: 14px; transition: transform .25s; } .vip2-more[open] summary svg { transform: rotate(180deg); }
.vip2-more ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; }
.vip2-more li { font-size: 13px; font-weight: 500; padding: 7px 10px; }
.vip2-f { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 4px; }
.vip2-go { height: 50px; padding: 0 22px; font-size: 16px; --bg: #f3d27a; --fg: #1a1306; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 4px 0 #8f6a2c, 0 16px 30px -14px rgba(243, 210, 122, .5); }
.vip2-go:hover { --bg: #f8df98; }
.vip2-eur { margin-left: 8px; padding: 4px 9px; border-radius: 8px; background: rgba(26, 19, 6, .14); font-weight: 800; }
.vip2-on { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 12px; font-weight: 700; color: #b7f0cf; background: rgba(61, 224, 166, .12); } .vip2-on svg { width: 16px; height: 16px; }
.vip2-note { color: rgba(236, 229, 212, .5); font-size: 12px; } .vip2-note svg { width: 12px; height: 12px; vertical-align: -1px; }
@media (max-width: 720px) { .vip2 { grid-template-columns: minmax(0, 1fr); } .vip2-art { border-right: 0; border-bottom: 1px solid rgba(243, 210, 122, .18); padding: 22px; } .vip2-gem { width: 120px; height: 120px; } .vip2-main { padding: 20px; } .shp-clock { flex-wrap: wrap; } }
@media (prefers-reduced-motion: reduce) { .shop2 .shp.k-event::before, .shp-sbar i::after, .shp-clock .ck b.ck-flip, .mny-art .mny-pl, .mny-art .mny-tw, .vip2::before, .vip2-glow, .mk-tr:hover .mk-arr svg { animation: none !important; } }

/* =========================== (étape 155) retouches de la Boutique ===========================
   les boutons verts du marché lisibles (une règle de l'étape 106 forçait leur texte en noir), les cartes d'échange en deux
   vitrines pareilles (« Donne » ⇄ « Contre ») sans carré clair autour des badges, et un pack VIP plus clair dont chaque
   avantage s'ouvre en grand. */
.mk-it .btn.mk-main, .mk-tr .btn.mk-main { color: var(--chalk); --fg: var(--chalk); }
.mk-it .btn.mk-main:hover, .mk-tr .btn.mk-main:hover { --bg: var(--table-3); }
/* les cartes d'échange */
.mk-tr { padding: 16px 16px 14px; gap: 10px; }
.mk-swap { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 10px; }
.mk-side { gap: 6px; }
.mk-side > small { justify-self: center; padding: 3px 10px; border-radius: 999px; background: rgba(214, 176, 102, .16); color: #6b4a12; font-size: 11px; }
.mk-side > b, .mk-wn { font: 700 14px/1.25 var(--body); text-align: center; color: #2a1d14; }
.mk-wn i { font-style: normal; font-weight: 500; color: #8a7a62; margin: 0 4px; }
.mk-vit { height: 104px; box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .3), 0 8px 16px -10px rgba(0, 0, 0, .55); }
.mk-wantv { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; padding: 6px; }
.mk-want { padding: 0; border-radius: 0; background: none; display: grid; place-items: center; max-width: none; }
.mk-arr { align-self: center; margin-top: 18px; }
.mk-tr .mk-by { gap: 8px; }
/* le pack VIP, plus clair : le tapis vert relevé et l'or */
.vip2 { background: radial-gradient(90% 120% at 100% 0%, rgba(243, 210, 122, .14), transparent 55%), linear-gradient(135deg, #2b6450, #1a4a3a 55%, #23574a); box-shadow: inset 0 0 0 1px rgba(243, 210, 122, .55), 0 34px 60px -34px rgba(0, 0, 0, .9); }
.vip2-art { background: radial-gradient(80% 70% at 50% 45%, rgba(255, 230, 160, .45), rgba(243, 210, 122, .08) 60%, transparent 75%); border-right-color: rgba(243, 210, 122, .3); }
.vip2-glow { background: radial-gradient(closest-side, rgba(255, 236, 180, .55), transparent); }
.vip2-d { color: rgba(236, 229, 212, .78); }
.vip2-top li { display: block; padding: 0; background: none; box-shadow: none; }
.vip2-perk { display: flex; align-items: center; gap: 10px; width: 100%; height: 100%; padding: 9px 12px; border: 0; border-radius: 12px; cursor: pointer; text-align: left; color: var(--chalk); font: 600 14px/1.25 var(--body);
  background: rgba(255, 246, 223, .08); box-shadow: inset 0 0 0 1px rgba(243, 210, 122, .28); transition: transform .25s var(--ease-out), background .25s, box-shadow .25s; }
.vip2-perk:hover { transform: translateY(-2px); background: rgba(255, 246, 223, .15); box-shadow: inset 0 0 0 1.5px rgba(243, 210, 122, .7), 0 10px 20px -12px rgba(0, 0, 0, .6); }
.vip2-perk .vip2-i { background: rgba(243, 210, 122, .18); }
.vip2-i .bdg-svg, .vip2-i > svg.bdg-svg { width: 22px; height: 22px; }
.vip2-more ul.vip2-top { margin-top: 10px; }
/* un avantage en grand (sans objet à montrer) */
.modal.vperkmodal { width: min(440px, 100%); }
.vperk-med { display: grid; place-items: center; width: 64px; height: 64px; flex: none; border-radius: 50%; color: #f3d27a; font-size: 30px;
  background: radial-gradient(circle at 50% 35%, rgba(243, 217, 149, .3), rgba(214, 176, 102, .06) 70%); box-shadow: inset 0 0 0 1.5px rgba(214, 176, 102, .6); }
.vperk-med svg { width: 32px; height: 32px; } .vperk-med .vipadv-nc { font-style: normal; font-weight: 800; font-size: 18px; color: #f3d27a; }
.vperk-k { display: inline-block; margin-bottom: 4px; padding: 3px 9px; border-radius: 999px; font: 800 11px/1 var(--body); color: #1a1306; background: linear-gradient(180deg, #f6dd98, #d6a83c); }
.vperk-d { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--ink); }
.vperk-show { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 18px; padding: 18px 14px; border-radius: 16px; background: radial-gradient(70% 80% at 50% 40%, rgba(214, 176, 102, .2), transparent 70%), radial-gradient(130% 110% at 30% 0%, #1f5444, var(--table-2) 55%, var(--table)); color: var(--chalk); }
.vperk-nm { font: 800 22px/1 var(--display); font-variation-settings: "wdth" 85; }
.vperk-big { display: inline-flex; align-items: center; gap: 10px; } .vperk-big b { font: 800 34px/1 var(--display); color: #f3d27a; }
.vperk-big s { font: 700 22px/1 var(--display); color: rgba(236, 229, 212, .5); } .vperk-big small { font-size: 14px; color: var(--chalk-2); margin-right: 8px; }
.vperk-arr { color: var(--brass); font-weight: 800; font-size: 22px; }
.vperk-badge { width: 110px; height: 110px; display: grid; place-items: center; } .vperk-badge > svg { width: 100%; height: 100%; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .55)); }


/* =========================== (étape 156) les fenêtres d'achat, de cadeau, du marché et de la Monnaie ===========================
   toutes dans le même style : le bandeau vert « tapis » avec l'objet sur sa petite vitrine, une phrase sur le crème, le
   récapitulatif du prix (prix, ce que j'ai, ce qu'il me restera), le bouton vert ; pas de bouton « Fermer » (la croix suffit). */
.modal.dlmodal { width: min(500px, 100%); gap: 16px; }
.modal.dlmodal.mkmodal { width: min(640px, 100%); }
.dl-band { align-items: center; }
.dl-vit { position: relative; display: grid; place-items: center; width: 84px; height: 84px; flex: none; border-radius: 20px; overflow: hidden;
  background: radial-gradient(70% 70% at 50% 40%, rgba(243, 217, 149, .32), rgba(214, 176, 102, .05) 70%), rgba(0, 0, 0, .18);
  box-shadow: inset 0 0 0 1.5px rgba(214, 176, 102, .6), 0 10px 22px -12px rgba(0, 0, 0, .8); }
.dl-vit .shp-th { width: 100%; height: 100%; border-radius: 0; background: none; box-shadow: none; }
.dl-vit .shp-th > svg { height: 78px; max-width: 100%; }
.dl-vit .shp-th .pst-sw, .dl-vit .shp-th .pst-ft, .dl-vit .shp-th .pst-dt { transform: scale(1.1); }
.dl-vit .bdg { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); }
.dl-ico { display: grid; place-items: center; width: 100%; height: 100%; color: #f3d27a; }
.dl-ico > svg { width: 38px; height: 38px; }
.dl-vipb > svg, .dl-vipb .bdg-svg { width: 66px !important; height: 66px !important; }
.dl-pile .mny-pile { transform: scale(.85); }
.dl-chest > svg, .dl-tv > svg { width: 64px; height: 64px; display: block; }
.dl-ht { display: grid; gap: 2px; min-width: 0; }
.dl-k { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 3px 10px; border-radius: 999px; font: 800 11.5px/1.2 var(--body); color: #1a1306; background: linear-gradient(180deg, #f6dd98, #d6a83c); }
.dl-k svg { width: 12px; height: 12px; }
.dl-band h3 { margin: 4px 0 0; font-size: clamp(24px, 4vw, 32px); line-height: 1.02; overflow-wrap: anywhere; }
.dl-band p { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.dl-band p b { color: #f3d27a; }
.dl-band p svg { width: 16px; height: 16px; }
.dl-band .vip-old { color: var(--chalk-2); opacity: .7; }
.dl-body { display: grid; gap: 12px; }
.dlmodal .err:empty { display: none; }
.dl-note { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.dl-note svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: #2f7d55; }
.dl-fine { margin: 0; font-size: 12px; line-height: 1.45; color: var(--ink-2); text-align: center; }
/* le récapitulatif du prix : un petit ticket crème */
.dl-sum { display: grid; gap: 0; padding: 4px 14px; border-radius: 14px; background: #fffaf0; box-shadow: inset 0 0 0 1px rgba(180, 141, 69, .35); }
.dl-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; font-size: 14px; color: var(--ink-2); }
.dl-row + .dl-row { border-top: 1px dashed rgba(180, 141, 69, .4); }
.dl-row b { display: inline-flex; align-items: center; gap: 5px; color: var(--ink); font: 800 17px/1 var(--display); font-variation-settings: "wdth" 85; }
.dl-row b svg { width: 16px; height: 16px; }
.dl-row.after b { color: #1f6b45; }
.dl-row.bad, .dl-row.bad b { color: #b33a26; }
/* les boutons : Annuler discret, l'action principale en vert tapis */
.dl-acts { justify-content: flex-end; align-items: center; gap: 10px; margin: 0; }
.dlmodal .dl-acts .btn.ghost { --fg: var(--ink); color: var(--ink); background: transparent; box-shadow: inset 0 0 0 1.5px rgba(26, 22, 17, .22); }
.btn.dl-go { --bg: var(--table-2); --fg: var(--chalk); color: var(--chalk); min-height: 48px; padding: 0 22px; font-size: 15.5px; gap: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 4px 0 #06120e, 0 14px 26px -12px rgba(0, 0, 0, .7); }
.btn.dl-go:hover:not(:disabled) { --bg: var(--table-3); }
.btn.dl-go:disabled { opacity: .45; }
.btn.dl-go svg { width: 18px; height: 18px; }
.btn.dl-go b { color: #f1d27e; font: 800 18px/1 var(--display); }
.btn.dl-go.danger { --bg: #8e2b1d; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 4px 0 #4a120a, 0 14px 26px -12px rgba(0, 0, 0, .7); }
@media (max-width: 520px) { .dl-vit { width: 68px; height: 68px; border-radius: 16px; } .dl-acts .btn { flex: 1; } }

/* Tu donnes ⇄ Tu reçois */
.dl-swap { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 10px; }
.dl-side { display: grid; justify-items: center; gap: 6px; text-align: center; min-width: 0; }
.dl-side > small { padding: 3px 10px; border-radius: 999px; background: rgba(214, 176, 102, .18); color: #6b4a12; font-size: 11.5px; font-weight: 700; }
.dl-side > b { font: 700 13.5px/1.3 var(--body); color: var(--ink); overflow-wrap: anywhere; }
.dl-mv { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; width: 100%; min-height: 92px; padding: 8px; border-radius: 16px;
  background: radial-gradient(70% 70% at 50% 40%, rgba(243, 217, 149, .2), transparent 70%), radial-gradient(130% 110% at 30% 0%, #1f5444, var(--table-2) 55%, var(--table));
  box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .4), 0 8px 16px -10px rgba(0, 0, 0, .55); }
.dl-arr { align-self: center; margin-top: 18px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #6b4a12; background: rgba(214, 176, 102, .2); }
.dl-arr svg { width: 18px; height: 18px; }
/* les gains d'une pub */
.dl-gains { display: flex; justify-content: center; gap: 10px; }
.dl-gains > span { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: #fffaf0; box-shadow: inset 0 0 0 1px rgba(180, 141, 69, .4); font-size: 14px; }
.dl-gains b { font: 800 20px/1 var(--display); color: var(--ink); }
.dl-gains svg { width: 22px; height: 22px; }

/* acheter ou offrir (Boutique) : « Pour moi / Offrir à un ami » en onglets, la liste des amis en cartes */
.sbmodal .shp-for { gap: 0; padding: 4px; border-radius: 14px; background: rgba(26, 22, 17, .06); box-shadow: inset 0 0 0 1px rgba(26, 22, 17, .08); }
.sbmodal .shp-for button { min-height: 42px; border-radius: 11px; background: transparent; color: var(--ink-2); box-shadow: none; transition: background .2s, color .2s, box-shadow .2s; }
.sbmodal .shp-for button:hover:not(:disabled):not(.on) { color: var(--ink); background: rgba(255, 255, 255, .5); }
.sbmodal .shp-for button.on { color: var(--chalk); background: radial-gradient(130% 110% at 30% 0%, #1f5444, var(--table-2) 60%); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .5), 0 4px 10px -6px rgba(0, 0, 0, .6); }
.sbmodal .shp-for button.on small { color: var(--chalk-2); }
.shp-gift { display: grid; gap: 10px; }
.shp-gq { position: relative; } .shp-gq .fs-ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); display: grid; color: var(--ink-2); pointer-events: none; } .shp-gq .fs-ic svg { width: 17px; height: 17px; }
.sbmodal .shp-gq .inp { padding-left: 40px; border-radius: 999px; }
.sbmodal .inp { background: #fffaf0; box-shadow: inset 0 0 0 1.5px rgba(180, 141, 69, .4); border-color: transparent; }
.sbmodal .inp:focus { box-shadow: inset 0 0 0 2px var(--table-3); outline: none; }
.sbmodal .shp-frs { max-height: 200px; gap: 6px; }
.sbmodal .shp-fr { position: relative; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; padding: 7px 10px; background: #fffaf0; box-shadow: inset 0 0 0 1px rgba(180, 141, 69, .28); transition: box-shadow .2s, transform .2s var(--ease-out); }
.sbmodal .shp-fr > input { position: absolute; opacity: 0; pointer-events: none; }
.sbmodal .shp-fr:hover:not(.no) { transform: translateY(-1px); box-shadow: inset 0 0 0 1.5px var(--brass); }
.sbmodal .shp-fr:has(input:checked) { background: #fdf3d8; box-shadow: inset 0 0 0 2px var(--brass), 0 6px 14px -10px rgba(0, 0, 0, .5); }
.shp-frk { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(180, 141, 69, .45); color: transparent; }
.shp-frk svg { width: 14px; height: 14px; }
.shp-fr:has(input:checked) .shp-frk { color: var(--chalk); background: var(--table-2); box-shadow: none; }
.sbmodal .field label small { font-weight: 500; color: var(--ink-2); }
.shp-gleft { justify-self: start; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; color: #6b4a12; background: rgba(214, 176, 102, .16); }
.shp-gleft:empty { display: none; }
.sbmodal .shp-qty { justify-content: center; }

/* « Essayer » : toute la fenêtre est une vitrine verte, le rat sous un projecteur */
.modal.trymodal { width: min(520px, 100%); gap: 8px; justify-items: center; text-align: center; padding: 26px 26px 20px;
  background: radial-gradient(70% 55% at 50% 52%, rgba(243, 217, 149, .2), transparent 70%), radial-gradient(130% 110% at 30% 0%, #1f5444, var(--table-2) 55%, var(--table));
  box-shadow: inset 0 0 0 1.5px rgba(214, 176, 102, .45), 0 40px 70px -40px rgba(0, 0, 0, .95), 0 8px 18px -10px rgba(0, 0, 0, .5); color: var(--chalk); }
.modal.trymodal > .x { color: var(--chalk-2); } .modal.trymodal > .x:hover { background: rgba(236, 229, 212, .12); color: var(--chalk); }
.try-k { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; border-radius: 999px; font: 800 12px/1.2 var(--body); color: #1a1306; background: linear-gradient(180deg, #f6dd98, #d6a83c); }
.try-k svg { width: 14px; height: 14px; }
.trymodal h3 { margin: 4px 0 0; color: var(--chalk); font-size: clamp(28px, 5vw, 38px); }
.try-stage { position: relative; display: grid; place-items: center; width: 100%; padding: 8px 0 14px; }
.try-stage::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 8px; height: 22px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .45), transparent); pointer-events: none; }
.trymodal .shp-tryf { position: relative; z-index: 1; background: none; padding: 0; }
.trymodal .shp-tryf .pfull { filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .45)); }
.trymodal .shp-tryc { position: relative; z-index: 1; width: min(100%, 400px); box-shadow: 0 22px 40px -22px #000; }
.try-note { margin: 0; padding-top: 10px; width: 100%; border-top: 1px solid rgba(214, 176, 102, .3); font-size: 12.5px; color: var(--chalk-2); }

/* le marché : les badges se cliquent */
.mk-z { cursor: zoom-in; transition: transform .25s var(--ease-out), filter .25s; }
.mk-z:hover { transform: translateY(-2px) scale(1.06); filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35)); }
.mk-z:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 10px; }
/* choisir des badges (proposer, vendre, nouvel échange) : des cartes avec une petite vitrine verte */
.mkmodal .mk-pick { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; max-height: 330px; padding: 4px 2px; }
.mkmodal .mk-pi { gap: 5px; padding: 10px 8px 10px; background: #fffaf0; box-shadow: inset 0 0 0 1px rgba(180, 141, 69, .3); transition: transform .2s var(--ease-out), box-shadow .2s; }
.mkmodal .mk-pi:hover:not(:disabled) { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px var(--brass), 0 10px 18px -12px rgba(0, 0, 0, .5); }
.mkmodal .mk-pi.on { background: #fdf3d8; box-shadow: inset 0 0 0 2.5px var(--brass), 0 10px 18px -12px rgba(0, 0, 0, .5); }
.mk-pv { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%;
  background: radial-gradient(70% 70% at 50% 40%, rgba(243, 217, 149, .22), transparent 70%), radial-gradient(130% 110% at 30% 0%, #1f5444, var(--table-2) 55%, var(--table)); box-shadow: inset 0 0 0 1.5px rgba(214, 176, 102, .5); }
.mk-pck { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 5px; border-radius: 999px; font-style: normal; font-weight: 800; font-size: 12px; color: var(--chalk); background: var(--table-2); box-shadow: 0 0 0 2px #fdf3d8; }
.mk-pck svg { width: 13px; height: 13px; }
.mkmodal .mk-price { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 10px; padding: 10px 14px; border-radius: 14px; background: #fffaf0; box-shadow: inset 0 0 0 1px rgba(180, 141, 69, .35); font-weight: 700; }
.mkmodal .mk-price .inp { max-width: 160px; }
.mkmodal .mk-price small { grid-column: 1 / -1; }

/* une proposition dans une carte d'échange (images 7 et 9) */
.mk-tr .mk-off { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 10px 12px; border-radius: 14px; background: #fffaf0; box-shadow: inset 0 0 0 1px rgba(180, 141, 69, .35), 0 6px 14px -12px rgba(0, 0, 0, .5); text-align: left; }
.mk-tr .mk-off.accepted { background: linear-gradient(180deg, #f0f8f2, #fffaf0); box-shadow: inset 0 0 0 2px #2f8a5a, 0 8px 18px -12px rgba(0, 0, 0, .5); }
.mk-oh { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.mk-ost { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; color: #8a6414; }
.mk-ost svg { width: 13px; height: 13px; }
.mk-ost.ok { padding: 3px 9px; border-radius: 999px; color: #fff; background: #2f8a5a; }
.mk-ost.wait { color: #6a5a48; font-weight: 700; }
.mk-og { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; }
.mk-ogv { display: flex; align-items: center; gap: 2px; padding: 5px 8px; border-radius: 12px; background: radial-gradient(130% 110% at 30% 0%, #1f5444, var(--table-2) 55%, var(--table)); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .4); }
.mk-og > b { font: 700 13.5px/1.3 var(--body); color: #2a1d14; overflow-wrap: anywhere; }
.mk-tr .mk-oacts { gap: 8px; }
.mk-tr .mk-oacts .btn { flex: 1; justify-content: center; min-height: 34px; }
.mk-off .btn.mk-main { --bg: var(--table-2); --fg: var(--chalk); color: var(--chalk); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 3px 0 #06120e; }
.mk-off .btn.mk-main:hover:not(:disabled) { --bg: var(--table-3); }
.mk-off .btn.mk-main svg { width: 15px; height: 15px; }

/* les cartes du marché dans les messages privés : vitrine verte, pastille d'état, texte d'un seul bloc */
.cp-mk3 { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 12px; align-items: center; margin: 2px 0 4px; padding: 10px 12px; border-radius: 16px; background: #fffaf0; color: var(--ink);
  box-shadow: inset 0 0 0 1.5px rgba(214, 176, 102, .55), 0 8px 18px -14px rgba(0, 0, 0, .5); max-width: 340px; }
.cp-mkv { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 14px;
  background: radial-gradient(70% 70% at 50% 40%, rgba(243, 217, 149, .22), transparent 70%), radial-gradient(130% 110% at 30% 0%, #1f5444, var(--table-2) 55%, var(--table)); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .45); }
.cp-mkv > svg { width: 46px; height: 46px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .4)); }
.cp-mk3 .cp-mk2 { display: flex; align-items: center; gap: 0; } .cp-mk3 .cp-mk2 > svg { width: 24px; height: 24px; }
.cp-mk3 .cp-mk2 i { display: grid; color: #f3d27a; } .cp-mk3 .cp-mk2 i svg { width: 11px; height: 11px; }
.cp-mkt { display: grid; gap: 4px; min-width: 0; }
.cp-mkh { justify-self: start; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font: 800 11.5px/1.2 var(--body); color: #6b4a12; background: rgba(214, 176, 102, .2); }
.cp-mkh svg { width: 12px; height: 12px; }
.cp-mk3.accept .cp-mkh, .cp-mk3.done .cp-mkh, .cp-mk3.buy .cp-mkh { color: #fff; background: #2f8a5a; }
.cp-mk3.refuse .cp-mkh, .cp-mk3.ocancel .cp-mkh, .cp-mk3.unaccept .cp-mkh { color: #fff; background: #a8503a; }
.cp-mk3.refuse, .cp-mk3.ocancel, .cp-mk3.unaccept { opacity: .92; }
.cp-mk3.refuse .cp-mkv, .cp-mk3.ocancel .cp-mkv, .cp-mk3.unaccept .cp-mkv { filter: saturate(.55); }
.cp-mkt p { display: block; margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink); overflow-wrap: anywhere; }
.cp-mkt p { white-space: normal; }
.cp-bub .cp-mkt p b, .cp-mkt p b { display: inline; margin: 0; font-size: inherit; color: #6b4a12; }
.cp-mkt p svg { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; }

/* la Monnaie : les cases sur le tapis vert, encadrées de laiton ; les packs en carton crème avec une vitrine verte */
.mny-card { background: radial-gradient(90% 80% at 50% 0%, rgba(243, 217, 149, .14), transparent 60%), radial-gradient(130% 110% at 30% 0%, #1f5444, var(--table-2) 55%, var(--table)); color: var(--chalk);
  box-shadow: inset 0 0 0 1.5px rgba(214, 176, 102, .55), 0 18px 34px -22px rgba(0, 0, 0, .95); }
.mny-card .mny-t { color: var(--chalk); font: 800 22px/1.1 var(--display); font-variation-settings: "wdth" 85; }
.mny-card small, .mny-card .mny-wait { color: var(--chalk-2); }
.mny-card .mny-wait b { color: #f3d27a; }
.mny-card .mny-art { background: radial-gradient(circle at 50% 38%, rgba(243, 217, 149, .3), rgba(0, 0, 0, .15) 72%); box-shadow: inset 0 0 0 2px rgba(214, 176, 102, .65), 0 10px 20px -10px rgba(0, 0, 0, .7); }
.mny-card .mny-gain > span { color: var(--ink); }
.mny-card .mny-dots i { background: rgba(236, 229, 212, .25); } .mny-card .mny-dots i.on { background: #f3d27a; }
.mny-card .mny-soon { color: #1a1306; background: linear-gradient(180deg, #f6dd98, #d6a83c); }
.mny-card .btn.mny-go { --bg: #f3e3b6; --fg: #1a1306; color: #1a1306; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 4px 0 #8f6a2c, 0 14px 26px -12px rgba(0, 0, 0, .7); }
.mny-card .btn.mny-go:hover { --bg: #fbefc9; }
.mny-card.ready { box-shadow: inset 0 0 0 2px #f3d27a, 0 0 0 4px rgba(243, 210, 122, .14), 0 18px 34px -22px rgba(0, 0, 0, .95); }
.mny-off { opacity: 1; background: linear-gradient(180deg, #fffaf0, #f1e6cf); box-shadow: inset 0 0 0 1.5px rgba(180, 141, 69, .45), 0 14px 26px -18px rgba(0, 0, 0, .8); transition: transform .25s var(--ease-out), box-shadow .25s; }
.mny-off:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1.5px var(--brass), 0 18px 30px -18px rgba(0, 0, 0, .85); }
.mny-off .mny-on { font: 800 16px/1.15 var(--display); font-variation-settings: "wdth" 85; }
.mny-off .mny-am b { font: 800 19px/1 var(--display); }
.mny-off .btn.mny-buy { --bg: var(--table-2); --fg: var(--chalk); color: var(--chalk); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 3px 0 #06120e, 0 10px 18px -10px rgba(0, 0, 0, .7); }
.mny-off .btn.mny-buy:hover { --bg: var(--table-3); }
.mny-off.once { box-shadow: inset 0 0 0 2px var(--brass), 0 14px 26px -18px rgba(0, 0, 0, .8); }

/* payer en argent réel : le prix en grand sur un ticket, les deux cases bien rangées, le grand bouton vert */
.modal.paymodal { width: min(480px, 100%); }
.pay-tk { display: grid; justify-items: center; gap: 2px; padding: 14px 16px; border-radius: 16px; background: #fffaf0; box-shadow: inset 0 0 0 1px rgba(180, 141, 69, .35); text-align: center; }
.pay-tk > span { font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.pay-tk > b { font: 800 40px/1 var(--display); font-variation-settings: "wdth" 80; color: var(--ink); }
.pay-tk > small { font-size: 11.5px; color: var(--ink-2); }
.paymodal .pay-chk { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; align-items: start; margin: 0; padding: 10px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.45; cursor: pointer;
  background: rgba(26, 22, 17, .04); box-shadow: inset 0 0 0 1px rgba(26, 22, 17, .1); transition: background .2s, box-shadow .2s; }
.paymodal .pay-chk > input { position: absolute; opacity: 0; pointer-events: none; }
.pay-box { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: #fffaf0; box-shadow: inset 0 0 0 1.5px rgba(180, 141, 69, .6); color: transparent; transition: background .15s, color .15s; }
.pay-box svg { width: 15px; height: 15px; }
.paymodal .pay-chk:has(input:checked) { background: rgba(47, 138, 90, .08); box-shadow: inset 0 0 0 1.5px rgba(47, 138, 90, .55); }
.paymodal .pay-chk:has(input:checked) .pay-box { background: var(--table-2); color: var(--chalk); box-shadow: none; }
.paymodal .pay-chk:has(input:focus-visible) { outline: 2px solid var(--brass); outline-offset: 2px; }
.btn.pay-go { width: 100%; height: 56px; font-size: 16px; }
@media (prefers-reduced-motion: reduce) { .mk-z, .mny-off, .mkmodal .mk-pi, .sbmodal .shp-fr { transition: none; } }

/* =========================== (étape 157) retouches du marché, de l'objet en grand, du pack VIP et de la pastille de la Boutique ===========================
   les cartes d'échange gardent leur taille (une proposition sur une carte n'étire plus les autres : align-items start) ;
   la flèche ⇄ est toujours au milieu des deux vitrines (les deux côtés partagent les mêmes lignes : subgrid) ;
   plus de carré autour de l'objet en grand ; le pack VIP aussi sombre que les cases de la Monnaie ; la pastille de la
   Boutique dans le coin de sa pastille. */
.mk-tgrid { align-items: start; }
.mk-swap, .dl-swap { grid-template-rows: auto auto auto; row-gap: 6px; align-items: stretch; }
.mk-swap > .mk-side, .dl-swap > .dl-side { grid-row: 1 / span 3; display: grid; grid-template-rows: subgrid; row-gap: 6px; align-items: start; }
.mk-swap > .mk-side > .mk-vit, .dl-swap > .dl-side > .dl-mv { align-self: stretch; }
.mk-swap > .mk-arr, .dl-swap > .dl-arr { grid-row: 2; align-self: center; margin: 0; }
@media (max-width: 560px) {
  .mk-swap { grid-template-rows: none; }
  .mk-swap > .mk-side { grid-row: auto; grid-template-rows: none; }
  .mk-swap > .mk-arr { grid-row: auto; }
}
.izmodal .iz-fig, .izmodal .bdz-art { background: none; box-shadow: none; border: 0; }
.vip2 { background: radial-gradient(90% 120% at 100% 0%, rgba(243, 210, 122, .1), transparent 55%), radial-gradient(130% 110% at 30% 0%, #1f5444, var(--table-2) 55%, var(--table)); }
.vip2-art { background: radial-gradient(80% 70% at 50% 45%, rgba(255, 230, 160, .32), rgba(243, 210, 122, .05) 60%, transparent 75%); }
.links a.mk-has::after, .nmore-m a.mk-has::after { top: 5px; right: 5px; width: 9px; height: 9px; box-shadow: 0 0 0 2px rgba(255, 250, 240, .9); }

/* =========================== (étape 158) les écrans « Paiement réussi », « Merci pour ton soutien » et « Pub regardée » ===========================
   dans le style du site : le voile vert sombre et les rayons laiton (plus de bleu pour la pub), la carte en carton crème
   avec en haut le bandeau vert « tapis » (la coche dorée dans son médaillon, la pastille, le titre en grand), le gain sur
   une vitrine verte (chiffre doré en grand), une ou deux lignes, le grand bouton vert « Super ! ». */
.winfx, .winfx.k-ad, .winfx.k-don { background: radial-gradient(circle at 50% 45%, rgba(20, 60, 44, .6), rgba(6, 14, 11, .9) 70%); }
.wfx-rays, .k-ad .wfx-rays, .k-don .wfx-rays { background: repeating-conic-gradient(from 0deg, rgba(243, 210, 122, .2) 0 7deg, transparent 7deg 20deg); }
.wfx-card, .k-ad .wfx-card { width: min(420px, 100%); padding: 0; gap: 0; overflow: hidden; border-radius: 24px;
  background: linear-gradient(180deg, #17402f 0, #17402f 60px, var(--paper) 60px);
  box-shadow: inset 0 0 0 1.5px rgba(214, 176, 102, .55), 0 0 0 6px rgba(214, 176, 102, .12), 0 40px 90px -30px rgba(0, 0, 0, .9); }
.wfx-band { position: relative; display: grid; justify-items: center; gap: 8px; width: 100%; padding: 26px 24px 22px; color: var(--chalk);
  background: radial-gradient(90% 120% at 50% 0%, rgba(243, 217, 149, .18), transparent 60%), radial-gradient(130% 110% at 30% 0%, #1f5444, var(--table-2) 55%, var(--table)); }
.wfx-band::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, rgba(214, 176, 102, 0), var(--brass) 18%, #f3d995 50%, var(--brass) 82%, rgba(214, 176, 102, 0)); }
.wfx-check, .k-ad .wfx-check { width: 74px; height: 74px; margin: 0; background: radial-gradient(circle at 35% 30%, #ffe9a6, #e3b552 55%, #a67a26);
  box-shadow: 0 0 0 4px rgba(243, 217, 149, .22), 0 10px 22px -8px rgba(0, 0, 0, .7); }
.wfx-check svg { width: 60px; height: 60px; }
@keyframes wfxGlow { 50% { box-shadow: 0 0 0 4px rgba(243, 217, 149, .22), 0 10px 22px -8px rgba(0, 0, 0, .7), 0 0 30px 8px rgba(243, 210, 122, .45); } }
.wfx-k { display: inline-flex; align-items: center; padding: 3px 12px; border-radius: 999px; font: 800 12px/1.2 var(--body); color: #1a1306; background: linear-gradient(180deg, #f6dd98, #d6a83c); }
.wfx-band h3 { margin: 0; color: var(--chalk); font-size: clamp(28px, 6vw, 38px); line-height: 1.02; }
.wfx-body { display: grid; justify-items: center; gap: 10px; width: 100%; padding: 20px 24px 22px; }
.wfx-gain { margin: 0; padding: 14px 22px; border-radius: 18px; color: #f3d27a;
  background: radial-gradient(70% 80% at 50% 40%, rgba(243, 217, 149, .2), transparent 70%), radial-gradient(130% 110% at 30% 0%, #1f5444, var(--table-2) 55%, var(--table));
  box-shadow: inset 0 0 0 1.5px rgba(214, 176, 102, .55), 0 12px 24px -14px rgba(0, 0, 0, .8); }
.wfx-gain .num { font: 800 44px/1 var(--display); font-variation-settings: "wdth" 80; color: #f3d27a; }
.wfx-unit { color: var(--chalk); font-size: 1rem; }
.wfx-ico .bdg-svg, .wfx-ico > svg { filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .45)); }
.wfx-lines { font-size: 14px; line-height: 1.45; }
.wfx-lines b { color: var(--ink); }
.wfx-test { font-size: 12px; }
.wfx-ok { --bg: var(--table-2); --fg: var(--chalk); color: var(--chalk); width: 100%; min-height: 52px; margin-top: 4px; font-size: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 4px 0 #06120e, 0 14px 26px -12px rgba(0, 0, 0, .7); }
.wfx-ok:hover { --bg: var(--table-3); }
@media (max-width: 520px) { .wfx-band { padding: 22px 18px 18px; } .wfx-body { padding: 18px 18px 20px; } .wfx-gain .num { font-size: 36px; } }

/* (étape 158) les cartes d'échange en mur de briques : des lignes de 4 px, chaque carte occupe le nombre de lignes de sa
   hauteur (+ 12 px d'écart, calculé par mkRO dans vShop) : une carte qui grandit ne laisse plus de trou sous les autres */
.mk-tgrid { grid-auto-rows: 4px; row-gap: 0; align-items: start; }

/* =========================== (étape 159) les cartes d'échange toutes de la même taille, « Mes échanges » en haut =========================== */
.mk-sec { display: flex; align-items: center; gap: 8px; margin: 6px 0 10px; font: 800 18px/1.2 var(--display); font-variation-settings: "wdth" 85; color: var(--chalk); }
.mk-sec svg { width: 18px; height: 18px; color: var(--brass); }
.mk-tgrid + .mk-sec { margin-top: 22px; }
.mk-tgrid.mk-mine .mk-tr { box-shadow: inset 0 0 0 2px var(--brass), 0 14px 28px -18px rgba(0, 0, 0, .8); }
.mk-tr .mk-by .mk-ost { font-size: 12px; }
.mk-tr .mk-by .mk-ost.ok { padding: 3px 9px; }
.mk-acts .btn.mk-offb { flex: 1; gap: 8px; }
.mk-offb b { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; font-size: 12px; color: #1a1306; background: linear-gradient(180deg, #f6dd98, #d6a83c); }
.mk-offb:disabled b { background: rgba(236, 229, 212, .3); color: var(--chalk); }
.mk-acts .btn.mk-glow { animation: mkGlow 1.8s ease-in-out infinite; } @keyframes mkGlow { 50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 3px 0 #06120e, 0 0 0 4px rgba(243, 210, 122, .35); } }
.mk-acts .btn.mk-main svg { width: 15px; height: 15px; }
.mk-tr .mk-acts .btn.ghost[data-mk="cancel"] { flex: none; }
/* la fenêtre des propositions */
.modal.mkofmodal { width: min(520px, 100%); }
.mk-offl { display: grid; gap: 10px; max-height: min(56vh, 460px); overflow-y: auto; padding: 2px; }
.mkofmodal .mk-off { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px 14px; border-radius: 14px; background: #fffaf0; box-shadow: inset 0 0 0 1px rgba(180, 141, 69, .35), 0 6px 14px -12px rgba(0, 0, 0, .5); text-align: left; }
.mkofmodal .mk-off.accepted { background: linear-gradient(180deg, #f0f8f2, #fffaf0); box-shadow: inset 0 0 0 2px #2f8a5a, 0 8px 18px -12px rgba(0, 0, 0, .5); }
.mkofmodal .mk-oacts { display: flex; gap: 8px; } .mkofmodal .mk-oacts .btn { flex: 1; justify-content: center; min-height: 36px; }
.mkofmodal .btn.ghost { --fg: var(--ink); color: var(--ink); background: transparent; box-shadow: inset 0 0 0 1.5px rgba(26, 22, 17, .25); }
@media (prefers-reduced-motion: reduce) { .mk-acts .btn.mk-glow { animation: none; } }

/* (étape 160) « Ta proposition est en attente » bien visible : une pastille dorée qui respire, et la carte bordée de laiton */
.mk-tr .mk-by .mk-ost.mk-pend { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 800; color: #1a1306;
  background: linear-gradient(180deg, #f6dd98, #d6a83c); box-shadow: 0 2px 0 #8f6a2c; animation: mkPend 2.4s ease-in-out infinite; }
.mk-ost.mk-pend svg { width: 13px; height: 13px; }
@keyframes mkPend { 50% { box-shadow: 0 2px 0 #8f6a2c, 0 0 0 4px rgba(243, 210, 122, .3); } }
.mk-tr:has(.mk-pend), .mk-tr:has(.mk-ost.ok) { box-shadow: inset 0 0 0 2px var(--brass), 0 14px 28px -18px rgba(0, 0, 0, .8); }
@media (prefers-reduced-motion: reduce) { .mk-tr .mk-by .mk-ost.mk-pend { animation: none; } }

/* =========================== (étape 161) la page Passe de combat dans le style du site ===========================
   tapis vert et laiton (plus de bleu nuit), la lune en petit décor dans le coin, très peu de texte ; la ligne Gratuit en
   carton crème, la ligne VIP en tapis vert et or ; chaque récompense sur une vitrine ; les grandes récompenses en avant. */
.bpp-hero { padding: 30px 32px 28px; color: var(--chalk);
  background: radial-gradient(60% 90% at 88% 0%, rgba(243, 217, 149, .16), transparent 60%), radial-gradient(130% 110% at 20% 0%, #1f5444, var(--table-2) 55%, var(--table));
  box-shadow: inset 0 0 0 1.5px rgba(214, 176, 102, .55), 0 26px 50px -30px rgba(0, 0, 0, .9); }
.bpp-sky > i { width: 2px; height: 2px; opacity: .45; background: #f3e3b6; }
.bpp-moon { right: 5%; top: -46px; width: 140px; height: 140px; opacity: .85;
  background: radial-gradient(circle at 36% 34%, #fffaf0, #f3e3b6 45%, #d9c48f 80%); box-shadow: 0 0 60px 10px rgba(243, 217, 149, .22); }
.bpp-moon::before, .bpp-moon::after { background: rgba(170, 140, 80, .28); }
.bpp-k { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 4px 12px; border-radius: 999px; font: 800 12px/1.2 var(--body); color: #1a1306; background: linear-gradient(180deg, #f6dd98, #d6a83c); }
.bpp-k svg { width: 14px; height: 14px; }
.bpp-head h1 { color: var(--chalk); text-shadow: 0 4px 24px rgba(0, 0, 0, .35); }
.bpp-hrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.bpp-end { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; color: var(--chalk-2); font-size: 13.5px; background: rgba(0, 0, 0, .22); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .35); }
.bpp-end svg { width: 15px; height: 15px; color: #f3d27a; } .bpp-end b { color: #f3d27a; }
.bpp-howb { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 0; border-radius: 999px; cursor: pointer; font: 700 13px/1.2 var(--body); color: var(--chalk); background: transparent; box-shadow: inset 0 0 0 1px rgba(236, 229, 212, .3); transition: background .2s, box-shadow .2s; }
.bpp-howb:hover { background: rgba(236, 229, 212, .1); box-shadow: inset 0 0 0 1px #f3d27a; }
.bpp-howb svg { width: 14px; height: 14px; color: #f3d27a; }
.bpp-me { background: rgba(0, 0, 0, .22); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .4); align-self: center; }
.bpp-ring { background: conic-gradient(#f3d27a calc(var(--p) * 360deg), rgba(236, 229, 212, .15) 0); }
.bpp-ring::before { background: #123a2d; }
.bpp-ring small, .bpp-ring i { color: var(--chalk-2); } .bpp-ring b { color: var(--chalk); }
.bpp-xp small { color: var(--chalk-2); font-size: 13px; } .bpp-xp small b { color: #f3d27a; }
.bpp-bar { background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .3); }
.bpp-bar > i { background: linear-gradient(90deg, #b48d45, #f3d27a); box-shadow: 0 0 12px rgba(243, 210, 122, .5); }
.btn.bpp-all { --bg: #f3e3b6; --fg: #1a1306; color: #1a1306; background: var(--bg); justify-self: start; gap: 8px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 4px 0 #8f6a2c, 0 14px 26px -12px rgba(0, 0, 0, .7); }
.btn.bpp-all b { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; font-size: 12px; color: var(--chalk); background: var(--table-2); }
.bpp-me.guest { display: grid; place-items: center; }
/* les récompenses */
.bpp-track { grid-template-columns: 74px minmax(0, 1fr); padding: 16px; background: radial-gradient(130% 110% at 20% 0%, #1f5444, var(--table-2) 55%, var(--table)); box-shadow: inset 0 0 0 1.5px rgba(214, 176, 102, .5), 0 26px 50px -30px rgba(0, 0, 0, .9); }
.bpp-rl { justify-items: center; text-align: center; gap: 6px; padding: 0; }
.bpp-rl b { font: 800 15px/1 var(--display); }
.bpp-rl.free b { color: var(--chalk); } .bpp-rl.vip b { color: #f3d27a; }
.bpp-rvip { display: grid; width: 36px; height: 36px; } .bpp-rvip svg { width: 100%; height: 100%; }
.bpp-scroll { scrollbar-color: rgba(214, 176, 102, .6) transparent; }
.bpp-lv::before { background: rgba(0, 0, 0, .3); }
.bpp-col.on .bpp-lv::before { background: linear-gradient(90deg, #b48d45, #f3d27a); }
.bpp-lv b { background: #123a2d; color: var(--chalk-2); box-shadow: inset 0 0 0 1.5px rgba(214, 176, 102, .45); }
.bpp-col.on .bpp-lv b { background: linear-gradient(180deg, #f6dd98, #d6a83c); color: #1a1306; box-shadow: none; }
.bpp-col.cur .bpp-lv b { background: var(--chalk); color: #123a2d; box-shadow: 0 0 0 3px #f3d27a, 0 0 16px rgba(243, 210, 122, .6); }
/* Gratuit : carton crème, l'objet sur une vitrine verte ronde */
.bpp-cell { background: linear-gradient(180deg, #fffaf0, #f1e6cf); box-shadow: inset 0 0 0 1px rgba(180, 141, 69, .4), 0 10px 20px -14px rgba(0, 0, 0, .8); }
.bpp-cell:hover, .bpp-cell:focus-visible { box-shadow: inset 0 0 0 1.5px var(--brass), 0 14px 26px -14px rgba(0, 0, 0, .9); }
.bpp-th { border-radius: 50%; background: radial-gradient(70% 70% at 50% 40%, rgba(243, 217, 149, .22), transparent 70%), radial-gradient(130% 110% at 30% 0%, #1f5444, var(--table-2) 55%, var(--table)); box-shadow: inset 0 0 0 1.5px rgba(214, 176, 102, .5); padding: 8px; box-sizing: border-box; }
.bpp-nm { color: var(--ink); font-weight: 700; }
/* VIP : tapis vert et or */
.bpp-cell.vip { background: radial-gradient(90% 70% at 50% 0%, rgba(243, 210, 122, .18), transparent 65%), linear-gradient(180deg, #1c4c3c, #102e24); box-shadow: inset 0 0 0 1.5px rgba(243, 210, 122, .6), 0 10px 20px -14px rgba(0, 0, 0, .8); }
.bpp-cell.vip .bpp-th { background: radial-gradient(70% 70% at 50% 40%, rgba(243, 217, 149, .32), rgba(0, 0, 0, .2) 75%); box-shadow: inset 0 0 0 1.5px rgba(243, 210, 122, .7); }
.bpp-cell.vip .bpp-nm { color: #f3e3b6; }
/* les grandes récompenses (tous les 5 niveaux) */
.bpp-cell.big { box-shadow: inset 0 0 0 2.5px var(--brass), 0 0 0 3px rgba(243, 210, 122, .2), 0 14px 26px -14px rgba(0, 0, 0, .9); }
.bpp-cell.vip.big { box-shadow: inset 0 0 0 2.5px #f3d27a, 0 0 0 3px rgba(243, 210, 122, .25), 0 0 26px -6px rgba(243, 210, 122, .6); }
.bpp-cell.big::before { background: radial-gradient(70% 50% at 50% 30%, rgba(243, 217, 149, .25), transparent 70%); }
.bpp-cell.vip.big::before { background: radial-gradient(70% 50% at 50% 30%, rgba(243, 217, 149, .22), transparent 70%); }
/* les états : récupéré, à récupérer, verrouillé */
.bpp-ok { background: #2f8a5a; box-shadow: 0 0 0 2px #fffaf0; }
.bpp-cell.vip .bpp-ok { box-shadow: 0 0 0 2px #1c4c3c; }
.bpp-cell.st-got .bpp-th { opacity: 1; filter: saturate(.8); }
.bpp-cell.st-got .bpp-nm { opacity: .7; }
.bpp-lock { background: rgba(26, 22, 17, .1); color: #8a7a62; }
.bpp-cell.vip .bpp-lock { background: rgba(0, 0, 0, .3); color: rgba(243, 227, 182, .7); }
.bpp-cell.st-lock .bpp-th { filter: saturate(.6) brightness(.85); }
.bpp-cell.st-ready { box-shadow: inset 0 0 0 2.5px #2f8a5a, 0 0 0 4px rgba(47, 138, 90, .25), 0 14px 26px -14px rgba(0, 0, 0, .9); }
.bpp-cell.vip.st-ready { box-shadow: inset 0 0 0 2.5px #f3d27a, 0 0 0 4px rgba(243, 210, 122, .3), 0 0 26px -6px rgba(243, 210, 122, .7); }
.btn.bpp-get { --bg: var(--table-2); --fg: var(--chalk); color: var(--chalk); background: var(--bg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 3px 0 #06120e; }
.bpp-cell.vip .btn.bpp-get { --bg: #f3e3b6; --fg: #1a1306; color: #1a1306; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 3px 0 #8f6a2c; }
.bpp-done { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; font-size: 11.5px; font-weight: 700; color: #2f7d55; } .bpp-done svg { width: 12px; height: 12px; }
@media (max-width: 720px) { .bpp-hero { padding: 22px 18px 20px; grid-template-columns: minmax(0, 1fr); } .bpp-me { padding: 12px; gap: 12px; } .bpp-ring { width: 72px; height: 72px; } .bpp-ring b { font-size: 24px; } .btn.bpp-all { justify-self: stretch; justify-content: center; font-size: 14px; padding-inline: 12px; } .bpp-track { grid-template-columns: 52px minmax(0, 1fr); padding: 10px; } .bpp-rvip { width: 28px; height: 28px; } .bpp-rl b { font-size: 12.5px; } }

/* =========================== (étape 162) les fenêtres du passe de combat ===========================
   des rats, de la Cheese ou du VIP en grand : comme l'objet en grand (vitrine verte, fiche crème, la croix seule) ;
   « Récompense récupérée » : le bandeau vert, le rat-garou sur une grande vitrine, chaque récompense en petite carte. */
.bpz-art2 { display: grid; place-items: center; min-height: 240px; }
.bpz-art2 .bpz-bdg { width: 170px; height: 170px; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .45)); }
.bpz-art2 .bpp-cur svg { width: 110px !important; height: 110px !important; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .45)); }
.bpz-art2 .bpp-cur svg + svg, .bpz-art2 .bpp-cur svg:has(+ svg) { width: 80px !important; height: 80px !important; }
.bpz-what { margin: 2px 0 0; font-size: 15px; line-height: 1.5; color: var(--ink); }
.modal.bpgmodal { width: min(480px, 100%); }
.bpg { text-align: initial; justify-items: stretch; }
.bpg .bpg-wolf { justify-self: center; width: 100%; height: 280px; padding: 0; overflow: visible; border-radius: 18px; display: grid; place-items: end center;
  background: radial-gradient(circle 38px at 78% 22%, #fffaf0 0, #f3e3b6 70%, rgba(243, 227, 182, 0) 74%), radial-gradient(circle 90px at 78% 22%, rgba(243, 217, 149, .22), transparent 70%), radial-gradient(130% 110% at 30% 0%, #1f5444, var(--table-2) 55%, var(--table));
  box-shadow: inset 0 0 0 1.5px rgba(214, 176, 102, .55), 0 12px 24px -14px rgba(0, 0, 0, .8); }
.bpg .bpg-wolf .pfull { margin-bottom: 14px; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .45)); }
.bpg-say { justify-content: center; text-align: center; }
.bpg .bpg-list { width: 100%; max-height: 40vh; gap: 8px; }
.bpg .bpg-it { grid-template-columns: 54px minmax(0, 1fr); padding: 8px 12px 8px 8px; border-radius: 14px; background: #fffaf0; box-shadow: inset 0 0 0 1px rgba(180, 141, 69, .35); }
.bpg .bpg-it.vip { background: linear-gradient(90deg, #fdf3d8, #fffaf0); box-shadow: inset 0 0 0 1.5px rgba(214, 176, 102, .7); }
.bpg-th { display: grid; place-items: center; width: 54px; height: 54px; padding: 6px; box-sizing: border-box; border-radius: 12px;
  background: radial-gradient(70% 70% at 50% 40%, rgba(243, 217, 149, .22), transparent 70%), radial-gradient(130% 110% at 30% 0%, #1f5444, var(--table-2) 55%, var(--table)); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .45); }
.bpg-th > *, .bpg-th svg { width: 100%; height: 100%; }
.bpg .bpg-it b { font: 800 15.5px/1.2 var(--display); font-variation-settings: "wdth" 85; color: var(--ink); }
.bpg-wolf ~ .bpg-list { max-height: 22vh; }
.btn.bpg-ok { width: 100%; justify-content: center; }
.bpgmodal .dl-k svg { width: 12px; height: 12px; }

/* (étape 162, suite) le niveau en cours n'est plus coupé en haut (de la place au-dessus de la rangée des niveaux), le
   bouton « Récupérer » ne passe plus sur le nom (cases plus hautes), plus d'anneau doré qui clignote autour des boutons
   (le liseré de la case suffit à dire « à récupérer ») */
.bpp-scroll { padding-top: 8px; }
.bpp-rows { padding-top: 8px; }
.bpp-rows, .bpp-col { grid-template-rows: 34px 196px 196px; }
.bpp-cell { grid-template-rows: auto minmax(0, 1fr) auto; align-content: start; }
.bpp-nm { align-self: center; }
.btn.bpp-get, .btn.bpp-all { animation: none; }
.btn.bpp-get:focus:not(:focus-visible) { outline: none; }
@media (max-width: 720px) { .bpp-rows, .bpp-col { grid-template-rows: 30px 178px 178px; } }

/* =========================== (étape 163) le calendrier de connexion dans le style du site ===========================
   le bandeau vert (le jour, une phrase), la récompense du jour sur une vitrine avec le bouton vert, les 30 jours en petites
   cartes crème avec une vitrine ronde (chacune s'ouvre en grand), « Récupérer » propose la vidéo ×3 */
.modal.dlymodal { width: min(620px, 100%); gap: 16px; padding-bottom: 22px; }
.dlymodal .dly { display: contents; }
.dly-today { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; cursor: pointer;
  background: radial-gradient(70% 90% at 12% 50%, rgba(243, 217, 149, .2), transparent 60%), radial-gradient(130% 110% at 30% 0%, #1f5444, var(--table-2) 55%, var(--table));
  box-shadow: inset 0 0 0 1.5px rgba(214, 176, 102, .55), 0 12px 24px -14px rgba(0, 0, 0, .8); color: var(--chalk); }
.dly-tv { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, rgba(243, 217, 149, .3), rgba(0, 0, 0, .15) 72%); box-shadow: inset 0 0 0 1.5px rgba(214, 176, 102, .6); }
.dly-tv svg, .dly-tv .dly-it svg { max-width: 56px; max-height: 56px; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .4)); }
.dly-today .dly-rws { display: flex; flex-wrap: wrap; gap: 6px 10px; color: var(--chalk); }
.dly-today .dly-rws b { color: #f3d27a; font: 800 20px/1 var(--display); }
.dly-today .dly-rw.it .dly-it { display: none; }
.dly-today .btn.dly-claim { min-height: 46px; }
.dly-today.claimed { opacity: .92; }
.dly-done { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-weight: 800; font-size: 13px; color: #fff; background: #2f8a5a; }
.dly-done svg { width: 14px; height: 14px; }
/* les 30 jours */
.dlymodal .dly-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; max-height: none; overflow: visible; }
.dlymodal .dly-d { min-height: 0; padding: 8px 4px 9px; gap: 4px; border-radius: 14px; cursor: pointer; background: linear-gradient(180deg, #fffaf0, #f1e6cf); box-shadow: inset 0 0 0 1px rgba(180, 141, 69, .4), 0 6px 12px -10px rgba(0, 0, 0, .7); transition: transform .2s var(--ease-out), box-shadow .2s; animation: none; }
.dlymodal .dly-d:hover, .dlymodal .dly-d:focus-visible { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px var(--brass), 0 10px 18px -12px rgba(0, 0, 0, .8); outline: none; }
.dly-n { justify-self: center; min-width: 22px; padding: 1px 6px; border-radius: 999px; font: 800 11px/1.5 var(--body); color: #6b4a12; background: rgba(214, 176, 102, .2); }
.dly-v { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: radial-gradient(70% 70% at 50% 40%, rgba(243, 217, 149, .22), transparent 70%), radial-gradient(130% 110% at 30% 0%, #1f5444, var(--table-2) 55%, var(--table)); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .45); }
.dly-v svg, .dly-v .dly-it svg { max-width: 28px; max-height: 28px; }
.dly-v .dly-it { display: grid; place-items: center; width: 30px; height: 30px; }
.dly-a { min-height: 15px; font: 800 13px/1.15 var(--display); color: var(--ink); }
.dlymodal .dly-ok { position: absolute; top: 5px; right: 5px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #2f8a5a; }
.dlymodal .dly-ok svg { width: 11px; height: 11px; }
.dlymodal .dly-d.done { background: linear-gradient(180deg, #f3f6ef, #e6ecdf); }
.dlymodal .dly-d.done .dly-v, .dlymodal .dly-d.done .dly-a { opacity: .6; }
.dlymodal .dly-d.now { background: linear-gradient(180deg, #fff6d8, #f6e3b0); box-shadow: inset 0 0 0 2.5px var(--brass), 0 0 0 3px rgba(243, 210, 122, .25); }
.dlymodal .dly-d.now.can { box-shadow: inset 0 0 0 2.5px #2f8a5a, 0 0 0 3px rgba(47, 138, 90, .22); }
.dlymodal .dly-d.bd { background: radial-gradient(90% 70% at 50% 0%, rgba(243, 210, 122, .2), transparent 65%), linear-gradient(180deg, #1c4c3c, #102e24); box-shadow: inset 0 0 0 1.5px rgba(243, 210, 122, .65); }
.dlymodal .dly-d.bd .dly-n { color: #1a1306; background: linear-gradient(180deg, #f6dd98, #d6a83c); }
.dlymodal .dly-d.bd .dly-v { background: none; box-shadow: none; }
.dlymodal .dly-d.bd .dly-v .bdg { --s: 40px !important; }
.dlymodal .dly-d.bd.done { opacity: .85; }
.dly-test { justify-self: center; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 0; border-radius: 999px; cursor: pointer; font: 700 12px/1.2 var(--body); color: #6b4a12; background: transparent; box-shadow: inset 0 0 0 1px rgba(180, 141, 69, .5); }
.dly-test svg { width: 13px; height: 13px; }
/* un jour en grand */
.dlz-it { display: grid; place-items: center; width: 170px; height: 170px; } .dlz-it svg { width: 100%; height: 100%; filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .45)); }
.dlz-l { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 6px; font-size: 15px; color: var(--ink); }
.dlz-l li { display: flex; align-items: center; gap: 6px; } .dlz-l svg { width: 18px; height: 18px; }
/* « Récupérer » : la récompense normale, ou ×3 avec une vidéo */
.dly-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dly-opt { position: relative; display: grid; justify-items: center; align-content: center; gap: 10px; min-height: 130px; padding: 18px 12px 14px; border: 0; border-radius: 18px; cursor: pointer; font: inherit; color: var(--ink);
  background: linear-gradient(180deg, #fffaf0, #f1e6cf); box-shadow: inset 0 0 0 1.5px rgba(180, 141, 69, .45), 0 10px 20px -14px rgba(0, 0, 0, .8); transition: transform .2s var(--ease-out), box-shadow .2s; }
.dly-opt:hover:not(:disabled) { transform: translateY(-2px); box-shadow: inset 0 0 0 2px var(--brass), 0 14px 24px -14px rgba(0, 0, 0, .85); }
.dly-opt > b { display: inline-flex; align-items: center; gap: 6px; font: 800 15px/1.2 var(--display); }
.dly-opt .dly-rws { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px; }
.dly-opt .dly-rws b { font: 800 22px/1 var(--display); }
.dly-opt.x3 { color: var(--chalk); background: radial-gradient(80% 70% at 50% 0%, rgba(243, 217, 149, .25), transparent 65%), radial-gradient(130% 110% at 30% 0%, #1f5444, var(--table-2) 55%, var(--table)); box-shadow: inset 0 0 0 2px #f3d27a, 0 14px 26px -14px rgba(0, 0, 0, .9); }
.dly-opt.x3 .dly-rws b { color: #f3d27a; }
.dly-opt.x3 > b { padding: 7px 14px; border-radius: 999px; color: #1a1306; background: linear-gradient(180deg, #f6dd98, #d6a83c); }
.dly-opt.x3.soon { opacity: .6; cursor: default; }
.dly-x { position: absolute; top: -10px; right: 12px; padding: 3px 10px; border-radius: 999px; font: 800 14px/1.2 var(--display); font-style: normal; color: #fff; background: #c4452f; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .6); }
.gxc .dly-x { position: static; display: inline-block; margin-left: 6px; vertical-align: 2px; }
@media (max-width: 520px) { .dlymodal .dly-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .dly-today { grid-template-columns: auto minmax(0, 1fr); } .dly-today .dly-claim, .dly-today .dly-done { grid-column: 1 / -1; justify-content: center; } .dly-pick { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .dlymodal .dly-d, .dly-opt { transition: none; } }

.dly-wait { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; font-size: 14px; color: var(--chalk-2); background: rgba(0, 0, 0, .25); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .4); }
.dly-wait svg { width: 15px; height: 15px; color: #f3d27a; } .dly-wait b { color: #f3d27a; }
@media (max-width: 520px) { .dly-today .dly-wait { grid-column: 1 / -1; justify-content: center; } }

.dlymodal .dly-d.bd .dly-v svg { max-width: none; max-height: none; width: 100%; height: 100%; }
.dlymodal .dly-d.bd .dly-a { color: #f3d27a; }

/* (étape 164) la règle du jour raté, en une petite ligne sous les 30 jours */
.dly-rule2 { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0; font-size: 13px; font-weight: 700; color: #6b4a12; }
.dly-rule2 svg { width: 15px; height: 15px; color: var(--brass); }
.dly-today .dly-rws { align-items: center; font-size: 15px; }

/* (étape 165) sur le tapis vert de la récompense du jour, les mots en clair (« rats », « Cheese ») : avant, en encre noire */
.dlymodal .dly-today .dly-rws .dly-rw { color: #f3d27a; font: 800 20px/1.1 var(--display); font-variation-settings: "wdth" 85; } /* (étape 166 : tous les mots en jaune et en grand, comme le nom d'un objet) */

/* =========================== (étape 167) le sac à dos dans le style du site ===========================
   le bandeau vert, deux onglets (choisi = tapis vert), chaque objet et chaque badge sur une vitrine verte ronde avec son
   nombre, « Utiliser » en vert, un interrupteur « Sur mon profil » pour les badges ; plus de descriptions ni de dates */
.modal.bagmodal { width: min(620px, 100%); }
.bag-tabs2 b { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; font-size: 12px; color: #1a1306; background: linear-gradient(180deg, #f6dd98, #d6a83c); }
.bag-tabs2 svg { width: 17px; height: 17px; }
.bag2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.bag2 .bag-it, .bag2 .bdg-it { display: grid; justify-items: center; align-content: start; gap: 8px; padding: 14px 10px 12px; border-radius: 16px; text-align: center;
  background: linear-gradient(180deg, #fffaf0, #f1e6cf); box-shadow: inset 0 0 0 1px rgba(180, 141, 69, .4), 0 10px 20px -14px rgba(0, 0, 0, .8); transition: transform .2s var(--ease-out), box-shadow .2s; }
.bag2 .bag-it:hover, .bag2 .bdg-it:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px var(--brass), 0 14px 24px -14px rgba(0, 0, 0, .85); }
.bag-v { position: relative; display: grid; place-items: center; width: 86px; height: 86px; border-radius: 50%;
  background: radial-gradient(70% 70% at 50% 40%, rgba(243, 217, 149, .24), transparent 70%), radial-gradient(130% 110% at 30% 0%, #1f5444, var(--table-2) 55%, var(--table)); box-shadow: inset 0 0 0 1.5px rgba(214, 176, 102, .55); }
.bag-v > svg, .bag-v > .bdg { max-width: 64px; max-height: 64px; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .4)); }
.bag-v .bag-n { position: absolute; right: -6px; bottom: -2px; padding: 2px 8px; border-radius: 999px; font-size: 12.5px; color: #1a1306; background: linear-gradient(180deg, #f6dd98, #d6a83c); box-shadow: 0 0 0 2px #fffaf0; }
.bag-nm { font: 800 15px/1.2 var(--display); font-variation-settings: "wdth" 85; color: var(--ink); overflow-wrap: anywhere; }
.bag2 .bag-it.zero .bag-v { filter: saturate(.5); opacity: .7; }
.bag2 .bag-it.zero .bag-n { background: #d8ccb2; }
.btn.bag-use { min-height: 38px; width: 100%; justify-content: center; font-size: 14px; padding: 0 12px; }
.bag-acts { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.bagmodal .bag-acts svg { width: 16px; height: 16px; }
.bag-cnt { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 0 4px; font-size: 13px; color: var(--ink-2); }
.bag-cnt svg { width: 15px; height: 15px; color: var(--brass); } .bag-cnt b { color: var(--ink); }
.bag-sw { display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: 100%; min-height: 34px; border: 0; border-radius: 999px; cursor: pointer; font: 700 13px/1.2 var(--body); color: var(--ink); background: transparent; box-shadow: inset 0 0 0 1.5px rgba(26, 22, 17, .22); transition: background .2s, box-shadow .2s, color .2s; }
.bag-sw:hover { box-shadow: inset 0 0 0 1.5px var(--brass); }
.bag-sw.on { color: var(--chalk); background: var(--table-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 3px 0 #06120e; }
.bag-sw svg { width: 14px; height: 14px; }
.bag2 .bdg-it.on { box-shadow: inset 0 0 0 2px #2f8a5a, 0 10px 20px -14px rgba(0, 0, 0, .8); }
.bag-none { display: grid; justify-items: center; gap: 6px; padding: 26px 10px; text-align: center; color: var(--ink-2); }
.bag-none svg { width: 30px; height: 30px; color: var(--brass); } .bag-none b { font: 800 17px/1.2 var(--display); color: var(--ink); }
@media (max-width: 520px) { .bag2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .bag2 .bag-it, .bag2 .bdg-it { transition: none; } }
.bag2 .bag-it, .bag2 .bdg-it { grid-template-rows: auto 1fr auto; align-content: stretch; } .bag2 .bag-nm { align-self: center; } /* (les boutons alignés, même avec un nom sur deux lignes) */

/* (étape 168) un objet du sac à dos en grand, et les cartes du sac qui se cliquent */
.bag2 .bag-it { cursor: pointer; }
.bagz-n { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: #6b4a12; background: rgba(214, 176, 102, .18); }
.bagz-n svg { width: 14px; height: 14px; } .bagz-n b { color: var(--ink); }

/* (étape 169) un badge en grand : sur la vitrine verte de l'objet en grand, la fiche crème */
.bdz2-art > * { filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .45)); }
.bdz2 .bdz-story { margin: 0; padding: 10px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; font-style: italic; color: var(--ink-2); background: rgba(214, 176, 102, .14); box-shadow: inset 3px 0 0 var(--brass); }

/* =========================== (étape 170) les tchats dans le style du site ===========================
   le haut en bandeau vert « tapis » avec un liseré doré, les catégories dans un rail (choisie = tapis vert), chaque tchat
   en carton crème avec son médaillon vert, mes messages en vert tapis, la zone d'écriture en pilule crème, les fenêtres des
   groupes avec le bandeau vert ; les notifications et la carte d'appel aussi */
.chatp { background: linear-gradient(180deg, #f6efe0, var(--paper) 40%, #eee4cf); box-shadow: 0 0 0 1px rgba(180, 141, 69, .55), 0 30px 70px rgba(0, 0, 0, .6); }
.chatp.dragging { box-shadow: 0 0 0 2px var(--brass), 0 40px 90px rgba(0, 0, 0, .7); }
.chatp .cp-band { position: relative; z-index: 1; gap: 10px; padding: 12px 12px 13px 12px; border-bottom: 0; color: var(--chalk);
  background: radial-gradient(130% 180% at 0% 0%, #1f5444, var(--table-2) 55%, var(--table)); box-shadow: 0 10px 18px -14px rgba(0, 0, 0, .6); }
.chatp .cp-band::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, rgba(214, 176, 102, 0), var(--brass) 18%, #f3d995 50%, var(--brass) 82%, rgba(214, 176, 102, 0)); }
.chatp .cp-band .cp-grip { background-image: radial-gradient(circle, rgba(236, 229, 212, .45) 1.2px, transparent 1.6px); }
.chatp .cp-band b.d { color: var(--chalk); font-size: 23px; line-height: 1; }
.cp-hico { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 50%; color: #2a1d06;
  background: radial-gradient(circle at 35% 30%, #f6dc95, var(--brass) 62%, var(--brass-2)); box-shadow: 0 3px 0 #6f5220, 0 8px 16px -8px rgba(0, 0, 0, .7); }
.cp-hico svg { width: 18px; height: 18px; }
.chatp .cp-band .cp-x { background: rgba(236, 229, 212, .1); color: var(--chalk); }
.chatp .cp-band .cp-x:hover { background: rgba(236, 229, 212, .2); }
.chatp .cp-band .cp-x.live { background: rgba(61, 224, 166, .22); color: var(--mint); }
.cp-sup { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 13px; border: 0; border-radius: 999px; cursor: pointer;
  font: 800 13px/1 var(--body); color: #1a1306; background: linear-gradient(180deg, #f6dd98, #d6a83c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 3px 0 #8f6a2c; transition: transform .15s; }
.cp-sup:hover { transform: translateY(-1px); } .cp-sup:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 1px 0 #8f6a2c; }
.cp-sup svg { width: 15px; height: 15px; }
.cp-sup .badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; font: 700 10.5px/18px var(--mono); color: #fff; background: var(--danger); box-shadow: 0 0 0 2px var(--table-2); }
/* les catégories : un rail creusé, la catégorie choisie en tapis vert */
.chatp .cp-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; margin: 12px 12px 4px; padding: 4px; overflow: visible; border: 0; border-radius: 15px;
  background: rgba(26, 22, 17, .065); box-shadow: inset 0 1px 3px rgba(26, 22, 17, .14), inset 0 0 0 1px rgba(26, 22, 17, .05); }
.chatp .cp-tabs button { position: relative; display: grid; justify-items: center; align-content: center; gap: 3px; height: auto; min-height: 50px; padding: 6px 4px; border-radius: 11px;
  font: 700 11.5px/1.15 var(--body); color: var(--ink-2); white-space: normal; text-align: center; transition: background .2s, color .2s, box-shadow .2s; }
.chatp .cp-tabs button svg { width: 18px; height: 18px; }
.chatp .cp-tabs button:hover:not(.on) { color: var(--ink); background: rgba(255, 255, 255, .55); }
.chatp .cp-tabs button.on { color: var(--chalk); background: radial-gradient(130% 110% at 30% 0%, #1f5444, var(--table-2) 60%); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .55), 0 4px 10px -6px rgba(0, 0, 0, .6); }
.chatp .cp-tabs button.on svg { color: #f3d27a; }
.chatp .cp-tabs button.on::after { display: none; }
.chatp .cp-tabs .cp-un { position: absolute; top: 3px; right: 5px; }
.chatp .cp-un { box-shadow: 0 0 0 2px #fffaf0; }
.chatp .cp-un.at { color: #1a1306; background: linear-gradient(180deg, #f6dd98, #d6a83c); }
/* les tchats : des cartes crème avec leur médaillon vert */
.chatp .cp-body { gap: 8px; padding: 8px 12px 16px; }
.cp-vit { position: relative; display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 50%; color: #f3d27a;
  background: radial-gradient(70% 70% at 50% 40%, rgba(243, 217, 149, .22), transparent 70%), radial-gradient(130% 110% at 30% 0%, #1f5444, var(--table-2) 55%, var(--table));
  box-shadow: inset 0 0 0 1.5px rgba(214, 176, 102, .6), 0 6px 12px -8px rgba(0, 0, 0, .7); }
.cp-vit > svg { width: 21px; height: 21px; }
.cp-vit > b { font: 800 15px/1 var(--display); font-variation-settings: "wdth" 85; color: #f3d27a; letter-spacing: .02em; }
.cp-vit.sm { width: 36px; height: 36px; } .cp-vit.sm > svg { width: 17px; height: 17px; } .cp-vit.sm > b { font-size: 13px; }
.cp-vit.big { width: 100%; height: 100%; border-radius: 0; background: none; box-shadow: none; } .cp-vit.big > b { font-size: 38px; }
.cp-vit.gamev > svg.bdg-mini { width: 32px; height: 32px; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .45)); } .cp-vit.gamev.sm > svg.bdg-mini { width: 25px; height: 25px; }
.cp-vit.vipv > svg, .cp-vit.vipv > .bdg { width: 34px !important; height: 34px !important; } .cp-vit.vipv.sm > svg { width: 27px !important; height: 27px !important; }
.chatp .cp-item.big { gap: 12px; padding: 10px 12px 10px 10px; border-radius: 16px; background: linear-gradient(180deg, #fffaf0, #f3e9d3);
  box-shadow: inset 0 0 0 1px rgba(180, 141, 69, .38), 0 8px 16px -14px rgba(0, 0, 0, .8); transition: transform .2s var(--ease-out), box-shadow .2s; }
.chatp .cp-item.big:hover { background: linear-gradient(180deg, #fffaf0, #f3e9d3); transform: translateY(-1px); box-shadow: inset 0 0 0 1.5px var(--brass), 0 12px 20px -14px rgba(0, 0, 0, .85); }
.chatp .cp-it b { font: 800 16px/1.15 var(--display); font-variation-settings: "wdth" 88; color: var(--ink); }
.chatp .cp-it small { font-size: 12.5px; color: var(--ink-2); }
.cp-chev { display: grid; place-items: center; flex: none; color: var(--brass-2); transition: transform .2s; } .cp-chev svg { width: 16px; height: 16px; transform: rotate(-90deg); }
.chatp .cp-item:hover .cp-chev { transform: translateX(2px); }
.chatp .cp-item.cp-vip { background: radial-gradient(130% 160% at 0% 0%, #1f5444, var(--table-2) 55%, var(--table)); box-shadow: inset 0 0 0 1.5px var(--brass), 0 10px 20px -12px rgba(0, 0, 0, .8); }
.chatp .cp-item.cp-vip:hover { background: radial-gradient(130% 160% at 0% 0%, #23604e, var(--table-2) 55%, var(--table)); box-shadow: inset 0 0 0 2px #f3d995, 0 12px 22px -12px rgba(0, 0, 0, .85); }
.chatp .cp-item.cp-vip .cp-it b { color: #f3d27a; } .chatp .cp-item.cp-vip .cp-it small { color: var(--chalk-2); } .chatp .cp-item.cp-vip .cp-chev { color: #f3d27a; }
.chatp .cp-item.cp-vip .cp-vit { background: radial-gradient(70% 70% at 50% 40%, rgba(243, 217, 149, .4), rgba(0, 0, 0, .25) 75%); }
.chatp .cp-item.cp-game { box-shadow: inset 4px 0 0 var(--acc), inset 0 0 0 1px rgba(180, 141, 69, .38), 0 8px 16px -14px rgba(0, 0, 0, .8); }
.chatp .cp-item.cp-game:hover { box-shadow: inset 4px 0 0 var(--acc), inset 0 0 0 1.5px var(--brass), 0 12px 20px -14px rgba(0, 0, 0, .85); }
.chatp .cp-item.cp-game.here .cp-it small { color: #1f7a55; font-weight: 700; }
.cp-rule { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 4px 0 0; font-size: 12.5px; color: var(--ink-2); }
.cp-rule svg { width: 14px; height: 14px; color: var(--brass-2); }
/* mes amis */
.chatp .cp-frow { gap: 8px; padding: 6px 10px 6px 6px; border-radius: 16px; background: linear-gradient(180deg, #fffaf0, #f3e9d3); box-shadow: inset 0 0 0 1px rgba(180, 141, 69, .3), 0 8px 16px -14px rgba(0, 0, 0, .8); transition: box-shadow .2s; }
.chatp .cp-frow:hover { box-shadow: inset 0 0 0 1.5px var(--brass), 0 12px 20px -14px rgba(0, 0, 0, .85); }
.chatp .cp-frow > .cp-item { padding: 4px; gap: 11px; } .chatp .cp-frow > .cp-item:hover { background: none; }
.chatp .cp-frow:not(.on) .cp-fav .av { filter: saturate(.55); opacity: .8; }
.chatp #cp-friends { display: grid; gap: 7px; }
.cp-fav { position: relative; display: inline-grid; flex: none; }
.cp-fav .cp-on { position: absolute; right: -2px; bottom: -2px; width: 12px; height: 12px; background: #2fbf7c; box-shadow: 0 0 0 2.5px #fffaf0; }
.chatp .cp-frow .cp-it small { color: var(--ink-2); } .chatp .cp-frow.on .cp-it small { color: #1f7a55; font-weight: 600; }
.chatp .cp-where { color: #1f7a55; font-weight: 600; font-size: 12px; }
.chatp .btn.xs.cp-fgo, .chatp .btn.xs.cp-ok { --bg: var(--table-2); --fg: var(--chalk); color: var(--chalk); border-radius: 999px; padding: 0 14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 3px 0 #06120e; }
.chatp .btn.xs.cp-fgo:hover, .chatp .btn.xs.cp-ok:hover { --bg: var(--table-3); }
/* rien ici : un médaillon, une phrase, un bouton */
.cp-none { display: grid; justify-items: center; gap: 8px; padding: 26px 12px; text-align: center; }
.cp-none b { font: 800 17px/1.2 var(--display); color: var(--ink); } .cp-none small { font-size: 13px; color: var(--ink-2); }
.cp-none .cp-vit { width: 58px; height: 58px; } .cp-none .cp-vit > svg { width: 26px; height: 26px; }
/* mes groupes */
.chatp .cp-gacts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 0 4px; }
.cp-gb { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer;
  font: 700 13.5px/1.15 var(--body); color: var(--ink); background: transparent; box-shadow: inset 0 0 0 1.5px rgba(26, 22, 17, .22); transition: box-shadow .2s, transform .15s, background .2s; }
.cp-gb:hover { box-shadow: inset 0 0 0 1.5px var(--brass); }
.cp-gb svg { width: 16px; height: 16px; flex: none; }
.cp-gb.go { color: var(--chalk); background: var(--table-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 3px 0 #06120e; }
.cp-gb.go svg { color: #f3d27a; } .cp-gb.go:hover { background: var(--table-3); } .cp-gb.go:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 1px 0 #06120e; }
.chatp #cp-groups { display: grid; gap: 8px; }
.chatp .cp-inv-list { gap: 8px; margin: 0 0 4px; padding: 10px; border: 0; border-radius: 16px; background: rgba(214, 176, 102, .16); box-shadow: inset 0 0 0 1.5px rgba(180, 141, 69, .55); }
.cp-pill { display: inline-flex; align-items: center; gap: 5px; justify-self: start; padding: 3px 10px; border-radius: 999px; font: 800 11.5px/1.2 var(--body); color: #1a1306; background: linear-gradient(180deg, #f6dd98, #d6a83c); }
.cp-pill svg { width: 12px; height: 12px; }
.chatp .cp-invite { grid-template-columns: auto minmax(0, 1fr) auto; padding: 8px; border-radius: 13px; background: #fffaf0; box-shadow: inset 0 0 0 1px rgba(180, 141, 69, .3); }
.chatp .cp-invite .cp-vit { width: 38px; height: 38px; } .chatp .cp-invite .cp-vit > svg { width: 17px; height: 17px; }
.cp-iacts { display: inline-flex; gap: 6px; } .cp-iacts .btn.xs { padding: 0 10px; } .cp-iacts .btn.xs svg { width: 14px; height: 14px; }
.cp-iacts .btn.ghost { --fg: var(--ink); color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(26, 22, 17, .2); }
.cp-vit.grpv { background: radial-gradient(70% 70% at 50% 40%, rgba(243, 217, 149, .3), transparent 70%), radial-gradient(130% 110% at 30% 0%, #6a4a1c, #3b2a10 60%, #241806); }
/* une conversation : l'en-tête */
.chatp .cp-band .cp-hav { display: inline-grid; flex: none; }
.chatp .cp-band .cp-hav .cp-on { box-shadow: 0 0 0 2.5px var(--table-2); }
.chatp .cp-band .cp-hav .av { box-shadow: 0 0 0 2px rgba(214, 176, 102, .7); }
.cp-tt { display: grid; gap: 2px; min-width: 0; }
.chatp .cp-band .cp-title { color: var(--chalk); font: 800 17px/1.1 var(--display); font-variation-settings: "wdth" 88; }
.chatp .cp-band .cp-title.cp-who { text-decoration-color: rgba(236, 229, 212, .35); }
.cp-sub { font-size: 12px; color: var(--chalk-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-sub:empty { display: none; }
.cp-sub.on { color: #6fe0b0; } .cp-sub.on::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #3de0a6; vertical-align: 1px; }
.chatp #cp-hacts { gap: 6px; }
/* les messages : le fond crème, les bulles des autres en carton, les miennes en tapis vert */
.chatp .cp-msgs { padding: 12px 14px; background: radial-gradient(circle, rgba(180, 141, 69, .1) 1px, transparent 1.4px) 0 0 / 18px 18px, linear-gradient(180deg, rgba(26, 22, 17, .04), transparent 30%); }
.chatp .cp-bub { background: #fffaf0; color: #1f1a12; box-shadow: inset 0 0 0 1px rgba(180, 141, 69, .32), 0 6px 12px -10px rgba(0, 0, 0, .7); }
.chatp .cp-bub > b { font: 800 13.5px/1.2 var(--display); font-variation-settings: "wdth" 88; color: #8a5e1c; }
.chatp .cp-bub > small { color: rgba(26, 22, 17, .45); }
.chatp .cp-m.me .cp-bub { color: var(--chalk); background: radial-gradient(130% 120% at 20% 0%, #1f5444, var(--table-2) 65%); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .45), 0 8px 14px -10px rgba(0, 0, 0, .8); }
.chatp .cp-m.me .cp-bub > small { color: var(--chalk-3); opacity: 1; }
.chatp .cp-m.me .cp-bub a { color: #f3d27a; }
.chatp .cp-m.me .cp-re { background: rgba(0, 0, 0, .22); border-left-color: #f3d27a; color: var(--chalk); }
.chatp .cp-m.me .cp-at { color: #1a1306; background: #f3d27a; }
.chatp .cp-m.me .cp-at.me { background: #f6dd98; }
.chatp .cp-m.at-me:not(.me) .cp-bub { box-shadow: inset 0 0 0 1.5px #d6a83c, inset 4px 0 0 #d6a83c, 0 6px 12px -10px rgba(0, 0, 0, .7); background: #fff6df; }
.chatp .cp-m.bare .cp-bub { background: none !important; box-shadow: none !important; }
.chatp .cp-day { margin: 14px 0 6px; padding: 4px 12px; color: var(--ink-2); background: #fffaf0; box-shadow: inset 0 0 0 1px rgba(180, 141, 69, .4); font-size: 11.5px; font-weight: 700; }
.chatp .cp-day:first-child { margin-top: 0; }
.chatp .cp-who .av { box-shadow: 0 0 0 2px #fffaf0, 0 0 0 3px rgba(180, 141, 69, .45); }
.chatp .cp-empty { display: grid; justify-items: center; gap: 6px; margin: auto; text-align: center; }
.chatp .cp-empty b { font: 800 17px/1.2 var(--display); color: var(--ink); } .chatp .cp-empty small { font-size: 13px; color: var(--ink-2); }
.chatp .cp-empty .cp-vit { width: 58px; height: 58px; } .chatp .cp-empty .cp-vit > svg { width: 26px; height: 26px; }
.chatp .cp-seen { color: var(--ink-2); }
.chatp .cp-typing .dots { background: #fffaf0; box-shadow: inset 0 0 0 1px rgba(180, 141, 69, .35); }
.chatp .cp-typing .dots i { background: var(--brass-2); }
/* écrire : une pilule crème (emotes, texte) et le bouton d'envoi rond en tapis vert */
.chatp .cp-form { align-items: center; gap: 8px; padding: 10px 12px 12px; border-top: 0; background: linear-gradient(180deg, rgba(26, 22, 17, .02), rgba(26, 22, 17, .06)); box-shadow: inset 0 1px 0 rgba(180, 141, 69, .35); }
.cp-field { flex: 1; min-width: 0; display: flex; align-items: center; gap: 2px; height: 46px; padding: 0 4px; border-radius: 999px; background: #fffaf0; box-shadow: inset 0 0 0 1.5px rgba(180, 141, 69, .45), inset 0 2px 4px rgba(26, 22, 17, .05); transition: box-shadow .2s; }
.cp-field:focus-within { box-shadow: inset 0 0 0 2px var(--table-2), 0 0 0 4px rgba(16, 44, 35, .1); }
.chatp .cp-field .inp { flex: 1; min-width: 0; height: 44px; padding: 0 12px 0 4px; border-radius: 0; background: transparent; box-shadow: none; border: 0; }
.chatp .cp-field .inp:focus { background: transparent; box-shadow: none; }
.chatp .cp-field .cp-emo { width: 38px; height: 38px; border-radius: 50%; color: var(--brass-2); background: rgba(214, 176, 102, .16); }
.chatp .cp-field .cp-emo:hover { background: rgba(214, 176, 102, .3); color: #8a5e1c; }
.chatp .btn.cp-send { flex: none; width: 46px; height: 46px; padding: 0; border-radius: 50%; justify-content: center; --bg: var(--table-2); --fg: #f3d27a; color: #f3d27a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(214, 176, 102, .45), 0 3px 0 #06120e, 0 10px 18px -10px rgba(0, 0, 0, .7); }
.chatp .btn.cp-send:hover { --bg: var(--table-3); } .chatp .btn.cp-send:active { transform: translateY(2px); }
.chatp .btn.cp-send svg { width: 19px; height: 19px; }
.chatp .cp-reply { margin: 0 12px; padding: 8px 10px; border-radius: 12px 12px 0 0; background: #fffaf0; box-shadow: inset 0 0 0 1px rgba(180, 141, 69, .35), inset 4px 0 0 var(--brass); }
.chatp .cp-reply .cp-x { width: 28px; height: 28px; }
.chatp .cp-sugg { margin: 0 12px 6px; background: #fffaf0; box-shadow: inset 0 0 0 1px rgba(180, 141, 69, .4), 0 12px 30px -10px rgba(0, 0, 0, .45); }
.chatp .cp-sg.on, .chatp .cp-sg:hover { background: rgba(214, 176, 102, .22); }
/* les fenêtres des groupes : le bandeau vert, les listes en carton */
.modal.grpmodal { width: min(520px, 100%); }
.grpmodal .fpick { max-height: 260px; padding: 6px; gap: 4px; border-radius: 14px; background: #fffaf0; box-shadow: inset 0 0 0 1px rgba(180, 141, 69, .38); }
.grpmodal .fpi { padding: 7px 10px; border-radius: 11px; } .grpmodal .fpi:hover { background: rgba(214, 176, 102, .16); }
.grpmodal .fpi:has(input:checked) { background: rgba(31, 122, 85, .1); box-shadow: inset 0 0 0 1.5px #2f8a5a; }
.grpmodal .fpi input { accent-color: #1f7a55; }
.grpmodal .inp { background: #fffaf0; box-shadow: inset 0 0 0 1.5px rgba(180, 141, 69, .4); border-color: transparent; }
.grpmodal .inp:focus { box-shadow: inset 0 0 0 2px var(--table-2); }
.grpmodal .gmembers { max-height: 280px; gap: 4px; padding: 6px; border-radius: 14px; background: #fffaf0; box-shadow: inset 0 0 0 1px rgba(180, 141, 69, .38); }
.grpmodal .gm { gap: 8px; padding: 6px 8px; border-radius: 10px; } .grpmodal .gm:hover { background: rgba(214, 176, 102, .12); }
.gm-role { flex: none; padding: 2px 8px; border-radius: 999px; font: 700 11px/1.3 var(--body); color: var(--ink-2); background: rgba(26, 22, 17, .07); }
.gm-role.r-boss { color: #1a1306; background: linear-gradient(180deg, #f6dd98, #d6a83c); } .gm-role.r-mod { color: #fff; background: #2f8a5a; }
.grpmodal .gb-acts { justify-content: space-between; } .grpmodal .gb-acts .btn.danger { color: #b33a26; box-shadow: inset 0 0 0 1.5px rgba(179, 58, 38, .35); }
.grpmodal .btn.dl-go.gb-save { min-height: 42px; }
.grpmodal .dl-vit .cp-vit.big { background: radial-gradient(70% 70% at 50% 40%, rgba(243, 217, 149, .3), transparent 70%); }
.grpmodal .gfind { display: grid; gap: 8px; max-height: 52vh; overflow-y: auto; padding: 2px; }
.grpmodal .gf { display: flex; align-items: center; gap: 11px; padding: 8px 10px 8px 8px; border-radius: 16px; background: linear-gradient(180deg, #fffaf0, #f3e9d3); box-shadow: inset 0 0 0 1px rgba(180, 141, 69, .38); }
.gf-t { display: grid; gap: 2px; min-width: 0; flex: 1; } .gf-t b { font: 800 15.5px/1.15 var(--display); font-variation-settings: "wdth" 88; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gf-t small { font-size: 12.5px; color: var(--ink-2); }
.grpmodal .btn.xs { --fg: var(--ink); color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(26, 22, 17, .22); }
.grpmodal .btn.xs.cp-ok { --bg: var(--table-2); --fg: var(--chalk); color: var(--chalk); border-radius: 999px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 3px 0 #06120e; }
/* les petites notifications : carton crème, médaillon vert */
.notif { gap: 11px; padding: 10px; color: var(--ink); background: linear-gradient(180deg, #fffaf0, #f1e6cf); box-shadow: inset 0 0 0 1.5px rgba(180, 141, 69, .5), 0 16px 34px -10px rgba(0, 0, 0, .6); }
.notif b { color: var(--ink); } .notif small { color: var(--ink-2); opacity: 1; }
.notif .ni { width: 38px; height: 38px; border-radius: 50%; color: #f3d27a; background: radial-gradient(130% 110% at 30% 0%, #1f5444, var(--table-2) 55%, var(--table)); box-shadow: inset 0 0 0 1.5px rgba(214, 176, 102, .6); }
.notif .ni b { color: #f3d27a; font: 800 17px/1 var(--display); }
.notif .nx { color: var(--ink); }
/* la carte « … t'appelle » et la fenêtre d'appel : le tapis vert et son liseré doré */
.ringcard { color: var(--chalk); background: radial-gradient(130% 180% at 0% 0%, #1f5444, var(--table-2) 55%, var(--table)); box-shadow: inset 0 0 0 1.5px rgba(214, 176, 102, .6), 0 24px 50px rgba(0, 0, 0, .6); }
.ringcard .rc-t small { color: #f3d27a; opacity: 1; font-weight: 700; } .ringcard .rc-t b { font-family: var(--display); font-weight: 800; }
.callbox { background: radial-gradient(130% 120% at 0% 0%, rgba(31, 84, 68, .97), rgba(16, 44, 35, .97) 55%, rgba(10, 29, 23, .97)); box-shadow: inset 0 0 0 1.5px rgba(214, 176, 102, .55), 0 30px 60px rgba(0, 0, 0, .6); }
.callbox .cb-h b { font-family: var(--display); font-weight: 800; }
.callbox .cb-t { background: rgba(0, 0, 0, .2); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .25); }
@media (max-width: 640px) {
  .chatp .cp-band { padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
  .chatp .cp-tabs { margin: 10px 10px 4px; } .chatp .cp-tabs button { font-size: 11px; }
  .chatp .cp-form { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 380px) { .chatp .cp-gacts { grid-template-columns: minmax(0, 1fr); } .chatp .cp-invite { grid-template-columns: auto minmax(0, 1fr); } .cp-iacts { grid-column: 1 / -1; justify-content: flex-end; } }
@media (prefers-reduced-motion: reduce) { .chatp .cp-item.big, .cp-chev, .cp-sup { transition: none; } }
.grpmodal .seg .ind { background: radial-gradient(130% 110% at 30% 0%, #1f5444, var(--table-2) 60%); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .55); }
.grpmodal .chk input { accent-color: #1f7a55; }

/* =========================== (étape 171) la page Amis et les fenêtres des réglages dans le style du site ===========================
   page Amis : le code ami sur carton crème (pastille dorée, bouton vert), « Ajouter un ami » sur le tapis vert encadré de laiton,
   chaque ami en carte crème avec sa souris sur une vitrine verte ; réglages, langue, taille du site, son et musique : un bandeau
   vert en haut, des lignes crème avec un médaillon vert rond, des boutons verts, plus de boutons noirs */
.fd2 .codecard { padding: 28px; background: linear-gradient(180deg, #fffaf0, var(--paper) 60%, #efe5cf); box-shadow: inset 0 0 0 1.5px rgba(180, 141, 69, .55), inset 0 0 0 6px #f6efe0, inset 0 0 0 7px rgba(180, 141, 69, .3), 0 24px 40px -26px #000; }
.fd-col { position: relative; z-index: 1; display: grid; gap: 16px; justify-items: start; }
.fd-k { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font: 800 12px/1.2 var(--body); color: #1a1306; background: linear-gradient(180deg, #f6dd98, #d6a83c); box-shadow: 0 2px 0 #8f6a2c; }
.fd-k svg { width: 13px; height: 13px; }
.fd2 .codecard .code { color: var(--ink); }
.fd-go { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border: 0; border-radius: 999px; cursor: pointer; font: 700 15px/1.1 var(--body); color: var(--chalk);
  background: radial-gradient(130% 120% at 30% 0%, #1f5444, var(--table-2) 65%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(214, 176, 102, .4), 0 4px 0 #06120e, 0 12px 22px -12px rgba(0, 0, 0, .7); transition: transform .15s, filter .2s; }
.fd-go svg { width: 17px; height: 17px; color: #f3d27a; flex: none; }
.fd-go:hover { filter: brightness(1.12); } .fd-go:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(214, 176, 102, .4), 0 1px 0 #06120e; }
.fd-go.done { color: #1a1306; background: linear-gradient(180deg, #f6dd98, #d6a83c); box-shadow: 0 4px 0 #8f6a2c; } .fd-go.done svg { color: #1a1306; }
.fd-go.sm { min-height: 38px; padding: 0 15px; font-size: 13.5px; } .fd-go.sm svg { width: 15px; height: 15px; }
.fd-add { position: relative; display: grid; gap: 14px; align-content: center; justify-items: start; padding: 28px; border-radius: var(--r); overflow: hidden;
  background: radial-gradient(130% 160% at 0% 0%, #1f5444, var(--table-2) 55%, var(--table)); box-shadow: inset 0 0 0 1.5px rgba(214, 176, 102, .6), 0 24px 40px -26px #000; }
.fd-add::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, rgba(214, 176, 102, 0), var(--brass) 18%, #f3d995 50%, var(--brass) 82%, rgba(214, 176, 102, 0)); }
.fd-add .inp.code { justify-self: stretch; height: 56px; padding: 0 20px; border: 0; border-radius: 999px; font-size: 20px; text-align: center; color: var(--ink); background: #fffaf0; box-shadow: inset 0 0 0 1.5px rgba(214, 176, 102, .7), inset 0 2px 5px rgba(26, 22, 17, .08); }
.fd-add .inp.code::placeholder { color: rgba(26, 22, 17, .3); }
.fd-add .inp.code:focus { box-shadow: inset 0 0 0 2.5px #f3d27a, 0 0 0 4px rgba(214, 176, 102, .25); }
.fd-add .err { color: #ffb9a6; } .fd-add .err:empty { display: none; }
.fd-gold { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 20px; border: 0; border-radius: 999px; cursor: pointer; font: 800 15px/1.1 var(--body); color: #1a1306;
  background: linear-gradient(180deg, #f6dd98, #d6a83c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 4px 0 #8f6a2c, 0 12px 22px -12px rgba(0, 0, 0, .7); transition: transform .15s, filter .2s; }
.fd-gold svg { width: 17px; height: 17px; } .fd-gold:hover { filter: brightness(1.05); } .fd-gold:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 1px 0 #8f6a2c; }
.fd-gold:disabled { opacity: .6; }
.fd-search .inp { height: 50px; border: 0; border-radius: 999px; color: var(--ink); background: #fffaf0; box-shadow: inset 0 0 0 1.5px rgba(180, 141, 69, .55); }
.fd-search .inp::placeholder { color: rgba(26, 22, 17, .42); } .fd-search .inp:focus { box-shadow: inset 0 0 0 2px var(--brass), 0 0 0 4px rgba(214, 176, 102, .2); }
.fd-search .fs-ic { color: var(--brass-2); } .fd-search .inp::-webkit-search-cancel-button { filter: none; }
.ftitle { margin: 34px 0 12px; gap: 10px; font: 800 26px/1 var(--display); font-variation-settings: "wdth" 85; letter-spacing: 0; text-transform: none; color: var(--chalk); }
.ftitle b { display: inline-grid; place-items: center; min-width: 28px; height: 24px; padding: 0 8px; border-radius: 999px; font: 800 13px/1 var(--body); color: #1a1306; background: linear-gradient(180deg, #f6dd98, #d6a83c); }
.fsub { width: fit-content; gap: 7px; margin: 16px 0 10px; padding: 5px 12px; border-radius: 999px; font-size: 13px; color: var(--chalk-2); background: rgba(236, 229, 212, .07); box-shadow: inset 0 0 0 1px var(--line); }
.fsub.on { color: #6fe0b0; background: rgba(61, 224, 166, .1); box-shadow: inset 0 0 0 1px rgba(61, 224, 166, .3); }
.fsub b { font-weight: 800; opacity: 1; }
/* un ami : une carte crème, sa souris sur une vitrine verte */
.fr.fd-row { gap: 16px; padding: 10px 14px 10px 10px; border-radius: 18px; color: var(--ink); background: linear-gradient(180deg, #fffaf0, #f3e9d3); box-shadow: inset 0 0 0 1px rgba(180, 141, 69, .4), 0 12px 24px -18px rgba(0, 0, 0, .9); }
.fr.fd-row.friend:hover { background: linear-gradient(180deg, #fffaf0, #f3e9d3); transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px var(--brass), 0 16px 28px -18px rgba(0, 0, 0, .95); }
.fr.fd-row.in { background: linear-gradient(180deg, #fff6df, #f3e2b8); box-shadow: inset 0 0 0 1.5px var(--brass), 0 12px 24px -18px rgba(0, 0, 0, .9); }
.fd-row .fr-fig { display: grid; place-items: end center; width: 84px; height: 84px; margin: 0; border-radius: 18px; overflow: visible;
  background: radial-gradient(70% 70% at 50% 40%, rgba(243, 217, 149, .22), transparent 70%), radial-gradient(130% 110% at 30% 0%, #1f5444, var(--table-2) 55%, var(--table)); box-shadow: inset 0 0 0 1.5px rgba(214, 176, 102, .6); }
.fd-row .fr-fig .pfull { margin-bottom: 2px; }
.fd-row:not(.is-on) .fr-fig .pfull { filter: saturate(.6) drop-shadow(0 8px 10px rgba(0, 0, 0, .3)); }
.fd-row .fr-fig .dot { right: -4px; bottom: -4px; width: 16px; height: 16px; background: #a89c84; box-shadow: 0 0 0 3px #fffaf0; }
.fd-row .fr-fig .dot.on { background: #2fbf7c; }
.fd-row .nm { display: flex; align-items: center; gap: 6px; font: 800 18px/1.2 var(--display); font-variation-settings: "wdth" 88; color: var(--ink); }
.fd-row .nm .fh { font: 500 12.5px/1 var(--body); color: var(--ink-2); }
.fd-row .sub { margin-top: 3px; font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-on { color: #1f7a55; font-weight: 700; }
.fd-row .acts { align-items: center; gap: 8px; }
.fd-more { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%; cursor: pointer; font: 800 13px/1 var(--body); letter-spacing: .05em; color: var(--ink); background: transparent; box-shadow: inset 0 0 0 1.5px rgba(26, 22, 17, .22); transition: box-shadow .2s, background .2s; }
.fd-more:hover { background: rgba(214, 176, 102, .18); box-shadow: inset 0 0 0 1.5px var(--brass); }
.fd-out { min-height: 38px; padding: 0 15px; border: 0; border-radius: 999px; cursor: pointer; font: 700 13.5px/1.1 var(--body); color: var(--ink); background: transparent; box-shadow: inset 0 0 0 1.5px rgba(26, 22, 17, .22); }
.fd-out:hover { box-shadow: inset 0 0 0 1.5px #b33a26; color: #b33a26; }
.fd-none { display: grid; justify-items: center; gap: 8px; padding: 34px 16px; text-align: center; border-radius: 18px; background: rgba(236, 229, 212, .05); box-shadow: inset 0 0 0 1px var(--line); }
.fd-none b { font: 800 20px/1.2 var(--display); color: var(--chalk); } .fd-none span:not(.fd-vit) { font-size: 14px; color: var(--chalk-2); }
.fd-vit { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; color: #f3d27a; background: radial-gradient(130% 110% at 30% 0%, #1f5444, var(--table-2) 55%, var(--table)); box-shadow: inset 0 0 0 1.5px rgba(214, 176, 102, .6); }
.fd-vit svg { width: 28px; height: 28px; }
@media (max-width: 560px) {
  .fd2 .codecard, .fd-add { padding: 22px; }
  .fd-row .fr-fig { width: 70px; height: 70px; }
  .fr.fd-row .acts { justify-content: flex-end; }
}
@media (prefers-reduced-motion: reduce) { .fd-go, .fd-gold, .fr.fd-row { transition: none; } }

/* ---- les fenêtres du bouton Réglages ---- */
.pp2 { padding: 0; gap: 0; overflow: hidden; border-radius: 18px; color: var(--ink); background: linear-gradient(180deg, #f6efe0, var(--paper)); box-shadow: 0 0 0 1px rgba(180, 141, 69, .6), 0 30px 60px -20px rgba(0, 0, 0, .8); }
.volpop.pp2 { overflow-y: auto; }
.pp-band { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 14px 13px; color: var(--chalk); background: radial-gradient(130% 180% at 0% 0%, #1f5444, var(--table-2) 55%, var(--table)); }
.pp-band::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, rgba(214, 176, 102, 0), var(--brass) 18%, #f3d995 50%, var(--brass) 82%, rgba(214, 176, 102, 0)); }
.pp-band b { display: block; padding: 0; font: 800 19px/1 var(--display); font-variation-settings: "wdth" 88; color: var(--chalk); }
.pp-hico { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; color: #2a1d06; background: radial-gradient(circle at 35% 30%, #f6dc95, var(--brass) 62%, var(--brass-2)); box-shadow: 0 2px 0 #6f5220; }
.pp-hico svg { width: 16px; height: 16px; }
.pp-body { display: grid; gap: 7px; padding: 10px; }
.pp-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 10px 8px 8px; border: 0; border-radius: 14px; cursor: pointer; text-align: left; font: inherit; color: var(--ink);
  background: #fffaf0; box-shadow: inset 0 0 0 1px rgba(180, 141, 69, .38); transition: box-shadow .2s, transform .2s; }
.pp-row:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1.5px var(--brass), 0 8px 14px -10px rgba(0, 0, 0, .6); }
.pp-vit { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; color: #f3d27a;
  background: radial-gradient(70% 70% at 50% 40%, rgba(243, 217, 149, .22), transparent 70%), radial-gradient(130% 110% at 30% 0%, #1f5444, var(--table-2) 55%, var(--table)); box-shadow: inset 0 0 0 1.5px rgba(214, 176, 102, .6); }
.pp-vit > svg { width: 19px; height: 19px; margin: 0; }
.pp-vit > svg.flag { width: 25px; height: 17px; border-radius: 3px; box-shadow: 0 0 0 1.5px rgba(243, 217, 149, .7); }
.pp-l { flex: 1; min-width: 0; font: 800 15.5px/1.15 var(--display); font-variation-settings: "wdth" 88; }
.pp-val { flex: none; padding: 3px 9px; border-radius: 999px; font: 700 12px/1.3 var(--body); color: #1f7a55; background: rgba(31, 122, 85, .12); }
.pp-val.off { color: var(--ink-2); background: rgba(26, 22, 17, .08); }
.pp-chev { display: grid; flex: none; color: var(--brass-2); } .pp-chev svg { width: 15px; height: 15px; transform: rotate(-90deg); }
/* la langue : la langue choisie en tapis vert */
.lgpop .pp-row.on { color: var(--chalk); background: radial-gradient(130% 120% at 20% 0%, #1f5444, var(--table-2) 65%); box-shadow: inset 0 0 0 1.5px var(--brass); }
.pp-ok { display: grid; place-items: center; width: 24px; height: 24px; margin-left: auto; border-radius: 50%; color: #1a1306; background: linear-gradient(180deg, #f6dd98, #d6a83c); }
.pp-ok svg { width: 14px; height: 14px; }
/* la taille du site : − / + ronds en vert, le chiffre en grand, « Automatique » en interrupteur */
.zoompop.pp2 .zm-row { grid-template-columns: 52px 1fr 52px; gap: 8px; padding: 6px 2px; }
.zoompop.pp2 .zm-b { display: grid; place-items: center; width: 52px; height: 52px; border: 0; border-radius: 50%; font: 800 26px/1 var(--body); color: #f3d27a;
  background: radial-gradient(130% 120% at 30% 0%, #1f5444, var(--table-2) 65%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(214, 176, 102, .45), 0 4px 0 #06120e; transition: transform .15s, filter .2s; }
.zoompop.pp2 .zm-b:hover:not(:disabled) { background: radial-gradient(130% 120% at 30% 0%, #23604e, var(--table-2) 65%); filter: brightness(1.1); }
.zoompop.pp2 .zm-b:active:not(:disabled) { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(214, 176, 102, .45), 0 1px 0 #06120e; }
.zoompop.pp2 .zm-b:disabled { opacity: .3; }
.zoompop.pp2 .zm-v { display: flex; align-items: baseline; justify-content: center; gap: 3px; font: 800 40px/1 var(--display); font-variation-settings: "wdth" 85; color: var(--ink); }
.zoompop.pp2 .zm-v small { font: 800 18px/1 var(--display); color: var(--brass-2); }
.pp-auto { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 14px; cursor: pointer; text-align: left; font: 700 14px/1.2 var(--body); color: var(--ink); background: #fffaf0; box-shadow: inset 0 0 0 1px rgba(180, 141, 69, .38); }
.pp-auto:hover { box-shadow: inset 0 0 0 1.5px var(--brass); }
.pp-sw { position: relative; width: 42px; height: 24px; flex: none; border-radius: 999px; background: rgba(26, 22, 17, .16); transition: background .2s; }
.pp-sw i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); transition: transform .2s var(--ease-out), background .2s; }
.pp-auto.on .pp-sw { background: var(--table-2); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .5); }
.pp-auto.on .pp-sw i { transform: translateX(18px); background: linear-gradient(180deg, #f6dd98, #d6a83c); }
/* le son et la musique : deux cartes crème, curseurs verts au bouton doré, boutons verts */
.volpop.pp2 .vblock { gap: 10px; padding: 12px; border-radius: 14px; background: #fffaf0; box-shadow: inset 0 0 0 1px rgba(180, 141, 69, .38); }
.volpop.pp2 .vblock b { font: 800 16px/1 var(--display); font-variation-settings: "wdth" 88; gap: 9px; }
.volpop.pp2 .vic { width: 32px; height: 32px; border-radius: 50%; color: #f3d27a; background: radial-gradient(130% 110% at 30% 0%, #1f5444, var(--table-2) 55%, var(--table)); box-shadow: inset 0 0 0 1.5px rgba(214, 176, 102, .6); }
.volpop.pp2 .vic svg { width: 16px; height: 16px; }
.volpop.pp2 .vblock b span[id] { font: 800 12.5px/1 var(--body); color: #1a1306; background: linear-gradient(180deg, #f6dd98, #d6a83c); padding: 5px 9px; }
.volpop.pp2 input[type=range]::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: linear-gradient(90deg, #1f6b52 var(--p, 50%), rgba(26, 22, 17, .13) var(--p, 50%)); }
.volpop.pp2 input[type=range]::-moz-range-track { height: 8px; border-radius: 4px; background: rgba(26, 22, 17, .13); }
.volpop.pp2 input[type=range]::-moz-range-progress { height: 8px; border-radius: 4px; background: #1f6b52; }
.volpop.pp2 input[type=range]::-webkit-slider-thumb { width: 24px; height: 24px; margin-top: -8px; background: linear-gradient(180deg, #f6dd98, #d6a83c); box-shadow: 0 0 0 3px #fffaf0, 0 0 0 4px rgba(180, 141, 69, .6), 0 3px 8px rgba(0, 0, 0, .35); }
.volpop.pp2 input[type=range]::-moz-range-thumb { width: 24px; height: 24px; background: linear-gradient(180deg, #f6dd98, #d6a83c); box-shadow: 0 0 0 3px #fffaf0, 0 0 0 4px rgba(180, 141, 69, .6), 0 3px 8px rgba(0, 0, 0, .35); }
.volpop.pp2 .vtog { min-height: 40px; border-radius: 999px; color: var(--chalk); background: radial-gradient(130% 120% at 30% 0%, #1f5444, var(--table-2) 65%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 3px 0 #06120e; }
.volpop.pp2 .vtog:hover { background: radial-gradient(130% 120% at 30% 0%, #23604e, var(--table-2) 65%); }
.volpop.pp2 .vtog:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 1px 0 #06120e; }
.volpop.pp2 .vtog.alt { color: var(--ink); background: transparent; box-shadow: inset 0 0 0 1.5px rgba(26, 22, 17, .22); }
.volpop.pp2 .vtog.alt:hover { background: rgba(214, 176, 102, .15); box-shadow: inset 0 0 0 1.5px var(--brass); }
.volpop.pp2 .vtog.alt svg { color: var(--brass-2); }
.volpop.pp2 .mtrack { background: rgba(26, 22, 17, .04); box-shadow: inset 0 0 0 1px rgba(180, 141, 69, .25); }
.volpop.pp2 .mtrack .mt-ic { color: #f3d27a; background: var(--table-2); }
.volpop.pp2 .mtrack.on { background: rgba(31, 122, 85, .1); box-shadow: inset 0 0 0 1.5px #2f8a5a; }
.volpop.pp2 .mtrack.on .mt-ic { color: #1a1306; background: linear-gradient(180deg, #f6dd98, #d6a83c); }
.volpop.pp2 .hvb.on { background: rgba(31, 122, 85, .1); box-shadow: inset 0 0 0 1.5px #2f8a5a; }
@media (prefers-reduced-motion: reduce) { .pp-row, .pp-sw, .pp-sw i, .zoompop.pp2 .zm-b { transition: none; } }
.pp-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* (étape 172) les amis en grille de cartes (plus de longues lignes vides), moins de jaune dans « Ajouter un ami »,
   le carton du code ami moins blanc */
.stack.fd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; }
.stack.fd-grid > .fr.fd-row { grid-template-columns: auto minmax(0, 1fr) auto; }
.fd-row .nm { min-width: 0; flex-wrap: wrap; row-gap: 2px; }
.fd-row .fd-nm { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-row .acts { flex-direction: column; align-items: flex-end; flex-wrap: nowrap; }
.fd2 .codecard { background: linear-gradient(160deg, #eadfc6, #dccca9 60%, #d2c09a); box-shadow: inset 0 0 0 1.5px rgba(150, 112, 50, .6), inset 0 0 0 6px rgba(234, 223, 198, .55), inset 0 0 0 7px rgba(150, 112, 50, .35), 0 24px 40px -26px #000; }
.fd2 .codecard .code { color: #1d170f; }
.fd2 .codecard .code .dash { color: #9a7330; }
.fd-k.soft { color: var(--chalk); background: rgba(236, 229, 212, .08); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .45); }
.fd-k.soft svg { color: #f3d27a; }
.fd-add { box-shadow: inset 0 0 0 1px rgba(236, 229, 212, .16), 0 24px 40px -26px #000; }
.fd-add::after { display: none; }
.fd-add .inp.code { box-shadow: inset 0 0 0 1px rgba(26, 22, 17, .12), inset 0 2px 5px rgba(26, 22, 17, .08); }
.fd-add .inp.code:focus { box-shadow: inset 0 0 0 2px var(--table-3), 0 0 0 4px rgba(236, 229, 212, .18); }
.fd-crem { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 20px; border: 0; border-radius: 999px; cursor: pointer; font: 800 15px/1.1 var(--body); color: var(--ink);
  background: linear-gradient(180deg, #fffaf0, var(--paper)); box-shadow: inset 0 1px 0 #fff, 0 4px 0 #9d9076, 0 12px 22px -12px rgba(0, 0, 0, .7); transition: transform .15s, filter .2s; }
.fd-crem svg { width: 17px; height: 17px; color: var(--table-3); }
.fd-crem:hover { filter: brightness(1.04); } .fd-crem:active { transform: translateY(3px); box-shadow: inset 0 1px 0 #fff, 0 1px 0 #9d9076; }
.fd-crem:disabled { opacity: .6; }
@media (prefers-reduced-motion: reduce) { .fd-crem { transition: none; } }

/* (étape 173) une carte du marché dans une conversation privée se clique : elle ramène à l'échange (ou aux ventes) */
.cp-mk3[data-mkgo] { cursor: pointer; transition: transform .2s var(--ease-out), box-shadow .2s; }
.cp-mk3[data-mkgo]:hover { transform: translateY(-2px); }
.cp-mk3[data-mkgo]:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.cp-mkgo { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; padding: 4px 10px; border-radius: 999px; font: 700 12px/1.2 var(--body); color: var(--chalk); background: var(--table-2); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .45); }
.cp-mkgo svg { width: 12px; height: 12px; transform: rotate(-90deg); color: #f3d27a; }
.cp-bub .cp-mkt .cp-mkgo { display: inline-flex; }
.mk-flash { animation: mkFlash 1.8s ease-out; }
@keyframes mkFlash { 0%, 30% { box-shadow: 0 0 0 3px #f3d27a, 0 0 28px 6px rgba(243, 210, 122, .55); } 100% { box-shadow: 0 0 0 0 rgba(243, 210, 122, 0); } }
@media (prefers-reduced-motion: reduce) { .mk-flash { animation: none; outline: 3px solid #f3d27a; } .cp-mk3[data-mkgo] { transition: none; } }

/* =========================== (étape 174) cartes d'amis et menu du pseudo ===========================
   « ••• » dessiné (plus d'anneau), derrière la souris d'un ami son décor de fiche (ou sa couleur, sinon un fond crème) ;
   le menu du pseudo : le haut sur le bandeau vert, des lignes en petits groupes, « Soutenir » juste au-dessus de « Se déconnecter » */
.fd-more { width: 38px; height: 38px; border-radius: 12px; color: var(--ink-2); background: rgba(26, 22, 17, .06); box-shadow: none; }
.fd-more svg { width: 20px; height: 20px; fill: currentColor; }
.fd-more:hover { color: var(--ink); background: rgba(214, 176, 102, .28); box-shadow: none; }
.fd-more:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.fd-row .fr-fig { position: relative; background: none; box-shadow: none; }
.fd-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: 18px; box-shadow: inset 0 0 0 1.5px rgba(180, 141, 69, .45); }
.fd-bg.plain { background: radial-gradient(80% 70% at 50% 30%, #fffdf6, #efe4cb 70%, #e4d5b5); }
.fd-bg.plain::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 7px; height: 9px; border-radius: 50%; background: radial-gradient(closest-side, rgba(110, 82, 36, .3), transparent); }
.fd-bg.dec .pdecor { position: absolute; inset: 0; height: 100%; z-index: 0; border-radius: 0; -webkit-mask: none; mask: none; }
.fd-bg::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; box-shadow: inset 0 0 0 1.5px rgba(180, 141, 69, .45); pointer-events: none; }
.fd-row .fr-fig > .pfull { position: relative; z-index: 1; }
.fd-row .fr-fig > .dot { z-index: 2; }
.fd-row:not(.is-on) .fd-bg { filter: saturate(.7); }
.fr.fd-row.friend { cursor: pointer; }

/* le menu du pseudo */
.drop.drop2 { width: 270px; padding: 0; overflow: hidden; border-radius: 18px; background: linear-gradient(180deg, #f6efe0, var(--paper)); box-shadow: 0 0 0 1px rgba(180, 141, 69, .6), 0 30px 60px -20px rgba(0, 0, 0, .8); }
.drop2 .dp-head { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; margin: 0; padding: 12px 14px 14px; border: 0; border-radius: 0; text-align: left; cursor: pointer; color: var(--chalk);
  background: radial-gradient(130% 180% at 0% 0%, #1f5444, var(--table-2) 55%, var(--table)); }
.drop2 .dp-head:hover { background: radial-gradient(130% 180% at 0% 0%, #23604e, var(--table-2) 55%, var(--table)); }
.drop2 .dp-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, rgba(214, 176, 102, 0), var(--brass) 18%, #f3d995 50%, var(--brass) 82%, rgba(214, 176, 102, 0)); }
.dp-fig { display: grid; place-items: end center; width: 70px; height: 74px; flex: none; border-radius: 16px; background: radial-gradient(70% 70% at 50% 35%, rgba(243, 217, 149, .28), rgba(0, 0, 0, .15) 75%); box-shadow: inset 0 0 0 1.5px rgba(214, 176, 102, .55); }
.drop2 .dp-fig .pfull { margin: 0 0 2px; }
.dp-id { display: grid; gap: 6px; min-width: 0; }
.drop2 .dp-id b { display: block; font: 800 19px/1.05 var(--display); font-variation-settings: "wdth" 88; color: var(--chalk); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dp-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.dp-role { padding: 2px 8px; border-radius: 999px; font: 800 11px/1.3 var(--body); color: #1a1306; background: linear-gradient(180deg, #f6dd98, #d6a83c); }
.dp-code { padding: 2px 8px; border-radius: 999px; font: 700 11px/1.3 var(--mono); letter-spacing: .06em; color: var(--chalk); background: rgba(236, 229, 212, .1); box-shadow: inset 0 0 0 1px rgba(236, 229, 212, .2); }
.drop2 .who-see { display: inline-flex; align-items: center; gap: 3px; font: 700 12.5px/1 var(--body); font-style: normal; color: #f3d27a; }
.drop2 .who-see svg { width: 13px; height: 13px; transform: rotate(-90deg); color: #f3d27a; }
.dp-grp { display: grid; gap: 2px; padding: 6px 8px; }
.dp-grp + .dp-grp { border-top: 1px dashed rgba(180, 141, 69, .4); }
.drop2 .dp-grp a, .drop2 .dp-grp button { display: flex; align-items: center; gap: 11px; width: 100%; padding: 7px 8px; border: 0; border-radius: 12px; font: 600 14.5px/1.2 var(--body); color: var(--ink); background: transparent; text-align: left; transition: background .2s; }
.drop2 .dp-grp a:hover, .drop2 .dp-grp button:hover { background: rgba(214, 176, 102, .2); }
.dp-ic { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; color: #f3d27a; background: radial-gradient(130% 110% at 30% 0%, #1f5444, var(--table-2) 55%, var(--table)); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .5); }
.drop2 .dp-ic svg { width: 16px; height: 16px; color: #f3d27a; }
.dp-t { flex: 1; min-width: 0; }
.drop2 .dp-grp a .badge { margin-left: auto; }
.drop2 .dp-don .dp-ic { background: radial-gradient(circle at 35% 30%, #ffb1a1, #e0533d 60%, #a8321f); box-shadow: none; }
.drop2 .dp-don .dp-ic svg { color: #fff4ea; }
.drop2 .dp-don { color: #a8321f; font-weight: 700; }
.drop2 .out { color: #b4311f; }
.drop2 .out .dp-ic { color: #b4311f; background: rgba(180, 49, 31, .1); box-shadow: inset 0 0 0 1px rgba(180, 49, 31, .3); }
.drop2 .out .dp-ic svg { color: #b4311f; }
.drop2 .dp-end { padding-bottom: 8px; }
@media (prefers-reduced-motion: reduce) { .drop2 .dp-grp a, .drop2 .dp-grp button { transition: none; } }

/* =========================== (étape 175) la page Mon profil ===========================
   à gauche ma fiche comme les autres la voient (la même que la fiche d'un joueur) ; à droite deux rangées d'onglets dans un
   rail (choisi = carton crème) et chaque partie sur le tapis vert encadré de laiton, avec un vrai titre */
.pf-cap { display: inline-flex; align-items: center; gap: 7px; justify-self: start; padding: 5px 12px; border-radius: 999px; font: 700 12.5px/1.2 var(--body); color: var(--chalk-2); background: rgba(236, 229, 212, .07); box-shadow: inset 0 0 0 1px var(--line); }
.pf-cap svg { width: 15px; height: 15px; color: #f3d27a; }
.paper.pfiche { position: relative; display: grid; gap: 16px; padding: 28px 30px; border-radius: 22px; --pd-below: 96; }
.pfiche .pm-inv { justify-self: start; }
@media (max-width: 520px) { .paper.pfiche { padding: 22px 18px; } }
/* les onglets : un rail creusé, deux rangées */
.ptabs { gap: 5px; padding: 5px; border-radius: 18px; background: rgba(0, 0, 0, .26); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(214, 176, 102, .22); }
.ptabs button { min-height: 58px; align-content: center; border-radius: 13px; }
.ptabs button svg { color: #d9bd7a; }
.ptabs button.on { color: var(--ink); background: linear-gradient(180deg, #fffaf0, var(--paper)); box-shadow: inset 0 0 0 1px rgba(180, 141, 69, .5), 0 6px 14px -8px rgba(0, 0, 0, .7); }
.ptabs button.on svg { color: #8f6a2c; }
/* chaque partie : le tapis vert encadré de laiton, un vrai titre */
.ptabs-col .sheet { padding: 22px 24px; border-radius: 20px; background: radial-gradient(130% 120% at 0% 0%, #1f5444, var(--table-2) 55%, var(--table)); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .4), 0 20px 36px -24px #000; }
.ptabs-col .sheet > .eyebrow { gap: 10px; font: 800 21px/1.1 var(--display); font-variation-settings: "wdth" 88; color: var(--chalk); padding: 0 0 10px; margin-bottom: 2px; border-bottom: 1px dashed rgba(214, 176, 102, .35); }
.ptabs-col .sheet > .eyebrow::before { width: 9px; height: 9px; background: #f3d27a; }
.ptabs-col .sheet .muted { color: var(--chalk-2); }
.ptabs-col .sheet .field label { color: var(--chalk-2); }
.ptabs-col .sheet .count { color: var(--chalk-3); justify-self: end; }
/* Mon personnage : deux cartes crème */
.prc-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.prc-card { display: grid; justify-items: center; gap: 6px; padding: 14px 12px 14px; border-radius: 18px; text-align: center; color: var(--ink); text-decoration: none;
  background: linear-gradient(180deg, #fffaf0, #f3e9d3); box-shadow: inset 0 0 0 1px rgba(180, 141, 69, .45), 0 12px 22px -16px rgba(0, 0, 0, .9); transition: transform .2s var(--ease-out), box-shadow .2s; }
.prc-card:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1.5px var(--brass), 0 16px 28px -16px rgba(0, 0, 0, .95); }
.prc-fig { display: grid; place-items: end center; width: 100%; height: 168px; margin-bottom: 4px; border-radius: 14px; background: radial-gradient(80% 70% at 50% 30%, #fffdf6, #efe4cb 70%, #e4d5b5); box-shadow: inset 0 0 0 1px rgba(180, 141, 69, .4); overflow: hidden; }
.prc-fig .pfull { margin-bottom: 4px; }
.prc-fig.pet { place-items: center; }
.prc-fig.pet > svg { width: 120px; height: 120px; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .25)); }
.prc-paw { display: grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; color: #f3d27a; background: radial-gradient(130% 110% at 30% 0%, #1f5444, var(--table-2) 55%, var(--table)); }
.prc-paw svg { width: 32px; height: 32px; }
.prc-card b { font: 800 17px/1.15 var(--display); font-variation-settings: "wdth" 88; }
.prc-card small { font-size: 12.5px; color: var(--ink-2); }
.prc-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 7px 14px; border-radius: 999px; font: 700 13.5px/1 var(--body); color: var(--chalk); background: var(--table-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 3px 0 #06120e; }
.prc-go svg { width: 15px; height: 15px; color: #f3d27a; }
@media (max-width: 460px) { .prc-cards { grid-template-columns: minmax(0, 1fr); } }
/* Ma fiche : le drapeau sur une ligne crème */
.ptabs-col .pflag-row { margin-top: 0; padding: 10px 12px; border-radius: 14px; color: var(--ink); background: #fffaf0; box-shadow: inset 0 0 0 1px rgba(180, 141, 69, .45); }
.ptabs-col .pflag-row .muted { color: var(--ink-2); }
.ptabs-col .pflag-row .btn.ghost { --fg: var(--ink); color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(26, 22, 17, .2); }
.ptabs-col #p-bio { min-height: 110px; }
@media (prefers-reduced-motion: reduce) { .prc-card { transition: none; } }
.pfiche .btn.ghost { --fg: var(--ink); color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(26, 22, 17, .22); }
.pfiche .btn.ghost:hover { box-shadow: inset 0 0 0 1.5px var(--brass); background: rgba(214, 176, 102, .14); }
.ptabs-col .bag-cnt { color: var(--chalk-2); } .ptabs-col .bag-cnt b { color: var(--chalk); } .ptabs-col .bag-none b { color: var(--chalk); } .ptabs-col .bag-none { color: var(--chalk-2); }

/* =========================== (étape 176) fiche d'un joueur, profil : moins de blanc, tout s'adapte au fond ===========================
   la fiche : un grand bouton + « ••• » (le reste dans un petit menu) ; sur une fiche foncée, « Ses jeux » et les boutons
   deviennent du verre sombre, sur un décor clair du verre crème ; profil : cartes du personnage, badges, drapeau sur le tapis */
.pm-acts2 { display: grid; gap: 8px; }
.pm-arow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: stretch; }
.pm-dots { display: grid; place-items: center; width: 50px; border: 0; border-radius: 14px; cursor: pointer; color: var(--ink); background: rgba(26, 22, 17, .07); box-shadow: inset 0 0 0 1px rgba(26, 22, 17, .14); transition: background .2s, box-shadow .2s; }
.pm-dots svg { width: 22px; height: 22px; fill: currentColor; }
.pm-dots:hover, .pm-dots.on { background: rgba(214, 176, 102, .28); box-shadow: inset 0 0 0 1.5px var(--brass); }
.pm-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 6px; border-radius: 16px; background: rgba(255, 250, 240, .8); box-shadow: inset 0 0 0 1px rgba(180, 141, 69, .45), 0 14px 26px -18px rgba(0, 0, 0, .8); }
.pm-menu[hidden] { display: none; }
.pm-mi { display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 7px 11px; border: 0; border-radius: 11px; cursor: pointer; text-align: left; font: 650 13.5px/1.2 var(--body); color: #1a1611; background: transparent; transition: background .2s; }
.pm-mi svg { width: 17px; height: 17px; flex: none; color: #8f6a2c; }
.pm-mi:hover { background: rgba(214, 176, 102, .22); }
.pm-mi.warn { color: #8a3a2a; } .pm-mi.warn svg { color: #b4553f; }
.pm-mi.danger { color: #b0281a; } .pm-mi.danger svg { color: #b0281a; }
.pm-msep { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; margin: 4px 6px 0; padding-top: 8px; border-top: 1px dashed rgba(180, 141, 69, .45); font: 700 12px/1 var(--body); color: #6a5528; }
.pm-msep svg { width: 13px; height: 13px; }
@media (max-width: 420px) { .pm-menu { grid-template-columns: minmax(0, 1fr); } }
/* une fiche foncée : verre sombre */
.pst-dark :is(.pm-g, .pm-where) { --ink: #f6f0e2; --ink-2: rgba(246, 240, 226, .75); color: var(--ink); background: rgba(8, 12, 18, .42); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.pst-dark .pm-g:hover, .pst-dark .pm-g.open { background: rgba(8, 12, 18, .55); box-shadow: inset 0 0 0 1px rgba(243, 210, 122, .45); }
.pst-dark .pm-g:not(.ranked) .pm-gn b { color: #f6f0e2; }
.pst-dark .pm-gb { color: #f6f0e2; } .pst-dark .pm-gb > svg:last-child { color: rgba(246, 240, 226, .7); }
.pst-dark .pm-gd { --ink: #1a1611; --ink-2: #5d5546; color: #1a1611; margin: 0 8px 8px; padding: 10px; border-radius: 12px; background: rgba(255, 250, 240, .94); }
.pst-dark .pm-more { color: #f3d27a; background: rgba(8, 12, 18, .42); box-shadow: inset 0 0 0 1px rgba(243, 210, 122, .35); }
.pst-dark .pm-more:hover { background: rgba(8, 12, 18, .6); }
.pst-dark .btn.pm-main { --bg: rgba(8, 12, 18, .5); --fg: #f6f0e2; color: #f6f0e2; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1.5px rgba(243, 210, 122, .55), 0 4px 0 rgba(0, 0, 0, .35); }
.pst-dark .btn.pm-main svg { color: #f3d27a; }
.pst-dark .btn.pm-main:hover { --bg: rgba(8, 12, 18, .65); }
.pst-dark .pm-dots { color: #f6f0e2; background: rgba(8, 12, 18, .45); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
.pst-dark .pm-dots:hover, .pst-dark .pm-dots.on { background: rgba(8, 12, 18, .65); box-shadow: inset 0 0 0 1.5px rgba(243, 210, 122, .6); }
.pst-dark .pm-menu { background: rgba(8, 12, 18, .6); box-shadow: inset 0 0 0 1px rgba(243, 210, 122, .35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.pst-dark .pm-mi { color: #f6f0e2; } .pst-dark .pm-mi svg { color: #f3d27a; } .pst-dark .pm-mi:hover { background: rgba(255, 255, 255, .1); }
.pst-dark .pm-mi.warn { color: #ffb4a3; } .pst-dark .pm-mi.warn svg { color: #ff9a85; }
.pst-dark .pm-mi.danger { color: #ff8f7a; } .pst-dark .pm-msep { color: #f3d27a; border-top-color: rgba(243, 210, 122, .35); }
.pst-dark .pm-inv.btn.ghost { background: rgba(8, 12, 18, .45); --fg: #f6f0e2; color: #f6f0e2; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
/* un décor sur une fiche claire : du verre crème, moins blanc */
.has-pdecor:not(.pst-dark) :is(.pm-g, .pm-where) { background: rgba(250, 244, 230, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.has-pdecor:not(.pst-dark) .pm-g:hover, .has-pdecor:not(.pst-dark) .pm-g.open { background: rgba(250, 244, 230, .88); }
.has-pdecor:not(.pst-dark) .pm-dots { background: rgba(250, 244, 230, .75); }

/* le profil : les cartes de « Mon personnage », les badges et le drapeau sur le tapis vert, moins de blanc */
.ptabs-col .prc-card { color: var(--chalk); background: rgba(0, 0, 0, .22); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .4); }
.ptabs-col .prc-card:hover { background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1.5px var(--brass), 0 16px 28px -16px rgba(0, 0, 0, .95); }
.ptabs-col .prc-card small { color: var(--chalk-2); }
.ptabs-col .prc-fig { background: radial-gradient(80% 70% at 50% 35%, rgba(243, 217, 149, .2), rgba(0, 0, 0, .15) 75%); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .35); }
.ptabs-col .prc-go { color: #1a1306; background: linear-gradient(180deg, #f6dd98, #d6a83c); box-shadow: 0 3px 0 #8f6a2c; }
.ptabs-col .prc-go svg { color: #1a1306; }
.ptabs-col .bag2 .bdg-it { background: rgba(0, 0, 0, .22); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .35); }
.ptabs-col .bag2 .bdg-it:hover { box-shadow: inset 0 0 0 1.5px var(--brass); }
.ptabs-col .bag2 .bdg-it.on { box-shadow: inset 0 0 0 2px #3fbf85; }
.ptabs-col .bag-nm { color: var(--chalk); }
.ptabs-col .bag-sw { color: var(--chalk); box-shadow: inset 0 0 0 1.5px rgba(236, 229, 212, .3); }
.ptabs-col .bag-sw:hover { box-shadow: inset 0 0 0 1.5px var(--brass); }
.ptabs-col .bag-sw.on { color: #1a1306; background: linear-gradient(180deg, #f6dd98, #d6a83c); box-shadow: 0 3px 0 #8f6a2c; }
.ptabs-col .bag-v .bag-n { box-shadow: 0 0 0 2px var(--table-2); }
.ptabs-col .pflag-row { color: var(--chalk); background: rgba(0, 0, 0, .22); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .4); }
.ptabs-col .pflag-row .muted { color: var(--chalk-2); }
.ptabs-col .pflag-row .btn.ghost { --bg: linear-gradient(180deg, #f6dd98, #d6a83c); --fg: #1a1306; color: #1a1306; background: linear-gradient(180deg, #f6dd98, #d6a83c); box-shadow: 0 3px 0 #8f6a2c; }
.ptabs-col .pflag-row .btn.ghost svg { color: #1a1306; }
/* Mon style : des cadres plus grands, pour bien les voir */
#p-style .pst-pick[data-pc="pcadre"] { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px; }
#p-style .pst-pick[data-pc="pcadre"] .pst-it { padding: 12px 6px 10px; }
#p-style .pst-pick[data-pc="pcadre"] .pst-ft { width: 104px; height: 80px; margin: 8px 0 4px; border-radius: 12px; --r: 12px; }
#p-style .pst-pick[data-pc="pcadre"] .pst-ft .pframe { --k: .62; }
/* le choix du drapeau : la liste sur le tapis vert */
.modal.flagmodal { background: linear-gradient(180deg, #1f5444 0, var(--table-2) 120px, var(--table)); color: var(--chalk); }
.flagmodal .flagq { height: 46px; border: 0; border-radius: 999px; padding: 0 18px; color: var(--ink); background: #fffaf0; box-shadow: inset 0 0 0 1.5px rgba(214, 176, 102, .6); }
.flagmodal .flagq::placeholder { color: rgba(26, 22, 17, .42); }
.flagmodal .flaglist { padding: 6px; border-radius: 16px; background: rgba(0, 0, 0, .22); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .3); }
.flagmodal .flagopt { color: var(--chalk); }
.flagmodal .flagopt:hover { background: rgba(255, 255, 255, .08); }
.flagmodal .flagopt.on { color: #1a1306; background: linear-gradient(180deg, #f6dd98, #d6a83c); box-shadow: none; }
.flagmodal .flagnone { color: var(--chalk-2); }
.flagmodal .flagnone-msg { color: var(--chalk-2); }
@media (prefers-reduced-motion: reduce) { .pm-dots, .pm-mi { transition: none; } }

/* =========================== (étape 177) Mon style, ma fiche, Ses jeux, Mon personnage, l'essai, Mes animaux ===========================
   cadres sur le tapis vert ; texte toujours clair sur une fiche foncée ; une loupe pour « Ses jeux » ; Mon personnage sur
   le tapis (personnage dans une vitrine, onglets en rail) ; l'essai sans texte ; des cartes d'animaux plus courtes */
/* Mon style : les cadres sur le tapis vert, un petit profil esquissé dedans */
#p-style .pst-pick[data-pc="pcadre"] .pst-it { background: rgba(0, 0, 0, .2); }
#p-style .pst-pick[data-pc="pcadre"] .pst-it.on { background: rgba(214, 176, 102, .18); }
.pst-frth.rkw-th { width: 112px; aspect-ratio: 4 / 3; margin: 2px 0 2px; border-radius: 12px; }
.pst-frth.rkw-th.fr > .pst-ft { position: absolute; inset: 15% 18% 17%; width: auto; height: auto; margin: 0; border-radius: 10px; --r: 10px; background: #f6efdf; }
.pst-frth.rkw-th .pframe { --k: .62; }
.pst-frth .rkw-sk { inset: 15% 18% 17%; gap: 4px 6px; padding: 0 14%; }
.pst-frth .rkw-sk i { width: 14px; height: 14px; } .pst-frth .rkw-sk b { height: 4px; }
.pst-it:hover .pst-frth.rkw-th.fr > .pst-ft { animation: rkwFr 1.6s ease-in-out infinite; }
/* ma fiche foncée : tout le texte en clair */
.pst-dark :is(.prof-handle, .pm-season, .sghead) { color: rgba(246, 240, 226, .86); }
.pst-dark .muted, .pst-dark .pm-nobio { color: rgba(246, 240, 226, .8); }
.pst-dark .pm-gn small { color: rgba(246, 240, 226, .82); }
.pst-dark .pm-ge.dim { opacity: .85; filter: grayscale(.3) brightness(1.5); }
.pst-dark .pm-where .pm-wt { color: #7ff0c0; }
.pst-dark .pm-bio { color: #f6f0e2; background: rgba(8, 12, 18, .4); }
/* « Ses jeux » : la loupe et sa case */
.pm-gh { align-items: center; }
.pm-gh .pm-season { margin-left: auto; }
.pm-gqb { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border: 0; border-radius: 50%; cursor: pointer; color: var(--ink-2); background: rgba(26, 22, 17, .07); }
.pm-gqb[hidden] { display: none; }
.pm-gqb svg { width: 15px; height: 15px; }
.pm-gqb:hover, .pm-gqb.on { color: #1a1306; background: linear-gradient(180deg, #f6dd98, #d6a83c); }
.pst-dark .pm-gqb { color: #f6f0e2; background: rgba(8, 12, 18, .45); }
.inp.pm-gq { height: 38px; border-radius: 999px; padding: 0 14px; font-size: 14px; }
.inp.pm-gq[hidden] { display: none; }
.pm-glist.q > .pm-g { display: none; }
.pm-glist.q > .pm-g.hit, .pm-glist.q > .pm-g.hit.extra { display: block; }
.pm-glist.q > .pm-more { display: none; }

/* Mon personnage : le personnage dans une vitrine sur le tapis, les choix dans une grande carte au liseré laiton */
.pz2 .pz-stage { padding: 18px; border-radius: 22px; background: radial-gradient(130% 120% at 0% 0%, #1f5444, var(--table-2) 55%, var(--table)); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .45), 0 24px 40px -26px #000; }
.pz2 .pz-fig { min-height: 330px; background: radial-gradient(60% 45% at 50% 62%, rgba(243, 217, 149, .26), transparent 70%), radial-gradient(90% 70% at 50% 100%, rgba(0, 0, 0, .25), transparent 70%); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .25); }
.pz2 .pz-fig .pfull { filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .5)); }
.pz2 .pz-acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; width: 100%; }
.pz-mini { display: grid; justify-items: center; gap: 4px; padding: 8px 4px; border: 0; border-radius: 12px; cursor: pointer; font: 700 12px/1.1 var(--body); color: var(--chalk-2); background: rgba(236, 229, 212, .07); box-shadow: inset 0 0 0 1px rgba(236, 229, 212, .14); transition: background .2s, color .2s; }
.pz-mini svg { width: 18px; height: 18px; color: #f3d27a; }
.pz-mini:hover:not(:disabled) { color: var(--chalk); background: rgba(236, 229, 212, .14); }
.pz-mini:disabled { opacity: .4; cursor: default; }
.pz2 .pz-save { width: 100%; justify-content: center; }
.pz2 .pz-save:disabled { opacity: .45; cursor: default; filter: saturate(.6); }
.pz-walk2 { display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 100%; min-height: 40px; border: 0; border-radius: 999px; cursor: pointer; font: 700 13.5px/1 var(--body); color: var(--chalk); background: transparent; box-shadow: inset 0 0 0 1.5px rgba(214, 176, 102, .5); transition: background .2s; }
.pz-walk2 svg { width: 15px; height: 15px; color: #f3d27a; }
.pz-walk2:hover { background: rgba(214, 176, 102, .12); }
.pz2 .pz-panel { padding: 18px; border-radius: 22px; background: linear-gradient(180deg, #f6efe0, var(--paper) 40%, #efe5cf); box-shadow: inset 0 0 0 1px rgba(180, 141, 69, .55), 0 24px 40px -26px #000; color: var(--ink); }
.pz2 .pz-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 4px; padding: 4px; border-radius: 15px; background: rgba(26, 22, 17, .07); box-shadow: inset 0 1px 3px rgba(26, 22, 17, .14); }
.pz2 .pz-groups button { padding: 10px 8px; border-radius: 11px; color: var(--ink-2); background: transparent; }
.pz2 .pz-groups button:hover { color: var(--ink); background: rgba(255, 255, 255, .55); }
.pz2 .pz-groups button[aria-selected="true"] { color: var(--chalk); background: radial-gradient(130% 110% at 30% 0%, #1f5444, var(--table-2) 60%); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .5); }
.pz2 .pz-cats:empty { display: none; }
.pz2 .pz-cat { background: #fffaf0; box-shadow: inset 0 0 0 1px rgba(180, 141, 69, .4); }
.pz2 .pz-cat:hover { background: #fff; }
.pz2 .pz-cat.on { color: #1a1306; background: linear-gradient(180deg, #f6dd98, #d6a83c); box-shadow: none; }
.pz2 .pz-it { background: #fffaf0; box-shadow: inset 0 0 0 1px rgba(180, 141, 69, .32); }
.pz2 .pz-it.on { box-shadow: inset 0 0 0 2.5px #1f6b52, 0 6px 14px -10px rgba(0, 0, 0, .6); }
.pz2 .pz-colors > div { padding: 8px; border-radius: 12px; background: rgba(26, 22, 17, .05); }
@media (max-width: 900px) { .pz2 .pz-acts span { font-size: 11px; } }

/* l'essai : le bandeau vert, plus de texte */
.modal.rw-modal.dlmodal { width: min(760px, 100%); }
.rw2 .rw-turn .btn.ghost { --fg: var(--ink); color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(26, 22, 17, .2); }
.rw2 .rw-emos { padding: 6px; border-radius: 14px; background: rgba(26, 22, 17, .05); box-shadow: inset 0 0 0 1px rgba(180, 141, 69, .3); }
.rw2 .rw-petsel select { border-radius: 999px; }

/* Mes animaux : des cartes plus courtes, sur le tapis */
.pets2 .pets-hd .lead { display: none; }
.pets2 .pet-me { display: flex; align-items: center; gap: 18px; padding: 14px 22px; border-radius: 20px; color: var(--chalk); background: radial-gradient(130% 160% at 0% 0%, #1f5444, var(--table-2) 55%, var(--table)); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .45); }
.pets2 .pet-me h3 { margin: 4px 0 0; color: var(--chalk); font: 800 26px/1.1 var(--display); font-variation-settings: "wdth" 85; }
.pet-me-hint { margin: 4px 0 0; font-size: 13.5px; color: var(--chalk-2); }
.pets2 .pet-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 14px; }
.pet-card.pet2 { position: relative; display: grid; grid-template-rows: auto 1fr; gap: 0; padding: 0; overflow: visible; border-radius: 20px; color: var(--chalk);
  background: linear-gradient(180deg, rgba(16, 44, 35, .92), rgba(10, 29, 23, .96)); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .4), 0 18px 32px -22px #000; }
.pet-card.pet2.comp { box-shadow: inset 0 0 0 2px #f3d27a, 0 0 0 4px rgba(243, 210, 122, .15), 0 18px 32px -22px #000; }
.pet2 .pet-hab { position: relative; height: 150px; margin: 8px 8px 0; border-radius: 15px; overflow: hidden; background: radial-gradient(70% 70% at 50% 40%, color-mix(in srgb, var(--rc, #d6b066) 26%, transparent), transparent 70%), radial-gradient(90% 60% at 50% 100%, rgba(0, 0, 0, .35), transparent 70%), #163a2f; box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .25); }
.pet2 .pet-fig { height: 100%; display: grid; place-items: center; }
.pet2 .pet-fig > svg { width: auto; height: 118px; max-width: 80%; }
.pet2 .pet-chip { position: absolute; left: 8px; top: 8px; z-index: 1; padding: 3px 9px; border-radius: 999px; font: 700 11.5px/1.2 var(--body); color: #1a1306; background: linear-gradient(180deg, #f6dd98, #d6a83c); box-shadow: none; }
.pet-dots { position: absolute; right: 8px; top: 8px; z-index: 2; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 10px; cursor: pointer; color: var(--chalk); background: rgba(0, 0, 0, .35); }
.pet-dots svg { width: 18px; height: 18px; fill: currentColor; }
.pet-dots:hover, .pet-dots.on { color: #1a1306; background: linear-gradient(180deg, #f6dd98, #d6a83c); }
.pet2 .pet-info { display: grid; align-content: start; gap: 8px; padding: 12px 14px 14px; }
.pet2 .pet-hd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pet2 .pet-nm { font: 800 19px/1.1 var(--display); font-variation-settings: "wdth" 88; color: var(--chalk); }
.pet2 .pet-st { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin: 0; font-size: 13.5px; color: var(--chalk-2); }
.pet2 .pet-st b { color: var(--chalk); }
.pet-auto { margin-left: auto; font-size: 12px; color: #7ff0c0; } .pet-auto b { color: #7ff0c0 !important; }
.pet2 .pet-bar { background: rgba(255, 255, 255, .1); }
.pet2 .pet-acts { display: flex; flex-wrap: wrap; gap: 6px; }
.pet2 .pet-acts:empty { display: none; }
.pet-b { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border: 0; border-radius: 999px; cursor: pointer; font: 700 13px/1 var(--body); color: var(--chalk); background: rgba(236, 229, 212, .1); box-shadow: inset 0 0 0 1px rgba(236, 229, 212, .2); transition: background .2s, box-shadow .2s; }
.pet-b:hover:not(:disabled) { background: rgba(236, 229, 212, .18); }
.pet-b:disabled { opacity: .4; cursor: default; }
.pet-b small { color: var(--chalk-2); }
.pet-b .pet-uic > svg { width: 18px; height: 18px; }
.pet-b.go, .pet-b.pet-evo { color: #1a1306; background: linear-gradient(180deg, #f6dd98, #d6a83c); box-shadow: 0 3px 0 #8f6a2c; }
.pet-b.ghost { background: transparent; }
.pet2 .pet-powb { min-height: 34px; }
.pet2 .pet-cp { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; padding-top: 10px; border-top: 1px dashed rgba(214, 176, 102, .3); }
.pet2 .pet-cp .on { display: inline-flex; align-items: center; gap: 5px; font: 700 13px/1 var(--body); color: #7ff0c0; }
.pet2 .pet-cp .on svg { width: 15px; height: 15px; }
.pet2 .pet-cp .pet-b.go { width: 100%; justify-content: center; }
.pet-menu { position: absolute; right: 8px; top: 46px; z-index: 5; display: grid; gap: 6px; width: min(240px, calc(100% - 16px)); padding: 8px; border-radius: 14px; color: var(--ink); background: linear-gradient(180deg, #fffaf0, #f3e9d3); box-shadow: 0 0 0 1px rgba(180, 141, 69, .6), 0 18px 34px -12px rgba(0, 0, 0, .8); }
.pet-menu[hidden] { display: none; }
.pet-mi { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 38px; padding: 0 10px; border: 0; border-radius: 10px; cursor: pointer; text-align: left; font: 650 13.5px/1 var(--body); color: var(--ink); background: transparent; }
.pet-mi svg { width: 16px; height: 16px; color: #8f6a2c; }
.pet-mi:hover { background: rgba(214, 176, 102, .22); }
.pet-mi.warn { color: #a8321f; } .pet-mi.warn svg { color: #a8321f; }
.pet-menu .pet-pos { display: flex; flex-wrap: wrap; gap: 5px; padding: 8px 6px; border-top: 1px dashed rgba(180, 141, 69, .4); border-bottom: 1px dashed rgba(180, 141, 69, .4); }
.pet-menu .pet-pos small { width: 100%; font: 700 12px/1 var(--body); color: var(--ink-2); }
.pet-menu .ppos-b { font-size: 12px; }
@media (prefers-reduced-motion: reduce) { .pz-mini, .pet-b { transition: none; } }
.pet2.r-commun { --rc: #b8a98a; } .pet2.r-rare { --rc: #3f8fd8; } .pet2.r-epique { --rc: #9b59d0; } .pet2.r-legendaire { --rc: #e2b84f; } .pet2.r-mythique { --rc: #ff7aa8; } .pet2.r-secret { --rc: #8a6ad0; } .pet2.r-evenement { --rc: #f4bf3d; } .pet2.r-vip { --rc: #e2a92c; }
.pet2 .rar { color: #1a1306; background: rgba(255, 250, 240, .9); box-shadow: inset 0 0 0 1px var(--rc, #b8a98a); }
#p-style .pst-pick[data-pc="pcadre"] .pst-frth > .pst-ft { width: auto; height: auto; margin: 0; }

/* ===== étape 178 : Mon personnage moins vert, cartes des animaux toutes pareilles ===== */
.pz2 .pz-groups button[aria-selected="true"] { color: #1a1306; background: linear-gradient(180deg, #f6dd98, #d6a83c); box-shadow: 0 2px 0 #8f6a2c; }
.pz2 .pz-it.on { box-shadow: inset 0 0 0 2.5px #c99a3e, 0 0 0 3px rgba(214, 168, 60, .22), 0 6px 14px -10px rgba(0, 0, 0, .6); background: #fff6df; }
/* la carte : image, nom, histoire (hauteur fixe), boutons collés en bas */
.pet-card.pet2 { grid-template-rows: auto 1fr; }
.pet2 .pet-info { grid-template-rows: auto auto 1fr; align-content: stretch; gap: 10px; }
.pet2 .pet-tale { position: relative; display: grid; grid-template-rows: 1fr auto; gap: 4px; height: 118px; padding: 9px 11px 7px; border-radius: 12px; background: rgba(0, 0, 0, .18); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .2); overflow: hidden; }
.pet2 .pet-tale ol { display: grid; align-content: start; gap: 7px; margin: 0; padding: 0; list-style: none; overflow: hidden; -webkit-mask: linear-gradient(180deg, #000 70%, transparent); mask: linear-gradient(180deg, #000 70%, transparent); }
.pet2 .pet-tale li { display: grid; gap: 1px; }
.pet2 .pet-tale time { font: 700 11px/1.2 var(--body); color: #e8c77a; }
.pet2 .pet-tale p { margin: 0; font-size: 13px; line-height: 1.35; color: var(--chalk-2); }
.pet2 .pet-tale p b { color: var(--chalk); }
.pet-more2 { justify-self: start; display: inline-flex; align-items: center; gap: 5px; padding: 3px 2px; border: 0; cursor: pointer; font: 700 12.5px/1 var(--body); color: #f3d27a; background: none; }
.pet-more2 svg { width: 14px; height: 14px; }
.pet-more2:hover { text-decoration: underline; }
.pet2 .pet-btns { display: grid; align-content: end; gap: 8px; padding-top: 10px; border-top: 1px dashed rgba(214, 176, 102, .3); }
.pet2 .pet-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pet2 .pet-row > * { min-width: 0; }
.pet2 .pet-row .pet-b { width: 100%; justify-content: center; padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pet2 .pet-row .pet-b svg { width: 15px; height: 15px; flex: none; }
.pet-b.on { color: #7ff0c0; background: rgba(127, 240, 192, .1); box-shadow: inset 0 0 0 1px rgba(127, 240, 192, .45); }
.pet-b.on:hover { background: rgba(127, 240, 192, .18) !important; }
.pet-b.wait { color: var(--chalk-2); font-weight: 600; }
.pet-b.wait b { color: var(--chalk); }
.pet-b.max { color: #f3d27a; background: rgba(243, 210, 122, .08); box-shadow: inset 0 0 0 1px rgba(243, 210, 122, .35); opacity: 1 !important; }
.pet2 .pet-powb { position: relative; }
.pet2 .pet-powb b { color: #f3d27a; }
.pet2 .pet-powb.has { box-shadow: inset 0 0 0 1px rgba(243, 210, 122, .7); }
.pet2 .pet-powb .pow-mini { position: absolute; left: 14px; right: 14px; bottom: 3px; height: 3px; }
/* nourrir / œuf / dormeur : fenêtres à bandeau */
.feedmodal .pf-art > svg { width: 48px; height: 48px; }
.feedmodal .pf-bar { margin: 14px 18px 0; }
.feedmodal .pet-food { padding: 14px 18px 4px; }
.pet2 .pet-row .pet-b.wait { flex-direction: column; justify-content: center; gap: 2px; padding: 3px 6px; line-height: 1; }
.pet2 .pet-row .pet-b.wait small { font: 600 10.5px/1 var(--body); color: var(--chalk-2); }
.pet2 .pet-row .pet-b.wait b { font-size: 12.5px; }
.pet-card.pet2 .pet-hd .rar[class*="r-"] { color: #1a1306; background: #f6efe0; box-shadow: inset 0 0 0 1.5px var(--rc, #b8a98a); }
.pz2 .pz-it.on::after { background: linear-gradient(180deg, #f6dd98, #c99a3e); box-shadow: 0 0 0 2px #fffaf0, 0 0 0 3px rgba(143, 106, 44, .45); }
@media (max-width: 560px) { .pets2 .pet-me { flex-direction: column; text-align: center; gap: 6px; padding: 14px; } .pets2 .pet-me > :first-child { max-width: 100%; } .pets2 .pet-me h3 { font-size: 22px; } }

/* ===== étape 179 : le menu « ••• » d'un animal, et Mon personnage plus vert ===== */
.pet2 .pet-menu { top: 44px; right: 8px; gap: 0; width: min(258px, calc(100% - 16px)); padding: 0; overflow: hidden; border-radius: 16px; color: var(--ink);
  background: linear-gradient(180deg, #f8f1e2, #efe3c8); box-shadow: 0 0 0 1px rgba(214, 176, 102, .75), 0 22px 40px -14px rgba(0, 0, 0, .85); animation: petMenuIn .18s ease-out; }
@keyframes petMenuIn { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
.pet-mh { display: flex; align-items: center; gap: 10px; padding: 10px 12px; color: var(--chalk);
  background: radial-gradient(130% 120% at 0% 0%, #1f5444, var(--table-2) 60%, var(--table)); box-shadow: inset 0 -1.5px 0 rgba(214, 176, 102, .55); }
.pet-mhf { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: radial-gradient(70% 70% at 50% 45%, rgba(243, 217, 149, .25), rgba(0, 0, 0, .25)); box-shadow: inset 0 0 0 1.5px rgba(214, 176, 102, .6); }
.pet-mhf > svg { width: 32px; height: 32px; }
.pet-mh b { display: block; font: 800 15px/1.1 var(--display); font-variation-settings: "wdth" 88; color: var(--chalk); }
.pet-mh small { font: 700 11px/1.2 var(--body); color: #f3d27a; }
.pet-mg { display: grid; gap: 4px; padding: 8px 8px 6px; }
.pet2 .pet-mi { gap: 10px; min-height: 46px; padding: 4px 8px 4px 5px; border-radius: 12px; font: 750 14px/1.1 var(--body); background: #fffaf0; box-shadow: inset 0 0 0 1px rgba(180, 141, 69, .3); transition: box-shadow .2s, transform .2s; }
.pet2 .pet-mi:hover:not(:disabled) { background: #fffaf0; transform: translateY(-1px); box-shadow: inset 0 0 0 1.5px var(--brass), 0 8px 14px -10px rgba(0, 0, 0, .6); }
.pet2 .pet-mi:disabled { opacity: .5; cursor: default; }
.pet-mic { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; font-style: normal; color: #f3d27a;
  background: radial-gradient(70% 70% at 50% 40%, rgba(243, 217, 149, .22), transparent 70%), radial-gradient(130% 110% at 30% 0%, #1f5444, var(--table-2) 55%, var(--table)); box-shadow: inset 0 0 0 1.5px rgba(214, 176, 102, .6); }
.pet-mic > svg { width: 20px; height: 20px; color: #f3d27a; }
.pet-ml { display: grid; flex: 1; min-width: 0; gap: 2px; text-align: left; }
.pet-ml small { font: 600 11.5px/1.1 var(--body); color: var(--ink-2); }
.pet-mi .pp-chev svg { width: 14px; height: 14px; }
.pet2 .pet-menu .pet-pos { display: grid; gap: 6px; margin: 0 8px; padding: 9px 2px 10px; border: 0; border-top: 1px dashed rgba(180, 141, 69, .5); }
.pet2 .pet-menu .pet-pos small { font: 700 12px/1 var(--body); color: var(--ink-2); }
.pet2 .pet-menu .pet-pos > div { display: flex; flex-wrap: wrap; gap: 5px; }
.pet2 .pet-menu .ppos-b { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; font: 700 12px/1 var(--body); color: var(--ink); background: #fffaf0; box-shadow: inset 0 0 0 1px rgba(180, 141, 69, .45); }
.pet2 .pet-menu .ppos-b:hover:not(.on) { box-shadow: inset 0 0 0 1.5px var(--brass); }
.pet2 .pet-menu .ppos-b.on { color: var(--chalk); background: radial-gradient(130% 110% at 30% 0%, #1f5444, var(--table-2) 60%); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .6); }
.pet2 .pet-menu .ppos-b.on svg { width: 12px; height: 12px; color: #f3d27a; }
.pet2 .pet-menu .pet-mi.warn { margin: 0; min-height: 44px; border-radius: 0; color: #a8321f; background: rgba(168, 50, 31, .06); box-shadow: inset 0 1px 0 rgba(180, 141, 69, .35); padding: 4px 13px; }
.pet2 .pet-menu .pet-mi.warn:hover { transform: none; background: rgba(168, 50, 31, .12); box-shadow: inset 0 1px 0 rgba(180, 141, 69, .35); }
.pet-mi.warn .pet-mic { color: #a8321f; background: rgba(168, 50, 31, .1); box-shadow: inset 0 0 0 1.5px rgba(168, 50, 31, .45); }
.pet-mi.warn .pet-mic > svg { color: #a8321f; width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) { .pet2 .pet-menu { animation: none; } }

/* Mon personnage : le panneau des choix sur le tapis vert, les cases restent en carton crème */
.pz2 .pz-panel { color: var(--chalk); background: radial-gradient(130% 120% at 100% 0%, #1f5444, var(--table-2) 55%, var(--table)); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .45), 0 24px 40px -26px #000; }
.pz2 .pz-groups { background: rgba(0, 0, 0, .24); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .35), 0 1px 0 rgba(214, 176, 102, .18); }
.pz2 .pz-groups button { color: var(--chalk-2); }
.pz2 .pz-groups button:hover { color: var(--chalk); background: rgba(236, 229, 212, .08); }
.pz2 .pz-groups button[aria-selected="true"] { color: var(--ink); background: linear-gradient(180deg, #fbf5e6, #efe3c8); box-shadow: 0 2px 0 rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(214, 176, 102, .6); }
.pz2 .pz-cat { color: var(--chalk); background: rgba(236, 229, 212, .07); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .35); }
.pz2 .pz-cat:hover { color: var(--chalk); background: rgba(236, 229, 212, .14); }
.pz2 .pz-cat.on { color: #1a1306; background: linear-gradient(180deg, #f6dd98, #d6a83c); box-shadow: none; }
.pz2 .pz-colors > small { color: var(--chalk-2); }
.pz2 .pz-colors > div { background: rgba(0, 0, 0, .2); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .2); }
.pz2 .pz-it { background: linear-gradient(180deg, #fbf5e6, #efe4cc); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .45), 0 6px 12px -10px #000; }
.pz2 .pz-it.on { background: #fff6df; box-shadow: inset 0 0 0 2.5px #e2b84f, 0 0 0 3px rgba(243, 210, 122, .3), 0 8px 16px -10px #000; }

/* ===== étape 180 : Suggestions, Avis et Support dans le style du site ===== */
.ide-grid { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 900px) { .ide-grid { grid-template-columns: 1fr; } }
.ide-med { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; color: #f3d27a;
  background: radial-gradient(70% 70% at 50% 40%, rgba(243, 217, 149, .22), transparent 70%), radial-gradient(130% 110% at 30% 0%, #1f5444, var(--table-2) 55%, var(--table)); box-shadow: inset 0 0 0 1.5px rgba(214, 176, 102, .65), 0 6px 14px -8px #000; }
.ide-med > svg { width: 21px; height: 21px; }
/* le formulaire d'une idée, sur le tapis */
.ide-new { display: grid; gap: 14px; padding: 22px; border-radius: var(--r); color: var(--chalk);
  background: radial-gradient(130% 120% at 0% 0%, #1f5444, var(--table-2) 55%, var(--table)); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .45), 0 24px 40px -26px #000; }
.ide-nh { display: flex; align-items: center; gap: 12px; }
.ide-in { width: 100%; border: 0; border-radius: 14px; padding: 13px 15px; font-size: 15px; color: var(--ink); background: #fffaf0; box-shadow: inset 0 0 0 1px rgba(26, 22, 17, .1), inset 0 2px 5px rgba(26, 22, 17, .08); }
.ide-in::placeholder { color: rgba(26, 22, 17, .4); }
.ide-in:focus { outline: 0; box-shadow: inset 0 0 0 2px #e2b84f, 0 0 0 4px rgba(214, 176, 102, .22); }
textarea.ide-in { min-height: 120px; resize: vertical; }
.ide-ta { position: relative; }
.ide-ta .count { position: absolute; right: 12px; bottom: 9px; font: 600 11px/1 var(--body); color: rgba(26, 22, 17, .4); }
.ide-new .err { color: #ffb9a6; } .ide-new .err:empty { display: none; }
.ide-new .fd-gold, .rv-form .rv-send { justify-self: start; }
.ide-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.ide-sel { min-height: 42px; padding: 0 34px 0 14px; border: 0; border-radius: 999px; font: 700 13.5px/1 var(--body); color: var(--ink); background-color: #fffaf0; box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .6); }
/* une idée en carte crème */
.ide-card { grid-template-columns: 58px minmax(0, 1fr); gap: 14px; padding: 16px; border-radius: 18px; color: var(--ink);
  background: linear-gradient(180deg, #fbf5e6, #efe4cc); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .45), 0 14px 26px -18px #000; }
.ide-card .ide-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.ide-card h3 { margin: 0; color: var(--ink); font-size: 19px; }
.ide-card p { color: var(--ink-2); }
.ide-card .ft { color: var(--ink-2); margin-top: 12px; }
.ide-by { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; color: var(--ink); }
.ide-card .st { flex: none; padding: 4px 10px; border-radius: 999px; font: 800 11.5px/1.2 var(--body); }
.ide-card .st.nouveau { color: #5a4210; background: linear-gradient(180deg, #f6dd98, #e2b84f); }
.ide-card .st.etude { color: #23508f; background: #dbe8ff; }
.ide-card .st.fait { color: #1f7a55; background: #d8f0e2; }
.ide-card .st.refuse { color: #a8321f; background: #f7dcd4; }
.ide-card .v2 { height: 50px; border-radius: 14px; color: var(--ink-2); background: #fffaf0; box-shadow: inset 0 0 0 1px rgba(180, 141, 69, .45); }
.ide-card .v2:hover { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--brass); }
.ide-card .v2 b { color: inherit; }
.ide-card .v2.up.on { color: var(--chalk); background: radial-gradient(130% 110% at 30% 0%, #1f5444, var(--table-2) 60%); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .6); }
.ide-card .v2.up.on svg { color: #f3d27a; }
.ide-card .v2.down.on { color: #fff4ea; background: #b3473b; box-shadow: none; }
.ide-card .sel { min-height: 34px; color: var(--ink); background-color: #fffaf0; }
/* rien encore : un médaillon et une ligne */
.ide-empty { display: grid; justify-items: center; gap: 6px; padding: 34px 20px; border-radius: 20px; text-align: center; color: var(--chalk-2); background: rgba(0, 0, 0, .14); box-shadow: inset 0 0 0 1.5px rgba(214, 176, 102, .28); }
.ide-empty .ide-med { width: 56px; height: 56px; margin-bottom: 6px; } .ide-empty .ide-med > svg { width: 26px; height: 26px; }
.ide-empty b { font: 800 22px/1.1 var(--display); font-variation-settings: "wdth" 85; color: var(--chalk); }

/* Avis : la note sur le tapis, le formulaire en carton crème */
.rv-sum { display: grid; gap: 16px; justify-items: start; padding: 22px; border-radius: var(--r); color: var(--chalk);
  background: radial-gradient(130% 120% at 0% 0%, #1f5444, var(--table-2) 55%, var(--table)); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .45), 0 24px 40px -26px #000; }
.rv-score { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: center; width: 100%; }
.rv-big { display: grid; justify-items: center; gap: 6px; }
.rv-num b { font: 800 66px/.85 var(--display); font-variation-settings: "wdth" 78; color: #f3d27a; text-shadow: 0 3px 0 rgba(0, 0, 0, .3); }
.rv-num small { margin-left: 3px; font: 800 20px/1 var(--display); color: var(--chalk-2); }
.rv-big .stars { color: #f3d27a; } .rv-big .stars svg.off { color: var(--chalk-3); opacity: .35; }
.rv-n { font: 600 12px/1.2 var(--body); color: var(--chalk-2); }
.rv-sum .dist div { color: var(--chalk-2); font: 700 12px/1 var(--body); }
.rv-sum .dist div > span:first-child { display: inline-flex; align-items: center; gap: 3px; }
.rv-sum .dist div > span:first-child svg { width: 11px; height: 11px; color: #f3d27a; }
.rv-sum .dist i { height: 9px; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .18); }
.rv-sum .dist i span { background: linear-gradient(90deg, #d6a83c, #f6dd98); }
.rv-form { display: grid; gap: 14px; padding: 22px; border-radius: var(--r); color: var(--ink); background: linear-gradient(180deg, #fbf5e6, #efe4cc); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .55), 0 24px 40px -26px #000; }
.rv-ft { font: 800 21px/1.1 var(--display); font-variation-settings: "wdth" 85; color: var(--ink); }
.rv-form .starpick button { color: rgba(26, 22, 17, .16); }
.rv-form .starpick button.on { color: #d6a83c; filter: drop-shadow(0 2px 0 #8f6a2c); }
.rv-form textarea.ide-in { min-height: 110px; background: #fffaf0; box-shadow: inset 0 0 0 1px rgba(180, 141, 69, .45), inset 0 2px 5px rgba(26, 22, 17, .06); }
.rv-form .err:empty { display: none; }
.rv-card { color: var(--ink); background: linear-gradient(180deg, #fbf5e6, #efe4cc); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .45), 0 14px 26px -18px #000; }
.rv-card p { color: var(--ink-2); }
.rv-card .dim { color: var(--ink-2) !important; }
.rv-card .stars { color: #d6a83c; } .rv-card .stars svg.off { color: rgba(26, 22, 17, .2); opacity: 1; }

/* Support : la liste sur le tapis, la conversation avec son bandeau vert */
.sup2 .supgrid { gap: 20px; }
.sup2 .suplist { gap: 8px; padding: 14px; border-radius: var(--r); background: radial-gradient(130% 120% at 0% 0%, #1f5444, var(--table-2) 55%, var(--table)); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .45), 0 24px 40px -26px #000; max-height: 72vh; }
.sp-new { width: 100%; justify-content: center; }
.sp-lh { display: flex; align-items: center; gap: 8px; margin: 8px 4px 2px; font: 800 15px/1.1 var(--display); font-variation-settings: "wdth" 88; color: var(--chalk); }
.sp-lh .num { padding: 2px 8px; border-radius: 999px; font: 800 11.5px/1.3 var(--body); color: #1a1306; background: linear-gradient(180deg, #f6dd98, #d6a83c); }
.sup2 .supit { gap: 4px; padding: 12px 13px; border-radius: 14px; color: var(--ink); background: linear-gradient(180deg, #fbf5e6, #efe4cc); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .4); transition: transform .2s, box-shadow .2s; }
.sup2 .supit:hover { background: linear-gradient(180deg, #fbf5e6, #efe4cc); transform: translateY(-1px); box-shadow: inset 0 0 0 1.5px var(--brass), 0 8px 14px -10px #000; }
.sup2 .supit.on { box-shadow: inset 0 0 0 2.5px #e2b84f, 0 0 0 3px rgba(243, 210, 122, .25); }
.sp-ith { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sp-ith b { font: 800 16px/1.15 var(--display); font-variation-settings: "wdth" 88; }
.sup2 .supit small { font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sup2 .supit small.sp-t { font-size: 11.5px; color: rgba(26, 22, 17, .45); }
.sup2 .supst { padding: 3px 9px; font: 800 11px/1.3 var(--body); letter-spacing: 0; vertical-align: 0; }
.sup2 .supst.st-wait { color: #5a4210; background: linear-gradient(180deg, #f6dd98, #e2b84f); }
.sup2 .supst.st-doing { color: #23508f; background: #dbe8ff; }
.sup2 .supst.st-done { color: #1f7a55; background: #d8f0e2; }
.sup2 .supconv { gap: 0; padding: 0; overflow: hidden; border-radius: var(--r); color: var(--ink);
  background: radial-gradient(rgba(180, 141, 69, .14) 1px, transparent 1.4px) 0 0 / 18px 18px, linear-gradient(180deg, #fbf5e6, #f1e7d1); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .55), 0 24px 40px -26px #000; }
.sp-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; color: var(--chalk);
  background: radial-gradient(130% 160% at 0% 0%, #1f5444, var(--table-2) 55%, var(--table)); box-shadow: inset 0 -2px 0 rgba(214, 176, 102, .55); }
.sp-head > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; flex: 1; justify-items: start; }
.sp-head b { font: 800 23px/1.05 var(--display); font-variation-settings: "wdth" 85; color: var(--chalk); }
.sp-head small { font: 600 12.5px/1.2 var(--body); color: #f3d27a; }
.sp-head > .supst { flex: none; }
.sp-body { display: grid; gap: 12px; padding: 16px 18px 18px; }
.sp-subj { display: grid; gap: 6px; }
.sp-subj small { font: 700 12.5px/1 var(--body); color: var(--ink-2); }
.sp-subj .seg { background: rgba(26, 22, 17, .07); box-shadow: inset 0 0 0 1px rgba(180, 141, 69, .35); }
.sp-subj .seg button { color: var(--ink-2); }
.sp-subj .seg button.on { color: var(--chalk); }
.sp-subj .seg .ind { background: radial-gradient(130% 110% at 30% 0%, #1f5444, var(--table-2) 60%); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .6); }
.sup2 .supmsgs { max-height: 52vh; padding: 2px; }
.sup2 .supb { color: var(--ink); background: #fffaf0; box-shadow: inset 0 0 0 1px rgba(180, 141, 69, .4), 0 6px 12px -10px #000; }
.sup2 .supm.me .supb { color: var(--chalk); background: radial-gradient(130% 120% at 0% 0%, #1f5444, var(--table-2) 70%); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .5); }
.sup2 .supm.staff .supb { box-shadow: inset 0 0 0 1.5px rgba(214, 176, 102, .7), 0 6px 12px -10px #000; }
.sup2 .supwho { color: #8f6a2c; } .sup2 .supwho small { color: var(--ink-2); }
.sup2 .supt { color: rgba(26, 22, 17, .45); }
.sup2 .supm.me .supt { color: var(--chalk-2); }
.sup2 .supm.me .btn.xs { color: var(--ink); }
.sup2 .supform textarea { min-height: 84px; border: 0; border-radius: 16px; color: var(--ink); background: #fffaf0; box-shadow: inset 0 0 0 1px rgba(180, 141, 69, .45), inset 0 2px 5px rgba(26, 22, 17, .06); }
.sup2 .supform textarea:focus { outline: 0; box-shadow: inset 0 0 0 2px #e2b84f, 0 0 0 4px rgba(214, 176, 102, .2); }
.sup2 .supform .btn.sm { color: var(--chalk); background: radial-gradient(130% 110% at 30% 0%, #2a7356, var(--table-2) 70%); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .55), 0 3px 0 #06120e; }
.sup2 .supform .btn.sm svg { color: #f3d27a; }
.sp-done { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: rgba(31, 122, 85, .1); box-shadow: inset 0 0 0 1px rgba(31, 122, 85, .35); }
.sp-ok { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; color: #fff; background: #1f7a55; }
.sp-ok svg { width: 16px; height: 16px; }
.sp-done b { flex: 1; font: 800 15px/1.1 var(--display); font-variation-settings: "wdth" 88; color: #1f5c43; }
.fd-crem.sm { min-height: 36px; padding: 0 15px; font-size: 13.5px; }
@media (max-width: 760px) { .sp-head b { font-size: 19px; } .rv-num b { font-size: 54px; } }
.sp-head > span:nth-child(2) { gap: 7px; }
.sup2 .supform textarea::placeholder { color: rgba(26, 22, 17, .42); }

/* ===== étape 181 : plus de texte sombre sur fond sombre (Suggestions, Avis, Support) ===== */
/* les listes déroulantes en crème : la liste des choix aussi (avant : choix en encre sur vert foncé), flèche foncée */
.ide2 .sel, .ide-card .sel { color: var(--ink); background: #fffaf0 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231a1611' stroke-width='2.5'><path d='m6 9 6 6 6-6'/></svg>") no-repeat right 12px center; }
.ide2 .sel option, .ide-card .sel option { color: var(--ink); background: #fffaf0; }
.ide-card .sel { box-shadow: inset 0 0 0 1px rgba(180, 141, 69, .5); font-weight: 700; }
/* « Supprimer » lisible sur le crème */
.ide2 .btn.danger, .rv2 .btn.danger { color: #a8321f; background: rgba(168, 50, 31, .08); box-shadow: inset 0 0 0 1px rgba(168, 50, 31, .4); }
.ide2 .btn.danger:hover, .rv2 .btn.danger:hover { color: #fff; background: #b3473b; }
.ide2 .btn.danger svg, .rv2 .btn.danger svg { color: inherit; }
/* les badges de l'équipe et les petits textes sur le crème */
.rv-card .role, .ide-card .role { filter: none; }
.sp-done b { color: #17513a; }
.ide-ta .count { color: rgba(26, 22, 17, .5); }

/* ===== étape 182 : le champ qu'on remplit reste crème, « Voir l'image » lisible ===== */
/* la règle générale .inp:focus met un fond noir transparent : sur nos champs crème, le texte foncé devenait invisible */
.ide-in:focus, .ide2 .inp:focus, .rv2 .inp:focus, .sup2 .supform textarea:focus { color: var(--ink); background: #fffaf0; }
/* « Voir l'image » dans une bulle : clair sur ma bulle verte, foncé sur une bulle crème */
.sup2 .supb .btn.xs { --fg: var(--ink); color: var(--ink); background: rgba(26, 22, 17, .05); box-shadow: inset 0 0 0 1px rgba(180, 141, 69, .55); }
.sup2 .supb .btn.xs svg { color: #8f6a2c; }
.sup2 .supm.me .supb .btn.xs { --fg: var(--chalk); color: var(--chalk); background: rgba(236, 229, 212, .1); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .6); }
.sup2 .supm.me .supb .btn.xs svg { color: #f3d27a; }
.sup2 .supb .btn.xs:hover { box-shadow: inset 0 0 0 1.5px #e2b84f; }
.sup2 .supb small.dim { color: inherit; opacity: .7; }
/* un pseudo en couleur (VIP) posé sur le crème : un petit contour pour rester lisible */
.ide-by .vipnm, .rv-card .vipnm, .sup2 .vipnm { text-shadow: 0 0 1px rgba(26, 22, 17, .55), 0 1px 1px rgba(26, 22, 17, .35); }

/* ===== étape 183 : pages des jeux (mode classé, niveaux), nouvelle partie, salon, tchat / vocal / emotes de la partie ===== */
/* --- le bloc du mode classé, sur le tapis vert --- */
.rk-hub2 { padding: 22px 24px; border-radius: var(--r); color: var(--chalk);
  background: radial-gradient(130% 120% at 0% 0%, #1f5444, var(--table-2) 55%, var(--table)); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .45), 0 24px 40px -26px #000; }
.rk-hub2 .rk-hub-glow { background: radial-gradient(circle, rgba(243, 210, 122, .22), transparent 70%); }
.rk-hub2 .rk-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; border-radius: 999px; font: 800 12.5px/1.2 var(--body); color: #1a1306; background: linear-gradient(180deg, #f6dd98, #d6a83c); box-shadow: 0 2px 0 #8f6a2c; }
.rk-hub2 .rk-badge svg { width: 14px; height: 14px; color: #1a1306; }
.rk-hub2 .rk-season { color: var(--chalk-2); }
.rk-hub2 .rk-season b { color: var(--chalk); }
.rk-hub2 .rk-season .rk-cd, .rk-hub2 .rk-next b { color: #f3d27a; }
.rk-hub2 .rk-sep { background: rgba(214, 176, 102, .6); }
.rk-hub2 .rk-note { color: var(--chalk-2); background: rgba(0, 0, 0, .2); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .3); }
.rk-hub2 .rk-note b { color: var(--chalk); }
.rk-hub2 .rk-card .rk-ce { display: grid; place-items: center; width: 132px; height: 132px; flex: none; border-radius: 50%; background: radial-gradient(60% 60% at 50% 45%, rgba(243, 217, 149, .25), transparent 70%), rgba(0, 0, 0, .22); box-shadow: inset 0 0 0 1.5px rgba(214, 176, 102, .55); }
.rk-hub2 .rk-name { font: 800 30px/1.05 var(--display); font-variation-settings: "wdth" 85; color: var(--chalk); }
.rk-hub2 .rk-pts { color: var(--chalk-2); }
.rk-hub2 .rk-pts b { color: #f3d27a; font-size: 1.15em; }
.rk-hub2 .rk-prog { background: rgba(0, 0, 0, .32); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .25); }
.rk-hub2 .rk-prog span { background: linear-gradient(90deg, #d6a83c, #f6dd98); }
.rk-hub2 .rk-pt, .rk-hub2 .rk-wl { color: var(--chalk-2); }
.rk-hub2 .rk-wl b { color: var(--chalk); }
.rk-hub2 .rk-shield { color: #9ff0c8; }
.rk-hub2 .btn.rk-play:not(.ghost) { color: #1a1306; background: linear-gradient(180deg, #f8e3a2, #d6a83c); box-shadow: 0 4px 0 #8f6a2c, 0 10px 22px -10px #000; border-radius: 999px; }
.rk-hub2 .rk-play svg { color: #1a1306; }
.rk-hub2 .rk-go small.muted { color: var(--chalk-2); font-size: 13px; }
.rk-hub2 .rk-qn { color: var(--chalk-2); }
.rk-hub2 .rk-qn.on { color: #7ff0c0; }
.rk-hub2 .rk-cancel { border-radius: 999px; }
.rk-hub2 a.link { color: #f3d27a; }
.rk-hub2 p.muted { color: var(--chalk-2) !important; }
@media (max-width: 760px) { .rk-hub2 { padding: 18px 16px; } .rk-hub2 .rk-card .rk-ce { width: 104px; height: 104px; } .rk-hub2 .rk-name { font-size: 24px; } }

/* --- les 10 niveaux d'un jeu, sur le tapis vert --- */
.gxp2 { color: var(--chalk); background: radial-gradient(130% 120% at 0% 0%, #1f5444, var(--table-2) 55%, var(--table)); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .45), 0 24px 40px -26px #000; }
.gxp2::before { height: 4px; opacity: .9; }
.gxp2 .gxp-lv { color: #1a1306; background: radial-gradient(circle at 35% 30%, #fff6d0, #f3d27a 45%, #c9952e); box-shadow: 0 0 0 4px rgba(214, 176, 102, .25), 0 8px 18px -8px #000; }
.gxp2 .gxp-main h2 { color: var(--chalk); }
.gxp2 .gxp-bar { background: rgba(0, 0, 0, .32); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .25); }
.gxp2 .gxp-bar > i { background: linear-gradient(90deg, #d6a83c, #f6dd98); }
.gxp2 .gxp-nums { color: var(--chalk-2); } .gxp2 .gxp-nums b { color: var(--chalk); }
.gxp2 .gxp-pend { color: #1a1306; background: linear-gradient(180deg, #f6dd98, #d6a83c); box-shadow: 0 2px 0 #8f6a2c; font-weight: 800; }
.gxp2 .gxp-badge { padding: 8px 10px 6px; border-radius: 18px; background: radial-gradient(60% 60% at 50% 40%, rgba(243, 217, 149, .2), transparent 70%), rgba(0, 0, 0, .2); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .4); }
.gxp2 .gxp-badge small { color: #f3d27a; font-weight: 700; }
.gxp2 .gxp-track li { background: linear-gradient(180deg, #fbf5e6, #efe4cc); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .45); color: var(--ink); }
.gxp2 .gxp-track li::before { background: rgba(214, 176, 102, .45); }
.gxp2 .gxp-track .gx-n { color: #1a1306; background: radial-gradient(circle at 35% 30%, #fff6d0, #f3d27a 50%, #c9952e); box-shadow: 0 2px 0 #8f6a2c; text-shadow: none; }
.gxp2 .gxp-track li.done { background: linear-gradient(180deg, #f3eedd, #e3dcc6); }
.gxp2 .gxp-track li.done .gx-n { color: var(--chalk); background: radial-gradient(130% 110% at 30% 0%, #2a7356, var(--table-2) 70%); box-shadow: inset 0 0 0 1.5px rgba(214, 176, 102, .6); }
.gxp2 .gxp-track li.done::before { background: #e2b84f; }
.gxp2 .gxp-track li.ready { background: #fff8e2; box-shadow: inset 0 0 0 2.5px #e2b84f, 0 0 0 3px rgba(243, 210, 122, .25), 0 10px 18px -12px #000; }
.gxp2 .gxp-track li.next { box-shadow: inset 0 0 0 1.5px rgba(214, 176, 102, .9); }
.gxp2 .gxp-track li:not(.done):not(.ready):not(.next) { opacity: .92; }
.gxp2 .gx-claim { color: var(--chalk); background: radial-gradient(130% 110% at 30% 0%, #2a7356, var(--table-2) 70%); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .6), 0 3px 0 #06120e; border-radius: 999px; }
.gxp2 .gx-ok { color: #1f7a55; }
.gxp2 .gx-wait { color: #8f6a2c; }
.gxp2 .gx-rw { color: var(--ink); background: rgba(214, 176, 102, .22); }
.gxp2 .gx-rw.it { background: rgba(31, 122, 85, .14); }
.gxp2 .gx-rw.bd { background: rgba(200, 51, 45, .12); }
.gxp2 .gxp-track small { color: var(--ink-2); }
.gxp2 .gxp-how { color: var(--chalk-2); } .gxp2 .gxp-how b { color: var(--chalk); }
.gxp2 p.muted { color: var(--chalk-2) !important; }

/* --- les réglages d'une partie (fenêtre « Nouvelle partie » et salon) : vert tapis pour ce qui est choisi --- */
.sx .optrow .sl small { display: none; }
.sx .seg { background: rgba(26, 22, 17, .07); box-shadow: inset 0 0 0 1px rgba(180, 141, 69, .35); }
.sx .seg button { color: var(--ink-2); }
.sx .seg button.on { color: var(--chalk); }
.sx .seg .ind { background: radial-gradient(130% 110% at 30% 0%, #1f5444, var(--table-2) 60%); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .6); }
.sx .stepper { background: #fffaf0; box-shadow: inset 0 0 0 1px rgba(180, 141, 69, .45); }
.sx .stepper button { color: #1f5444; font-weight: 700; }
.sx .stepper button:hover { background: rgba(31, 122, 85, .1); }
.sx .toggle[aria-checked="true"] { background: radial-gradient(130% 110% at 30% 0%, #2a7356, var(--table-2) 70%); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .6); }
.sx .decopick .dp { background: #fffaf0; box-shadow: inset 0 0 0 1px rgba(180, 141, 69, .4); }
.sx .decopick .dp.on { background: #fff6df; box-shadow: inset 0 0 0 2.5px #e2b84f, 0 0 0 3px rgba(243, 210, 122, .3); }
.sx .mchip.on, .sx .thchip.on { color: var(--chalk); background: radial-gradient(130% 110% at 30% 0%, #1f5444, var(--table-2) 60%); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .6); }
.sx .sgrp.adv { background: rgba(214, 176, 102, .12); box-shadow: inset 0 0 0 1px rgba(180, 141, 69, .35); }
/* la fenêtre « Nouvelle partie » : le bandeau vert en haut, « Créer la partie » en vert */
.setmodal .smhead.sm-band { display: flex; align-items: center; gap: 14px; margin: 0 0 8px; padding: 18px 64px 18px 26px; border-bottom: 0; color: var(--chalk);
  background: radial-gradient(130% 160% at 0% 0%, #1f5444, var(--table-2) 55%, var(--table)); box-shadow: inset 0 -2px 0 rgba(214, 176, 102, .55); }
.sm-band > span:last-child { display: grid; gap: 4px; justify-items: start; }
.sm-band b { font: 800 28px/1 var(--display); font-variation-settings: "wdth" 85; color: var(--chalk); }
.sm-vit { display: grid; place-items: center; width: 54px; height: 54px; flex: none; border-radius: 50%; background: radial-gradient(70% 70% at 50% 40%, rgba(243, 217, 149, .22), transparent 70%), rgba(0, 0, 0, .25); box-shadow: inset 0 0 0 1.5px rgba(214, 176, 102, .6); }
.sm-vit > svg { width: 40px; height: 40px; }
.setmodal > .x { color: var(--chalk); z-index: 9; }
.setmodal .smfoot .note { padding: 8px 12px; font-size: 13px; }
.setmodal .sm-go { min-height: 44px; }
.setmodal .cinv { background: rgba(214, 176, 102, .1); box-shadow: inset 0 0 0 1px rgba(180, 141, 69, .35); }
.setmodal .cinv-list:empty { display: none; }

/* --- le salon : le code sur le tapis, « Lancer la partie » en doré --- */
.lobby .codebox { color: var(--chalk); background: radial-gradient(130% 120% at 0% 0%, #1f5444, var(--table-2) 55%, var(--table)); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .5), 0 24px 40px -26px #000; }
.lobby .codebox .eyebrow { color: #f3d27a; }
.lobby .codebox .gcode { color: #f3d27a; text-shadow: 0 3px 0 rgba(0, 0, 0, .35); }
.lobby .lset { background: linear-gradient(180deg, #fbf5e6, #efe4cc); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .55), 0 24px 40px -26px #000; }
.lobby .lacts #l-start:not(:disabled) { color: #1a1306; background: linear-gradient(180deg, #f8e3a2, #d6a83c); box-shadow: 0 4px 0 #8f6a2c, 0 10px 22px -10px #000; }
.lobby .lacts #l-start svg { color: #1a1306; }

/* --- en partie : les languettes Tchat / Vocal / Emotes sur le tapis, et le tchat dans le style des tchats --- */
.gtalk-btn, .emobtn, .vcfloat { color: var(--chalk); background: radial-gradient(130% 160% at 0% 0%, #2a6650, var(--table-2) 60%, var(--table)); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .55), 0 10px 24px -10px rgba(0, 0, 0, .8); }
.gtalk-btn svg, .emobtn svg { color: #f3d27a; }
.gtalk-btn:hover, .emobtn:hover { background: radial-gradient(130% 160% at 0% 0%, #337a60, #1f5444 60%, var(--table-2)); }
.vcfloat .vcb { color: var(--chalk); background: rgba(236, 229, 212, .1); }
.vcfloat .vcb:hover { background: rgba(236, 229, 212, .18); }
.vcfloat .vcb svg { color: #f3d27a; }
.vcfloat .vcb.join { color: var(--chalk); background: transparent; }
.vcfloat .vcb.off { color: #fff; background: #b3473b; } .vcfloat .vcb.off svg { color: #fff; }
.vcfloat .vcb.on { color: #0f2a20; background: #9ff0c8; } .vcfloat .vcb.on svg { color: #0f2a20; }
.vcfloat .vcb.leave { color: #fff; background: #c0442f; } .vcfloat .vcb.leave svg { color: #fff; }
.vcfloat .vcdock .vcn { color: var(--chalk-2); }
.gtalk { background: radial-gradient(rgba(180, 141, 69, .14) 1px, transparent 1.4px) 0 0 / 18px 18px, linear-gradient(180deg, #fbf5e6, #f1e7d1); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .55), 0 30px 60px -30px rgba(0, 0, 0, .9); }
.gt-h { gap: 10px; padding: 12px 12px 12px 14px; color: var(--chalk); border-bottom: 0; background: radial-gradient(130% 160% at 0% 0%, #1f5444, var(--table-2) 55%, var(--table)); box-shadow: inset 0 -2px 0 rgba(214, 176, 102, .55); }
.gt-h > svg { width: 30px; height: 30px; padding: 6px; opacity: 1; border-radius: 50%; color: #f3d27a; background: rgba(0, 0, 0, .25); box-shadow: inset 0 0 0 1.5px rgba(214, 176, 102, .6); }
.gt-h b { font: 800 17px/1.1 var(--display); font-variation-settings: "wdth" 88; color: var(--chalk); }
.gt-x { color: var(--chalk); } .gt-x:hover { background: rgba(236, 229, 212, .12); }
.gt-m { background: #fffaf0; box-shadow: inset 0 0 0 1px rgba(180, 141, 69, .35), 0 4px 8px -6px rgba(0, 0, 0, .4); border-radius: 14px 14px 14px 4px; }
.gt-m.me { color: var(--chalk); background: radial-gradient(130% 120% at 0% 0%, #1f5444, var(--table-2) 70%); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .5); border-radius: 14px 14px 4px 14px; }
.gt-m.me .gt-mh b, .gt-m.me .gt-n { color: #f3d27a; }
.gt-m.me .gt-mh time { color: var(--chalk-2); }
.gt-m.me .gt-del { color: var(--chalk); }
.gt-mh b, .gt-n { color: #8f6a2c; }
.gt-hid { background: none !important; box-shadow: none !important; }
.gt-empty { color: var(--ink-2); }
.gt-f { gap: 8px; padding: 10px; border-top: 0; background: rgba(214, 176, 102, .1); box-shadow: inset 0 1px 0 rgba(180, 141, 69, .35); }
.gt-f .inp { height: 40px; border: 0; border-radius: 999px; padding: 0 14px; color: var(--ink); background: #fffaf0; box-shadow: inset 0 0 0 1px rgba(180, 141, 69, .45); }
.gt-f .inp:focus { color: var(--ink); background: #fffaf0; box-shadow: inset 0 0 0 2px #e2b84f; }
.gt-f .inp::placeholder { color: rgba(26, 22, 17, .42); }
.gt-f .btn.btn:not(.ghost) { width: 40px; height: 40px; border-radius: 50%; color: #f3d27a; background: radial-gradient(130% 110% at 30% 0%, #2a7356, var(--table-2) 70%); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .6), 0 3px 0 #06120e; }
.gt-emo { width: 40px; height: 40px; border-radius: 50%; color: #8f6a2c; background: rgba(214, 176, 102, .18); box-shadow: inset 0 0 0 1px rgba(180, 141, 69, .45); }
.gt-ro { color: var(--ink-2); }
.gxp2 .gx-rw { max-width: 100%; white-space: normal; text-align: center; line-height: 1.15; }

/* ===== étape 184 : les récompenses des niveaux en grand, le code du salon, les saisons, la régie rangée ===== */
/* --- les 10 niveaux : chaque récompense sur sa vitrine verte, un clic l'ouvre en grand --- */
.gxp2 .gxp-track { grid-template-columns: repeat(10, minmax(100px, 1fr)); gap: 8px; }
.gxp2 .gxp-track li { padding: 10px 6px 12px; gap: 7px; }
.gxp2 .gxp-track li::before { top: 22px; }
.gxp2 .gxp-track .gx-n { width: 28px; height: 28px; font-size: 13px; }
.gx-vit { display: grid; place-items: center; width: 64px; height: 64px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: #f3d27a;
  background: radial-gradient(70% 70% at 50% 38%, rgba(243, 217, 149, .25), transparent 70%), radial-gradient(130% 110% at 30% 0%, #2a7356, var(--table-2) 70%);
  box-shadow: inset 0 0 0 1.5px rgba(214, 176, 102, .6), 0 6px 12px -6px rgba(0, 0, 0, .6); transition: transform .2s var(--ease-out), box-shadow .2s; }
.gx-vit > svg, .gx-vit > .shp-pet, .gx-vit > .shp-pit, .gx-vit > span:not(.bdg) { max-width: 46px; max-height: 46px; }
.gx-vit svg { width: 34px; height: 34px; }
.gx-vit.it { overflow: hidden; } .gx-vit.it > * { transform: scale(.9); }
.gx-vit.bd .bdg { --s: 46px !important; }
.gx-vit.gx-start { cursor: default; width: 48px; height: 48px; margin: 8px 0; color: rgba(236, 229, 212, .75); }
.gx-vit.gx-start svg { width: 18px; height: 18px; }
.gx-vit:hover { transform: translateY(-2px) scale(1.06); box-shadow: inset 0 0 0 2px #e2b84f, 0 10px 18px -8px rgba(0, 0, 0, .7); }
.gx-vit:focus-visible { outline: 2px solid #e2b84f; outline-offset: 3px; }
.gxp2 .gx-rw { font-size: 13.5px; padding: 3px 9px 3px 5px; font-weight: 700; }
.gxp2 .gx-rw svg { width: 17px; height: 17px; }
.gxp2 .gxp-track li.done .gx-vit { filter: saturate(.75); }
.gxp2 .gxp-track li.ready .gx-vit { box-shadow: inset 0 0 0 2px #e2b84f, 0 0 0 4px rgba(243, 210, 122, .3), 0 8px 14px -6px rgba(0, 0, 0, .6); }
@media (max-width: 760px) { .gxp2 .gxp-track { grid-template-columns: repeat(10, 92px); } .gx-vit { width: 56px; height: 56px; } }
/* la récompense en grand */
.gxz-art { display: grid; place-items: center; min-height: 200px; }
.gxz-art > svg { width: 150px; height: 150px; }
.gxz-art > .bdg { --s: 150px !important; }
.gxz-art > span:not(.bdg) { width: 180px; height: 180px; display: grid; place-items: center; }
.gxz-art > span:not(.bdg) > svg, .gxz-art > span:not(.bdg) > * { max-width: 100%; max-height: 100%; }
.gxz-rws { display: flex; flex-wrap: wrap; gap: 6px; }
.gxz-rws .gx-rw { font-size: 15px; padding: 5px 12px 5px 7px; }
.gxz-rws .gx-rw svg { width: 20px; height: 20px; }
.gxz2 .iz-info .dl-go { justify-self: start; margin-top: 4px; }

/* --- le salon : les boutons restent dans le cadre du code (une règle des en-têtes enlevait la marge du bas) --- */
.phead .row > .codebox { padding-bottom: 22px; }

/* --- les saisons dans la régie --- */
.rks2 { gap: 16px; }
.rks-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.rks-now { display: grid; gap: 4px; }
.rks-big { font: 800 40px/1 var(--display); font-variation-settings: "wdth" 85; color: #f3d27a; }
.rks-next { display: grid; gap: 6px; justify-items: end; max-width: 420px; }
.rks-next small { text-align: right; }
.rks-prep.btn:not(.ghost) { color: #1a1306; background: linear-gradient(180deg, #f8e3a2, #d6a83c); box-shadow: 0 4px 0 #8f6a2c, 0 10px 22px -10px #000; }
.rks-prep svg { color: #1a1306; }
.rks-ready { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: rgba(46, 160, 110, .14); box-shadow: inset 0 0 0 1px rgba(110, 220, 160, .35); }
.rks-ready > span:last-child { display: grid; gap: 2px; } .rks-ready b { color: var(--chalk); } .rks-ready small { color: rgba(236, 229, 212, .75); text-align: left; }
.rks-ok { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #2ea06e; color: #fff; flex: none; }
.rks-ok svg { width: 17px; height: 17px; }
.rks-more { border-radius: 14px; background: rgba(0, 0, 0, .16); box-shadow: inset 0 0 0 1px var(--line); }
.rks-more > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 11px 14px; cursor: pointer; font-weight: 700; color: rgba(236, 229, 212, .85); }
.rks-more > summary::-webkit-details-marker { display: none; }
.rks-more > summary svg { width: 16px; height: 16px; opacity: .7; }
.rks-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-top: 1px solid var(--line); }
.rks-l { flex: 1 1 220px; font-weight: 700; color: var(--chalk); }
.rks-num { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.rks-num .inp { width: 70px; text-align: center; }
.rks-row > small { flex-basis: 100%; }
.rks-row input[type="datetime-local"] { width: auto; }
@media (max-width: 640px) { .rks-next { justify-items: start; } .rks-next small { text-align: left; } .rks-big { font-size: 32px; } }

/* --- la régie rangée : l'accueil, la recherche de catégorie, le chemin dans l'en-tête --- */
.aitem.ahome { padding: 11px 12px; font-weight: 700; color: var(--chalk); background: rgba(236, 229, 212, .06); box-shadow: inset 0 0 0 1px var(--line); }
.aitem.ahome .ai-ic { color: #f3d27a; }
.aitem.ahome.on { color: #1a1306; background: linear-gradient(180deg, #f3e9d0, #e2d3ae); box-shadow: none; }
.aitem.ahome.on .ai-ic { color: #8f6a2c; }
.anav-q { position: relative; display: block; margin: 2px 0 4px; }
.anav-q .fs-ic { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: rgba(236, 229, 212, .5); pointer-events: none; display: grid; }
.anav-q .fs-ic svg { width: 15px; height: 15px; }
.anav-q .inp { height: 38px; padding: 0 12px 0 34px; font-size: 13.5px; border-radius: 11px; }
.ag[hidden], .aitem[hidden] { display: none !important; }
.ahead .ah-home { margin-left: auto; flex: none; align-self: center; }
.ahead > div { flex: 1 1 auto; min-width: 0; }
@media (max-width: 640px) { .ahead { flex-wrap: wrap; } .ahead .ah-home { margin-left: 0; } }
/* l'accueil de la régie */
.adash { display: grid; gap: 22px; margin-top: 18px; }
.adash[hidden], .atout-res[hidden] { display: none; }
.adg { display: grid; gap: 10px; }
.adg-h { display: flex; align-items: center; gap: 9px; margin: 0; font: 800 18px/1.2 var(--display); font-variation-settings: "wdth" 88; color: var(--chalk); }
.adg-h > svg { width: 18px; height: 18px; color: #e07a62; }
.adg-ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; color: var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); }
.adg-ic svg { width: 16px; height: 16px; }
.adt-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.adt { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 0; border-radius: 16px; cursor: pointer; text-align: left; font: inherit; color: var(--chalk);
  background: rgba(9, 26, 20, .5); box-shadow: inset 0 0 0 1px var(--line); transition: transform .18s var(--ease-out), box-shadow .18s, background .18s; }
.adt:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .5), 0 12px 22px -16px #000; }
.adt-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; flex: none; color: rgba(236, 229, 212, .7); background: rgba(236, 229, 212, .07); }
.adt-ic svg { width: 20px; height: 20px; }
.adt-t { flex: 1 1 auto; display: grid; gap: 2px; min-width: 0; } .adt-t b { font-size: 15px; } .adt-t small { font-size: 12.5px; color: rgba(236, 229, 212, .62); }
.adt-n { min-width: 40px; height: 40px; padding: 0 10px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; color: rgba(236, 229, 212, .55); background: rgba(236, 229, 212, .06); }
.adt.hot { background: linear-gradient(120deg, rgba(208, 87, 63, .22), rgba(9, 26, 20, .5)); box-shadow: inset 0 0 0 1px rgba(224, 122, 98, .5); }
.adt.hot .adt-n { color: #fff; background: var(--danger); }
.adt.hot .adt-ic { color: #ffb3a1; background: rgba(208, 87, 63, .2); }
.adc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.adc { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border: 0; border-radius: 15px; cursor: pointer; text-align: left; font: inherit; color: var(--chalk);
  background: rgba(9, 26, 20, .45); box-shadow: inset 0 0 0 1px var(--line); transition: transform .18s var(--ease-out), box-shadow .18s; }
.adc:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 60%, transparent), 0 12px 22px -16px #000; }
.adc:focus-visible, .adt:focus-visible { outline: 2px solid #e2b84f; outline-offset: 2px; }
.adc-ic { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; flex: none; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); }
.adc-ic svg { width: 19px; height: 19px; }
.adc-t { flex: 1 1 auto; display: grid; gap: 3px; min-width: 0; }
.adc-t b { font-size: 14.5px; }
.adc-t small { font-size: 12px; line-height: 1.35; color: rgba(236, 229, 212, .6); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.adc > svg:last-child { width: 15px; height: 15px; flex: none; opacity: .45; transform: rotate(-90deg); }
@media (prefers-reduced-motion: reduce) { .adt, .adc, .gx-vit { transition: none; } .adt:hover, .adc:hover, .gx-vit:hover { transform: none; } }
.atout .asearch.big { margin: 0; } .atout .asearch.big .inp { width: 100%; max-width: none; flex: 1 1 auto; padding-left: 44px; }
.atout .asearch.big .fs-ic { left: 15px; top: 25px; }

/* ===== étape 185 : le cadre du niveau 5 bien visible ; la régie dans le style du site ===== */
/* --- un style (cadre, décor) d'un niveau : une vitrine rectangulaire, le cadre sur le tapis avec une fiche esquissée --- */
.gx-vit.st { width: 92px; height: 70px; border-radius: 12px; overflow: hidden; padding: 0; }
.gx-vit.st > :not(.rkw-th) { width: 100%; height: 100%; max-width: none; max-height: none; }
.gx-vit.st > :not(.rkw-th) svg { width: 100%; height: 100%; }
.gx-vit.st .rkw-th.gx-frth { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; }
.gx-vit.st .rkw-th.gx-frth > .pst-ft { inset: 14% 17% 16%; border-radius: 8px; --r: 8px; }
.gx-vit.st .rkw-th.gx-frth .pframe { --k: .5; }
.gx-vit.st .rkw-sk { inset: 14% 17% 16%; gap: 3px 5px; padding: 0 13%; }
.gx-vit.st .rkw-sk i { width: 11px; height: 11px; } .gx-vit.st .rkw-sk b { height: 3px; }
.gx-vit.st:hover .rkw-th.fr > .pst-ft { animation: rkwFr 1.6s ease-in-out infinite; }

/* --- la régie : les blocs sur le tapis encadré de laiton, les titres en clair --- */
.amain .sheet:not(.vs-card) { background: radial-gradient(130% 120% at 0% 0%, #1f5444, var(--table-2) 55%, var(--table)); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .4), 0 24px 44px -30px #000; }
.amain .sheet .sheet { background: rgba(0, 0, 0, .16); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .25); }
.amain .sghead { color: var(--chalk); font-size: 16px; }
.amain .sghead::before { background: #e2b84f; }
.amain .sghead small { color: rgba(236, 229, 212, .6); font-weight: 600; }
.amain .sheet .eyebrow, .amain .rk-adm .eyebrow { color: #f3d27a; }
.amain .sheet h3, .amain .sheet h4 { color: var(--chalk); }
.amain p.muted, .amain .muted { color: rgba(236, 229, 212, .72); }
.amain small.dim, .amain .dim { color: rgba(236, 229, 212, .55); }
.amain .paper .muted, .amain .paper .dim { color: var(--ink-2); }
.amain .paper .sghead, .amain .paper h3, .amain .paper h4 { color: var(--ink); }

/* --- les boutons : action principale en carton doré, les autres en carton crème, danger en rouge --- */
.alayout .amain .btn:not(.ghost):not(.xs):not(.danger) { --fg: #1a1306; color: #1a1306; background: linear-gradient(180deg, #f8e3a2, #d6a83c); box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset, 0 4px 0 #8f6a2c, 0 10px 22px -12px #000; }
.alayout .amain .btn:not(.ghost):not(.xs):not(.danger) svg { color: #1a1306; }
.alayout .amain .btn.ghost:not(.danger), .alayout .amain .btn.xs:not(.danger):not(.on) { --fg: var(--ink); color: var(--ink); background: linear-gradient(180deg, #f6eedb, #e6d8b6); box-shadow: inset 0 0 0 1px rgba(143, 106, 44, .35), 0 3px 0 rgba(143, 106, 44, .55); }
.alayout .amain .btn.ghost:not(.danger) svg, .alayout .amain .btn.xs:not(.danger):not(.on) svg { color: #8f6a2c; }
.alayout .amain .btn.ghost:not(.danger):hover, .alayout .amain .btn.xs:not(.danger):not(.on):hover { background: linear-gradient(180deg, #fbf5e6, #ecdfc0); box-shadow: inset 0 0 0 1.5px #c9952e, 0 3px 0 rgba(143, 106, 44, .6); }
.alayout .amain .btn.xs.on { color: #1a1306; background: linear-gradient(180deg, #f8e3a2, #d6a83c); box-shadow: 0 2px 0 #8f6a2c; }
.alayout .amain .btn.ghost.danger, .alayout .amain .btn.xs.danger { --fg: #ffb3a1; color: #ffb3a1; background: rgba(208, 87, 63, .14); box-shadow: inset 0 0 0 1px rgba(255, 140, 120, .45); }
.alayout .amain .btn.danger:not(.ghost):not(.xs) { --fg: #fff; color: #fff; background: linear-gradient(180deg, #e0654f, #b8402f); box-shadow: 0 4px 0 #7d2a1f, 0 10px 22px -12px #000; }
.alayout .amain .btn.danger:not(.ghost):not(.xs) svg { color: #fff; }
.alayout .amain .btn:disabled, .alayout .amain .btn.disabled { opacity: .45; }

/* --- les champs : des pilules crème (fond crème aussi en écrivant), cases à cocher vertes --- */
.amain .inp, .amain .sel { color: var(--ink); background-color: #fbf5e6; box-shadow: inset 0 0 0 1px rgba(143, 106, 44, .38); }
.amain .inp::placeholder { color: rgba(26, 22, 17, .42); }
.amain .inp:focus, .amain .sel:focus { color: var(--ink); background-color: #fffaf0; box-shadow: inset 0 0 0 2px #e2b84f; }
.amain .inp option, .amain .sel option { background: #fbf5e6; color: var(--ink); }
.amain .sel { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238f6a2c' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>"); }
.amain .asearch .fs-ic, .amain .anav-q .fs-ic { color: #8f6a2c; }
.amain input[type="checkbox"], .amain input[type="radio"] { accent-color: #2a7356; }
.amain .inp:disabled { opacity: .6; }

/* --- les tableaux : en-têtes dorés, lignes séparées par un filet laiton --- */
.amain .tbl-wrap { border-radius: 14px; background: rgba(0, 0, 0, .16); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .22); }
.amain .tbl th { color: #f3d27a; font: 700 12.5px/1.2 var(--body); border-bottom-color: rgba(214, 176, 102, .3); }
.amain .tbl td { color: var(--chalk); border-bottom-color: rgba(214, 176, 102, .14); }
.amain .tbl tbody tr:hover { background: rgba(214, 176, 102, .06); }

/* --- les encadrés : en carton crème --- */
.amain .note { color: var(--ink); background: linear-gradient(180deg, #fbf5e6, #efe4cc); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .55); }
.amain .note > svg { color: #8f6a2c; }
.amain .note b, .amain .note strong { color: var(--ink); }
.amain .note a { color: #6b4a12; }

/* --- les choix en pastilles (catalogue, catégories) : la choisie en doré --- */
.amain .pz-cat { color: var(--chalk); background: rgba(236, 229, 212, .08); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .35); }
.amain .pz-cat:hover { background: rgba(236, 229, 212, .14); }
.amain .pz-cat.on { color: #1a1306; background: linear-gradient(180deg, #f8e3a2, #d6a83c); box-shadow: 0 2px 0 #8f6a2c; }
.amain .apz-items { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.amain .apz-it { grid-template-columns: 96px minmax(0, 1fr); }
.amain .apz-th { width: 96px; height: 104px; background: radial-gradient(70% 70% at 50% 40%, rgba(243, 217, 149, .2), transparent 70%), rgba(0, 0, 0, .2); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .3); }
.amain .apz-f label { color: rgba(236, 229, 212, .8); }
.amain .apz-price { color: rgba(236, 229, 212, .75); }
/* l'ordre des jeux : des cartes crème */
.amain .ago-it { background: linear-gradient(180deg, #fbf5e6, #efe4cc); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .5); }
.amain .ago-it b, .amain .ago-it span { color: var(--ink); }
.amain .adly-bd { color: #f3d27a; }

/* --- moins de texte : les longues explications rangées derrière « En savoir plus » --- */
.ainfo { margin: 0; }
.ainfo > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 8px; border-radius: 99px; cursor: pointer; font-size: 12.5px; font-weight: 700; color: rgba(236, 229, 212, .78); background: rgba(236, 229, 212, .07); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .3); user-select: none; }
.ainfo > summary::-webkit-details-marker { display: none; }
.ainfo > summary svg { width: 14px; height: 14px; color: #e2b84f; }
.ainfo > summary:hover { background: rgba(236, 229, 212, .12); }
.ainfo[open] > summary { color: #1a1306; background: linear-gradient(180deg, #f8e3a2, #d6a83c); box-shadow: none; }
.ainfo[open] > summary svg { color: #1a1306; }
.ainfo > :not(summary) { margin: 8px 0 0; padding: 10px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; color: var(--ink) !important; background: linear-gradient(180deg, #fbf5e6, #efe4cc); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .5); max-width: 760px; }
.paper .ainfo > summary { color: var(--ink-2); background: rgba(26, 22, 17, .05); }
.amain .abd-tabs button { color: var(--chalk); background: rgba(236, 229, 212, .08); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .3); }
.amain .abd-tabs button[aria-selected="true"] { color: #1a1306; background: linear-gradient(180deg, #f8e3a2, #d6a83c); box-shadow: 0 2px 0 #8f6a2c; }
.amain .vs-card .ainfo > summary { color: var(--ink-2); background: rgba(26, 22, 17, .05); }
.amain .vs-card .muted, .amain .vs-card .dim, .amain .vs-card small { color: var(--ink-2); }
.amain .vs-card .sghead, .amain .vs-card h3, .amain .vs-card h4, .amain .vs-card .tbl td { color: var(--ink); }
.amain .vs-card .tbl th { color: #8f6a2c; border-bottom-color: rgba(26, 22, 17, .12); }
.amain .vs-card .tbl td { border-bottom-color: rgba(26, 22, 17, .08); }
.amain .vs-card .tbl-wrap { background: transparent; box-shadow: none; }
/* (étape 185) sur ordinateur, les 10 niveaux sur deux lignes de 5 : des cases plus larges, les récompenses bien visibles */
@media (min-width: 900px) {
  .gxp2 .gxp-track { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; overflow: visible; }
  .gxp2 .gxp-track li { padding: 12px 8px 14px; }
  .gxp2 .gxp-track li:nth-child(6)::before { display: none; }
  .gxp2 .gx-vit { width: 76px; height: 76px; }
  .gxp2 .gx-vit svg { width: 40px; height: 40px; }
  .gxp2 .gx-vit.bd .bdg { --s: 56px !important; }
  .gxp2 .gx-vit.st { width: 100%; max-width: 150px; height: 104px; }
  .gxp2 .gx-vit.st .rkw-th.gx-frth .pframe { --k: .62; }
  .gxp2 .gx-vit.st .rkw-sk i { width: 16px; height: 16px; } .gxp2 .gx-vit.st .rkw-sk b { height: 5px; }
}
.gx-vit.st > .rkw-th.gx-frth { max-width: none; max-height: none; align-self: stretch; justify-self: stretch; }

/* ===== étape 186 : les 10 niveaux d'un jeu en chemin doré (comme le passe de combat) ===== */
.gxq { list-style: none; margin: 4px 0 2px; padding: 6px 4px 8px; display: grid; gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.35fr) repeat(4, minmax(0, 1fr)) minmax(0, 1.35fr); }
.gxq-it { position: relative; display: grid; justify-items: center; align-content: start; gap: 8px; min-width: 0; }
/* le trait entre les médaillons : une moitié de chaque côté, doré quand le niveau est atteint */
.gxq-it::before, .gxq-it::after { content: ""; position: absolute; top: 13px; height: 4px; z-index: 0; background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .22); }
.gxq-it::before { left: -5px; right: 50%; } .gxq-it::after { left: 50%; right: -5px; }
.gxq-it:first-child::before, .gxq-it:last-child::after { display: none; }
.gxq-it.reach::before, .gxq-it.reach2::after { background: linear-gradient(90deg, #d6a83c, #f6dd98); box-shadow: 0 0 8px rgba(243, 210, 122, .35); }
/* le médaillon du niveau */
.gxq-n { position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 800; color: rgba(236, 229, 212, .78); background: #0f2a20; box-shadow: inset 0 0 0 1.5px rgba(214, 176, 102, .55); }
.gxq-it.reach .gxq-n { color: #1a1306; background: radial-gradient(circle at 35% 30%, #fff6d0, #f3d27a 50%, #c9952e); box-shadow: 0 2px 0 #8f6a2c; }
.gxq-it.done .gxq-n { color: #fff; background: radial-gradient(130% 110% at 30% 0%, #35b07a, #1d6b4b); box-shadow: inset 0 0 0 1.5px rgba(214, 176, 102, .6); }
.gxq-it.next .gxq-n { color: #f3d27a; box-shadow: inset 0 0 0 2px #e2b84f, 0 0 0 4px rgba(226, 184, 79, .18); }
/* la carte de la récompense */
.gxq-card { position: relative; width: 100%; display: grid; justify-items: center; align-content: start; gap: 3px; padding: 7px 7px 9px; border: 0; border-radius: 14px; cursor: pointer; font: inherit; color: var(--ink); text-align: center;
  background: linear-gradient(180deg, #fbf5e6, #efe4cc); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .5), 0 8px 16px -10px #000; transition: transform .2s var(--ease-out), box-shadow .2s; }
.gxq-card:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1.5px #e2b84f, 0 14px 22px -12px #000; }
.gxq-card:focus-visible { outline: 2px solid #e2b84f; outline-offset: 3px; }
.gxq-vit { width: 100%; height: 64px; margin-bottom: 3px; border-radius: 10px; display: grid; place-items: center; overflow: hidden; color: #f3d27a;
  background: radial-gradient(70% 80% at 50% 40%, rgba(243, 217, 149, .22), transparent 70%), radial-gradient(130% 110% at 30% 0%, #2a7356, var(--table-2) 70%); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .5); }
.gxq-vit > svg { width: 36px; height: 36px; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35)); }
.gxq-vit.k-badge .bdg { --s: 52px !important; }
.gxq-vit.k-item > * { max-width: 92%; max-height: 92%; }
.gxq-vit.k-item svg { max-height: 58px; }
.gxq-vit.st > .rkw-th.gx-frth { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; box-shadow: none; max-width: none; max-height: none; }
.gxq-vit.st .rkw-th.gx-frth > .pst-ft { inset: 13% 15% 14%; border-radius: 8px; --r: 8px; }
.gxq-vit.st .rkw-th.gx-frth .pframe { --k: .58; }
.gxq-vit.st .rkw-sk { inset: 13% 15% 14%; gap: 4px 6px; padding: 0 13%; }
.gxq-vit.st .rkw-sk i { width: 14px; height: 14px; } .gxq-vit.st .rkw-sk b { height: 4px; }
.gxq-vit.st > :not(.rkw-th) { width: 100%; height: 100%; }
.gxq-card:hover .gxq-vit.st .rkw-th.fr > .pst-ft { animation: rkwFr 1.6s ease-in-out infinite; }
.gxq-t { font: 800 14.5px/1.15 var(--display); font-variation-settings: "wdth" 88; color: var(--ink); overflow-wrap: anywhere; }
.gxq-s { font-size: 11.5px; line-height: 1.25; font-weight: 700; color: #8f6a2c; overflow-wrap: anywhere; }
.gxq-ok { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #2ea06e; box-shadow: 0 0 0 2px #fbf5e6, 0 3px 6px -2px rgba(0, 0, 0, .5); }
.gxq-ok svg { width: 13px; height: 13px; }
.gxq-lk { position: absolute; top: 11px; right: 11px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; color: rgba(236, 229, 212, .85); background: rgba(0, 0, 0, .45); }
.gxq-lk svg { width: 11px; height: 11px; }
/* les états */
.gxq-it.done .gxq-vit > * { filter: saturate(.75); }
.gxq-it.lock .gxq-card { opacity: .8; }
.gxq-it.lock .gxq-vit > * { filter: grayscale(.3) brightness(.92); }
.gxq-it.ready .gxq-card { box-shadow: inset 0 0 0 2.5px #e2b84f, 0 0 0 4px rgba(243, 210, 122, .25), 0 10px 20px -10px #000; }
.gxq-it.big .gxq-card { box-shadow: inset 0 0 0 1.5px #c9952e, inset 0 0 0 4px #fbf5e6, inset 0 0 0 5px rgba(201, 149, 46, .55), 0 8px 16px -10px #000; padding: 9px 9px 11px; }
.gxq-it.big.ready .gxq-card { box-shadow: inset 0 0 0 2.5px #e2b84f, inset 0 0 0 5px #fbf5e6, inset 0 0 0 6px rgba(201, 149, 46, .55), 0 0 0 4px rgba(243, 210, 122, .25), 0 10px 20px -10px #000; }
.gxq-it.big .gxq-vit { height: 82px; }
.gxq-it.big .gxq-t { font-size: 15.5px; }
.gxq-start { cursor: default; }
.gxq-start:hover { transform: none; box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .5), 0 8px 16px -10px #000; }
.gxq-start .gxq-vit { color: rgba(236, 229, 212, .8); } .gxq-start .gxq-vit svg { width: 22px; height: 22px; }
/* « Récupérer » */
.gxq-claim { height: 30px; padding: 0 13px; border: 0; border-radius: 99px; cursor: pointer; font: 700 12.5px/1 var(--body); color: #fff; background: radial-gradient(130% 110% at 30% 0%, #35b07a, #1d6b4b); box-shadow: 0 3px 0 #0f3a28, 0 8px 14px -8px #000; animation: gxqPulse 2.2s ease-in-out infinite; }
.gxq-claim:hover { transform: translateY(-1px); }
.gxq-claim:disabled { opacity: .6; animation: none; }
@keyframes gxqPulse { 50% { box-shadow: 0 3px 0 #0f3a28, 0 0 0 5px rgba(53, 176, 122, .25); } }
.gxq-wait { font-size: 11.5px; font-weight: 700; color: rgba(236, 229, 212, .6); }
.gxq-it.gx-open .gxq-card { animation: gxOpen .7s cubic-bezier(.3, 1.6, .5, 1); }
.gxq-it .gx-burst { top: 80px; }
/* sur téléphone et petit écran : la rangée défile */
@media (max-width: 899px) {
  .gxq { grid-template-columns: repeat(4, 98px) 128px repeat(4, 98px) 128px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) { .gxq-claim, .gxq-it.gx-open .gxq-card { animation: none; } .gxq-card { transition: none; } .gxq-card:hover { transform: none; } }

/* ===== étape 187 : donner un objet du catalogue ===== */
.apz-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.gvx { display: grid; gap: 12px; }
.gvx-f { display: grid; gap: 5px; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.gvx-f small { font-weight: 600; color: var(--ink-2); }
.gvx .inp { height: 46px; color: var(--ink); background: #fffaf0; box-shadow: inset 0 0 0 1px rgba(143, 106, 44, .4); }
.gvx .inp:focus { color: var(--ink); background: #fffaf0; box-shadow: inset 0 0 0 2px #e2b84f; }
.gvx .inp::placeholder { color: rgba(26, 22, 17, .42); }
.gvmodal .dl-vit > * { max-width: 100%; max-height: 100%; }

/* ===== étape 188 : tout remettre à zéro (régie › Sauvegarde) ===== */
.rz-zone { display: grid; gap: 14px; margin-top: 12px; }
.rz-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.rz-cols > div { padding: 12px 14px; border-radius: 14px; background: rgba(0, 0, 0, .18); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .22); }
.rz-cols ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13.5px; color: rgba(236, 229, 212, .85); }
.rz-k { display: inline-flex; padding: 3px 10px; border-radius: 99px; font-size: 12.5px; }
.rz-off { color: #fff; background: #b8402f; } .rz-on { color: #fff; background: #2ea06e; }

/* ===== étape 189 : le prix de la Cheese en pourcentage (régie › Monnaie) ===== */
.amx { display: grid; gap: 12px; }
.amx-now { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 12px 14px; border-radius: 14px; background: rgba(0, 0, 0, .2); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .3); }
.amx-k { font-size: 12.5px; font-weight: 700; color: rgba(236, 229, 212, .65); }
.amx-now > b { font: 800 20px/1 var(--display); color: #f3d27a; }
.amx-pct { padding: 3px 10px; border-radius: 99px; font-size: 13px; font-weight: 800; color: #1a1306; background: linear-gradient(180deg, #f6dd98, #d6a83c); }
.amx-set { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 13px; font-weight: 700; color: var(--chalk); flex-wrap: wrap; }
.amx-set .inp { width: 76px; height: 34px; padding: 0 8px; text-align: center; }

/* ===== étape 190 : Rats Immo, la ville des rats (classes « rx ») ===== */
.rxtable { --rx-b: min(calc(100dvh - var(--nav-h) - 110px), calc(100vw - 400px), 860px); --rx-felt: #1d5a41; --rx-felt2: #12402d; --rx-card: #f4ead3; --rx-card2: #e9dcbd;
  position: relative; min-height: calc(100dvh - var(--nav-h) - 28px); display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 10px; padding-bottom: 18px; isolation: isolate; overflow: clip;
  color: var(--chalk); border-radius: 22px 22px 0 0;
  background: radial-gradient(70% 60% at 50% 40%, rgba(214, 176, 102, .14), transparent 70%), repeating-linear-gradient(45deg, rgba(255, 255, 255, .018) 0 2px, transparent 2px 7px), linear-gradient(180deg, #164a35, #0d3021); }
.rxtable.rx-d-nuit { --rx-felt: #173a4a; --rx-felt2: #0d2433; --rx-card: #ebe3cf; --rx-card2: #dacfb2; background: radial-gradient(60% 50% at 50% 30%, rgba(120, 160, 220, .16), transparent 70%), radial-gradient(1.5px 1.5px at 12% 18%, #ffffff88, transparent), radial-gradient(1.5px 1.5px at 82% 12%, #ffffff88, transparent), radial-gradient(1px 1px at 64% 30%, #ffffff66, transparent), radial-gradient(1px 1px at 30% 8%, #ffffff66, transparent), linear-gradient(180deg, #102638, #08141f); }
.rxtable.rx-d-hiver { --rx-felt: #2b5f66; --rx-felt2: #1b4248; --rx-card: #f7f3eb; --rx-card2: #e3ddd0; background: radial-gradient(60% 50% at 50% 30%, rgba(255, 255, 255, .16), transparent 70%), linear-gradient(180deg, #24525a, #12333a); }
.rxbar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; column-gap: 12px; padding-block: 12px 0; }
.rxbar > :first-child { justify-self: start; }
.rxbar .btn.xs { background: rgba(0, 0, 0, .3); color: var(--chalk); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .35); }
.rxname { grid-column: 2; display: flex; flex-direction: column; align-items: center; gap: 3px; line-height: 1.05; text-align: center; }
.rxname b { font-size: clamp(20px, 2.4vw, 28px); color: #f3d27a; }
.rxname .mono { font-size: 11px; letter-spacing: .14em; opacity: .7; }
.rxstatus { font-weight: 700; font-size: 14px; color: var(--chalk); padding: 6px 12px; border-radius: 99px; background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.rxmain { display: grid; grid-template-columns: auto minmax(260px, 320px); gap: 18px; align-items: start; justify-content: center; } /* (remplacé à l'étape 194, plus bas) */
.rxboard-wrap { padding: 12px; border-radius: 22px; background: linear-gradient(145deg, #6b4a26, #3d2912 60%, #5a3d1d); box-shadow: inset 0 0 0 2px #c9a35a, inset 0 0 0 5px #2a1c0c, 0 30px 60px -24px #000; }
.rxboard { position: relative; width: var(--rx-b); aspect-ratio: 1; display: grid; grid-template-columns: 1.45fr repeat(7, 1fr) 1.45fr; grid-template-rows: 1.45fr repeat(7, 1fr) 1.45fr; gap: 3px; container-type: inline-size; }
.rx-cell { position: relative; display: flex; flex-direction: column; align-items: stretch; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 6px; overflow: hidden; cursor: pointer; font: inherit; color: var(--ink);
  background: linear-gradient(180deg, var(--rx-card), var(--rx-card2)); box-shadow: inset 0 0 0 1px rgba(90, 70, 48, .35), 0 2px 0 rgba(0, 0, 0, .25); transition: transform .15s, box-shadow .15s; }
.rx-cell:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px #c9952e, 0 6px 14px -6px #000; z-index: 2; }
.rx-cell:focus-visible { outline: 2px solid #f3d27a; outline-offset: 1px; z-index: 3; }
.rx-cell.rx-left { flex-direction: row-reverse; }
.rx-cell.rx-right { flex-direction: row; }
.rx-cell.rx-top { flex-direction: column-reverse; }
.rx-band { position: relative; flex: 0 0 24%; display: flex; align-items: center; justify-content: center; background: var(--dc); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .2); }
.rx-left .rx-band, .rx-right .rx-band { box-shadow: inset -2px 0 0 rgba(0, 0, 0, .2); }
.rx-hs { display: flex; flex-wrap: wrap; justify-content: center; gap: 1px; }
.rx-hs svg { width: clamp(9px, 2.1cqi, 17px); height: auto; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .4)); }
.rx-left .rx-hs, .rx-right .rx-hs { flex-direction: column; }
.rx-ct { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 2px; padding: 3px 2px 4px; }
.rx-left .rx-ct, .rx-right .rx-ct { justify-content: center; padding: 2px 4px; }
.rx-cell .rx-cn { max-width: 100%; font: 700 clamp(8.5px, 1.5cqi, 13px)/1.12 var(--body); text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; hyphens: auto; }
.rx-cp { text-align: center; font: 800 clamp(8px, 1.4cqi, 12.5px)/1 var(--body); color: #5a4630; }
.rx-ct .rx-ci.sm { flex: 0 1 auto; padding: 0; }
.rx-m { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.rx-ecu { width: 1.05em; height: 1.05em; flex: none; }
.rx-ci { display: grid; place-items: center; flex: 1; min-height: 0; padding: 2px; }
.rx-ci svg { width: 60%; max-width: 64px; height: auto; }
.rx-ci.sm svg { width: 46%; max-width: 30px; min-width: 16px; }
.rx-corner { justify-content: center; background: linear-gradient(160deg, #f8efd8, #e6d3a8); box-shadow: inset 0 0 0 2px #c9952e, inset 0 0 0 4px rgba(255, 255, 255, .4), 0 2px 0 rgba(0, 0, 0, .25); }
.rx-corner .rx-cn { font-family: var(--display); font-size: clamp(8px, 1.5cqi, 14px); color: #3d2912; padding-bottom: 6px; }
.rx-k-start { background: linear-gradient(160deg, #eaf6ec, #c9e6cf); }
.rx-k-gojail .rx-cn, .rx-k-jail .rx-cn { color: #6a1f17; }
.rx-cell.owned { box-shadow: inset 0 0 0 2px var(--oc), 0 2px 0 rgba(0, 0, 0, .25); }
.rx-own { position: absolute; right: 3px; bottom: 3px; pointer-events: none; line-height: 0; }
.rx-top .rx-own { top: 3px; bottom: auto; }
.rx-left .rx-own { left: 3px; right: auto; }
.rx-ownd { display: block; width: clamp(7px, 1.2cqi, 11px); aspect-ratio: 1; border-radius: 50%; background: var(--oc); box-shadow: 0 0 0 1.5px #fff, 0 1px 3px rgba(0, 0, 0, .5); }
.rx-cell.can-build { animation: rxBuild 1.6s ease-in-out infinite; z-index: 2; }
@keyframes rxBuild { 50% { box-shadow: inset 0 0 0 2px #f3d27a, 0 0 0 3px rgba(243, 210, 122, .55), 0 0 18px rgba(243, 210, 122, .7); } }
.rx-cell.rx-flash { animation: rxFlash .9s ease-out; z-index: 3; }
@keyframes rxFlash { 0% { box-shadow: 0 0 0 0 rgba(243, 210, 122, .9), inset 0 0 0 3px #f3d27a; transform: scale(1.08); } 100% { box-shadow: 0 0 0 16px rgba(243, 210, 122, 0); transform: none; } }
/* le centre : le tapis vert */
.rxcenter { grid-row: 2 / 9; grid-column: 2 / 9; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(6px, 1.4cqi, 14px); margin: 6px; padding: 12px; border-radius: 16px; overflow: hidden; text-align: center;
  background: radial-gradient(80% 70% at 50% 35%, var(--rx-felt), var(--rx-felt2)); box-shadow: inset 0 0 0 2px rgba(214, 176, 102, .55), inset 0 0 0 7px rgba(0, 0, 0, .18), inset 0 0 0 8px rgba(214, 176, 102, .25), inset 0 0 60px rgba(0, 0, 0, .45); }
.rxcenter::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .02) 0 2px, transparent 2px 6px); pointer-events: none; }
.rx-city { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: auto; opacity: .5; pointer-events: none; }
.rx-city .w { fill: #f3d27a; animation: rxWin 5s ease-in-out infinite; }
.rx-city .w:nth-child(3n) { animation-delay: -2s; }
.rx-city .w:nth-child(4n) { animation-delay: -3.4s; }
@keyframes rxWin { 0%, 100% { opacity: .9; } 50% { opacity: .25; } }
.rx-logo { position: relative; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.rx-logo b { font-size: clamp(18px, 4.4cqi, 44px); color: #f3d27a; text-shadow: 0 2px 0 #3d2912, 0 0 24px rgba(243, 210, 122, .35); }
.rx-logo small { margin-top: 4px; font-size: clamp(9px, 1.4cqi, 13px); color: rgba(240, 233, 216, .72); font-weight: 600; }
.rx-dice { position: relative; display: flex; gap: clamp(8px, 1.6cqi, 16px); }
.rx-die { width: clamp(34px, 7cqi, 64px); aspect-ratio: 1; display: grid; grid-template: repeat(3, 1fr) / repeat(3, 1fr); padding: 14%; gap: 6%; border-radius: 22%;
  background: linear-gradient(145deg, #fffaf0, #e7dac0); box-shadow: inset 0 -3px 0 rgba(90, 70, 48, .3), inset 0 0 0 1px rgba(90, 70, 48, .25), 0 6px 0 #8a6a3c, 0 12px 18px -6px #000; }
.rx-die i { border-radius: 50%; }
.rx-die i.on { background: radial-gradient(circle at 35% 35%, #5a4630, #1a1611); }
.rx-die.rolling { animation: rxRoll .14s linear infinite; }
.rx-die.rolling:nth-child(2) { animation-direction: reverse; }
@keyframes rxRoll { 0% { transform: rotate(-14deg) translateY(-4px); } 50% { transform: rotate(12deg) translateY(2px); } 100% { transform: rotate(-14deg) translateY(-4px); } }
.rx-say { position: relative; max-width: 92%; min-height: 2.4em; font-size: clamp(12px, 1.9cqi, 17px); line-height: 1.3; color: var(--chalk); }
.rx-say b { color: #f3d27a; }
.rx-timer { position: relative; width: min(70%, 260px); height: 5px; border-radius: 99px; background: rgba(0, 0, 0, .3); overflow: hidden; }
.rx-timer i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #d6a83c, #f3d27a); transition: width .25s linear; }
.rx-timer.low i { background: linear-gradient(90deg, #c0392b, #e0533d); }
.rx-acts { position: relative; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; min-height: 44px; }
.rx-acts .btn { gap: 8px; }
.rx-acts .rx-ecu { width: 18px; height: 18px; }
.rx-acts .btn.rx-roll, .rx-acts .btn.rx-buy { animation: rxPulse 1.8s ease-in-out infinite; }
@keyframes rxPulse { 50% { filter: brightness(1.08); } }
.rx-acts .btn.ghost { color: var(--chalk); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .6); background: rgba(0, 0, 0, .2); }
.rx-extra { position: relative; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.rx-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px; font-size: 12.5px; font-weight: 700; color: var(--chalk); background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .35); }
.rx-pill .num { color: #f3d27a; }
/* les souris sur le plateau */
.rx-toks, .rx-fx { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.rx-tok { position: absolute; translate: -50% -50%; transition: left .15s ease-out, top .15s ease-out; border-radius: 50%; box-shadow: 0 0 0 2.5px var(--pc), 0 0 0 4px #fff, 0 6px 10px -2px rgba(0, 0, 0, .6); background: #fff; line-height: 0; }
.rx-tok > .av { --s: clamp(16px, 2.9cqi, 28px) !important; width: var(--s); height: var(--s); }
.rx-tok .pbadge { display: none; } /* (étape 191 : le petit micro reste dans la liste des joueurs : couper, profil, signaler) */
.rx-pn > b { cursor: pointer; }
.rx-tok.turn { z-index: 2; animation: rxTok 1.2s ease-in-out infinite; }
@keyframes rxTok { 50% { box-shadow: 0 0 0 2.5px var(--pc), 0 0 0 4px #f3d27a, 0 0 18px 6px rgba(243, 210, 122, .65); } }
.rx-float { position: absolute; translate: -50% -50%; font: 800 clamp(12px, 2cqi, 18px)/1 var(--display); padding: 3px 8px; border-radius: 99px; white-space: nowrap; animation: rxFloat 1.5s ease-out forwards; box-shadow: 0 4px 10px -4px #000; }
.rx-float.up { color: #1a1306; background: linear-gradient(180deg, #f6dd98, #d6a83c); }
.rx-float.down { color: #fff; background: linear-gradient(180deg, #e0533d, #a8281c); }
@keyframes rxFloat { 0% { opacity: 0; transform: translateY(6px) scale(.8); } 15% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-44px); } }
.rx-cardpop { position: absolute; inset: 0; display: grid; place-items: center; z-index: 5; background: rgba(8, 24, 16, .45); perspective: 800px; }
.rx-cardin { width: min(80%, 300px); padding: 16px 16px 12px; border-radius: 14px; color: var(--ink); background: linear-gradient(170deg, #fbf3df, #ecdcb6); box-shadow: inset 0 0 0 2px #c9952e, inset 0 0 0 6px rgba(255, 255, 255, .4), 0 20px 40px -12px #000; }
.rx-ck { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border-radius: 99px; font: 800 13px/1 var(--display); color: #f3d27a; background: #2a7356; }
.rx-ck svg { width: 20px; height: 20px; }
.rx-cardin p { margin: 10px 0 6px; font-size: clamp(14px, 2.2cqi, 17px); font-weight: 700; line-height: 1.3; }
.rx-cardin small { color: #8f6a2c; font-weight: 700; }
/* étape 193 : « Continuer » et le temps qu'il reste pour lire (10 s au plus) */
.rx-cardin { display: grid; justify-items: center; gap: 2px; }
.rx-cardin .btn.rx-cgo:not(.ghost) { margin-top: 10px; color: var(--chalk); background: linear-gradient(180deg, #2f8a64, #1d5a41); background-image: linear-gradient(180deg, #2f8a64, #1d5a41); box-shadow: inset 0 0 0 1px rgba(243, 210, 122, .5), 0 4px 0 #0f3a28, 0 10px 18px -8px #000; }
.rx-cbar { width: 70%; height: 4px; margin-top: 10px; border-radius: 99px; background: rgba(143, 106, 44, .22); overflow: hidden; }
.rx-cbar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #d6a83c, #f3d27a); transform-origin: left; animation: rxRead linear forwards; }
@keyframes rxRead { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .rx-cbar { display: none; } }
/* le côté : les joueurs, mes terrains, ce qui s'est passé */
.rxside { display: grid; gap: 12px; align-content: start; max-height: calc(var(--rx-b) + 24px); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.rx-sec { padding: 12px; border-radius: 16px; color: var(--ink); background: linear-gradient(180deg, #f6ecd5, #ead9b4); box-shadow: inset 0 0 0 1px rgba(143, 106, 44, .45), 0 10px 24px -14px #000; }
.rx-h { margin: 0 0 8px; display: flex; align-items: center; gap: 8px; font: 800 15px/1.1 var(--display); color: #3d2912; }
.rx-h::before { content: ""; width: 8px; height: 8px; transform: rotate(45deg); background: #c9952e; border-radius: 1px; }
.rx-players { display: grid; gap: 6px; }
.rx-pl { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 12px; background: rgba(255, 255, 255, .45); box-shadow: inset 4px 0 0 var(--pc), inset 0 0 0 1px rgba(143, 106, 44, .2); transition: background .2s; }
.rx-pl.turn { background: #fff8e6; box-shadow: inset 4px 0 0 var(--pc), inset 0 0 0 2px #d6a83c, 0 4px 12px -6px rgba(143, 106, 44, .8); }
.rx-pl.out { opacity: .5; filter: grayscale(.8); }
.rx-pav { line-height: 0; border-radius: 50%; box-shadow: 0 0 0 2px var(--pc); }
.rx-pn { min-width: 0; display: grid; }
.rx-pn b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rx-pn small { font-size: 11.5px; color: #6b5a40; font-weight: 600; }
.rx-pmoney { padding: 4px 9px; border-radius: 99px; background: #1f2a22; color: #f3d27a; font-weight: 800; font-size: 13.5px; box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .45); }
.rx-mine { display: grid; gap: 8px; }
.rx-none { margin: 0; font-size: 13px; color: #6b5a40; }
.rx-grp { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; padding-left: 9px; box-shadow: inset 3px 0 0 var(--dc); }
.rx-gn { flex-basis: 100%; font-size: 12px; font-weight: 800; color: #5a4630; }
.rx-full { font-style: normal; padding: 1px 7px; border-radius: 99px; background: #2a7356; color: #f3d27a; font-size: 11px; }
.rx-chip { display: grid; padding: 4px 9px; border: 0; border-radius: 10px; cursor: pointer; text-align: left; font: inherit; color: var(--ink); background: #fffaf0; box-shadow: inset 0 0 0 1px rgba(143, 106, 44, .35), inset 0 3px 0 var(--oc, var(--dc)); }
.rx-chip span { font-size: 12.5px; font-weight: 700; }
.rx-chip small { font-size: 11px; color: #6b5a40; }
.rx-chip.can-build { box-shadow: inset 0 0 0 2px #d6a83c, inset 0 3px 0 var(--dc); background: #fff3cf; }
.rx-chip:hover { background: #fff; }
.rx-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 12.5px; line-height: 1.35; }
.rx-log li { padding: 4px 8px; border-radius: 8px; background: rgba(255, 255, 255, .4); box-shadow: inset 3px 0 0 var(--pc); }
.rx-log li:first-child { background: #fffaf0; font-weight: 600; }
.rx-log b { color: #3d2912; }
/* la fiche d'une case */
.rxmodal .rx-dv { display: block; width: 46px; height: 46px; border-radius: 12px; background: var(--dc); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .2), 0 0 0 3px #f3d27a; }
.rxmodal .dl-vit svg { width: 46px; height: 46px; }
.rx-rents { width: 100%; border-collapse: separate; border-spacing: 0 4px; color: var(--ink); }
.rx-rents td { padding: 6px 10px; background: #fbf3df; font-size: 14px; }
.rx-rents td:first-child { border-radius: 10px 0 0 10px; font-weight: 600; }
.rx-rents td:last-child { border-radius: 0 10px 10px 0; text-align: right; font-weight: 800; color: #5a4630; }
.rx-rents tr.on td { background: #2a7356; color: var(--chalk); }
.rx-rents tr.on td:last-child { color: #f3d27a; }
.rx-ctxt { margin: 10px 0; font-size: 14px; line-height: 1.45; color: var(--ink); }
.rxmodal .dl-go { width: 100%; justify-content: center; gap: 8px; margin-top: 6px; }
.rxend .rx-rw { margin-left: auto; font-weight: 800; }
@media (max-width: 1000px) {
  .rxtable { --rx-b: max(min(calc(100vw - 48px), calc(100dvh - var(--nav-h) - 150px), 760px), min(calc(100vw - 48px), 340px)); } /* (étape 191 : jamais minuscule en paysage) */
  .rxmain { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .rxside { width: min(100%, calc(var(--rx-b) + 24px)); max-height: none; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}
@media (max-width: 640px) {
  .rxtable { --rx-b: calc(100vw - 36px); border-radius: 16px 16px 0 0; }
  .rxboard-wrap { padding: 6px; border-radius: 14px; }
  .rxboard { gap: 2px; }
  .rxbar .barend { grid-column: 1 / -1; grid-row: 2; justify-self: center; margin-top: 6px; }
  .rx-logo, .rx-city { display: none; }
  .rxcenter { margin: 3px; padding: 6px; }
}
@container (max-width: 520px) {
  .rxcenter { gap: 4px; padding: 4px; justify-content: space-evenly; }
  .rx-acts { gap: 6px; min-height: 0; }
  .rx-acts .btn { height: 34px; padding: 0 12px; font-size: 13px; }
  .rx-acts .rx-ecu { width: 14px; height: 14px; }
  .rx-say { font-size: 12px; min-height: 0; }
  .rx-pill { font-size: 11px; padding: 2px 8px; }
  .rx-timer { height: 4px; }
  .rx-cell:not(.rx-corner) .rx-cn { display: none; }
  .rx-cell:not(.rx-corner) .rx-ci.sm svg { width: 70%; }
  .rx-band { flex-basis: 32%; }
  .rx-corner .rx-cn { font-size: 7px; padding-bottom: 2px; }
}
@media (prefers-reduced-motion: reduce) { .rx-cell.can-build, .rx-tok.turn, .rx-acts .btn, .rx-city .w { animation: none; } .rx-tok { transition: none; } }
/* étape 190 : Rats Immo — la page du jeu, son image, sa transition, son objet sur l'écran d'entrée, son badge */
.immo-title { color: #f3d27a; text-shadow: 0 0 50px rgba(243, 210, 122, .3); letter-spacing: -.03em; }
.immo-title span { color: var(--chalk); }
.mini-ic.immini { background: radial-gradient(circle at 50% 40%, #2a6a4c, #0f3324 75%); padding: 12px; }
.gart.immo { background: #0f3324; overflow: hidden; }
.gart.immo .im-scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.gart.immo .im-w { fill: #ffd86a; animation: imWin 4.6s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes imWin { 0%, 100% { opacity: .95; } 45% { opacity: .3; } 55% { opacity: .3; } }
.gart.immo .im-sun { transform-box: fill-box; transform-origin: center; animation: imSun 6s ease-in-out infinite; }
@keyframes imSun { 50% { transform: scale(1.12); opacity: .8; } }
.gart.immo .im-tok { transform-box: fill-box; transform-origin: 50% 100%; animation: imTok 1.8s ease-in-out infinite; }
@keyframes imTok { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-12px) scale(1.04); } }
.gart.immo .im-d1, .gart.immo .im-d2 { transform-box: fill-box; transform-origin: center; animation: imDie 3.2s cubic-bezier(.3, .7, .3, 1) infinite; }
.gart.immo .im-d2 { animation-delay: -.25s; }
@keyframes imDie { 0% { transform: translate(-60px, -70px) rotate(-260deg); opacity: 0; } 18% { opacity: 1; } 40% { transform: none; } 48% { transform: translateY(-8px) rotate(6deg); } 56%, 92% { transform: none; opacity: 1; } 100% { transform: none; opacity: 0; } }
.gart.immo .im-glint { transform-box: fill-box; transform-origin: center; animation: imGlint 2.4s ease-in-out infinite; }
@keyframes imGlint { 0%, 70%, 100% { transform: scale(0); opacity: 0; } 82% { transform: scale(1.4) rotate(45deg); opacity: 1; } }
/* la transition « la ville se construit » */
.im-tx { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(70% 60% at 50% 45%, #1f5c42, #0b2a1d); }
.im-txb { position: relative; width: min(84vmin, 760px); aspect-ratio: 1; display: grid; grid-template-columns: 1.45fr repeat(7, 1fr) 1.45fr; grid-template-rows: 1.45fr repeat(7, 1fr) 1.45fr; gap: 4px; }
.im-tt { border-radius: 6px; background: linear-gradient(180deg, #f4ead3, #e6d6b2); box-shadow: inset 0 calc(min(84vmin, 760px) / 60) 0 var(--c), 0 4px 0 rgba(0, 0, 0, .3); }
.im-tt.cn { box-shadow: inset 0 0 0 3px #c9952e, 0 4px 0 rgba(0, 0, 0, .3); background: linear-gradient(160deg, #f8efd8, #e6d3a8); }
.im-txc { grid-row: 2 / 9; grid-column: 2 / 9; margin: 8px; border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4vmin;
  background: radial-gradient(80% 70% at 50% 35%, #1d5a41, #12402d); box-shadow: inset 0 0 0 3px rgba(214, 176, 102, .6), inset 0 0 60px rgba(0, 0, 0, .45); }
.im-txt { font-size: clamp(42px, 9vmin, 110px); line-height: .9; color: #f3d27a; text-shadow: 0 4px 0 #3d2912, 0 0 40px rgba(243, 210, 122, .4); }
.im-txt em { font-style: normal; color: var(--chalk); }
.im-txd { display: flex; gap: 3vmin; }
.im-txd .rx-die { width: clamp(44px, 9vmin, 92px); }
/* l'objet de Rats Immo sur l'écran d'entrée */
.gi-im { --x: 86%; --y: 35%; }
.gi-immo { position: relative; width: 140px; height: 124px; }
.gi-house { position: absolute; left: 0; top: 0; width: 104px; }
.gi-house svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .45)); }
.gi-dice { position: absolute; right: -6px; bottom: -4px; width: 74px; animation: gDice 3.6s ease-in-out infinite; }
.gi-dice svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .5)); }
@keyframes gDice { 0%, 100% { transform: rotate(0); } 20% { transform: translateY(-14px) rotate(-18deg); } 34% { transform: rotate(8deg); } 44% { transform: none; } }
@media (min-width: 1300px) { .gi-im { --x: 85%; } }
@media (max-width: 900px) { .gi-im { --x: 36%; --y: 86%; } }
/* le badge du niveau 10 */
.bdg-svg .b-house, .bdg-svg .b-key, .bdg-svg .b-die { transform-box: view-box; }
.bdg-svg .b-house { transform-origin: 60px 98px; animation: bHouse 4s ease-in-out infinite; }
.bdg-svg .b-key { transform-origin: 24px 44px; animation: bKey 3.2s ease-in-out infinite; }
.bdg-svg .b-die { transform-origin: 96px 100px; animation: bDie 3.6s ease-in-out infinite; }
@keyframes bHouse { 50% { transform: scale(1.03) translateY(-1px); } }
@keyframes bKey { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-14deg); } }
@keyframes bDie { 0%, 60%, 100% { transform: none; } 75% { transform: translateY(-6px) rotate(-20deg); } }
@media (prefers-reduced-motion: reduce) { .gart.immo *, .gi-dice, .bdg-svg .b-house, .bdg-svg .b-key, .bdg-svg .b-die { animation: none !important; } }
/* étape 192 : une partie qui ne rapporte rien (trop courte, limite de l'heure) ou une part réduite : on le dit */
.endbox .endxp.none .ex-lv { width: 44px; height: 44px; }
.endbox .endxp.none .ex-lv svg { width: 22px; height: 22px; }
.endbox .endxp.none small { font-size: 13.5px; line-height: 1.4; font-weight: 600; }
.ex-short { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #6b5a40; }
.ex-short svg { width: 15px; height: 15px; flex: none; color: #8f6a2c; }

/* ===== étape 194 : Rats Immo — mes terrains | les joueurs | le plateau | ce qui s'est passé ===== */
.rxtable { --rx-b: min(calc(100dvh - var(--nav-h) - 110px), calc(100vw - 800px), 860px); }
.rxmain { grid-template-columns: 210px 220px auto minmax(240px, 290px); grid-template-areas: "mine ppl board log"; gap: 14px; padding-inline: 14px; }
.rxmine-col { grid-area: mine; } .rxppl { grid-area: ppl; } .rxboard-wrap { grid-area: board; } .rxside { grid-area: log; }
.rxmine-col, .rxppl, .rxside { max-height: calc(var(--rx-b) + 24px); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.rxmine-col .rx-sec { min-height: 100%; }
.rx-minesec .rx-grp { flex-direction: column; align-items: stretch; }
.rx-minesec .rx-chip { width: 100%; }
/* les joueurs : une carte crème chacun, son personnage sur une petite vitrine verte, rien ne déborde sur les autres */
.rxppl { display: grid; gap: 8px; align-content: start; padding: 10px; border-radius: 18px; background: rgba(0, 0, 0, .2); box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .35); }
.rx-pc { position: relative; display: grid; grid-template-columns: 66px minmax(0, 1fr); align-items: center; gap: 9px; min-height: 90px; padding: 6px 10px 6px 6px; border-radius: 14px; overflow: clip; color: var(--ink);
  background: linear-gradient(180deg, #f6ecd5, #ead9b4); box-shadow: inset 5px 0 0 var(--pc), inset 0 0 0 1px rgba(143, 106, 44, .45), 0 8px 16px -10px #000; transition: box-shadow .25s, transform .25s; }
.rx-pfig { position: relative; width: 66px; height: 82px; display: grid; place-items: end center; overflow: hidden; border-radius: 11px; background: radial-gradient(90% 80% at 50% 30%, #2a6a4c, #12402d); box-shadow: inset 0 0 0 2px var(--pc), inset 0 -10px 18px rgba(0, 0, 0, .3); }
.rx-pfig > .pav { margin-bottom: 2px; }
.rx-pinfo { min-width: 0; display: grid; gap: 2px; }
.rx-pnm { font: 800 15px/1.15 var(--display); color: #2a1d10; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.rx-pnm::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 6px; vertical-align: 1px; border-radius: 50%; background: var(--pc); box-shadow: 0 0 0 1.5px #fff, 0 1px 2px rgba(0, 0, 0, .4); }
.rx-pc .rx-pmoney { justify-self: start; padding: 3px 9px; border-radius: 99px; background: #1f2a22; color: #f3d27a; font-weight: 800; font-size: 14px; box-shadow: inset 0 0 0 1px rgba(214, 176, 102, .45); }
.rx-pst { font-size: 11.5px; font-weight: 700; color: #6b5a40; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rx-pown { font-size: 11.5px; color: #6b5a40; }
.rx-pc.turn { box-shadow: inset 5px 0 0 var(--pc), inset 0 0 0 2px #d6a83c, 0 0 0 3px rgba(243, 210, 122, .35), 0 10px 22px -10px rgba(214, 168, 60, .9); transform: translateX(4px); }
.rx-pc.turn .rx-pst { color: #8f6a2c; }
.rx-pc.out { filter: grayscale(.85); opacity: .55; }
.rx-pc.out .rx-pmoney { background: #6b5a40; color: #f4ead3; }
@media (prefers-reduced-motion: reduce) { .rx-pc { transition: none; } .rx-pc.turn { transform: none; } }
/* écran moyen : les joueurs à gauche du plateau, « Ce qui s'est passé » à droite, mes terrains sous les joueurs */
@media (max-width: 1400px) {
  .rxtable { --rx-b: min(calc(100dvh - var(--nav-h) - 110px), calc(100vw - 590px), 860px); }
  .rxmain { grid-template-columns: 210px auto minmax(220px, 260px); grid-template-areas: "ppl board log" "mine board log"; grid-template-rows: auto 1fr; }
  .rxppl { max-height: calc((var(--rx-b) + 24px) * .62); }
  .rxmine-col { max-height: calc((var(--rx-b) + 24px) * .38 - 14px); }
}
/* tablette : le plateau, puis les joueurs et mes terrains côte à côte, puis le journal */
@media (max-width: 1000px) {
  .rxtable { --rx-b: max(min(calc(100vw - 48px), calc(100dvh - var(--nav-h) - 150px), 760px), min(calc(100vw - 48px), 340px)); }
  .rxmain { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "board board" "ppl mine" "log log"; grid-template-rows: none; justify-items: stretch; }
  .rxboard-wrap { justify-self: center; }
  .rxmine-col, .rxppl, .rxside { max-height: none; width: auto; }
  .rxppl { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
}
/* téléphone : les joueurs en rangée qu'on fait glisser, puis mes terrains, puis le journal */
@media (max-width: 640px) {
  .rxmain { grid-template-columns: minmax(0, 1fr); grid-template-areas: "board" "ppl" "mine" "log"; padding-inline: 8px; }
  .rxppl { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 196px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; }
  .rx-pc { scroll-snap-align: start; }
}
/* étape 194 : de la place à droite pour les languettes Tchat / Vocal / Emotes (elles ne cachent plus le journal) */
@media (min-width: 1001px) {
  .rxmain { padding-right: 76px; }
  .rxtable { --rx-b: min(calc(100dvh - var(--nav-h) - 110px), calc(100vw - 860px), 860px); }
}
@media (min-width: 1001px) and (max-width: 1400px) { .rxtable { --rx-b: min(calc(100dvh - var(--nav-h) - 110px), calc(100vw - 650px), 860px); } }
/* ===== étape 195 : « Mes terrains » refait (une carte par quartier), construire depuis le milieu du plateau ===== */
@media (min-width: 1401px) { .rxmain { grid-template-columns: 260px 220px auto minmax(240px, 280px); } }
@media (min-width: 1001px) { .rxtable { --rx-b: min(calc(100dvh - var(--nav-h) - 110px), calc(100vw - 930px), 860px); } }
@media (min-width: 1001px) and (max-width: 1400px) {
  .rxmain { grid-template-columns: 240px auto minmax(220px, 260px); }
  .rxtable { --rx-b: min(calc(100dvh - var(--nav-h) - 110px), calc(100vw - 670px), 860px); }
}
.rx-minesec { padding: 12px 10px; }
.rx-minesec .rx-mine { display: grid; gap: 10px; }
.rx-md { border-radius: 12px; overflow: hidden; background: #fffaf0; box-shadow: inset 0 0 0 1px rgba(143, 106, 44, .35), 0 4px 10px -6px rgba(0, 0, 0, .5); }
.rx-mdh { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; background: var(--dc); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .45); }
.rx-mdh b { font: 800 13.5px/1.1 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rx-mdh small { flex: none; padding: 2px 8px; border-radius: 99px; font-size: 11px; font-weight: 800; background: rgba(0, 0, 0, .28); text-shadow: none; }
.rx-md.full .rx-mdh small { background: #f3d27a; color: #3d2912; }
.rx-ms { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n r" "l r"; align-items: center; column-gap: 8px; row-gap: 2px; width: 100%; padding: 7px 10px; border: 0; border-top: 1px solid rgba(143, 106, 44, .2); background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: background .15s; }
.rx-ms:hover { background: #fff3cf; }
.rx-msn { grid-area: n; min-width: 0; font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rx-msd { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; background: var(--oc); vertical-align: 1px; }
.rx-mslv { grid-area: l; display: inline-flex; align-items: center; gap: 2px; font-size: 11px; font-weight: 700; color: #8f6a2c; }
.rx-mslv svg { width: 14px; height: auto; }
.rx-mslv.mn svg { width: 18px; margin-right: 3px; }
.rx-msr { grid-area: r; font-size: 11px; color: #6b5a40; text-align: right; white-space: nowrap; }
.rx-msr b { display: block; font-size: 14px; color: #3d2912; }
.rx-ms.can-build { background: #fff3cf; box-shadow: inset 3px 0 0 #d6a83c; }

/* ===== étape 196 : construire par un petit bouton « + » à gauche des rues de « Mes terrains » (plus de boutons au milieu du plateau) ===== */
.rx-msw { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid rgba(143, 106, 44, .2); }
.rx-msw .rx-ms { border-top: 0; }
.rx-msw.can-build { grid-template-columns: auto minmax(0, 1fr); align-items: center; background: #fff3cf; box-shadow: inset 3px 0 0 #d6a83c; }
.rx-msw.can-build .rx-ms { background: transparent; box-shadow: none; padding-left: 6px; }
.rx-mb { position: relative; display: grid; place-items: center; width: 28px; height: 28px; margin-left: 8px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; color: #f3d27a;
  background: linear-gradient(180deg, #2f8a64, #1d5a41); box-shadow: inset 0 0 0 1px rgba(243, 210, 122, .6), 0 2px 0 #0f3a28; transition: transform .12s, filter .12s; }
.rx-mb svg { width: 15px; height: 15px; }
.rx-mb i { position: absolute; right: -3px; top: -4px; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: #f3d27a; color: #3d2912; font: 900 12px/1 var(--body); font-style: normal; box-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.rx-mb:hover { transform: translateY(-1px) scale(1.06); filter: brightness(1.1); }
.rx-mb:active { transform: translateY(1px); }
.rx-mb:focus-visible { outline: 2px solid #d6a83c; outline-offset: 2px; }
.rx-mb[disabled] { opacity: .55; cursor: wait; transform: none; }
.rx-mb { animation: rxMbPulse 2.2s ease-in-out infinite; }
@keyframes rxMbPulse { 0%, 100% { box-shadow: inset 0 0 0 1px rgba(243, 210, 122, .6), 0 2px 0 #0f3a28; } 50% { box-shadow: inset 0 0 0 1px rgba(243, 210, 122, .9), 0 2px 0 #0f3a28, 0 0 0 4px rgba(214, 168, 60, .3); } }
@media (prefers-reduced-motion: reduce) { .rx-mb { animation: none; } }