/* ==========================================================================
   Casino Chibouk — thème sombre jungle
   ========================================================================== */
:root {
  --bg: #0a100c;
  --bg2: #0f1813;
  --panel: #141f19;
  --panel2: #1a2820;
  --line: #2a3d31;
  --text: #eaf2ec;
  --muted: #8fa597;
  --gold: #f5c542;
  --gold2: #d1950f;
  --gold-grad: linear-gradient(180deg, #fff0a0 0%, #f5c542 45%, #c88a0a 100%);
  --green: #3ddc84;
  --red: #ff4d5e;
  --felt: #0d5a37;
  --felt2: #083a24;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
  --font-title: 'Bungee', 'Rubik', system-ui, sans-serif;
  --font: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--gold); text-decoration: none; }
button { font: inherit; color: inherit; }
code { background: #0006; padding: 1px 6px; border-radius: 6px; }
.mono { font-variant-numeric: tabular-nums; }
.gold { color: var(--gold); }
.pos { color: var(--green); }
.neg { color: var(--red); }

/* --- fond jungle --- */
.jungle-bg {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  /* calque GPU à part : évite les lignes / bandes horizontales en plein écran sur les grands écrans */
  transform: translateZ(0); will-change: transform; backface-visibility: hidden; contain: strict;
  background-color: #090f0b;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(46, 125, 70, .35), transparent 60%),
    radial-gradient(900px 500px at 110% 10%, rgba(30, 90, 60, .35), transparent 60%),
    radial-gradient(800px 600px at 50% 120%, rgba(245, 197, 66, .08), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='%23173a24' fill-opacity='.35'%3E%3Cpath d='M20 40 q30 -30 60 0 q-30 20 -60 0z'/%3E%3Cpath d='M140 150 q30 -30 60 0 q-30 20 -60 0z'/%3E%3Cpath d='M150 30 q10 30 -10 50 q-15 -25 10 -50z'/%3E%3Cpath d='M40 160 q10 30 -10 50 q-15 -25 10 -50z'/%3E%3C/g%3E%3C/svg%3E"),
    #090f0b;
}

/* --- boutons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 12px; padding: 10px 18px; cursor: pointer;
  font-weight: 700; letter-spacing: .02em; transition: transform .1s, filter .15s, box-shadow .2s, opacity .2s;
  user-select: none; -webkit-tap-highlight-color: transparent;
}
.btn:active:not(:disabled) { transform: translateY(1px) scale(.98); }
.btn:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.4); }
.btn-gold { background: var(--gold-grad); color: #3a2600; box-shadow: 0 4px 0 #8a5a00, 0 8px 20px rgba(245, 197, 66, .25); }
.btn-gold:hover:not(:disabled) { filter: brightness(1.08); }
.btn-green { background: linear-gradient(180deg, #6ef0a5, #22a85a); color: #062d16; box-shadow: 0 4px 0 #0f6a35; }
.btn-red { background: linear-gradient(180deg, #ff8a8a, #d92a3c); color: #fff; box-shadow: 0 4px 0 #8a1020; }
.btn-blue { background: linear-gradient(180deg, #8cc8ff, #2a7de1); color: #05213f; box-shadow: 0 4px 0 #163f73; }
.btn-ghost { background: rgba(255, 255, 255, .06); color: var(--text); border: 1px solid var(--line); }
.btn-ghost:hover:not(:disabled) { background: rgba(255, 255, 255, .1); }
.btn-lg { padding: 14px 26px; font-size: 1.08rem; border-radius: 14px; }
.btn-sm { padding: 6px 12px; font-size: .88rem; border-radius: 10px; }
.icon-btn { background: rgba(255, 255, 255, .06); border: 1px solid var(--line); border-radius: 10px; width: 38px; height: 38px; cursor: pointer; font-size: 1.05rem; }
.pulse { animation: pulse 1.6s infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 4px 0 #8a5a00, 0 0 0 0 rgba(245, 197, 66, .6); } 50% { box-shadow: 0 4px 0 #8a5a00, 0 0 0 12px rgba(245, 197, 66, 0); } }

.coin { width: 1.1em; height: 1.1em; vertical-align: -0.18em; flex: none; }
.money { display: inline-flex; align-items: center; gap: .25em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.coin-inline { width: 1em; height: 1em; }

.logo-text { font-family: var(--font-title); font-weight: 400; letter-spacing: .02em; color: var(--text); }
.logo-text span { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* --- boot / erreurs --- */
.boot, .fatal { min-height: 80vh; display: grid; place-content: center; text-align: center; gap: 8px; padding: 24px; color: var(--muted); }
.boot .monkey, .fatal .monkey { width: 110px; margin: 0 auto; }
.bounce { animation: bounce 1s infinite ease-in-out; }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

.demo-banner { background: repeating-linear-gradient(45deg, #3a2a00, #3a2a00 12px, #2d2100 12px, #2d2100 24px); color: #ffd36b; text-align: center; padding: 8px 14px; font-size: .9rem; border-bottom: 1px solid #5a4300; }
.demo-banner.slim { padding: 4px 10px; font-size: .78rem; }

/* ============================== AUTH ============================== */
.auth-wrap { min-height: 100vh; display: flex; flex-direction: column; }
.auth-card {
  width: min(430px, calc(100% - 32px)); margin: auto; padding: 30px 28px 22px; text-align: center;
  background: linear-gradient(180deg, rgba(26, 40, 32, .95), rgba(16, 24, 19, .95));
  border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .05);
  margin-top: 40px; margin-bottom: 40px;
}
.auth-logo .monkey { width: 120px; filter: drop-shadow(0 8px 18px rgba(245, 197, 66, .35)); animation: bounce 2.4s infinite ease-in-out; }
.auth-card h1 { font-size: 2rem; margin: 6px 0 2px; }
.auth-sub { color: var(--muted); margin: 0 0 18px; }
.tabs { display: grid; grid-template-columns: 1fr 1fr; background: #0007; border-radius: 12px; padding: 4px; margin-bottom: 16px; }
.tab { background: none; border: 0; padding: 9px; border-radius: 9px; cursor: pointer; color: var(--muted); font-weight: 700; }
.tab.active { background: var(--panel2); color: var(--gold); box-shadow: 0 2px 8px #0006; }
.auth-form { display: grid; gap: 12px; text-align: left; }
.auth-form label { display: grid; gap: 5px; font-size: .88rem; color: var(--muted); font-weight: 500; }
.auth-form input {
  background: #0b120e; border: 1px solid var(--line); border-radius: 11px; padding: 12px 14px; color: var(--text); font: inherit; font-size: 1rem;
  transition: border-color .2s, box-shadow .2s;
}
.auth-form input:focus { outline: none; border-color: var(--gold2); box-shadow: 0 0 0 3px rgba(245, 197, 66, .18); }
.only-signup { display: none !important; }
.auth-wrap.signup .only-signup { display: grid !important; }
.form-error { color: var(--red); min-height: 1.2em; margin: 0; font-size: .9rem; }
.fineprint { color: var(--muted); font-size: .8rem; margin: 16px 0 0; }

/* ============================== COQUE ============================== */
.shell { min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 16px;
  padding: 10px 20px; background: rgba(10, 16, 12, .86); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.brand-monkey { width: 40px; transition: transform .3s; }
.brand:hover .brand-monkey { transform: rotate(-12deg) scale(1.08); }
.brand .logo-text { font-size: 1.15rem; }
.nav { display: flex; gap: 2px; flex: 1; justify-content: center; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 5px; min-width: 56px; border-radius: 10px; color: var(--muted); font-weight: 600; font-size: .7rem; white-space: nowrap; transition: background .2s, color .2s; }
.nav a:hover { background: rgba(255, 255, 255, .05); color: var(--text); }
.nav a.active { background: rgba(245, 197, 66, .12); color: var(--gold); }
.top-right { display: flex; align-items: center; gap: 10px; flex: none; }
.daily-btn {
  border: 1px solid var(--line); background: rgba(255, 255, 255, .05); border-radius: 999px; padding: 7px 12px; cursor: pointer;
  color: var(--muted); font-weight: 700; font-size: .85rem; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.daily-btn.ready { background: var(--gold-grad); color: #3a2600; border-color: transparent; animation: pulse 1.6s infinite; }
.balance-pill {
  display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border-radius: 999px;
  background: linear-gradient(180deg, #1f2e25, #121b16); border: 1px solid #3a5242; font-weight: 800; font-size: 1.05rem;
  font-variant-numeric: tabular-nums; min-width: 110px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.balance-pill .coin { width: 24px; height: 24px; }
.balance-pill.up { animation: balUp .7s; }
.balance-pill.down { animation: balDown .5s; }
@keyframes balUp { 30% { box-shadow: 0 0 0 4px rgba(61, 220, 132, .45); color: var(--green); transform: scale(1.06); } }
@keyframes balDown { 30% { color: var(--red); } }
.sync-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); flex: none; }
.sync-dot.pending { background: #ffb347; box-shadow: 0 0 8px #ffb347; }
.sync-dot.saving { background: #6fb8ff; box-shadow: 0 0 8px #6fb8ff; animation: blink .6s infinite alternate; }
.sync-dot.error { background: var(--red); box-shadow: 0 0 8px var(--red); }
@keyframes blink { to { opacity: .3; } }
.user-menu { position: relative; }
.user-btn { background: none; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; cursor: pointer; font-weight: 600; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-drop { display: none; position: absolute; right: 0; top: calc(100% + 6px); background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 6px; min-width: 180px; box-shadow: var(--shadow); }
.user-menu.open .user-drop { display: grid; }
.user-drop a, .user-drop button { text-align: left; padding: 9px 12px; border-radius: 8px; background: none; border: 0; cursor: pointer; color: var(--text); font-size: .93rem; }
.user-drop a:hover, .user-drop button:hover { background: rgba(255, 255, 255, .06); }

main#view { flex: 1; width: 100%; max-width: 1240px; margin: 0 auto; padding: 24px 20px 40px; }
.foot { text-align: center; color: #5d7266; font-size: .78rem; padding: 18px 16px 90px; }

/* --- toasts & modales --- */
#toasts { position: fixed; top: 74px; right: 16px; z-index: 300; display: grid; gap: 8px; pointer-events: none; }
.toast { background: var(--panel2); border: 1px solid var(--line); padding: 12px 16px; border-radius: 12px; box-shadow: var(--shadow); max-width: 340px; transform: translateX(120%); transition: transform .35s cubic-bezier(.2, .9, .3, 1.2); font-weight: 500; }
.toast.show { transform: none; }
.toast-win { border-color: #6b5a12; background: linear-gradient(180deg, #2c2709, #1c190a); color: #ffe17a; }
.toast-error { border-color: #6b1220; color: #ffb3bb; }
.modal-backdrop { position: fixed; inset: 0; z-index: 400; background: rgba(0, 0, 0, .6); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 16px; opacity: 0; transition: opacity .25s; }
.modal-backdrop.show { opacity: 1; }
.modal { background: linear-gradient(180deg, #1c2a22, #121b16); border: 1px solid var(--line); border-radius: 20px; padding: 22px; width: min(560px, 100%); max-height: 90vh; overflow: auto; box-shadow: var(--shadow); transform: scale(.92); transition: transform .25s cubic-bezier(.2, .9, .3, 1.3); }
.modal-backdrop.show .modal { transform: none; }
.modal.wide { width: min(860px, 100%); }
.modal-title { font-family: var(--font-title); font-weight: 400; margin: 0 0 12px; color: var(--gold); font-size: 1.35rem; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
.tab-guard { position: fixed; inset: 0; z-index: 500; background: rgba(5, 8, 6, .94); display: grid; place-content: center; text-align: center; padding: 24px; gap: 10px; }
.tab-guard .monkey { width: 110px; margin: 0 auto; }
.tab-guard p { color: var(--muted); max-width: 420px; margin: 0 auto 10px; }

/* --- pluie de pièces --- */
.coin-rain { position: fixed; inset: 0; pointer-events: none; z-index: 350; overflow: hidden; }
.rain-coin { position: absolute; top: -50px; width: var(--size); height: var(--size); animation: rain linear forwards; }
.rain-coin .coin { width: 100%; height: 100%; }
@keyframes rain { to { transform: translateY(110vh) rotate(var(--rot)); } }

/* ============================== LOBBY ============================== */
.hero {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; overflow: hidden;
  padding: 34px 34px; border-radius: 26px; border: 1px solid var(--line);
  background: radial-gradient(600px 300px at 85% 0%, rgba(245, 197, 66, .18), transparent 60%), linear-gradient(135deg, #17271d, #0e1712);
  box-shadow: var(--shadow);
}
.hero h1 { font-family: var(--font-title); font-weight: 400; font-size: clamp(1.6rem, 4vw, 2.6rem); margin: 0 0 8px; line-height: 1.1; }
.hero p { color: var(--muted); max-width: 520px; margin: 0 0 14px; }
.hero-bal { font-size: 1.3rem; font-weight: 800; }
.hero-bal .coin { width: 1.2em; height: 1.2em; }
.hanging-monkey { position: relative; width: 150px; height: 190px; flex: none; transform-origin: 50% -30px; animation: swing 3.2s ease-in-out infinite; margin-top: -34px; }
.hanging-monkey .vine { position: absolute; left: 50%; top: -20px; width: 20px; height: 110px; transform: translateX(-50%); }
.hanging-monkey .monkey { position: absolute; bottom: 0; left: 50%; width: 130px; transform: translateX(-50%); filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .5)); }
@keyframes swing { 0%, 100% { transform: rotate(8deg); } 50% { transform: rotate(-8deg); } }

.daily-card {
  display: flex; align-items: center; gap: 16px; margin: 18px 0; padding: 18px 22px; border-radius: 20px;
  background: linear-gradient(90deg, rgba(245, 197, 66, .12), rgba(245, 197, 66, .03)); border: 1px solid #4a3d12;
}
.daily-card h3 { margin: 0; font-size: 1.1rem; }
.daily-card p { margin: 2px 0 0; color: var(--muted); }
.daily-card .btn { margin-left: auto; }
.daily-icon { font-size: 2.2rem; }

.games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.game-card {
  position: relative; display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; color: var(--text);
  background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .25s, box-shadow .25s, border-color .25s;
}
.game-card:hover { transform: translateY(-5px); border-color: #5a4a14; box-shadow: 0 18px 40px rgba(0, 0, 0, .55), 0 0 0 1px rgba(245, 197, 66, .2); }
.game-card.locked { filter: grayscale(.7) brightness(.75); }
.game-card.locked:hover { transform: none; }
.gc-art { height: 150px; display: grid; place-items: center; position: relative; overflow: hidden; }
.gc-body { padding: 14px 18px 18px; }
.gc-body h3 { margin: 0 0 4px; font-family: var(--font-title); font-weight: 400; font-size: 1.1rem; color: var(--gold); }
.gc-body p { margin: 0; color: var(--muted); font-size: .9rem; }
.gc-slots .gc-art { background: radial-gradient(circle at 50% 120%, #6b1d8a, #1b0b26); }
.mini-reels { display: flex; gap: 6px; padding: 8px; background: #0008; border-radius: 14px; border: 2px solid #c88a0a; }
.mini-reels > div { width: 62px; height: 72px; background: linear-gradient(180deg, #fff, #ddd); border-radius: 8px; display: grid; place-items: center; padding: 6px; }
.mini-reels svg, .mini-reels .monkey { width: 100%; height: 100%; }
.mini-reels .sym-wild { width: 100%; height: 100%; }
.gc-blackjack .gc-art { background: radial-gradient(circle at 50% 30%, #11764a, #06321e); perspective: 600px; }
.mini-cards { position: relative; width: 140px; height: 110px; }
.mc { position: absolute; width: 70px; height: 98px; border-radius: 8px; background: #fff; color: #111; font-weight: 800; font-size: 1.6rem; padding: 4px 8px; box-shadow: 0 8px 18px #0008; display: flex; flex-direction: column; }
.mc span { font-size: 2rem; margin: auto; }
.mc.red { color: #d0102a; }
.mc1 { left: 18px; transform: rotate(-12deg); }
.mc2 { left: 56px; transform: rotate(10deg) translateY(4px); }
.game-card:hover .mc1 { transform: rotate(-18deg) translateX(-6px); transition: transform .3s; }
.game-card:hover .mc2 { transform: rotate(16deg) translate(6px, 2px); transition: transform .3s; }
.gc-roulette .gc-art { background: radial-gradient(circle, #3a1a0a, #120804); }
.mini-wheel {
  width: 120px; height: 120px; border-radius: 50%; border: 6px solid #c88a0a; box-shadow: 0 0 0 3px #5a3a08, 0 10px 20px #000a;
  background: conic-gradient(#0a8a3a 0 9.7deg, #c8102e 9.7deg 19.4deg, #111 19.4deg 29.1deg, #c8102e 29.1deg 38.8deg, #111 38.8deg 48.5deg, #c8102e 48.5deg 58.2deg, #111 58.2deg 67.9deg, #c8102e 67.9deg 77.6deg, #111 77.6deg 87.3deg, #c8102e 87.3deg 97deg, #111 97deg 106.7deg, #c8102e 106.7deg 116.4deg, #111 116.4deg 126.1deg, #c8102e 126.1deg 135.8deg, #111 135.8deg 145.5deg, #c8102e 145.5deg 155.2deg, #111 155.2deg 164.9deg, #c8102e 164.9deg 174.6deg, #111 174.6deg 184.3deg, #c8102e 184.3deg 194deg, #111 194deg 203.7deg, #c8102e 203.7deg 213.4deg, #111 213.4deg 223.1deg, #c8102e 223.1deg 232.8deg, #111 232.8deg 242.5deg, #c8102e 242.5deg 252.2deg, #111 252.2deg 261.9deg, #c8102e 261.9deg 271.6deg, #111 271.6deg 281.3deg, #c8102e 281.3deg 291deg, #111 291deg 300.7deg, #c8102e 300.7deg 310.4deg, #111 310.4deg 320.1deg, #c8102e 320.1deg 329.8deg, #111 329.8deg 339.5deg, #c8102e 339.5deg 349.2deg, #111 349.2deg 360deg);
  animation: spin 8s linear infinite; position: relative;
}
.mini-wheel::after { content: ''; position: absolute; inset: 30%; border-radius: 50%; background: radial-gradient(circle, #f5c542, #8a5a00); }
@keyframes spin { to { transform: rotate(360deg); } }
.gc-breaker .gc-art { background: linear-gradient(180deg, #0c1f3a, #050b15); }
.mini-bricks { display: grid; grid-template-columns: repeat(5, 34px); gap: 5px; }
.mini-bricks i { height: 14px; border-radius: 3px; background: hsl(var(--h), 80%, 58%); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25); }

.mini-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; padding: 16px 20px; border-radius: 20px; background: var(--panel); border: 1px solid var(--line); }
.mini-stats > div { display: grid; padding-right: 18px; border-right: 1px solid var(--line); }
.mini-stats > div:last-of-type { border-right: 0; }
.mini-stats > div > span { color: var(--muted); font-size: .8rem; }
.mini-stats b { font-size: 1.1rem; }
.mini-stats .btn { margin-left: auto; }

/* ============================== COMMUN JEUX ============================== */
.game-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.game-head h1 { font-family: var(--font-title); font-weight: 400; margin: 0; font-size: clamp(1.4rem, 3.5vw, 2rem); }
.game-head h1 span { background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.game-head .actions { display: flex; gap: 8px; }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.chip {
  --c: #2a7de1; width: 54px; height: 54px; border-radius: 50%; cursor: pointer; position: relative; flex: none;
  border: 0; font-weight: 800; font-size: .82rem; color: #fff; text-shadow: 0 1px 2px #000a;
  background:
    radial-gradient(circle, var(--c) 0 52%, transparent 53%),
    repeating-conic-gradient(#fff 0 15deg, var(--c) 15deg 45deg);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .45), inset 0 0 0 3px rgba(0, 0, 0, .25);
  transition: transform .15s;
}
.chip::after { content: ''; position: absolute; inset: 8px; border-radius: 50%; border: 2px dashed rgba(255, 255, 255, .55); }
.chip:hover { transform: translateY(-3px); }
.chip.sel { transform: translateY(-6px); box-shadow: 0 0 0 3px var(--gold), 0 10px 18px rgba(0, 0, 0, .5); }
.chip:disabled { opacity: .35; cursor: not-allowed; transform: none; }
.chip[data-v="1"] { --c: #8a8f98; }
.chip[data-v="5"] { --c: #d92a3c; }
.chip[data-v="10"] { --c: #2a7de1; }
.chip[data-v="25"] { --c: #1f9e55; }
.chip[data-v="100"] { --c: #222; }
.chip[data-v="500"] { --c: #7b2fbf; }
.chip[data-v="1000"] { --c: #d18f00; }
.chip[data-v="5000"] { --c: #e0457b; }
.chip[data-v="25000"] { --c: #0aa5a5; }

/* ============================== RESPONSIVE ============================== */
@media (max-width: 1780px) {
  .brand .logo-text { display: none; }
}
@media (max-width: 1540px) {
  .nav a .nl { display: none; }
  .nav a { min-width: 0; padding: 8px; }
  .nav { justify-content: safe center; }
}
@media (max-width: 760px) {
  .topbar { padding: 8px 12px; gap: 8px; backdrop-filter: none; background: rgba(10, 16, 12, .97); }
  .brand .logo-text { display: none; }
  .brand-monkey { width: 34px; }
  .nav {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; justify-content: flex-start;
    background: rgba(10, 16, 12, .96); backdrop-filter: blur(10px); border-top: 1px solid var(--line);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { gap: 1px; padding: 4px 2px; flex: 0 0 62px; min-width: 0; }
  .nav a .nl { display: block; font-size: .6rem; }
  .nav a .ni .ic { width: 22px; height: 22px; }
  .top-right { margin-left: auto; gap: 6px; }
  .daily-btn span { display: none; }
  .daily-btn { padding: 7px 9px; }
  .balance-pill { min-width: 0; font-size: .95rem; padding: 5px 10px 5px 6px; }
  .user-btn { max-width: 90px; padding: 7px 8px; font-size: .85rem; }
  .mute-btn { display: none; }
  main#view { padding: 16px 12px 30px; }
  .hero { padding: 22px 18px; }
  .hanging-monkey { width: 100px; height: 140px; }
  .hanging-monkey .monkey { width: 90px; }
  .daily-card { flex-wrap: wrap; }
  .daily-card .btn { width: 100%; }
  .mini-stats > div { border-right: 0; }
  #toasts { top: auto; bottom: 80px; right: 12px; left: 12px; }
  .toast { max-width: none; }
}

/* ============================== MACHINE À SOUS ============================== */
.slot-wrap { max-width: max(340px, min(820px, calc((100svh - 470px) * 1.4 + 60px))); margin: 0 auto; }
.slot-machine {
  position: relative; padding: 18px 18px 20px; border-radius: 30px;
  background: linear-gradient(180deg, #3b1450 0%, #1d0a29 60%, #12061a 100%);
  border: 4px solid transparent;
  background-clip: padding-box;
  box-shadow: 0 0 0 4px #c88a0a, 0 0 0 7px #5a3a08, 0 24px 60px rgba(0, 0, 0, .7), inset 0 2px 0 rgba(255, 255, 255, .1);
  transition: box-shadow .5s, background .5s;
}
.slot-machine.fs-mode {
  background: linear-gradient(180deg, #6a1010 0%, #2a0606 60%, #170303 100%);
  box-shadow: 0 0 0 4px #ffd34d, 0 0 0 7px #8a5a00, 0 0 60px rgba(255, 200, 60, .45), 0 24px 60px rgba(0, 0, 0, .7);
}
.slot-top { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 12px; }
.st-monkey { width: 64px; flex: none; filter: drop-shadow(0 6px 10px #0009); }
.st-monkey.left { animation: bob 2.4s ease-in-out infinite; }
.st-monkey.right { animation: bob 2.4s ease-in-out infinite .6s; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-6px) rotate(4deg); } }
.marquee { position: relative; padding: 12px 26px; border-radius: 16px; background: linear-gradient(180deg, #2a0e38, #12051a); border: 3px solid #c88a0a; text-align: center; }
.marquee span { font-family: var(--font-title); font-size: clamp(1rem, 3.6vw, 1.9rem); background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 8px rgba(245, 197, 66, .45)); white-space: nowrap; }
.bulbs { position: absolute; inset: -3px; display: flex; flex-wrap: wrap; justify-content: space-between; align-content: space-between; padding: 0 6px; pointer-events: none; }
.bulbs i { width: 7px; height: 7px; border-radius: 50%; background: #ffe17a; box-shadow: 0 0 8px #ffd34d; animation: bulb .8s infinite alternate; margin-top: -2px; }
@keyframes bulb { to { opacity: .25; box-shadow: none; } }

.fs-banner { display: none; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin: -2px 0 10px; padding: 8px 14px; border-radius: 12px; background: linear-gradient(90deg, #ffcc33, #ff7b2a, #ffcc33); background-size: 200% 100%; animation: shimmer 2s linear infinite; color: #3a0d00; font-weight: 800; }
.fs-mode .fs-banner { display: flex; }
.fs-title { font-family: var(--font-title); font-weight: 400; }
.fs-mult { background: #3a0d00; color: #ffd34d; padding: 2px 10px; border-radius: 999px; }
@keyframes shimmer { to { background-position: -200% 0; } }

.reels-frame { position: relative; border-radius: 18px; padding: 8px; background: linear-gradient(180deg, #c88a0a, #6b4300); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6); }
.reels { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); aspect-ratio: 5 / 3.15; border-radius: 12px; overflow: hidden; background: #fff; }
.reel { position: relative; overflow: hidden; height: 100%; background: linear-gradient(180deg, #d9d3c4 0%, #fffaf0 18%, #ffffff 50%, #fffaf0 82%, #d9d3c4 100%); }
.reel + .reel { box-shadow: inset 2px 0 0 rgba(0, 0, 0, .18); }
.reel::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .35), transparent 16%, transparent 84%, rgba(0, 0, 0, .35)); }
.reel.anticipate { animation: antic .35s infinite alternate; }
.reel.anticipate::before { content: ''; position: absolute; inset: 0; z-index: 2; box-shadow: inset 0 0 0 4px #ffcc33, inset 0 0 30px rgba(255, 204, 51, .8); pointer-events: none; }
@keyframes antic { to { filter: brightness(1.15); } }
.strip { position: absolute; left: 0; right: 0; top: 0; will-change: transform; }
.strip.blur .cell > * { filter: blur(1.8px); }
.cell { height: var(--cell, 100px); display: grid; place-items: center; padding: 10%; position: relative; }
.cell > svg, .cell > div { width: 100%; height: 100%; max-width: 100%; max-height: 100%; }
.cell .sym { width: 100%; height: 100%; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .25)); }
.sym-wild, .sym-monkey { position: relative; display: grid; place-items: center; }
.sym-wild .monkey, .sym-monkey .monkey { width: 100%; height: 100%; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .3)); }
.sym-wild::before { content: ''; position: absolute; inset: -8%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 210, 60, .55), transparent 65%); animation: wildGlow 1.6s ease-in-out infinite; }
@keyframes wildGlow { 50% { transform: scale(1.12); opacity: .6; } }
.wild-tag { position: absolute; bottom: -2%; left: 50%; transform: translateX(-50%); font-family: var(--font-title); font-size: clamp(.5rem, 1.6vw, .9rem); color: #fff; background: linear-gradient(180deg, #ff4d5e, #a0001a); padding: 1px 8px; border-radius: 6px; border: 2px solid #ffd34d; text-shadow: 0 1px 0 #000; letter-spacing: .05em; white-space: nowrap; }
.cell.win { animation: cellWin .8s ease-in-out infinite; z-index: 1; }
.cell.win::before { content: ''; position: absolute; inset: 4px; border-radius: 12px; background: radial-gradient(circle, rgba(255, 220, 90, .55), rgba(255, 220, 90, 0) 70%); box-shadow: inset 0 0 0 3px rgba(255, 196, 0, .9); }
@keyframes cellWin { 50% { transform: scale(1.08); } }
.cell.wild-hit { animation: wildHit .5s ease-in-out infinite alternate; z-index: 2; }
@keyframes wildHit { to { transform: scale(1.18) rotate(-4deg); filter: drop-shadow(0 0 14px #ffcc33); } }
.win-lines { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); pointer-events: none; z-index: 3; }
.win-lines .wl { animation: lineIn .35s ease-out; }
@keyframes lineIn { from { opacity: 0; } }
.big-win { position: absolute; inset: 0; z-index: 5; display: grid; place-content: center; text-align: center; pointer-events: none; opacity: 0; transform: scale(.6); transition: opacity .3s, transform .4s cubic-bezier(.2, .9, .3, 1.4); background: radial-gradient(circle, rgba(0, 0, 0, .75), rgba(0, 0, 0, .35) 70%); border-radius: 18px; }
.big-win.show { opacity: 1; transform: none; }
.bw-title { font-family: var(--font-title); font-size: clamp(1.8rem, 7vw, 3.6rem); background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 0 #6b4300) drop-shadow(0 0 20px rgba(255, 200, 60, .7)); animation: bounce .8s infinite; }
.bw-amount { font-family: var(--font-title); font-size: clamp(1.4rem, 5vw, 2.6rem); color: #fff; text-shadow: 0 3px 0 #000; }

.slot-info { display: flex; align-items: center; gap: 14px; margin: 14px 0; flex-wrap: wrap; }
.win-display { display: flex; align-items: baseline; gap: 10px; padding: 8px 18px; border-radius: 12px; background: #000a; border: 2px solid #5a3a08; min-width: 170px; }
.win-display span { color: var(--muted); font-weight: 700; font-size: .8rem; letter-spacing: .1em; }
.win-display b { font-family: var(--font-title); font-weight: 400; font-size: 1.6rem; color: var(--gold); font-variant-numeric: tabular-nums; }
.slot-msg { flex: 1; color: #e7d7f0; font-weight: 500; min-width: 200px; }
.line-tag { display: inline-block; padding: 1px 8px; border-radius: 6px; background: var(--lc); color: #111; font-weight: 800; font-size: .85rem; }

.slot-controls { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.bet-box, .auto-box { display: grid; gap: 6px; justify-items: center; padding: 10px; border-radius: 14px; background: #0007; border: 1px solid #3c1c4a; }
.bet-label { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: #b9a3c6; font-weight: 700; }
.bet-ctrl { display: flex; align-items: center; gap: 10px; font-size: 1.2rem; }
.bet-ctrl .btn { width: 36px; height: 36px; padding: 0; font-size: 1.3rem; }
.bet-total { font-size: .85rem; color: #d7c6e2; }
.auto-btns { display: flex; gap: 6px; }
.turbo { font-size: .85rem; color: #d7c6e2; display: flex; gap: 6px; align-items: center; cursor: pointer; }
.spin-btn {
  width: 118px; height: 118px; border-radius: 50%; border: 0; cursor: pointer; position: relative;
  background: radial-gradient(circle at 35% 30%, #9dffb9, #22c55e 45%, #0f7a35 100%);
  box-shadow: 0 8px 0 #0a4f22, 0 0 0 6px #c88a0a, 0 0 0 9px #5a3a08, 0 14px 30px rgba(0, 0, 0, .6), 0 0 30px rgba(61, 220, 132, .35);
  font-family: var(--font-title); font-size: 1.5rem; color: #fff; text-shadow: 0 2px 0 #0a4f22; transition: transform .1s, filter .2s;
}
.spin-btn:hover:not(:disabled) { filter: brightness(1.1); }
.spin-btn:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 3px 0 #0a4f22, 0 0 0 6px #c88a0a, 0 0 0 9px #5a3a08; }
.spin-btn:disabled { filter: grayscale(.7) brightness(.7); cursor: not-allowed; }
.spin-btn.stop { background: radial-gradient(circle at 35% 30%, #ffb3b3, #ef4444 45%, #8a1020 100%); box-shadow: 0 8px 0 #5a0a14, 0 0 0 6px #c88a0a, 0 0 0 9px #5a3a08; font-size: 1rem; }

/* table des gains */
.muted { color: var(--muted); }
.pt { display: grid; gap: 6px; margin: 12px 0 16px; }
.pt-row { display: grid; grid-template-columns: 56px 1fr repeat(3, 84px); align-items: center; gap: 8px; padding: 6px 10px; border-radius: 12px; background: #0005; }
.pt-sym { width: 50px; height: 50px; background: #fff; border-radius: 10px; padding: 5px; display: grid; place-items: center; }
.pt-sym > * { width: 100%; height: 100%; }
.pt-sym .wild-tag { font-size: .45rem; padding: 0 3px; }
.pt-name { font-weight: 600; }
.pt-pay { text-align: right; font-weight: 800; color: var(--gold); font-variant-numeric: tabular-nums; }
.pt-pay small { color: var(--muted); font-weight: 500; margin-right: 4px; }
.modal h3 { margin: 16px 0 6px; font-size: 1.05rem; }
.modal ul { padding-left: 20px; margin: 6px 0; }
.paylines { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.pl small { color: var(--muted); font-weight: 700; }
.pl-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; }
.pl-grid i { aspect-ratio: 1; border-radius: 2px; background: #3a4a40; }
.pl-grid i.on { background: var(--lc); box-shadow: 0 0 6px var(--lc); }
.bonus-pop { text-align: center; }
.bonus-pop .monkey { width: 120px; margin: 0 auto; animation: bounce 1.2s infinite; }
.bonus-pop .big { font-family: var(--font-title); font-size: 1.8rem; color: var(--gold); margin: 6px 0; }
.bonus-pop .big .coin { width: 1em; height: 1em; }

@media (max-width: 640px) {
  .slot-machine { padding: 12px 10px 14px; border-radius: 22px; }
  .st-monkey { width: 40px; }
  .marquee { padding: 8px 12px; }
  .reels-frame { padding: 5px; }
  .win-lines { inset: 5px; width: calc(100% - 10px); height: calc(100% - 10px); }
  .slot-controls { grid-template-columns: 1fr; }
  .spin-btn { grid-row: 1; justify-self: center; width: 96px; height: 96px; font-size: 1.2rem; }
  .bet-ctrl { gap: 6px; }
  .bet-ctrl .bet-input { width: 80px; }
  .pt-row { grid-template-columns: 44px 1fr repeat(3, 52px); padding: 4px 6px; font-size: .85rem; }
  .pt-sym { width: 40px; height: 40px; }
  .win-display b { font-size: 1.3rem; }
}

/* ============================== BLACKJACK ============================== */
.bj-wrap { max-width: 1060px; margin: 0 auto; --cw: 96px; --ch: 136px; }
.bj-table {
  position: relative; min-height: 560px; border-radius: 200px 200px 36px 36px; padding: 26px 24px 30px;
  background: radial-gradient(ellipse at 50% 35%, #15835a 0%, var(--felt) 45%, var(--felt2) 100%);
  border: 14px solid #5a3214;
  box-shadow: 0 0 0 3px #c88a0a, inset 0 0 0 3px rgba(255, 215, 120, .25), inset 0 0 80px rgba(0, 0, 0, .55), 0 24px 60px rgba(0, 0, 0, .7);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; overflow: hidden;
}
.bj-table::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Crect width='1' height='1' fill='%23000'/%3E%3C/svg%3E"); }
.shoe { position: absolute; right: 34px; top: 40px; width: 74px; height: 92px; border-radius: 10px 10px 6px 6px; background: linear-gradient(160deg, #3a2a1a, #1a110a); border: 2px solid #c88a0a; box-shadow: 0 8px 18px #0009; display: grid; place-items: end center; padding-bottom: 6px; transform: rotate(-8deg); z-index: 1; }
.shoe span { font-size: .6rem; letter-spacing: .15em; color: #c88a0a; font-weight: 800; }
.shoe-cards { position: absolute; left: 10px; right: 10px; top: 8px; height: 48px; border-radius: 4px; background: repeating-linear-gradient(90deg, #7b2c2c 0 3px, #a33a3a 3px 5px); box-shadow: inset 0 0 6px #000; }
.discard { position: absolute; left: 40px; top: 40px; width: 70px; height: 90px; }
.dealer-zone, .player-zone { position: relative; z-index: 2; display: grid; justify-items: center; gap: 8px; min-height: calc(var(--ch) + 40px); }
.hand-label { font-weight: 700; color: #d6f5e3; letter-spacing: .05em; display: flex; gap: 8px; align-items: center; }
.total { display: inline-block; min-width: 34px; text-align: center; padding: 2px 9px; border-radius: 999px; background: rgba(0, 0, 0, .55); color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; }
.total:empty { display: none; }
.total.bust { background: var(--red); }
.total.bj { background: var(--gold); color: #3a2600; }
.hand { position: relative; height: var(--ch); width: calc(var(--cw) + (var(--n, 1) - 1) * var(--cw) * .38); transition: width .3s; perspective: 1000px; }
.card { position: absolute; top: calc(var(--i, 0) * -3px); left: calc(var(--i, 0) * var(--cw) * .38); width: var(--cw); height: var(--ch); perspective: 900px; transition: left .3s; }
.card3d { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateY(0deg); }
.card3d.hidden { transform: rotateY(180deg); }
.face { position: absolute; inset: 0; border-radius: 10px; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.front { background: linear-gradient(160deg, #ffffff, #f1ede4); color: #161616; box-shadow: 0 6px 14px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(0, 0, 0, .12); }
.front.red { color: #c8102e; }
.back { transform: rotateY(180deg); background: #7b1e1e; padding: 6px; box-shadow: 0 6px 14px rgba(0, 0, 0, .45); }
.back-inner { width: 100%; height: 100%; border-radius: 6px; border: 2px solid #f5c542; display: grid; place-items: center;
  background: repeating-linear-gradient(45deg, #8f2525 0 6px, #6b1515 6px 12px); }
.back-inner .monkey { width: 62%; filter: drop-shadow(0 2px 3px #0008); }
.corner { position: absolute; display: flex; flex-direction: column; align-items: center; line-height: 1; font-weight: 800; }
.corner b { font-size: calc(var(--cw) * .2); }
.corner span { font-size: calc(var(--cw) * .17); }
.corner.tl { top: 6px; left: 6px; }
.corner.br { bottom: 6px; right: 6px; transform: rotate(180deg); }
.ace { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--cw) * .62); }
.court { position: absolute; inset: 18% 16%; border-radius: 6px; border: 2px solid currentColor; display: grid; place-items: center; background: linear-gradient(180deg, rgba(245, 197, 66, .25), rgba(245, 197, 66, .05)); }
.court .monkey { width: 92%; }
.pips { position: absolute; inset: 16% 20%; display: flex; flex-wrap: wrap; justify-content: center; align-content: space-around; font-size: calc(var(--cw) * .2); line-height: 1; }
.pips i { font-style: normal; width: 50%; text-align: center; }
.pips.n2 i, .pips.n3 i { width: 100%; }
.pips.n9, .pips.n10, .pips.n8 { font-size: calc(var(--cw) * .17); }
.pips.n5 i:nth-child(3), .pips.n7 i:nth-child(7), .pips.n9 i:nth-child(9) { width: 100%; }
.felt-text { position: relative; z-index: 1; text-align: center; color: rgba(255, 230, 150, .55); pointer-events: none; }
.felt-text span { display: block; font-family: var(--font-title); font-size: clamp(.8rem, 2.4vw, 1.25rem); letter-spacing: .08em; }
.felt-text small { font-size: .75rem; letter-spacing: .05em; }
.table-monkey { position: absolute; left: 30px; bottom: 26px; width: 70px; opacity: .9; z-index: 1; animation: bob 3s ease-in-out infinite; }
.hands { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; }
.phand { display: grid; justify-items: center; gap: 6px; padding: 8px; border-radius: 16px; position: relative; transition: background .3s, box-shadow .3s; }
.phand.active { background: rgba(255, 220, 100, .1); box-shadow: 0 0 0 2px rgba(255, 220, 100, .55); }
.phand.busted .hand { filter: grayscale(.5) brightness(.75); }
.hand-info { display: flex; gap: 8px; align-items: center; font-size: .85rem; }
.hand-bet { color: #ffe9a8; font-weight: 700; }
.hand-result { position: absolute; top: 30%; left: 50%; transform: translate(-50%, -50%) scale(.5); opacity: 0; z-index: 10; padding: 6px 14px; border-radius: 10px; font-weight: 800; white-space: nowrap; transition: transform .35s cubic-bezier(.2, .9, .3, 1.5), opacity .25s; box-shadow: 0 6px 16px #0008; }
.hand-result.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.r-win { background: var(--green); color: #052814; }
.r-bj { background: var(--gold-grad); color: #3a2600; font-family: var(--font-title); font-weight: 400; }
.r-push { background: #dfe7e2; color: #222; }
.r-lose, .r-bust { background: var(--red); color: #fff; }
.bet-spot { position: absolute; right: 40px; bottom: 34px; width: 96px; height: 96px; border-radius: 50%; border: 3px dashed rgba(255, 230, 150, .5); display: grid; place-items: center; z-index: 1; }
.bet-stack { position: absolute; inset: 0; display: grid; place-items: center; }
.bet-stack .chip.mini { position: absolute; width: 44px; height: 44px; transform: translateY(calc(var(--i) * -4px)); font-size: 0; cursor: default; box-shadow: 0 2px 0 rgba(0, 0, 0, .5); }
.bet-stack .chip.mini::after { inset: 6px; }
.bet-amt { position: absolute; bottom: -26px; white-space: nowrap; font-weight: 800; color: #ffe9a8; font-size: .9rem; }
.bet-spot.empty .bet-amt { color: rgba(255, 230, 150, .5); bottom: auto; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; }
.bj-msg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.6); z-index: 20; opacity: 0; pointer-events: none; padding: 12px 22px; border-radius: 14px; background: rgba(0, 0, 0, .78); border: 1px solid rgba(255, 255, 255, .15); font-weight: 800; font-size: 1.15rem; text-align: center; transition: opacity .25s, transform .35s cubic-bezier(.2, .9, .3, 1.4); }
.bj-msg.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.bj-msg.win { color: var(--gold); border-color: #6b5a12; }
.bj-msg.lose { color: #ffb3bb; }
.bj-controls { margin-top: 18px; display: grid; justify-items: center; }
.ctrl-bet, .ctrl-play { display: none; gap: 14px; justify-items: center; }
.bj-controls[data-phase="bet"] .ctrl-bet { display: grid; }
.bj-controls[data-phase="play"] .ctrl-play, .bj-controls[data-phase="busy"] .ctrl-play { display: flex; flex-wrap: wrap; justify-content: center; }
.bj-controls[data-phase="busy"] .ctrl-play .btn { opacity: .45; pointer-events: none; }
.bet-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
kbd { font-family: inherit; font-size: .7rem; padding: 1px 5px; border-radius: 4px; background: rgba(0, 0, 0, .25); margin-left: 4px; }

@media (max-width: 700px) {
  .bj-wrap { --cw: 62px; --ch: 88px; }
  .bj-table { border-radius: 90px 90px 24px 24px; border-width: 9px; padding: 16px 8px 40px; min-height: 470px; }
  .shoe { right: 14px; top: 22px; width: 50px; height: 64px; }
  .shoe-cards { height: 30px; }
  .discard { left: 14px; }
  .table-monkey { width: 46px; left: 12px; bottom: 12px; }
  .bet-spot { right: 14px; bottom: 26px; width: 60px; height: 60px; }
  .bet-stack .chip.mini { width: 34px; height: 34px; }
  .bet-amt { bottom: -20px; }
  .hands { gap: 6px; }
  .phand { padding: 4px; }
  .ctrl-play .btn-lg { padding: 12px 14px; font-size: .95rem; }
  .chip { width: 48px; height: 48px; }
  .corner.tl { top: 3px; left: 4px; } .corner.br { bottom: 3px; right: 4px; }
}

/* ============================== ROULETTE ============================== */
.rl-wrap { max-width: 1060px; margin: 0 auto; }
.rl-top { display: grid; grid-template-columns: minmax(0, 440px) 1fr; gap: 22px; align-items: center; margin-bottom: 18px; }
.wheel-box { position: relative; width: 100%; aspect-ratio: 1; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .7)); }
.wheel-box canvas { width: 100%; height: 100%; display: block; }
.rl-result { position: absolute; left: 50%; top: 50%; width: 26%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%) scale(0); display: grid; place-items: center; border: 4px solid #f5c542; box-shadow: 0 0 30px rgba(245, 197, 66, .6), 0 10px 20px #000a; transition: transform .45s cubic-bezier(.2, .9, .3, 1.5); pointer-events: none; }
.rl-result.show { transform: translate(-50%, -50%) scale(1); }
.rl-result b { font-family: var(--font-title); font-weight: 400; font-size: clamp(1.6rem, 6vw, 3rem); color: #fff; text-shadow: 0 2px 0 #000; }
.rl-result.red { background: radial-gradient(circle, #ff4b5c, #a0001a); }
.rl-result.black { background: radial-gradient(circle, #444, #0a0a0a); }
.rl-result.green { background: radial-gradient(circle, #2fd16a, #076b2c); }
.rl-side { display: grid; gap: 12px; align-content: center; }
.rl-panel { padding: 12px 16px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); display: grid; gap: 6px; }
.rl-panel .lbl { color: var(--muted); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
.rl-panel b { font-size: 1.4rem; }
.rl-history { display: flex; gap: 6px; flex-wrap: wrap; min-height: 34px; }
.hn { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .9rem; color: #fff; }
.hn.red { background: #c8102e; } .hn.black { background: #1a1a1a; border: 1px solid #444; } .hn.green { background: #0a8a3a; }
.hn.last { box-shadow: 0 0 0 3px var(--gold); transform: scale(1.1); }
.rl-msg { padding: 12px 16px; border-radius: 14px; background: linear-gradient(90deg, rgba(245, 197, 66, .12), transparent); border-left: 3px solid var(--gold); min-height: 56px; }
.rl-msg small { color: var(--muted); }
.rl-board-scroll { overflow-x: auto; padding: 4px 2px 10px; -webkit-overflow-scrolling: touch; }
.rl-board {
  display: grid; grid-template-columns: 1.1fr repeat(12, 1fr) 1.1fr; grid-template-rows: repeat(3, 58px) 46px 46px; gap: 3px;
  padding: 14px; border-radius: 18px; min-width: 700px;
  background: radial-gradient(ellipse at 50% 30%, #15835a, var(--felt2)); border: 8px solid #5a3214; box-shadow: 0 0 0 2px #c88a0a, inset 0 0 40px rgba(0, 0, 0, .5), var(--shadow);
}
.rl-spot { position: relative; border: 2px solid rgba(255, 240, 200, .55); background: transparent; color: #fff; font-weight: 800; cursor: pointer; border-radius: 6px; transition: background .15s, transform .1s, box-shadow .2s; font-size: .95rem; -webkit-tap-highlight-color: transparent; }
.rl-spot:hover { background: rgba(255, 255, 255, .14); }
.rl-spot:active { transform: scale(.97); }
.rl-spot.num span, .rl-spot.zero span { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; }
.rl-spot.num.red span { background: #c8102e; }
.rl-spot.num.black span { background: #111; }
.rl-spot.zero { background: rgba(10, 138, 58, .6); border-radius: 30px 6px 6px 30px; font-size: 1.3rem; }
.rl-spot.cover { background: rgba(255, 220, 100, .22); }
.rl-spot.hit { animation: hit 0.6s ease-in-out 5 alternate; box-shadow: 0 0 0 3px var(--gold), 0 0 20px var(--gold); z-index: 2; }
@keyframes hit { to { background: rgba(255, 220, 100, .45); } }
.rl-spot.won .rl-chip { box-shadow: 0 0 0 3px var(--gold), 0 0 16px var(--gold); animation: chipWon .5s 6 alternate; }
@keyframes chipWon { to { scale: 1.25; } }
.rl-spot.out .rl-chip { left: auto; right: 4px; transform: translateY(-50%); }
.diamond { display: inline-block; width: 22px; height: 22px; transform: rotate(45deg); border-radius: 3px; }
.diamond.red { background: #c8102e; } .diamond.black { background: #111; border: 1px solid #555; }
.rl-chip {
  --c: #2a7de1; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3;
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: .66rem; font-weight: 800; color: #fff; text-shadow: 0 1px 1px #000;
  background: radial-gradient(circle, var(--c) 0 52%, transparent 53%), repeating-conic-gradient(#fff 0 15deg, var(--c) 15deg 45deg);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .5); pointer-events: none; animation: chipIn .2s ease-out;
}
@keyframes chipIn { from { scale: 1.5; opacity: 0; } }
.rl-chip[data-v="1"] { --c: #8a8f98; } .rl-chip[data-v="5"] { --c: #d92a3c; } .rl-chip[data-v="10"] { --c: #2a7de1; }
.rl-chip[data-v="25"] { --c: #1f9e55; } .rl-chip[data-v="100"] { --c: #222; } .rl-chip[data-v="500"] { --c: #7b2fbf; }
.rl-chip[data-v="1000"] { --c: #d18f00; } .rl-chip[data-v="5000"] { --c: #e0457b; } .rl-chip[data-v="25000"] { --c: #0aa5a5; }
.rl-controls { display: grid; gap: 14px; justify-items: center; margin-top: 10px; }
.hint { color: var(--muted); font-size: .8rem; margin: 0; text-align: center; }

@media (max-width: 760px) {
  .rl-top { grid-template-columns: 1fr; }
  .wheel-box { max-width: 340px; margin: 0 auto; }
  .rl-board { grid-template-rows: repeat(3, 48px) 40px 40px; padding: 8px; border-width: 5px; min-width: 620px; }
  .rl-spot.num span { width: 28px; height: 28px; }
}

/* ============================== CASSE-BRIQUES ============================== */
.bk-wrap { max-width: 900px; margin: 0 auto; }
.bk-hud { gap: 14px !important; font-weight: 700; color: var(--muted); flex-wrap: wrap; font-size: .92rem; }
.bk-stage { position: relative; border-radius: 20px; overflow: hidden; border: 3px solid #2f7a35; box-shadow: 0 0 0 3px #0e2a14, var(--shadow); }
.bk-stage canvas { display: block; width: 100%; height: auto; aspect-ratio: 800 / 560; cursor: none; }
.bk-overlay { position: absolute; inset: 0; display: none; place-items: center; background: rgba(3, 8, 6, .72); backdrop-filter: blur(3px); padding: 16px; }
.bk-overlay.show { display: grid; }
.bk-card { text-align: center; max-width: 440px; }
.bk-card .monkey { width: 100px; margin: 0 auto; animation: bounce 1.6s infinite; }
.bk-card h2 { font-family: var(--font-title); font-weight: 400; color: var(--gold); margin: 6px 0; }
.bk-card p { color: #cfe0d5; }

/* ============================== STATS ============================== */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin-bottom: 22px; }
.stat-card { padding: 16px 18px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); display: grid; gap: 4px; }
.stat-card > span { color: var(--muted); font-size: .8rem; font-weight: 600; }
.stat-card b { font-size: 1.45rem; font-variant-numeric: tabular-nums; }
.stat-card small { color: var(--muted); font-size: .78rem; }
.stat-card.hl { background: linear-gradient(160deg, rgba(245, 197, 66, .16), var(--panel)); border-color: #4a3d12; }
.panel { padding: 18px 20px; border-radius: 20px; background: var(--panel); border: 1px solid var(--line); margin-bottom: 22px; }
.panel h2 { margin: 0 0 14px; font-size: 1.15rem; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tbl-scroll { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; min-width: 560px; }
.tbl th { text-align: left; color: var(--muted); font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.tbl td { padding: 10px; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.tbl td.r, .tbl th.r { text-align: right; }
.tbl tr.me td { background: rgba(245, 197, 66, .08); }
.rank { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #0006; font-weight: 800; }
.rank.r1 { background: var(--gold-grad); color: #3a2600; } .rank.r2 { background: linear-gradient(#f2f2f2, #9a9a9a); color: #222; } .rank.r3 { background: linear-gradient(#f0b27a, #a0522d); color: #2a1200; }
.bars { display: grid; gap: 12px; }
.bar-row { display: grid; grid-template-columns: 160px 1fr 90px; gap: 10px; align-items: center; font-size: .9rem; }
.bar-track { height: 12px; border-radius: 999px; background: #0007; overflow: hidden; position: relative; }
.bar-fill { height: 100%; border-radius: 999px; background: var(--gold-grad); transition: width .8s cubic-bezier(.2, .8, .2, 1); }
.bar-fill.w { background: linear-gradient(90deg, #22a85a, #6ef0a5); }
.legend { display: flex; gap: 14px; color: var(--muted); font-size: .8rem; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
@media (max-width: 600px) { .bar-row { grid-template-columns: 84px 1fr 70px; font-size: .8rem; } .stat-card b { font-size: 1.15rem; } }
@media (hover: none) { kbd { display: none; } }

/* ============================== ICÔNES SVG ============================== */
.ic { width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.25em; }
.btn .ic { width: 1.15em; height: 1.15em; }
.nav a .ni { display: inline-grid; place-items: center; }
.nav a .ni .ic { width: 22px; height: 22px; }
.nav a.active .ni .ic { filter: drop-shadow(0 0 6px rgba(245, 197, 66, .55)); }
.icon-btn { display: inline-grid; place-items: center; color: var(--muted); }
.icon-btn:hover { color: var(--text); }
.daily-btn { display: inline-flex; align-items: center; gap: 6px; }
.daily-btn .ic { width: 18px; height: 18px; }
.daily-icon { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; background: var(--gold-grad); color: #3a2600; flex: none; box-shadow: 0 4px 14px rgba(245, 197, 66, .3); }
.daily-icon .ic { width: 32px; height: 32px; }
.daily-icon.wait { background: #0006; color: var(--muted); box-shadow: none; }
.h-ic { display: inline-flex; align-items: center; gap: 8px; }
.h-ic .ic { color: var(--gold); width: 24px; height: 24px; }
.gname { display: inline-flex; align-items: center; gap: 8px; }
.gname .ic { color: var(--gold); }
.coco { display: inline-block; width: 16px; height: 16px; border-radius: 50%; margin-left: 3px; vertical-align: -3px;
  background: radial-gradient(circle at 35% 35%, #a87046, #4a2a12); box-shadow: inset -2px -2px 0 rgba(0, 0, 0, .3); }

/* lobby : logos & étiquettes */
.gc-title { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.gc-title h3 { margin: 0; }
.gc-logo { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: none; color: #3a2600; background: var(--gold-grad); box-shadow: 0 3px 10px rgba(245, 197, 66, .25); }
.gc-logo .ic { width: 22px; height: 22px; }
.gc-tag { display: inline-block; margin-top: 10px; padding: 3px 10px; border-radius: 999px; font-size: .75rem; font-weight: 700; color: var(--gold); background: rgba(245, 197, 66, .1); border: 1px solid rgba(245, 197, 66, .25); }
.gc-plinko .gc-art { background: radial-gradient(circle at 50% 0%, #1d4f6b, #071820); }
.gc-crash .gc-art { background: radial-gradient(circle at 80% 20%, #1c3a2a, #050c08); }
.gc-art > svg { width: 88%; height: 92%; }
.game-card:hover .art-crash g { transform-box: fill-box; }

/* ============================== MISES LIBRES ============================== */
.bet-input {
  width: 100%; min-width: 0; background: #0b120e; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px;
  color: var(--text); font: inherit; font-weight: 800; font-size: 1.05rem; text-align: center; font-variant-numeric: tabular-nums;
}
.bet-input:focus { outline: none; border-color: var(--gold2); box-shadow: 0 0 0 3px rgba(245, 197, 66, .18); }
.bet-input::-webkit-inner-spin-button { opacity: .4; }
.bet-ctrl .bet-input { width: 96px; padding: 6px 8px; }
.bet-ctrl .max-btn, .max-btn { width: auto !important; padding: 0 10px !important; font-size: .8rem !important; color: var(--gold); }
.bet-field { display: grid; gap: 6px; }
.bet-field label { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; display: flex; align-items: center; gap: 6px; }
.bet-field-row { display: flex; gap: 6px; align-items: center; }
.bet-field-row .btn { height: 40px; min-width: 42px; padding: 0 10px; }
.suffix { font-weight: 800; color: var(--muted); }

/* ============================== PANNEAUX LATÉRAUX ============================== */
.side-panel { display: grid; gap: 14px; align-content: start; padding: 16px; border-radius: 20px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); }
.btn.wide { width: 100%; }
.seg-field { display: grid; gap: 6px; }
.seg-field > label { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 12px; background: #0007; }
.seg button { border: 0; background: none; padding: 8px 6px; border-radius: 9px; cursor: pointer; color: var(--muted); font-weight: 700; }
.seg button.on { background: var(--panel2); color: var(--gold); box-shadow: 0 2px 8px #0006; }
.seg button:disabled { cursor: not-allowed; opacity: .55; }
.auto-row { display: flex; gap: 6px; flex-wrap: wrap; }
.auto-row .btn { flex: 1; }
.plk-info { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-radius: 10px; background: #0005; font-size: .9rem; }
.plk-info span { color: var(--muted); }

/* ============================== PLINKO ============================== */
.plk-wrap, .crash-wrap { max-width: 1180px; margin: 0 auto; }
.plk-layout, .crash-layout { display: grid; grid-template-columns: 290px 1fr; gap: 18px; align-items: start; }
.plk-stage { border-radius: 22px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow);
  background: radial-gradient(ellipse at 50% 0%, rgba(40, 120, 160, .35), transparent 60%), linear-gradient(180deg, #0c1d24, #060d10); }
.plk-stage canvas { display: block; width: 100%; height: auto; aspect-ratio: 800 / 720; max-height: calc(100svh - 170px); margin: 0 auto; object-fit: contain; }
.plk-hist, .cr-hist { display: flex; flex-wrap: wrap; gap: 5px; }
.plk-hist span { padding: 3px 8px; border-radius: 8px; font-size: .78rem; font-weight: 800; color: #1a0d00; background: var(--c); }
.plk-probs { display: flex; flex-wrap: wrap; gap: 6px; }
.plk-prob { display: grid; text-align: center; padding: 5px 8px; border-radius: 8px; background: color-mix(in srgb, var(--c) 22%, transparent); border: 1px solid var(--c); min-width: 62px; }
.plk-prob b { color: var(--c); font-size: .85rem; }
.plk-prob small { color: var(--muted); font-size: .7rem; }

/* ============================== CRASH ============================== */
.crash-stage { position: relative; border-radius: 22px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow);
  background: radial-gradient(ellipse at 85% 10%, rgba(61, 220, 132, .12), transparent 55%), linear-gradient(180deg, #0d1a13, #050906); transition: box-shadow .4s; }
.crash-stage canvas { display: block; width: 100%; height: auto; aspect-ratio: 900 / 520; }
.crash-stage.crashed { box-shadow: 0 0 0 2px rgba(255, 77, 94, .5), var(--shadow); }
.crash-stage.cashed { box-shadow: 0 0 0 2px rgba(61, 220, 132, .5), var(--shadow); }
.cr-center { position: absolute; left: 0; right: 0; top: 18%; text-align: center; pointer-events: none; }
.cr-mult { font-family: var(--font-title); font-size: clamp(2.4rem, 8vw, 5rem); color: #fff; text-shadow: 0 4px 0 rgba(0, 0, 0, .5), 0 0 30px rgba(61, 220, 132, .35); font-variant-numeric: tabular-nums; }
.crashed .cr-mult { color: var(--red); text-shadow: 0 4px 0 rgba(0, 0, 0, .5), 0 0 30px rgba(255, 77, 94, .5); }
.cashed .cr-mult { color: var(--green); }
.cr-sub { color: #cfe0d5; font-weight: 600; margin-top: 4px; }
.cr-rocket { position: absolute; width: 0; height: 0; pointer-events: none; transition: opacity .3s; }
.cr-rocket-inner { position: absolute; width: 54px; height: 99px; left: -27px; top: -50px; transform: rotate(var(--ang, 45deg)); transform-origin: 50% 50%; }
.rocket-body { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); }
.rocket-pilot { position: absolute; left: 50%; top: 23%; width: 30px; transform: translateX(-50%); }
.rocket-pilot .monkey { width: 100%; }
.flame { transform-origin: 30px 86px; animation: flame .12s infinite alternate; }
.flame.f2 { animation-duration: .09s; }
@keyframes flame { to { transform: scaleY(.7); } }
.cr-rocket.boom { opacity: 0; }
.cr-hist span { padding: 3px 8px; border-radius: 8px; font-size: .78rem; font-weight: 800; background: #0006; }
.cr-hist .bad { color: #ff8a95; } .cr-hist .good { color: var(--green); } .cr-hist .gold { color: var(--gold); background: rgba(245, 197, 66, .12); }
.cr-main { font-variant-numeric: tabular-nums; }

@media (max-width: 860px) {
  .plk-layout, .crash-layout { grid-template-columns: 1fr; }
  .plk-stage, .crash-stage { order: -1; }
  .plk-stage canvas { max-height: none; }
  .cr-rocket-inner { width: 36px; height: 66px; left: -18px; top: -33px; }
  .rocket-pilot { width: 20px; }
}


/* ============================== JEUX À PANNEAU (Tower, Mines, Dice) ============================== */
.tw-wrap, .mn-wrap, .dc-wrap { max-width: 1120px; margin: 0 auto; }
.side-layout { display: grid; grid-template-columns: 290px 1fr; gap: 18px; align-items: start; }
.seg.seg-wrap { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); }
.range { width: 100%; accent-color: var(--gold); }
.tw-stage, .mn-stage, .dc-stage { position: relative; border-radius: 22px; border: 1px solid var(--line); box-shadow: var(--shadow); padding: 22px; }
.tw-msg { margin-top: 14px; padding: 12px 16px; border-radius: 14px; text-align: center; font-weight: 700; display: none; }
.tw-msg.show { display: block; animation: lineIn .3s; }
.tw-msg.win { background: rgba(61, 220, 132, .12); color: var(--green); border: 1px solid rgba(61, 220, 132, .35); }
.tw-msg.lose { background: rgba(255, 77, 94, .12); color: #ff9aa4; border: 1px solid rgba(255, 77, 94, .35); }
.shake { animation: shake .45s; }
@keyframes shake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
.tile-svg { width: 70%; height: 70%; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .35)); }

/* Tower */
.tw-stage { background: linear-gradient(180deg, rgba(20, 60, 35, .5), rgba(8, 18, 12, .9)), repeating-linear-gradient(90deg, #13241a 0 40px, #112018 40px 80px); }
.tw-board { display: grid; gap: 8px; max-width: 560px; margin: 0 auto; }
.tw-row { display: grid; grid-template-columns: 78px 1fr 44px; align-items: center; gap: 10px; opacity: .55; transition: opacity .25s; }
.tw-row.current, .tw-row.passed { opacity: 1; }
.tw-mult { font-weight: 800; font-size: .85rem; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.tw-row.current .tw-mult { color: var(--gold); }
.tw-row.passed .tw-mult { color: var(--green); }
.tw-tiles { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 8px; }
.tw-tile { height: 44px; border-radius: 10px; border: 0; cursor: default; display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(180deg, #8a5a2b, #5a3414); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .3), inset 0 2px 0 rgba(255, 255, 255, .12); transition: transform .12s, filter .2s; }
.tw-row.current .tw-tile { cursor: pointer; background: linear-gradient(180deg, #b77a3a, #7a4a1c); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .3), 0 0 0 2px rgba(245, 197, 66, .55); }
.tw-row.current .tw-tile:hover { transform: translateY(-2px); filter: brightness(1.12); }
.tw-tile .tile-svg { width: 34px; height: 34px; }
.tw-tile.safe { background: linear-gradient(180deg, #2fbf6a, #167a40); }
.tw-tile.bomb { background: linear-gradient(180deg, #ff6b78, #a3001f); }
.tw-tile.boom { animation: boom .5s; }
.tw-tile.dim, .mn-tile.dim { opacity: .55; }
.tw-tile.ghost, .mn-tile.ghost { opacity: .35; filter: grayscale(.4); }
@keyframes boom { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }
.tw-monkey { width: 40px; animation: bob 1.6s ease-in-out infinite; }
.tw-monkey .monkey { width: 100%; }

/* Mines */
.mn-stage { background: radial-gradient(circle at 50% 0%, rgba(61, 220, 132, .12), transparent 60%), linear-gradient(180deg, #0f1c15, #070d0a); }
.mn-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; max-width: 520px; margin: 0 auto; }
.mn-tile { aspect-ratio: 1; border: 0; border-radius: 14px; display: grid; place-items: center; cursor: default; overflow: hidden;
  background: linear-gradient(180deg, #2f4a3a, #1d3126); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .3), inset 0 2px 0 rgba(255, 255, 255, .08); transition: transform .12s, filter .2s; }
.mn-grid.playing .mn-tile:not(.safe) { cursor: pointer; }
.mn-grid.playing .mn-tile:not(.safe):hover { transform: translateY(-3px); filter: brightness(1.25); }
.mn-tile.safe { background: linear-gradient(180deg, #ffd34d, #c88a0a); animation: pop .3s; }
.mn-tile.bomb { background: linear-gradient(180deg, #ff6b78, #a3001f); }
.mn-tile.boom { animation: boom .5s; }
.mn-tile.ghost { animation: none; }
@keyframes pop { from { transform: scale(.7); } }

/* Dice */
.dc-stage { background: radial-gradient(circle at 50% 0%, rgba(245, 197, 66, .1), transparent 60%), linear-gradient(180deg, #121c16, #070b09); padding: 34px 28px 26px; text-align: center; }
.dc-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dc-fields .bet-input { font-size: .92rem; padding: 8px 4px; }
.dc-result { font-family: var(--font-title); font-size: clamp(3rem, 10vw, 6rem); line-height: 1; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 4px 0 rgba(0, 0, 0, .45); }
.dc-result.rolling { color: var(--muted); }
.dc-result.win { color: var(--green); text-shadow: 0 4px 0 rgba(0, 0, 0, .45), 0 0 30px rgba(61, 220, 132, .4); }
.dc-result.lose { color: var(--red); text-shadow: 0 4px 0 rgba(0, 0, 0, .45), 0 0 30px rgba(255, 77, 94, .4); }
.dc-sub { color: #cfe0d5; margin: 10px 0 34px; min-height: 1.5em; font-weight: 600; }
.dc-slider { position: relative; margin: 50px 6px 10px; height: 46px; }
.dc-track { position: absolute; left: 0; right: 0; top: 16px; height: 14px; border-radius: 999px; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .4); }
.dc-slider input[type=range] { position: absolute; left: -11px; right: -11px; width: calc(100% + 22px); top: 9px; height: 28px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.dc-slider input[type=range]::-webkit-slider-runnable-track { background: transparent; height: 28px; }
.dc-slider input[type=range]::-moz-range-track { background: transparent; }
.dc-slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 8px; background: var(--gold-grad); border: 2px solid #6b4300; box-shadow: 0 3px 8px rgba(0, 0, 0, .5); }
.dc-slider input[type=range]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 8px; background: #f5c542; border: 2px solid #6b4300; }
.dc-slider input[type=range]:disabled { cursor: not-allowed; }
.dc-marker { position: absolute; top: -40px; left: 50%; transform: translateX(-50%); opacity: 0; transition: left .45s cubic-bezier(.2, .8, .2, 1), opacity .2s; pointer-events: none; }
.dc-marker.show { opacity: 1; }
.dc-marker span { display: block; padding: 4px 10px; border-radius: 10px; font-weight: 800; font-size: .9rem; color: #062d16; background: var(--green); position: relative; font-variant-numeric: tabular-nums; }
.dc-marker.lose span { background: var(--red); color: #fff; }
.dc-marker span::after { content: ''; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); border: 6px solid transparent; border-bottom: 0; border-top-color: inherit; }
.dc-marker.win span::after { border-top-color: var(--green); } .dc-marker.lose span::after { border-top-color: var(--red); }
.dc-scale { position: absolute; left: 0; right: 0; top: 38px; display: flex; justify-content: space-between; color: var(--muted); font-size: .75rem; font-weight: 700; }
.dc-hist { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin-top: 30px; }
.dc-hist span { padding: 3px 8px; border-radius: 8px; font-size: .78rem; font-weight: 800; background: #0006; font-variant-numeric: tabular-nums; }
.dc-hist .good { color: var(--green); } .dc-hist .bad { color: #ff8a95; }
.gc-tower .gc-art { background: radial-gradient(circle at 50% 100%, #2b5a2f, #0a160c); }
.gc-mines .gc-art { background: radial-gradient(circle at 50% 50%, #1f3a2a, #07100b); }
.gc-dice .gc-art { background: radial-gradient(circle at 50% 30%, #2a2a10, #0b0b06); }

@media (max-width: 860px) {
  .side-layout { grid-template-columns: 1fr; }
  .tw-stage, .mn-stage, .dc-stage { order: -1; padding: 14px; }
  .tw-row { grid-template-columns: 58px 1fr 30px; gap: 6px; }
  .tw-tile { height: 36px; }
  .tw-monkey { width: 28px; }
  .mn-grid { gap: 6px; }
  .dc-stage { padding: 22px 14px 16px; }
}

/* ============================== SUIVI DE BALANCE ============================== */
.icon-btn.on { color: #3a2600; background: var(--gold-grad); border-color: transparent; }
.icon-btn.active-bg { color: var(--gold); border-color: #5a4a14; }
.tracker {
  position: fixed; right: 16px; bottom: 16px; z-index: 120; width: 320px; padding: 12px 14px 10px; border-radius: 18px;
  background: rgba(16, 25, 20, .96); backdrop-filter: blur(10px); border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(0, 0, 0, .6);
  animation: tkIn .25s ease-out;
}
@keyframes tkIn { from { transform: translateY(16px); opacity: 0; } }
.tk-head { display: flex; align-items: center; justify-content: space-between; }
.tk-title { display: flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tk-title .ic { color: var(--gold); }
.tk-actions { display: flex; gap: 4px; }
.tk-btn { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line); background: rgba(255, 255, 255, .04); color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.tk-btn:hover { color: var(--text); background: rgba(255, 255, 255, .1); }
.tk-btn .ic { width: 16px; height: 16px; }
.tk-net { font-family: var(--font-title); font-size: 1.9rem; line-height: 1.1; margin: 6px 0 4px; font-variant-numeric: tabular-nums; color: var(--text); }
.tk-chart { display: block; width: 100%; aspect-ratio: 300 / 120; height: auto; border-radius: 10px; background: rgba(0, 0, 0, .25); }
.tk-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: .78rem; color: var(--muted); }
.tk-foot b { color: var(--text); font-variant-numeric: tabular-nums; }
.tk-foot b.pos { color: var(--green); } .tk-foot b.neg { color: var(--red); }
.tk-stop { display: block; margin: 8px auto 0; background: none; border: 0; color: var(--muted); font-size: .75rem; cursor: pointer; text-decoration: underline; }
.tk-stop:hover { color: var(--red); }

/* ============================== TRANSFERTS ============================== */
.tr-form { display: grid; gap: 12px; }
.tr-form > p { margin: 0; }
.tr-form label { display: grid; gap: 5px; font-size: .85rem; color: var(--muted); font-weight: 600; }
.tr-form input { background: #0b120e; border: 1px solid var(--line); border-radius: 11px; padding: 11px 13px; color: var(--text); font: inherit; font-size: 1rem; }
.tr-form input:focus { outline: none; border-color: var(--gold2); box-shadow: 0 0 0 3px rgba(245, 197, 66, .18); }
.tr-hist { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.tr-hist li { display: flex; justify-content: space-between; padding: 7px 10px; border-radius: 9px; background: #0005; font-size: .88rem; }
.tr-hist li.in > b { color: var(--green); } .tr-hist li.out > b { color: #ff9aa4; }

/* ============================== MEILLEURES WINS ============================== */
.bw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.bw-card { padding: 12px 14px; border-radius: 14px; background: #0005; border: 1px solid var(--line); }
.bw-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.bw-head .ic { color: var(--gold); }
.bw-card ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.bw-card li { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 9px; font-size: .9rem; }
.bw-card li.me { background: rgba(245, 197, 66, .1); }
.bw-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bw-empty { margin: 0; font-size: .85rem; }

@media (max-width: 760px) {
  .tracker { right: 10px; left: 10px; width: auto; bottom: calc(76px + env(safe-area-inset-bottom)); padding: 8px 10px; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "head head" "net chart" "foot foot"; column-gap: 10px; }
  .tk-head { grid-area: head; }
  .tk-net { grid-area: net; font-size: 1.3rem; align-self: center; margin: 0; }
  .tk-chart { grid-area: chart; aspect-ratio: auto; height: 54px; }
  .tk-foot { grid-area: foot; margin-top: 4px; }
  .tk-stop { display: none; }
  .tk-btn { width: 26px; height: 26px; }
  body.tk-open .foot { padding-bottom: 240px; }
  .send-btn { display: none; }
}

/* ============================== BLACKJACK : MISES ANNEXES ============================== */
.side-bets { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: min(620px, 100%); }
.side-bet { display: grid; gap: 5px; padding: 10px 12px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.side-bet label { font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.side-bet label small { color: var(--muted); font-weight: 600; text-transform: none; letter-spacing: 0; margin-left: 4px; }
.side-bet .bet-input { padding: 6px 8px; font-size: .95rem; }
.side-bet .btn { white-space: nowrap; }
.side-spots { position: absolute; left: 40px; top: 50%; transform: translateY(-50%); display: grid; gap: 10px; z-index: 1; }
.side-spot { width: 66px; height: 66px; border-radius: 50%; border: 2px dashed rgba(255, 230, 150, .35); display: grid; place-content: center; text-align: center; line-height: 1.1; color: rgba(255, 230, 150, .5); }
.side-spot small { font-size: .55rem; font-weight: 800; letter-spacing: .08em; }
.side-spot b { font-size: .8rem; color: #ffe9a8; }
.side-spot.on { border-style: solid; border-color: var(--gold); background: rgba(245, 197, 66, .12); color: var(--gold); }
.side-res { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%) scale(.8); z-index: 15; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; }
.side-res.show { opacity: 1; transform: translate(-50%, -50%) scale(1); animation: sideFade 4.5s forwards; }
@keyframes sideFade { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }
.side-res span { padding: 6px 12px; border-radius: 10px; font-size: .85rem; background: rgba(0, 0, 0, .75); border: 1px solid rgba(255, 255, 255, .15); white-space: nowrap; }
.side-res span.win { border-color: var(--gold); color: var(--gold); }
.side-res span.lose { color: #cfd8d2; }

/* ============================== CALCUL MENTAL ============================== */
.qz-wrap { max-width: 720px; margin: 0 auto; }
.qz-stage { border-radius: 22px; border: 1px solid var(--line); box-shadow: var(--shadow); padding: 22px; background: radial-gradient(circle at 50% 0%, rgba(61, 220, 132, .12), transparent 60%), linear-gradient(180deg, #0f1c15, #070d0a); }
.qz-dots { display: flex; justify-content: center; gap: 8px; margin-bottom: 18px; }
.qz-dots i { width: 14px; height: 14px; border-radius: 50%; background: #2f4a3a; transition: background .2s, transform .2s; }
.qz-dots i.cur { background: var(--gold); transform: scale(1.25); }
.qz-dots i.ok { background: var(--green); } .qz-dots i.ko { background: var(--red); }
.qz-card { text-align: center; padding: 10px 0; }
.qz-card .monkey { width: 100px; margin: 0 auto; animation: bounce 1.8s infinite; }
.qz-card h2 { font-family: var(--font-title); font-weight: 400; color: var(--gold); margin: 10px 0 6px; }
.qz-card p { color: #cfe0d5; margin: 0 0 16px; }
.qz-q { text-align: center; padding: 14px; border-radius: 18px; transition: background .2s; }
.qz-q.good { background: rgba(61, 220, 132, .12); } .qz-q.bad { background: rgba(255, 77, 94, .12); animation: shake .4s; }
.qz-num { color: var(--muted); font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.qz-expr { font-family: var(--font-title); font-size: clamp(2.2rem, 9vw, 4rem); color: #fff; margin: 6px 0; font-variant-numeric: tabular-nums; }
.qz-ans { color: var(--gold); }
.qz-q.good .qz-ans { color: var(--green); } .qz-q.bad .qz-ans { color: var(--red); }
.qz-verdict { font-weight: 800; }
.qz-q.good .qz-verdict { color: var(--green); } .qz-q.bad .qz-verdict { color: #ff9aa4; }
.qz-timer { position: relative; height: 14px; border-radius: 999px; background: #0007; overflow: hidden; margin: 14px 0; }
.qz-bar { height: 100%; width: 100%; background: linear-gradient(90deg, #22a85a, #6ef0a5); border-radius: 999px; }
.qz-bar.hurry { background: linear-gradient(90deg, #d92a3c, #ff8a8a); }
.qz-timer span { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); font-size: .7rem; font-weight: 800; color: #fff; text-shadow: 0 1px 2px #000; }
.qz-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; max-width: 420px; margin: 0 auto 14px; }
.qz-input { font-size: 1.5rem !important; padding: 10px !important; }
.qz-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 320px; margin: 0 auto; }
.qz-pad button { height: 52px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, .05); color: var(--text); font-size: 1.3rem; font-weight: 800; cursor: pointer; }
.qz-pad button:hover:not(:disabled) { background: rgba(255, 255, 255, .1); }
.qz-pad button.ok { background: var(--gold-grad); color: #3a2600; border: 0; }
.qz-pad button:disabled { opacity: .45; }
.gc-quiz .gc-art { background: radial-gradient(circle at 50% 30%, #173a24, #07100b); }

/* ============================== CLASSEMENT À CÔTÉ DU JEU ============================== */
main#view.has-board { max-width: 1640px; }
.with-board { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 20px; align-items: start; }
.game-main { min-width: 0; }
.game-board { position: sticky; top: 96px; }
.gb { padding: 16px; border-radius: 20px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); display: grid; gap: 10px; }
.gb-head { display: flex; align-items: center; gap: 8px; font-weight: 800; }
.gb-head .ic { color: var(--gold); }
.gb-sub { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.gb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.gb-list li { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: #0004; font-size: .9rem; }
.gb-list li.me { background: rgba(245, 197, 66, .12); box-shadow: inset 0 0 0 1px rgba(245, 197, 66, .3); }
.gb-list li.muted { display: block; background: none; }
.gb-list b { font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 4px; }
.gb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gb-me { font-size: .82rem; color: var(--muted); }
.gb-me:empty { display: none; }
@media (max-width: 1260px) {
  .with-board { grid-template-columns: 1fr; }
  .game-board { position: static; max-width: 560px; width: 100%; margin: 0 auto; }
}
@media (max-width: 700px) {
  .side-bets { grid-template-columns: 1fr; }
  .side-spots { left: 12px; top: auto; bottom: 22px; transform: none; grid-auto-flow: column; gap: 6px; }
  .bj-table .table-monkey { display: none; }
  .felt-text small { display: none; }
  .side-spot { width: 46px; height: 46px; }
  .side-spot small { font-size: .45rem; }
  .qz-pad button { height: 48px; }
}

/* ============================== V6 : PARIS AUTOMATIQUES ============================== */
.auto-box2 { display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: #0005; border: 1px solid var(--line); text-align: left; }
.ab-title { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 800; }
.ab-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ab-grid label, .ab-extra { display: grid; gap: 4px; font-size: .7rem; color: var(--muted); font-weight: 700; }
.ab-grid .bet-input, .ab-extra .bet-input { padding: 7px 6px; font-size: .92rem; }
.ab-status { font-size: .8rem; color: var(--muted); min-height: 1.2em; }
.ab-note { margin: 0; font-size: .78rem; color: var(--muted); }
.ab-go { margin-top: 2px; }
.slot-auto { max-width: 520px; margin: 16px auto 0; }
.rl-controls .auto-box2 { width: min(520px, 100%); }
.bj-controls .auto-box2 { width: min(620px, 100%); }

/* ============================== V6 : BLACKJACK, MISES SUR LE TAPIS ============================== */
.bet-spot, .side-spot { cursor: default; }
.bet-spot.placeable, .side-spot.placeable { cursor: pointer; transition: transform .15s, box-shadow .2s, border-color .2s; }
.bet-spot.placeable:hover, .side-spot.placeable:hover { transform: scale(1.06); border-color: var(--gold); box-shadow: 0 0 0 4px rgba(245, 197, 66, .18); }
.bet-spot.placeable.empty { animation: spotPulse 2s infinite; }
@keyframes spotPulse { 50% { box-shadow: 0 0 0 6px rgba(245, 197, 66, .15); } }
.side-spot { position: relative; width: 78px; height: 78px; }
.ss-pay { font-size: .5rem; color: rgba(255, 230, 150, .55); font-weight: 700; }
.spot-x { position: absolute; top: -4px; right: -4px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: #2a0d10; color: #ff9aa4; font-weight: 800; font-size: .85rem; line-height: 1; cursor: pointer; display: none; box-shadow: 0 2px 6px #0008; }
.bet-spot.placeable:not(.empty) .spot-x, .side-spot.placeable.on .spot-x { display: grid; place-items: center; }
.bj-hint { margin: 0; color: var(--muted); font-size: .85rem; text-align: center; }
.bj-hint b { color: var(--gold); }
.bj-controls .chip-row .chip.sel { transform: translateY(-8px) scale(1.08); }
.bj-wrap.auto-on .ctrl-play, .bj-wrap.auto-on .bet-actions, .bj-wrap.auto-on .chip-row { pointer-events: none; opacity: .55; }
.bj-controls[data-phase="busy"] .ctrl-bet, .bj-controls[data-phase="play"] .ctrl-bet { display: none; }
.bj-wrap.auto-on .bj-controls .ctrl-bet { display: grid !important; }

/* ============================== V6 : ACCUEIL ============================== */
.lobby-cat { display: flex; align-items: center; gap: 10px; margin: 26px 0 12px; font-family: var(--font-title); font-weight: 400; font-size: 1.25rem; color: var(--gold); }
.lobby-cat .ic { width: 26px; height: 26px; }
.lobby-cat.free { color: var(--green); }
.lobby-cat + .daily-card { margin-top: 0; }
.free-grid .gc-tag { color: var(--green); background: rgba(61, 220, 132, .1); border-color: rgba(61, 220, 132, .3); }
.gc-ach .gc-art { background: radial-gradient(circle at 50% 40%, #4a3a0a, #0d0a03); }
.ach-teaser { font-family: var(--font-title); color: var(--gold); font-size: 3rem; display: flex; align-items: baseline; gap: 6px; }
.ach-teaser span { font-size: 1.3rem; color: var(--muted); }
.nav-sep { width: 1px; align-self: stretch; margin: 8px 4px; background: var(--line); flex: none; }
.nav a.nav-free .ni { color: var(--green); }
.foot a { color: var(--muted); text-decoration: underline; }

/* ============================== V6 : SUCCÈS ============================== */
.ach-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-radius: 20px; background: linear-gradient(135deg, #2a2209, #121b16); border: 1px solid #4a3d12; margin-bottom: 16px; }
.ach-sum { flex: 1; min-width: 240px; display: grid; gap: 8px; }
.ach-count { display: flex; align-items: baseline; gap: 6px; font-family: var(--font-title); font-size: 1.4rem; color: var(--muted); }
.ach-count b { font-size: 2.4rem; color: var(--gold); font-weight: 400; }
.ach-count span { font-family: var(--font); font-size: .9rem; margin-left: 6px; }
.ach-bar, .ach-prog { height: 10px; border-radius: 999px; background: #0007; overflow: hidden; }
.ach-bar i, .ach-prog i { display: block; height: 100%; background: var(--gold-grad); border-radius: 999px; }
.ach-prog { height: 6px; margin-top: 6px; }
.ach-tiers { display: flex; flex-wrap: wrap; gap: 6px; }
.tier-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .72rem; font-weight: 800; white-space: nowrap; }
.t-bronze.tier-badge { background: rgba(205, 127, 50, .18); color: #e6a066; }
.t-silver.tier-badge { background: rgba(200, 210, 220, .15); color: #dfe7ee; }
.t-gold.tier-badge { background: rgba(245, 197, 66, .18); color: var(--gold); }
.t-legend.tier-badge { background: linear-gradient(90deg, rgba(180, 90, 255, .3), rgba(255, 90, 180, .3)); color: #ffc7ff; }
.ach-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ach-tabs { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); flex: 1; }
.ach-tabs button { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: .82rem; position: relative; }
.ach-tabs button::after { content: attr(data-count); font-size: .66rem; color: var(--muted); margin-left: 4px; }
.ach-tabs .ic { width: 16px; height: 16px; }
.ach-hide { font-size: .85rem; color: var(--muted); display: flex; gap: 6px; align-items: center; cursor: pointer; }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.ach-card { display: grid; grid-template-columns: 48px 1fr; gap: 12px; padding: 14px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); opacity: .78; }
.ach-card.done { opacity: 1; border-color: #4a3d12; background: linear-gradient(160deg, rgba(245, 197, 66, .08), var(--panel)); }
.ach-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: #0006; color: var(--muted); }
.ach-ic .ic { width: 26px; height: 26px; }
.ach-card.done .ach-ic { background: var(--gold-grad); color: #3a2600; }
.ach-card.done.t-legend .ach-ic { background: linear-gradient(135deg, #c77dff, #ff6fae); color: #fff; }
.ach-txt b { display: block; }
.ach-txt p { margin: 2px 0 0; color: var(--muted); font-size: .86rem; }
.ach-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; font-size: .75rem; color: var(--muted); }
.toast-ach { border-color: #6b5a12; background: linear-gradient(180deg, #2c2709, #1c190a); }
.ach-toast { display: flex; align-items: center; gap: 10px; }
.ach-toast .ic { width: 30px; height: 30px; color: var(--gold); flex: none; }
.ach-toast span { display: grid; }
.ach-toast small { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.ach-toast em { font-style: normal; color: var(--green); font-weight: 800; font-size: .85rem; }

/* ============================== V6 : NOUVEAUTÉS ============================== */
.cl-wrap { max-width: 860px; margin: 0 auto; display: grid; gap: 16px; }
.cl-item { padding: 18px 20px; border-radius: 20px; background: var(--panel); border: 1px solid var(--line); }
.cl-item header { display: flex; gap: 14px; align-items: center; }
.cl-item h2 { margin: 0; font-size: 1.15rem; }
.cl-item small { color: var(--muted); }
.cl-v { font-family: var(--font-title); font-size: 1.3rem; padding: 6px 12px; border-radius: 12px; background: var(--gold-grad); color: #3a2600; }
.cl-item h3 { margin: 14px 0 6px; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.cl-item ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: #d6e4dc; font-size: .93rem; }
.cl-pop .cl-item { background: none; border: 0; padding: 0; }

@media (max-width: 760px) {
  .ab-grid { grid-template-columns: 1fr 1fr 1fr; }
  .nav-sep { margin: 6px 2px; }
  .side-spot { width: 52px; height: 52px; }
  .ss-pay { display: none; }
  .ach-tabs { grid-template-columns: repeat(3, 1fr); }
}

/* ============================== V7 : QUIZ À CHOIX, SUCCÈS CLIQUABLES ============================== */
.gc-capitals .gc-art { background: radial-gradient(circle at 50% 35%, #12324a, #060d14); }
.gc-movies .gc-art { background: radial-gradient(circle at 50% 35%, #3a1420, #0d0507); }
.art-capitals, .art-movies { width: 100%; height: 100%; }
.mcq-q { padding: 16px 14px; }
.mcq-label { color: #cfe0d5; font-weight: 700; margin-top: 6px; }
.mcq-big { font-family: var(--font-title); font-size: clamp(1.5rem, 6vw, 2.6rem); color: #fff; margin: 8px 0 2px; line-height: 1.15; overflow-wrap: anywhere; }
.mcq-sub { color: var(--muted); font-size: .9rem; }
.mcq-q .qz-verdict { min-height: 1.4em; margin-top: 6px; }
.mcq-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mcq-c { display: flex; align-items: center; gap: 10px; text-align: left; min-height: 58px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .05); color: var(--text); font: inherit; font-weight: 700; cursor: pointer; transition: background .15s, transform .1s, border-color .15s; }
.mcq-c:hover:not(:disabled) { background: rgba(255, 255, 255, .1); border-color: var(--gold); }
.mcq-c:active:not(:disabled) { transform: scale(.98); }
.mcq-c kbd, .mcq-reveal kbd { flex: none; display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 5px; border-radius: 8px; background: #0007; color: var(--gold); font: 800 .75rem var(--font-body, inherit); }
.mcq-c:disabled { cursor: default; opacity: .55; }
.mcq-c.right { opacity: 1; background: rgba(61, 220, 132, .18); border-color: var(--green); }
.mcq-c.right kbd { background: var(--green); color: #052; }
.mcq-c.wrong { opacity: 1; background: rgba(255, 77, 94, .16); border-color: var(--red); }
.mcq-reveal { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; margin-top: 14px; min-height: 8px; }
.mcq-reveal kbd { min-width: 0; height: 20px; font-size: .62rem; margin-left: 4px; }
.mv-reveal { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 14px; background: #0005; border: 1px solid var(--line); max-width: 460px; }
.mv-reveal img { width: 62px; height: 93px; object-fit: cover; border-radius: 8px; flex: none; box-shadow: 0 4px 12px #0008; }
.mv-reveal small { color: var(--muted); line-height: 1.5; }
.ach-hint { margin: -4px 0 12px; font-size: .85rem; }
.ach-card { cursor: pointer; transition: transform .12s, border-color .15s; }
.ach-card:hover, .ach-card:focus-visible { transform: translateY(-2px); border-color: var(--gold); outline: none; }
.ach-who { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.ach-who.first { color: var(--gold); font-weight: 800; }
.ach-who .ic { width: 14px; height: 14px; }
.ach-detail { max-width: 480px; }
.achd-head { display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: center; margin-bottom: 14px; }
.achd-head p { margin: 0 0 6px; color: #d6e4dc; }
.achd-head .ach-cat { font-size: .75rem; color: var(--muted); }
.achd-first { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: linear-gradient(160deg, rgba(245, 197, 66, .16), rgba(245, 197, 66, .04)); border: 1px solid #6b5a12; }
.achd-first > .ic { width: 34px; height: 34px; color: var(--gold); flex: none; }
.achd-first div { display: grid; }
.achd-first small { color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }
.achd-first b { color: var(--gold); font-size: 1.1rem; }
.achd-first span { font-size: .85rem; color: #d6e4dc; }
.achd-stat { margin: 12px 0 6px; font-size: .85rem; color: var(--muted); font-weight: 700; }
.achd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; max-height: 260px; overflow-y: auto; }
.achd-list li { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center; padding: 7px 10px; border-radius: 10px; background: #0004; }
.achd-list li.me { background: rgba(61, 220, 132, .12); }
.achd-list .r { color: var(--muted); font-weight: 800; font-size: .8rem; }
.achd-list li:first-child .r { color: var(--gold); }
.achd-list small { color: var(--muted); font-size: .76rem; }
.achd-none { text-align: center; padding: 18px; border-radius: 14px; background: #0004; color: #d6e4dc; }
.achd-none b { color: var(--gold); }
.achd-note { font-size: .74rem; margin: 10px 0 0; }
@media (max-width: 560px) {
  .mcq-choices { grid-template-columns: 1fr; }
  .mcq-c { min-height: 50px; }
  .achd-list li { grid-template-columns: 24px 1fr; }
  .achd-list small { grid-column: 2; }
}

/* ============================== V8 : SLOT (SCATTER, WILD ×2, GROS GAINS) ============================== */
.sym-wildx::before { background: radial-gradient(circle, rgba(190, 120, 255, .6), transparent 65%) !important; }
.sym-wildx .wild-tag { background: linear-gradient(180deg, #a855f7, #5b1aa3); }
.x2-badge { position: absolute; top: -4%; right: -6%; font-family: var(--font-title); font-size: clamp(.6rem, 2vw, 1.1rem); color: #3a2600; background: var(--gold-grad); border: 2px solid #fff3b0; border-radius: 999px; padding: 1px 6px; box-shadow: 0 2px 6px #0008; transform: rotate(12deg); }
.sym-scatter { position: relative; display: grid; place-items: center; }
.sym-scatter::before { content: ''; position: absolute; inset: -8%; border-radius: 50%; background: radial-gradient(circle, rgba(61, 220, 132, .45), transparent 65%); animation: wildGlow 1.6s ease-in-out infinite; }
.sym-scatter .sym { position: relative; }
.scatter-tag { background: linear-gradient(180deg, #2fd17a, #0b7a3c) !important; }
.pt-sym .x2-badge { font-size: .5rem; padding: 0 3px; }
.mini-reels .sym-scatter, .mini-reels .sym-wildx { width: 100%; height: 100%; }
.win-display .win-mult { display: block; font-size: .72rem; color: var(--gold); font-weight: 800; min-height: 1em; }
.reel.anticipate-scatter { box-shadow: inset 0 0 0 3px #3ddc84, 0 0 24px rgba(61, 220, 132, .6); }

.big-win { pointer-events: none; overflow: hidden; gap: 2px; }
.big-win.show { pointer-events: auto; cursor: pointer; }
.bw-rays { position: absolute; left: 50%; top: 50%; width: 220%; aspect-ratio: 1; transform: translate(-50%, -50%); background: repeating-conic-gradient(from 0deg, rgba(255, 210, 70, .22) 0 10deg, transparent 10deg 20deg); animation: bwSpin 9s linear infinite; mask-image: radial-gradient(circle, #000 15%, transparent 55%); -webkit-mask-image: radial-gradient(circle, #000 15%, transparent 55%); z-index: -1; }
.big-win.t-25 .bw-rays { background: repeating-conic-gradient(from 0deg, rgba(120, 220, 255, .25) 0 10deg, transparent 10deg 20deg); }
.big-win.t-50 .bw-rays { background: repeating-conic-gradient(from 0deg, rgba(200, 120, 255, .3) 0 10deg, transparent 10deg 20deg); animation-duration: 5s; }
.big-win.t-100 .bw-rays { background: repeating-conic-gradient(from 0deg, rgba(255, 90, 120, .32) 0 8deg, rgba(255, 210, 70, .3) 8deg 16deg, transparent 16deg 24deg); animation-duration: 3s; }
@keyframes bwSpin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.bw-title.pop { animation: bwPop .5s cubic-bezier(.2, .9, .3, 1.5), bounce .8s .5s infinite; }
@keyframes bwPop { 0% { transform: scale(.3) rotate(-8deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.bw-mult { font-family: var(--font-title); font-size: clamp(2.2rem, 9vw, 4.6rem); line-height: 1; color: #fff; text-shadow: 0 0 18px rgba(255, 210, 70, .9), 0 4px 0 #6b4300; font-variant-numeric: tabular-nums; }
.big-win.t-50 .bw-mult { text-shadow: 0 0 22px rgba(200, 120, 255, .95), 0 4px 0 #3b0a6b; }
.big-win.t-100 .bw-mult { text-shadow: 0 0 26px rgba(255, 90, 120, .95), 0 4px 0 #6b0a1e; animation: bwShake .15s infinite; }
@keyframes bwShake { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(1px, -1px); } 75% { transform: translate(-1px, 1px); } }
.bw-amount { display: flex; justify-content: center; align-items: center; }
.bw-skip { color: #fff9; font-size: .7rem; margin-top: 6px; letter-spacing: .08em; text-transform: uppercase; }

/* ============================== V8 : QUIZ MODES ============================== */
.mcq-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 520px; margin: 0 auto 16px; }
.mcq-mode { display: grid; gap: 3px; text-align: left; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .04); color: var(--text); font: inherit; cursor: pointer; transition: border-color .15s, background .15s; }
.mcq-mode b { font-family: var(--font-title); font-weight: 400; font-size: 1.05rem; }
.mcq-mode span { font-size: .82rem; color: #cfe0d5; }
.mcq-mode small { font-size: .7rem; color: var(--muted); }
.mcq-mode:hover { border-color: var(--gold); }
.mcq-mode.on { border-color: var(--gold); background: rgba(245, 197, 66, .1); box-shadow: 0 0 0 1px var(--gold) inset; }
.mcq-mode.on b { color: var(--gold); }
.mcq-text { max-width: 520px; }
.mcq-text input { font-size: 1.2rem !important; padding: 10px 14px !important; text-align: center; }
.mcq-text input.ok { border-color: var(--green) !important; color: var(--green); }
.mcq-text input.ko { border-color: var(--red) !important; color: #ff9aa4; text-decoration: line-through; }
.qz-end-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; align-items: center; }
@media (max-width: 560px) { .mcq-modes { grid-template-columns: 1fr; } }

/* ============================== V8 : ACCUEIL REPLIABLE ============================== */
.lc-toggle { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: calc(100% + 20px); cursor: pointer; padding: 6px 10px; margin: 0 -10px; border-radius: 12px; transition: background .15s; }
.lc-toggle:hover { background: rgba(255, 255, 255, .04); }
.lc-toggle:focus-visible { outline: 2px solid var(--gold); }
.lc-count { font-family: 'Rubik', system-ui, sans-serif; font-size: .75rem; color: var(--muted); font-weight: 600; letter-spacing: .02em; }
.lc-chev { margin-left: auto; display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .05); transition: transform .25s; transform: rotate(90deg); }
.lc-chev .ic { width: 18px !important; height: 18px !important; }
.lobby-sec.closed .lc-chev { transform: rotate(0deg); }
.lobby-sec .lc-body { animation: lcOpen .3s ease; }
.lobby-sec.closed .lc-body { display: none; }
@keyframes lcOpen { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.lc-body .daily-card { margin-top: 0; margin-bottom: 18px; }
@media (max-width: 560px) { .lc-count { display: none; } }

/* ============================== V8 : PROFILS ============================== */
.av { --av-bg: #2f7a35; display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--av-bg) 70%, #fff), var(--av-bg)); box-shadow: 0 0 0 2px rgba(255, 255, 255, .12); vertical-align: middle; }
.av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av .monkey { width: 92%; height: 92%; margin-top: 12%; animation: none !important; }
.av-xs { width: 22px; height: 22px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .15); }
.av-sm { width: 28px; height: 28px; }
.av-md { width: 44px; height: 44px; }
.av-xl { width: 104px; height: 104px; box-shadow: 0 0 0 3px var(--gold), 0 8px 24px #0008; }
.user-btn { display: inline-flex; align-items: center; gap: 7px; }
.ub-av { display: inline-grid; }
.pl-link { all: unset; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 8px; }
.pl-link:hover { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.pl-link:focus-visible { outline: 2px solid var(--gold); }
.bw-card .pl-link, .gb-list .pl-link { min-width: 0; }
.achd-list b { display: inline-flex; align-items: center; gap: 8px; }
.achd-first .av { flex: none; }
.hero h1 { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hero-av { display: inline-grid; transition: transform .2s; }
.hero-av:hover { transform: scale(1.08) rotate(-4deg); }
.hero-av .av { width: 56px; height: 56px; box-shadow: 0 0 0 3px var(--gold); }

.pf-wrap { max-width: 760px; margin: 0 auto; display: grid; gap: 18px; }
.pf-card { padding: 20px; border-radius: 20px; background: linear-gradient(160deg, rgba(245, 197, 66, .08), var(--panel)); border: 1px solid var(--line); }
.pf-modal .pf-card { padding: 0; background: none; border: 0; }
.pf-top { display: flex; gap: 18px; align-items: center; }
.pf-id { min-width: 0; }
.pf-id h2 { margin: 0; font-family: var(--font-title); font-weight: 400; color: var(--gold); font-size: 1.5rem; overflow-wrap: anywhere; }
.pf-id h2 small { font-family: 'Rubik', sans-serif; font-size: .8rem; color: var(--muted); }
.pf-bio { margin: 8px 0 0; color: #e3eee7; white-space: pre-wrap; overflow-wrap: anywhere; font-style: italic; }
.pf-bio.empty { color: var(--muted); }
.pf-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-top: 16px; }
.pf-stats div { padding: 10px; border-radius: 12px; background: #0004; display: grid; gap: 2px; }
.pf-stats span { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.pf-stats b { font-size: 1rem; overflow-wrap: anywhere; }
.pf-ach { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.pf-ach .tier-badge { display: inline-flex; align-items: center; gap: 4px; }
.pf-ach .ic { width: 13px; height: 13px; }
.pf-edit { padding: 20px; border-radius: 20px; background: var(--panel); border: 1px solid var(--line); }
.pf-edit h3 { margin: 0 0 10px; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.pf-edit h3:not(:first-child) { margin-top: 18px; }
.pf-avatars { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 10px; }
.pf-av, .pf-upload { all: unset; box-sizing: border-box; display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; cursor: pointer; transition: transform .15s; }
.pf-av .av { width: 100%; height: 100%; }
.pf-av:hover, .pf-upload:hover { transform: scale(1.06); }
.pf-av.on .av, .pf-upload.on { box-shadow: 0 0 0 3px var(--gold); }
.pf-upload { border: 2px dashed var(--line); color: var(--muted); font-size: .62rem; font-weight: 700; text-align: center; gap: 0; align-content: center; }
.pf-upload .ic { width: 22px; height: 22px; }
.pf-upload.on { border-style: solid; border-color: var(--gold); color: var(--gold); }
.pf-hint { font-size: .78rem; margin: 8px 0 0; }
#pf-bio { width: 100%; box-sizing: border-box; resize: vertical; min-height: 80px; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: #0006; color: var(--text); font: inherit; }
#pf-bio:focus { outline: none; border-color: var(--gold); }
.pf-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
@media (max-width: 560px) { .pf-top { flex-direction: column; text-align: center; } .ub-name { display: none; } }

/* ============================== V8 : SINGE CONSEILLER ============================== */
.tip-pop { position: fixed; left: 16px; bottom: 16px; z-index: 130; display: flex; align-items: flex-end; gap: 4px; max-width: min(380px, calc(100vw - 32px)); opacity: 0; transform: translateY(30px); transition: opacity .3s, transform .4s cubic-bezier(.2, .9, .3, 1.3); pointer-events: none; }
.tip-pop.show { opacity: 1; transform: none; pointer-events: auto; }
.tip-monkey { width: 64px; flex: none; animation: tipBob 2.4s ease-in-out infinite; filter: drop-shadow(0 6px 10px #000a); }
@keyframes tipBob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-6px) rotate(4deg); } }
.tip-bubble { position: relative; padding: 12px 14px 8px; border-radius: 18px 18px 18px 6px; background: linear-gradient(180deg, #24372b, #172219); border: 1px solid #3d5c48; box-shadow: var(--shadow); margin-bottom: 28px; }
.tip-bubble::before { content: ''; position: absolute; left: -9px; bottom: 10px; border: 9px solid transparent; border-right-color: #3d5c48; border-left: 0; }
.tip-bubble small { color: var(--gold); font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.tip-bubble p { margin: 4px 0 10px; font-size: .9rem; line-height: 1.45; color: #e7f1ea; }
.tip-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.tip-x { position: absolute; top: 4px; right: 6px; all: unset; cursor: pointer; color: var(--muted); font-size: 1.2rem; line-height: 1; padding: 4px 8px; }
.tip-x { position: absolute; top: 4px; right: 4px; }
.tip-x:hover { color: var(--text); }
.tip-off { all: unset; cursor: pointer; display: block; margin-top: 8px; font-size: .7rem; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.tip-off:hover { color: var(--text); }
.user-drop .tip-toggle { font-size: .8rem; color: var(--muted); }
@media (max-width: 760px) {
  .tip-pop { left: 8px; bottom: calc(78px + env(safe-area-inset-bottom)); max-width: calc(100vw - 16px); }
  .tip-monkey { width: 48px; }
  .tip-bubble { margin-bottom: 18px; }
  .tip-bubble p { font-size: .85rem; }
}
.big-win.show { background: radial-gradient(circle, rgba(0, 0, 0, .9), rgba(0, 0, 0, .7) 75%); }
.pf-stats b .money { font-size: inherit; }
.toast.gone { opacity: 0; transform: translateX(30px); }

/* =====================================================================
   V9 : MENU PAR GROUPES
   ===================================================================== */
.nav { overflow: visible; gap: 4px; }
.nav a, .nav-gbtn { min-width: 64px; }
.nav-group { position: relative; display: flex; }
.nav-gbtn { all: unset; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 8px; border-radius: 10px; color: var(--muted); font-weight: 600; font-size: .7rem; white-space: nowrap; cursor: pointer; transition: background .2s, color .2s; }
.nav-gbtn:hover, .nav-group.open .nav-gbtn { background: rgba(255, 255, 255, .06); color: var(--text); }
.nav-group.active .nav-gbtn { background: rgba(245, 197, 66, .12); color: var(--gold); }
.nav-gbtn.nav-free .ni { color: var(--green); }
.nav-gbtn .ni { display: inline-grid; place-items: center; }
.nav-gbtn .ni .ic { width: 22px; height: 22px; }
.nav-gbtn .nl { display: inline-flex; align-items: center; gap: 2px; }
.nav-gbtn .chev .ic { width: 12px; height: 12px; transition: transform .2s; }
.nav-group.open .chev .ic { transform: rotate(180deg); }
.nav-pop { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(-6px); z-index: 90; width: min(560px, 92vw); padding: 12px; border-radius: 18px; background: linear-gradient(180deg, #1c2a22, #111a14); border: 1px solid var(--line); box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity .18s, transform .2s; }
.nav-group.open .nav-pop { opacity: 1; pointer-events: auto; transform: translateX(-50%); }
.nav-pop-title { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 800; margin: 0 4px 8px; }
.nav-pop-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.nav-pop.free .nav-pop-grid { grid-template-columns: repeat(4, 1fr); }
.nav-pop a { flex-direction: row !important; justify-content: flex-start; gap: 8px !important; padding: 10px !important; font-size: .82rem !important; border-radius: 12px; background: rgba(255, 255, 255, .03); min-width: 0 !important; }
.nav-pop a .nl { display: block !important; font-size: .82rem !important; white-space: normal; text-align: left; line-height: 1.15; }
.nav-pop a .ni .ic { width: 20px; height: 20px; }
@media (max-width: 1540px) {
  .nav a .nl, .nav-gbtn .nl { display: inline-flex; }
  .nav a { padding: 6px 8px; }
}
@media (max-width: 1100px) {
  .nav a > .nl, .nav-gbtn > .nl { font-size: .62rem; }
  .nav a, .nav-gbtn { min-width: 52px; padding: 6px 4px; }
}
@media (max-width: 760px) {
  .nav { overflow: visible; backdrop-filter: none; justify-content: space-around; padding: 4px 2px calc(4px + env(safe-area-inset-bottom)); }
  .nav > a, .nav-group { flex: 1 1 0; min-width: 0; }
  .nav > a, .nav-gbtn { flex: 1 1 0; min-width: 0 !important; padding: 4px 2px; }
  .nav-gbtn { width: 100%; }
  .nav-gbtn .nl { font-size: .6rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .nav-gbtn .chev { display: none; }
  .nav-pop { position: fixed; top: auto; bottom: calc(66px + env(safe-area-inset-bottom)); left: 8px; right: 8px; width: auto; transform: translateY(10px); max-height: 70vh; overflow-y: auto; }
  .nav-group.open .nav-pop { transform: none; }
  .nav-pop-grid, .nav-pop.free .nav-pop-grid { grid-template-columns: repeat(3, 1fr); }
  .nav-pop a { flex-direction: column !important; align-items: center !important; text-align: center; padding: 10px 4px !important; }
  .nav-pop a .nl { text-align: center; font-size: .68rem !important; }
}

/* =====================================================================
   V9 : TABLEAU DE BORD DE L'ACCUEIL
   ===================================================================== */
.dash { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 18px 0 6px; }
.dash-card { padding: 16px 18px; border-radius: 20px; background: var(--panel); border: 1px solid var(--line); display: grid; gap: 8px; align-content: start; min-width: 0; }
.dash-head { display: flex; align-items: center; gap: 8px; }
.dash-head .ic { width: 20px; height: 20px; color: var(--gold); }
.dash-head small { margin-left: auto; font-size: .7rem; }
.dash-card.jp { background: radial-gradient(circle at 50% 0%, rgba(245, 197, 66, .22), transparent 65%), linear-gradient(180deg, #2c2709, #15130a); border-color: #6b5a12; text-align: center; justify-items: center; }
.jp-amount { font-family: var(--font-title); font-size: clamp(1.6rem, 3.4vw, 2.4rem); color: var(--gold); text-shadow: 0 0 18px rgba(245, 197, 66, .5); }
.jp-amount .money { gap: 6px; }
.jp-amount .coin-inline { width: .8em; height: .8em; }
.jp-last { font-size: .78rem; color: #e6dcb0; }
.dash-card small { font-size: .76rem; line-height: 1.35; }
.quests { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.quests li { display: grid; gap: 4px; font-size: .86rem; }
.quests li.done { opacity: .6; }
.quests li.done > div:first-child { text-decoration: line-through; }
.q-lv { display: inline-block; font-size: .62rem; font-weight: 800; padding: 1px 6px; border-radius: 6px; margin-right: 6px; text-transform: uppercase; letter-spacing: .05em; vertical-align: 1px; }
.q-lv.q0 { background: rgba(61, 220, 132, .15); color: var(--green); }
.q-lv.q1 { background: rgba(47, 177, 255, .15); color: #7cc8ff; }
.q-lv.q2 { background: rgba(255, 138, 61, .15); color: #ffb07a; }
.q-bar { height: 7px; border-radius: 99px; background: #0006; overflow: hidden; }
.q-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #22a85a, #6ef0a5); transition: width .4s; }
.quests small { color: var(--muted); }
.q-bonus { margin: 0; font-size: .76rem; }
.vip-now { display: grid; gap: 6px; justify-items: start; }
.vip-badge { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; font-size: .68rem; font-weight: 800; color: var(--vc); background: color-mix(in srgb, var(--vc) 16%, transparent); border: 1px solid color-mix(in srgb, var(--vc) 45%, transparent); white-space: nowrap; vertical-align: middle; }
.vip-badge.big { font-family: var(--font-title); font-weight: 400; font-size: 1.1rem; padding: 4px 14px; }
.vip-ouistiti { display: none; }
.vip-badge.big.vip-ouistiti, .pf-badges .vip-ouistiti { display: inline-flex; }
.btn.wide { width: 100%; justify-content: center; }
.feed-cat { color: #ff9d5c; }
.feed-box { padding: 10px 14px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); }
.feed { list-style: none; margin: 0; padding: 0; display: grid; }
.feed li { display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 8px 2px; border-bottom: 1px solid rgba(255, 255, 255, .05); font-size: .88rem; }
.feed li:last-child { border-bottom: 0; }
.fd-ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #0005; color: var(--gold); }
.fd-ic .ic { width: 16px; height: 16px; }
.fd-jackpot .fd-ic, .fd-week .fd-ic { background: var(--gold-grad); color: #3a2600; }
.fd-ach .fd-ic { color: #c77dff; }
.fd-motus .fd-ic, .fd-quests .fd-ic { color: var(--green); }
.feed small { color: var(--muted); font-size: .72rem; white-space: nowrap; }
.feed b { color: var(--gold); }
@media (max-width: 980px) { .dash { grid-template-columns: 1fr 1fr; } .dash-card.jp { grid-column: 1 / -1; } }
@media (max-width: 600px) { .dash { grid-template-columns: 1fr; } .feed li { grid-template-columns: 26px 1fr; } .feed small { grid-column: 2; } }

/* Roue du jour */
.dw-modal { width: min(460px, 100%); text-align: center; }
.dw-streak { display: grid; gap: 6px; justify-items: center; margin-bottom: 10px; }
.dw-days { display: flex; gap: 5px; align-items: center; }
.dw-days i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: .72rem; font-weight: 800; background: #0006; color: var(--muted); border: 1px solid var(--line); }
.dw-days i.on { background: var(--gold-grad); color: #3a2600; border-color: transparent; }
.dw-days span { font-size: .75rem; color: var(--gold); font-weight: 800; }
.dw-box { position: relative; width: min(300px, 78vw); margin: 0 auto; }
.dw-wheel { width: 100%; display: block; filter: drop-shadow(0 10px 20px #000a); }
.dw-pointer { position: absolute; left: 50%; top: -6px; transform: translateX(-50%); z-index: 2; width: 0; height: 0; border-left: 13px solid transparent; border-right: 13px solid transparent; border-top: 24px solid #ff4d5e; filter: drop-shadow(0 2px 3px #000); }
.dw-res { margin: 14px 0 0; font-size: .95rem; }
.dw-res .big { font-family: var(--font-title); font-size: 1.5rem; color: var(--gold); }

/* =====================================================================
   V9 : PROFIL (badges, trophées, cadres)
   ===================================================================== */
.pf-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.pl-title { display: inline-block; font-size: .68rem; font-weight: 700; font-style: italic; color: #ffd98a; padding: 1px 8px; border-radius: 999px; background: rgba(245, 197, 66, .1); border: 1px solid rgba(245, 197, 66, .3); white-space: nowrap; vertical-align: middle; }
.trophy-badge { display: inline-flex; align-items: center; gap: 3px; font-size: .72rem; font-weight: 800; color: #3a2600; background: var(--gold-grad); padding: 1px 8px; border-radius: 999px; }
.trophy-badge .ic { width: 13px; height: 13px; }
.tbl .vip-badge, .tbl .pl-title { margin-left: 4px; font-size: .62rem; }

.avf { position: relative; display: inline-grid; place-items: center; border-radius: 50%; padding: 2px; flex: none; vertical-align: middle; }
.avf > .av { box-shadow: none; }
.avf::before { content: ''; position: absolute; inset: 0; border-radius: 50%; z-index: -0; }
.avf > * { position: relative; z-index: 1; }
.avf.fr-bronze::before { background: linear-gradient(135deg, #f0b27a, #8a4b16); }
.avf.fr-silver::before { background: linear-gradient(135deg, #ffffff, #8a959e); }
.avf.fr-gold::before { background: var(--gold-grad); box-shadow: 0 0 8px rgba(245, 197, 66, .6); }
.avf.fr-vine::before { background: repeating-conic-gradient(#2f7a35 0 20deg, #5ed16a 20deg 40deg); }
.avf.fr-vine::after { content: ''; position: absolute; right: -2px; top: -3px; width: 34%; height: 34%; z-index: 2; background: radial-gradient(circle at 30% 70%, #3fae4b 45%, transparent 47%); }
.avf.fr-neon::before { background: #00e5ff; box-shadow: 0 0 6px #00e5ff, 0 0 14px #ff2fd6; animation: neonPulse 1.6s ease-in-out infinite; }
@keyframes neonPulse { 50% { background: #ff2fd6; box-shadow: 0 0 10px #ff2fd6, 0 0 20px #00e5ff; } }
.avf.fr-fire::before { inset: -3px; background: conic-gradient(from 0deg, #ff3d00, #ffb300, #ff6d00, #ffd600, #ff3d00); filter: blur(1px); animation: frSpin 1.2s linear infinite; }
.avf.fr-rainbow::before { inset: -1px; background: conic-gradient(#ff4d5e, #ffb300, #f5f542, #3ddc84, #2fb1ff, #c77dff, #ff4d5e); animation: frSpin 3s linear infinite; }
.avf.fr-diamond::before { inset: -2px; background: conic-gradient(from 0deg, #e0fbff, #8ee8ff, #ffffff, #b9f3ff, #6fd3ff, #e0fbff); box-shadow: 0 0 10px #b9f3ff, 0 0 22px rgba(142, 232, 255, .6); animation: frSpin 4s linear infinite; }
@keyframes frSpin { to { transform: rotate(360deg); } }
.av-lg { width: 64px; height: 64px; }

/* =====================================================================
   V9 : BOUTIQUE
   ===================================================================== */
.sh-wrap { display: grid; gap: 14px; }
.sh-top { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sh-top > div { padding: 12px 16px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); display: grid; gap: 2px; }
.sh-top span { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.sh-top b { font-size: 1.15rem; }
.sh-tabs { display: flex; flex-wrap: wrap; }
.sh-tabs button { display: inline-flex; align-items: center; gap: 6px; }
.sh-tabs .ic { width: 16px; height: 16px; }
.sh-desc { margin: 0; }
.sh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.sh-item { padding: 14px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); display: grid; gap: 8px; justify-items: center; text-align: center; }
.sh-item.on { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.sh-item.own:not(.on) { border-color: #3d5c48; }
.sh-prev { height: 92px; display: grid; place-items: center; width: 100%; border-radius: 12px; background: #0004; overflow: hidden; }
.sh-price { font-size: .82rem; color: var(--muted); }
.sh-title-prev { display: grid; gap: 4px; justify-items: center; }
.sh-cards { position: relative; width: 90px; height: 76px; }
.sh-card { position: absolute; width: 50px; height: 72px; border-radius: 7px; padding: 4px; left: 8px; transform: rotate(-8deg); }
.sh-card.two { left: 32px; transform: rotate(8deg); }
.sh-card.back { transform-style: flat; }
.sh-card .back-inner { width: 100%; height: 100%; border-radius: 4px; }
.sh-theme { width: 100%; height: 100%; display: grid; place-items: center; }
.slot-machine.mini { padding: 8px 10px; border-radius: 14px; box-shadow: 0 0 0 2px #c88a0a; }
.sh-reels { display: flex; gap: 4px; }
.sh-reels i { width: 26px; height: 34px; border-radius: 5px; background: linear-gradient(180deg, #fff, #ddd); }
@media (max-width: 600px) { .sh-top { grid-template-columns: 1fr; } .sh-grid { grid-template-columns: repeat(2, 1fr); } }

/* Dos de cartes (blackjack + Hi-Lo + aperçu boutique) */
body { --cb-bg: #7b1e1e; --cb-a: #8f2525; --cb-b: #6b1515; --cb-line: #f5c542; }
body.cb-blue { --cb-bg: #12245a; --cb-a: #1f3a86; --cb-b: #142a63; --cb-line: #9cc3ff; }
body.cb-jungle { --cb-bg: #123d1c; --cb-a: #1f6a2e; --cb-b: #14481f; --cb-line: #7be08a; }
body.cb-gold { --cb-bg: #6b4300; --cb-a: #f5c542; --cb-b: #c98a00; --cb-line: #fff3b0; }
body.cb-neon { --cb-bg: #0b0b1e; --cb-a: #1a0b3a; --cb-b: #0b0b1e; --cb-line: #ff2fd6; }
.back, .sh-card.back, .hl-card.back { background: var(--cb-bg); }
.back-inner { border-color: var(--cb-line) !important; background: repeating-linear-gradient(45deg, var(--cb-a) 0 6px, var(--cb-b) 6px 12px) !important; }
body.cb-neon .back-inner { box-shadow: 0 0 8px #ff2fd6 inset, 0 0 6px #00e5ff; }
.sh-cards.cb-classic { --cb-bg: #7b1e1e; --cb-a: #8f2525; --cb-b: #6b1515; --cb-line: #f5c542; }
.sh-cards.cb-blue { --cb-bg: #12245a; --cb-a: #1f3a86; --cb-b: #142a63; --cb-line: #9cc3ff; }
.sh-cards.cb-jungle { --cb-bg: #123d1c; --cb-a: #1f6a2e; --cb-b: #14481f; --cb-line: #7be08a; }
.sh-cards.cb-gold { --cb-bg: #6b4300; --cb-a: #f5c542; --cb-b: #c98a00; --cb-line: #fff3b0; }
.sh-cards.cb-neon { --cb-bg: #0b0b1e; --cb-a: #1a0b3a; --cb-b: #0b0b1e; --cb-line: #ff2fd6; }
.sh-card.back .back-inner { border: 2px solid var(--cb-line); }

/* Thèmes de la slot */
body.th-jungle .slot-machine:not(.fs-mode), .sh-theme.th-jungle .slot-machine { background: linear-gradient(180deg, #1c5a2a 0%, #0e3518 60%, #07200e 100%); box-shadow: 0 0 0 4px #6b4a1a, 0 0 0 7px #3fae4b, 0 24px 60px rgba(0, 0, 0, .7); }
body.th-jungle .marquee { background: linear-gradient(180deg, #14481f, #07200e); border-color: #3fae4b; }
body.th-ocean .slot-machine:not(.fs-mode), .sh-theme.th-ocean .slot-machine { background: linear-gradient(180deg, #0f4c75 0%, #0a2f4a 60%, #051a2a 100%); box-shadow: 0 0 0 4px #2fb1ff, 0 0 0 7px #0a4a6e, 0 0 40px rgba(47, 177, 255, .25), 0 24px 60px rgba(0, 0, 0, .7); }
body.th-ocean .marquee { background: linear-gradient(180deg, #0a3a5c, #051a2a); border-color: #2fb1ff; }
body.th-royal .slot-machine:not(.fs-mode), .sh-theme.th-royal .slot-machine { background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 70%); box-shadow: 0 0 0 4px #f5c542, 0 0 0 7px #8a5a00, 0 0 50px rgba(245, 197, 66, .3), 0 24px 60px rgba(0, 0, 0, .8); }
body.th-royal .marquee { background: linear-gradient(180deg, #111, #000); border-color: #f5c542; }
body.th-neon .slot-machine:not(.fs-mode), .sh-theme.th-neon .slot-machine { background: linear-gradient(180deg, #2a0845 0%, #120326 60%, #05010f 100%); box-shadow: 0 0 0 3px #ff2fd6, 0 0 0 6px #00e5ff, 0 0 40px rgba(255, 47, 214, .45), 0 24px 60px rgba(0, 0, 0, .8); }
body.th-neon .marquee { background: #0b0118; border-color: #00e5ff; box-shadow: 0 0 18px #ff2fd6; }
body.th-neon .marquee span { color: #ff8af0; text-shadow: 0 0 10px #ff2fd6; }

/* Effets de victoire */
.rain-coin.fx-confetti .confetto { display: block; width: 60%; height: 100%; border-radius: 2px; }
.rain-coin svg { width: 100%; height: 100%; }
.rain-coin.fx-stars { filter: drop-shadow(0 0 6px #ffe066); }
.rain-coin.fx-diamond { filter: drop-shadow(0 0 6px #8ee8ff); }

/* =====================================================================
   V9 : NOUVEAUX JEUX
   ===================================================================== */
/* Limbo */
.lb-stage, .wh-stage, .hl-stage, .kn-stage { position: relative; padding: 22px; border-radius: 22px; border: 1px solid var(--line); background: radial-gradient(circle at 50% 0%, rgba(61, 220, 132, .1), transparent 60%), linear-gradient(180deg, #0f1c15, #070d0a); min-height: 360px; display: grid; align-content: center; justify-items: center; gap: 12px; overflow: hidden; }
.lb-rocket { width: 60px; color: var(--gold); opacity: .35; }
.lb-rocket .ic { width: 60px; height: 60px; }
.lb-result { font-family: var(--font-title); font-size: clamp(3rem, 12vw, 6rem); color: #fff; font-variant-numeric: tabular-nums; line-height: 1; }
.lb-result.win { color: var(--green); text-shadow: 0 0 24px rgba(61, 220, 132, .6); }
.lb-result.lose { color: var(--red); }
.lb-stage.win { box-shadow: inset 0 0 60px rgba(61, 220, 132, .15); }
.lb-stage.lose { box-shadow: inset 0 0 60px rgba(255, 77, 94, .12); }
.lb-sub { color: #cfe0d5; text-align: center; }
.lb-fields { grid-template-columns: 1fr 1fr !important; }
.lb-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
/* Roue */
.wh-box { position: relative; width: min(360px, 80vw); aspect-ratio: 1; }
.wh-wheel { width: 100%; height: 100%; display: block; filter: drop-shadow(0 12px 30px #000c); }
.wh-wheel path.hit { stroke: #fff; stroke-width: 3; filter: brightness(1.3); }
.wh-pointer { position: absolute; left: 50%; top: -8px; transform: translateX(-50%); z-index: 2; width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 26px solid #fff; filter: drop-shadow(0 3px 4px #000); }
.wh-center { position: absolute; inset: 30%; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, #13201a, #0b120e); border: 2px solid #0b120e; }
.wh-center b { font-family: var(--font-title); font-weight: 400; font-size: clamp(1.2rem, 5vw, 2rem); color: #fff; }
.wh-legend { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.wh-legend span { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: #0005; font-weight: 800; font-size: .82rem; }
.wh-legend i { width: 11px; height: 11px; border-radius: 3px; background: var(--c); }
.wh-legend small { color: var(--muted); font-weight: 600; }
/* Hi-Lo */
.hl-table { display: flex; gap: 26px; align-items: center; }
.hl-card { position: relative; width: 120px; height: 172px; border-radius: 12px; background: linear-gradient(160deg, #fff, #f1ede4); color: #161616; box-shadow: 0 10px 24px #000a; display: grid; place-items: center; font-weight: 800; }
.hl-card.red { color: #c8102e; }
.hl-card b { font-size: 3.4rem; line-height: 1; }
.hl-card .tl, .hl-card .br { position: absolute; display: grid; justify-items: center; line-height: 1; font-size: 1.3rem; }
.hl-card .tl { top: 8px; left: 10px; } .hl-card .br { bottom: 8px; right: 10px; transform: rotate(180deg); }
.hl-card i { font-style: normal; font-size: .9rem; }
.hl-card.back { padding: 7px; }
.hl-card.back > * { display: none; }
.hl-card.back::after { content: ''; position: absolute; inset: 7px; border-radius: 7px; border: 2px solid var(--cb-line); background: repeating-linear-gradient(45deg, var(--cb-a) 0 6px, var(--cb-b) 6px 12px); }
.hl-deck .hl-card { width: 90px; height: 130px; transform: rotate(-6deg); opacity: .9; }
.hl-card.deal { animation: hlDeal .35s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes hlDeal { from { transform: translateX(-90px) rotateY(90deg); opacity: 0; } to { transform: none; opacity: 1; } }
.hl-actions { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; width: min(560px, 100%); align-items: center; }
.hl-btn { display: grid; gap: 2px; padding: 12px 10px; border-radius: 14px; border: 1px solid var(--line); background: rgba(255, 255, 255, .05); color: var(--text); font: inherit; font-weight: 800; cursor: pointer; transition: background .15s, transform .1s; }
.hl-btn.hi { border-color: rgba(61, 220, 132, .5); } .hl-btn.lo { border-color: rgba(255, 77, 94, .5); }
.hl-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .1); }
.hl-btn:active:not(:disabled) { transform: scale(.97); }
.hl-btn small { font-size: .74rem; color: var(--muted); font-weight: 700; }
.hl-btn:disabled { opacity: .45; cursor: default; }
.hl-msg { color: #cfe0d5; text-align: center; min-height: 1.4em; }
.hl-trail { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
.hl-trail span { padding: 2px 8px; border-radius: 8px; font-size: .75rem; font-weight: 800; background: #0005; }
.hl-trail .good { color: var(--green); } .hl-trail .bad { color: var(--red); }
.hl-stage.lose { animation: shake .4s; }
/* Keno */
.kn-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 7px; width: min(560px, 100%); }
.kn-n { aspect-ratio: 1.15; border-radius: 10px; border: 1px solid var(--line); background: #1a2b21; color: #cfe0d5; font: inherit; font-weight: 800; font-size: 1rem; cursor: pointer; transition: background .15s, transform .1s; }
.kn-n:hover:not(:disabled) { background: #24392c; }
.kn-n.pick { background: var(--gold-grad); color: #3a2600; border-color: transparent; }
.kn-n.drawn.miss { background: #4a1f28; color: #ff9aa4; }
.kn-n.drawn.hit { background: linear-gradient(180deg, #6ef0a5, #22a85a); color: #052; border-color: #fff; transform: scale(1.08); box-shadow: 0 0 14px rgba(61, 220, 132, .7); }
.kn-n.pick.drawn.miss { background: var(--gold-grad); color: #3a2600; opacity: .6; }
.kn-n:disabled { cursor: default; }
.kn-pay { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; width: min(620px, 100%); }
.kn-p { display: grid; justify-items: center; padding: 5px 8px; border-radius: 10px; background: #0005; min-width: 52px; border: 1px solid transparent; }
.kn-p b { font-size: .85rem; } .kn-p.zero b { color: var(--muted); }
.kn-p small { font-size: .62rem; color: var(--muted); } .kn-p em { font-style: normal; font-size: .58rem; color: #7f9386; }
.kn-p.cur { border-color: var(--gold); background: rgba(245, 197, 66, .15); }
.kn-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.kn-msg { color: #cfe0d5; text-align: center; min-height: 1.4em; }
@media (max-width: 600px) { .kn-grid { gap: 4px; } .kn-n { font-size: .82rem; border-radius: 7px; } .hl-card { width: 96px; height: 138px; } .hl-card b { font-size: 2.6rem; } .hl-actions { grid-template-columns: 1fr 1fr; } .hl-actions #hl-skip { grid-column: 1 / -1; grid-row: 2; } }

/* Quiz drapeaux */
.mcq-img { display: grid; place-items: center; margin: 10px 0 4px; }
.mcq-img img { height: clamp(110px, 24vw, 170px); max-width: 100%; border-radius: 8px; box-shadow: 0 8px 22px #000a, 0 0 0 1px #fff2; }

/* Mot du jour */
.mo-wrap { max-width: 640px; margin: 0 auto; }
.mo-stage { border-radius: 22px; border: 1px solid var(--line); box-shadow: var(--shadow); padding: 18px; background: linear-gradient(180deg, #0f1c15, #070d0a); display: grid; gap: 14px; justify-items: center; }
.mo-info { margin: 0; color: #cfe0d5; text-align: center; font-size: .9rem; }
.mo-grid { display: grid; gap: 6px; }
.mo-row { display: grid; grid-template-columns: repeat(var(--n), clamp(34px, 9vw, 52px)); gap: 6px; }
.mo-c { aspect-ratio: 1; display: grid; place-items: center; border-radius: 6px; font-family: var(--font-title); font-size: clamp(1rem, 4.5vw, 1.6rem); color: #fff; background: #1f5ea8; border: 2px solid #2a6fc0; position: relative; }
.mo-row.empty .mo-c { opacity: .35; }
.mo-c.typed { background: #2a6fc0; }
.mo-c.ghost { color: #ffffff55; }
.mo-c.ok { background: #e3263b; border-color: #ff5a6b; }
.mo-c.mis { background: #1f5ea8; }
.mo-c.mis::before { content: ''; position: absolute; inset: 8%; border-radius: 50%; background: #f5c542; z-index: 0; }
.mo-c.mis { color: #3a2600; } .mo-c.mis { z-index: 0; }
.mo-c.mis { isolation: isolate; }
.mo-c.mis::before { z-index: -1; }
.mo-row.reveal .mo-c { animation: moFlip .45s both; }
.mo-row.reveal .mo-c:nth-child(2) { animation-delay: .07s; } .mo-row.reveal .mo-c:nth-child(3) { animation-delay: .14s; } .mo-row.reveal .mo-c:nth-child(4) { animation-delay: .21s; } .mo-row.reveal .mo-c:nth-child(5) { animation-delay: .28s; } .mo-row.reveal .mo-c:nth-child(6) { animation-delay: .35s; } .mo-row.reveal .mo-c:nth-child(7) { animation-delay: .42s; } .mo-row.reveal .mo-c:nth-child(8) { animation-delay: .49s; }
@keyframes moFlip { 0% { transform: rotateX(90deg); } 100% { transform: none; } }
.mo-msg { min-height: 1.3em; color: #ff9aa4; font-weight: 700; font-size: .9rem; }
.mo-msg.shake { animation: shake .4s; }
.mo-kb { display: grid; gap: 6px; width: 100%; max-width: 520px; }
.mo-kb > div { display: flex; gap: 5px; justify-content: center; }
.mo-kb button { flex: 1; max-width: 46px; height: 46px; border-radius: 8px; border: 0; background: #2a3d31; color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.mo-kb button.wide { max-width: 86px; flex: 1.8; font-size: .78rem; }
.mo-kb button.ok { background: #e3263b; } .mo-kb button.mis { background: #c98a00; } .mo-kb button.absent { background: #16221b; color: #5a6b60; }
.mo-end h2 { margin-top: 6px; }

/* Plus ou moins */
.hi-wrap { max-width: 900px; margin: 0 auto; }
.hi-stage { border-radius: 22px; border: 1px solid var(--line); padding: 18px; background: linear-gradient(180deg, #0f1c15, #070d0a); display: grid; gap: 12px; }
.hi-score { text-align: center; color: #cfe0d5; } .hi-score b { color: var(--gold); font-size: 1.2rem; }
.hi-duel { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; }
.hi-vs { font-family: var(--font-title); color: var(--gold); font-size: 1.4rem; }
.hi-card { position: relative; min-height: 340px; border-radius: 18px; overflow: hidden; background: #1a1a1a; display: grid; align-items: end; border: 2px solid transparent; transition: border-color .2s; }
.hi-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hi-shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 20%, rgba(0, 0, 0, .9) 75%); }
.hi-info { position: relative; padding: 16px; display: grid; gap: 4px; justify-items: center; text-align: center; }
.hi-info b { font-size: 1.15rem; } .hi-info small { color: #cfd8d2; }
.hi-budget { font-family: var(--font-title); font-size: 1.8rem; color: var(--gold); }
.hi-budget.count { animation: bwPop .4s; }
.hi-q { color: #fff; font-weight: 700; }
.hi-btns { display: grid; gap: 6px; width: 100%; max-width: 220px; }
.hi-card.good { border-color: var(--green); } .hi-card.bad { border-color: var(--red); animation: shake .4s; }
@media (max-width: 640px) { .hi-duel { grid-template-columns: 1fr; } .hi-vs { text-align: center; } .hi-card { min-height: 220px; } }

/* Historique + palmarès */
.gb.hist .gb-list { max-height: 420px; overflow-y: auto; }
.hs-row { display: grid !important; grid-template-columns: 40px 1fr auto; gap: 6px; align-items: center; font-size: .78rem; padding: 5px 6px !important; }
.hs-t { color: var(--muted); font-size: .7rem; }
.hs-d { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #cfe0d5; }
.hs-row.pos b { color: var(--green); } .hs-row.neg b { color: #ff8a95; }
.hs-row small { color: var(--muted); font-weight: 600; }
.wk-tabs { margin-left: auto; font-size: .8rem; }
.wk-note { margin: -4px 0 10px; font-size: .82rem; }
.wk-h { margin: 18px 0 8px; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.wk-hall { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.wk-item { padding: 10px 12px; border-radius: 14px; background: #0005; border: 1px solid var(--line); display: grid; gap: 2px; }
.wk-item b { display: flex; align-items: center; gap: 6px; color: var(--gold); }
.wk-item b .ic { width: 16px; height: 16px; }
.wk-hall > p { grid-column: 1 / -1; margin: 0; }
.stat-card .vip-ouistiti { display: inline-flex; }
[hidden] { display: none !important; }
@media (max-width: 760px) {
  .nav { z-index: 140; }
  .lb-stage, .wh-stage, .hl-stage, .kn-stage { order: -1; min-height: 0; padding: 16px 12px; }
  .hero h1 { gap: 10px; }
  .hero-av .av { width: 44px; height: 44px; }
}

/* ============================== V10 : CORRECTIFS D'AFFICHAGE ============================== */
.gb { min-width: 0; overflow: hidden; }
.gb-tabs { grid-auto-columns: minmax(0, 1fr); }
.gb-tabs button { min-width: 0; padding: 7px 2px; font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gb-list li { grid-template-columns: 28px minmax(0, 1fr) auto; }
.gb-list li > b { white-space: nowrap; }
.gb-name { min-width: 0; }
button.vip-badge { cursor: pointer; font-family: inherit; }
.vip-badge[data-vip] { cursor: pointer; }
.vip-badge.big { font-family: var(--font-title); }
.dash-head .btn-sm { margin-left: auto; padding: 3px 9px; font-size: .72rem; }
.vip-pct { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.vip-pct b { font-size: .85rem; color: var(--gold); }
.vip-head { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; margin-bottom: 14px; }
.vip-prog { display: grid; gap: 6px; }
.vip-tbl tr.cur { background: rgba(245, 197, 66, .1); }
.vip-tbl tr.done { opacity: .75; }
.vip-tbl .vip-badge.big { font-size: .9rem; padding: 2px 10px; }
.vip-tbl .vip-ouistiti, .vip-modal .vip-ouistiti, .dash .vip-ouistiti { display: inline-flex; }
.vip-notes { font-size: .82rem; display: grid; gap: 6px; padding-left: 18px; margin: 12px 0 0; }
@media (max-width: 600px) { .vip-head { grid-template-columns: 1fr; } }
/* fil d'activité : liens et survol des succès */
.fd-who { color: var(--gold); font-weight: 800; }
.fd-link { all: unset; cursor: pointer; color: #ffd98a; text-decoration: underline; text-decoration-color: rgba(255, 217, 138, .35); text-underline-offset: 3px; position: relative; }
.fd-link:hover { color: var(--gold); text-decoration-color: var(--gold); }
.fd-txt .tier-badge { font-size: .62rem; margin-left: 2px; }
.fd-ach .hover-card { position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 30; width: 260px; display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; background: #1c2a22; border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--text); text-decoration: none; opacity: 0; pointer-events: none; transform: translateY(4px); transition: opacity .15s, transform .15s; white-space: normal; font-weight: 400; }
.fd-ach .hover-card b { color: var(--gold); }
.fd-ach .hover-card small { color: #cfe0d5; font-size: .8rem; }
.fd-ach .hover-card .tier-badge { justify-self: start; margin: 0; }
.fd-ach:hover .hover-card, .fd-ach:focus .hover-card { opacity: 1; transform: none; }
.feed-box { overflow: visible; }
.feed li { position: relative; }
.ach-tools { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.ach-sort { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--muted); }
.ach-sort select { background: #0007; color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; font: inherit; font-size: .85rem; cursor: pointer; }
.ach-who.rare { color: #c77dff; font-weight: 800; }
.ach-last { display: block; margin-top: 6px; color: var(--muted); font-size: .76rem; }
.ach-last b { color: var(--gold); }
.mcq-modes.three { grid-template-columns: repeat(3, 1fr); max-width: 680px; } @media (max-width: 640px) { .mcq-modes.three { grid-template-columns: 1fr; } }
.pf-seen { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: .78rem; margin-left: 10px; }
.pf-seen i { width: 8px; height: 8px; border-radius: 50%; background: #5a6b60; }
.pf-seen.on { color: var(--green); } .pf-seen.on i { background: var(--green); box-shadow: 0 0 6px var(--green); }
.pf-id > small.muted + .pf-seen { margin-left: 10px; }
.slot-jp { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; width: 100%; margin: 10px 0 0; padding: 7px 12px; border-radius: 12px; background: linear-gradient(90deg, rgba(245, 197, 66, .08), rgba(245, 197, 66, .22), rgba(245, 197, 66, .08)); border: 1px solid #6b5a12; }
.slot-jp span { font-family: var(--font-title); color: var(--gold); letter-spacing: .08em; font-size: .85rem; }
.slot-jp b { font-family: var(--font-title); font-weight: 400; font-size: 1.1rem; color: #fff; }
.slot-jp small { color: #e6dcb0; font-size: .74rem; }
.slot-jp:hover { border-color: var(--gold); }
.jp-odds { font-size: .78rem; color: #e6dcb0; }
.gb-tabs { grid-auto-flow: row; grid-template-columns: 1fr 1fr 1fr 1.4fr; }
.gb-tabs button { padding: 7px 0; }
.feed li:first-child .fd-ach .hover-card, .feed li:nth-child(2) .fd-ach .hover-card { bottom: auto; top: calc(100% + 8px); }
.fd-perfect .fd-ic, .fd-wheel .fd-ic, .fd-fs .fd-ic { color: var(--green); }
.fd-achs .fd-ic { color: #c77dff; }
.feed-more { all: unset; cursor: pointer; display: block; margin: 8px auto 2px; font-size: .8rem; font-weight: 700; color: var(--gold); }
/* bulle des succès du fil : texte sur plusieurs lignes, dans le cadre */
.fd-ach .hover-card { width: min(280px, calc(100vw - 48px)); box-sizing: border-box; }
.fd-ach .hover-card small, .fd-ach .hover-card b { white-space: normal !important; overflow-wrap: anywhere; line-height: 1.35; }
.feed .fd-txt { min-width: 0; }
.rake-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 12px; background: #0005; border: 1px solid var(--line); }
.rake-row > div { display: grid; }
.rake-row b { font-size: 1.05rem; }
.vip-rake { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding: 10px 14px; border-radius: 14px; background: rgba(245, 197, 66, .08); border: 1px solid #6b5a12; margin-bottom: 12px; }
.vip-rake > div { display: grid; } .vip-rake b { font-size: 1.2rem; }
.vip-rake small { color: #e6dcb0; font-size: .8rem; }
@media (max-width: 600px) { .vip-rake { grid-template-columns: 1fr; } }
.glob-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.glob { padding: 14px 16px; border-radius: 16px; background: #0005; border: 1px solid var(--line); display: grid; gap: 3px; min-width: 0; }
.glob.hl { background: linear-gradient(160deg, rgba(245, 197, 66, .16), rgba(0, 0, 0, .3)); border-color: #4a3d12; }
.glob > span { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.glob b { font-size: 1.25rem; overflow-wrap: anywhere; }
.glob small { color: var(--muted); font-size: .78rem; }
.glob .pl-link { color: var(--gold); font-weight: 700; }
td.vol { min-width: 90px; width: 18%; }
td.vol .bar-track { height: 8px; }
.stats-more { text-align: center; margin: 18px 0 0; }
.stats-more a { color: var(--gold); }

/* Multiplicateur VIP des gains gratuits */
.vip-x { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: .72rem; font-weight: 800; color: #1a1400; background: linear-gradient(135deg, #ffe08a, #f5c542); letter-spacing: .02em; vertical-align: 1px; }
.vip-x.big { font-size: .78rem; padding: 3px 10px; font-family: 'Rubik', system-ui, sans-serif; }
.st-tabs { font-size: .85rem; }

/* ==========================================================================
   Jeux de réflexion gratuits : Queens, Tango, Pinpoint, Sudoku, Démineur, Snake
   ========================================================================== */
.fg-wrap { max-width: 980px; margin: 0 auto; }
.fg-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 auto 14px; max-width: 640px; padding: 8px 12px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.fg-timer { font-family: var(--font-title); font-size: 1.35rem; color: var(--gold); font-variant-numeric: tabular-nums; min-width: 64px; }
.fg-timer.low { color: var(--red); animation: fgPulse 1s infinite; }
@keyframes fgPulse { 50% { opacity: .45; } }
.fg-info { color: var(--muted); font-size: .85rem; font-weight: 600; }
.fg-tools { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.fg-end { margin-top: 18px; }
.solved { animation: fgSolved .9s ease; }
@keyframes fgSolved { 30% { transform: scale(1.025); filter: brightness(1.25); } }

/* Queens */
.qn-board { --n: 8; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); grid-template-rows: repeat(var(--n), minmax(0, 1fr)); width: min(540px, 100%); aspect-ratio: 1; margin: 0 auto; border: 3px solid #0d130f; border-radius: 10px; overflow: hidden; touch-action: none; user-select: none; background: #0d130f; }
.qn-cell { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--rc); display: grid; place-items: center; cursor: pointer; box-shadow: inset 0 0 0 .5px #0003; transition: filter .1s; }
.qn-cell:hover { filter: brightness(1.08); }
.qn-cell.wt { border-top: 2px solid #0d130f; } .qn-cell.wb { border-bottom: 2px solid #0d130f; }
.qn-cell.wl { border-left: 2px solid #0d130f; } .qn-cell.wr { border-right: 2px solid #0d130f; }
.qn-x { position: absolute; left: 34%; top: 34%; width: 32%; height: 32%; opacity: .55; }
.qn-x::before, .qn-x::after { content: ''; position: absolute; left: 45%; top: -10%; width: 12%; height: 120%; background: #1a1400; border-radius: 2px; transform: rotate(45deg); }
.qn-x::after { transform: rotate(-45deg); }
.qn-crown { position: absolute; left: 17%; top: 17%; width: 66%; height: 66%; color: #1a1400; filter: drop-shadow(0 1px 0 #fff6); animation: popIn .2s ease; }
.qn-cell.bad { background-image: repeating-linear-gradient(45deg, #ff4d5e55 0 6px, transparent 6px 12px); }
.qn-cell.bad .qn-crown { color: #c0001a; }
@keyframes popIn { from { transform: scale(.4); opacity: 0; } }

/* Tango */
.tg-board { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(6, minmax(0, 1fr)); gap: 0; width: min(440px, 100%); aspect-ratio: 1; margin: 0 auto; border-radius: 12px; overflow: visible; background: #0d130f; border: 2px solid var(--line); user-select: none; }
.tg-cell { position: relative; min-width: 0; min-height: 0; display: grid; place-items: center; background: #1a2820; border: 1px solid #0d130f; cursor: pointer; transition: background .1s; }
.tg-cell:hover { background: #22352a; }
.tg-cell.given { background: #2a3d31; cursor: default; }
.tg-cell.bad { background: #4a1c22; }
.tg-sym { position: absolute; left: 19%; top: 19%; width: 62%; height: 62%; display: grid; place-items: center; }
.tg-sym svg { width: 100%; height: 100%; animation: popIn .15s ease; }
.tg-sign { position: absolute; z-index: 2; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #0d130f; color: var(--gold); font-family: var(--font-title); font-size: .78rem; line-height: 1; border: 1px solid var(--line); pointer-events: none; }
.tg-sign.h { right: -12px; top: calc(50% - 11px); }
.tg-sign.v { bottom: -12px; left: calc(50% - 11px); }
.tg-sign.bad { background: var(--red); color: #fff; }
.tg-intro { display: flex; justify-content: center; gap: 8px; } .tg-intro svg { width: 44px; height: 44px; }

/* Sudoku */
.sd-layout { display: flex; gap: 22px; justify-content: center; align-items: flex-start; flex-wrap: wrap; }
.sd-board { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); grid-template-rows: repeat(9, minmax(0, 1fr)); width: min(500px, 100%); aspect-ratio: 1; border: 3px solid var(--gold2); border-radius: 8px; overflow: hidden; background: #0d130f; user-select: none; }
.sd-cell { min-width: 0; min-height: 0; overflow: hidden; display: grid; place-items: center; background: #16231c; border-right: 1px solid #2a3d31; border-bottom: 1px solid #2a3d31; cursor: pointer; font-size: clamp(1rem, 4.4vw, 1.6rem); font-weight: 700; color: #9fd3ff; position: relative; }
.sd-cell.br { border-right: 2px solid var(--gold2); } .sd-cell.bb { border-bottom: 2px solid var(--gold2); }
.sd-cell.given { color: var(--text); }
.sd-cell.peer { background: #1d2f25; }
.sd-cell.same { background: #2b4a37; }
.sd-cell.sel { background: #3a5a2a; box-shadow: inset 0 0 0 2px var(--gold); }
.sd-cell.bad { color: var(--red); background: #3a1a1f; }
.sd-cell.badg { color: #ff9aa4; }
.sd-notes { position: absolute; inset: 2px; display: grid; grid-template-columns: repeat(3, 1fr); font-size: clamp(.45rem, 1.6vw, .62rem); color: var(--muted); font-weight: 600; }
.sd-notes i { font-style: normal; display: grid; place-items: center; }
.sd-pad { display: grid; gap: 10px; width: min(260px, 100%); }
.sd-nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sd-nums button { position: relative; aspect-ratio: 1.15; border-radius: 12px; border: 1px solid var(--line); background: var(--panel2); cursor: pointer; font-family: var(--font-title); font-size: 1.5rem; color: var(--text); }
.sd-nums button:hover { border-color: var(--gold); }
.sd-nums button small { position: absolute; right: 7px; bottom: 4px; font-family: var(--font); font-size: .65rem; color: var(--muted); }
.sd-nums button.done { opacity: .3; }
.sd-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#sd-note.on { border-color: var(--gold); color: var(--gold); background: rgba(245, 197, 66, .1); }
@media (max-width: 760px) { .sd-pad { width: min(500px, 100%); } .sd-nums { grid-template-columns: repeat(9, 1fr); gap: 4px; } .sd-nums button { aspect-ratio: .8; font-size: 1.15rem; border-radius: 8px; } .sd-nums button small { right: 3px; bottom: 1px; } }

/* Démineur */
.ms-scroll { overflow-x: auto; padding-bottom: 6px; }
.ms-board { --cs: 30px; display: grid; grid-template-columns: repeat(var(--cols), var(--cs)); width: max-content; margin: 0 auto; border: 3px solid #0d130f; border-radius: 8px; background: #0d130f; user-select: none; touch-action: manipulation; -webkit-touch-callout: none; }
.ms-cell { width: var(--cs); height: var(--cs); display: grid; place-items: center; background: linear-gradient(180deg, #3f7a52, #2f5a3f); border: 1px solid #0d130f; border-radius: 3px; cursor: pointer; font-weight: 800; font-size: calc(var(--cs) * .55); line-height: 1; }
.ms-cell:hover { filter: brightness(1.15); }
.ms-cell.open { background: #132219; cursor: default; filter: none; border-radius: 0; }
.ms-cell.n1 { color: #5fa8ff; } .ms-cell.n2 { color: #3ddc84; } .ms-cell.n3 { color: #ff6b6b; } .ms-cell.n4 { color: #c77dff; }
.ms-cell.n5 { color: #ff9f43; } .ms-cell.n6 { color: #2fd3c5; } .ms-cell.n7 { color: #eaf2ec; } .ms-cell.n8 { color: #8fa597; }
.ms-cell svg { width: 78%; height: 78%; }
.ms-cell.boom { background: var(--red); }
.ms-cell.flag.wrong { background: #5a2a2a; opacity: .7; }
.ms-board.lost .ms-cell:not(.open) { filter: grayscale(.4) brightness(.8); }
.ms-fbtn svg { width: 16px; height: 16px; margin-right: 4px; vertical-align: -3px; }
.ms-fbtn.on { border-color: var(--red); color: #ffb3ba; background: rgba(255, 77, 94, .12); }

/* Snake */
.sn-box { position: relative; width: max-content; margin: 0 auto; }
.sn-cv { display: block; border-radius: 10px; border: 2px solid var(--line); touch-action: none; }
.sn-over { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 4px; background: #000a; border-radius: 10px; cursor: pointer; }
.sn-over b { font-family: var(--font-title); font-size: 1.6rem; color: var(--gold); font-weight: 400; }
.sn-over small { color: var(--muted); }
.sn-pad { display: none; grid-template-columns: repeat(3, 64px); grid-template-rows: repeat(2, 54px); gap: 6px; justify-content: center; margin: 14px auto 0; }
.sn-pad button { border-radius: 12px; border: 1px solid var(--line); background: var(--panel2); font-size: 1.3rem; color: var(--text); touch-action: none; }
.sn-pad button:active { background: #2b4a37; }
.sn-pad [data-d="0,-1"] { grid-column: 2; grid-row: 1; } .sn-pad [data-d="-1,0"] { grid-column: 1; grid-row: 2; }
.sn-pad [data-d="1,0"] { grid-column: 3; grid-row: 2; } .sn-pad [data-d="0,1"] { grid-column: 2; grid-row: 2; }
@media (pointer: coarse), (max-width: 700px) { .sn-pad { display: grid; } }

/* Pinpoint */
.pp-board { max-width: 560px; margin: 0 auto; }
.pp-clues { display: grid; gap: 8px; margin-bottom: 14px; }
.pp-clue { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; background: rgba(255, 255, 255, .03); border: 1px dashed var(--line); color: var(--muted); }
.pp-clue small { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; min-width: 62px; }
.pp-clue b { font-size: 1.1rem; }
.pp-clue.on { background: linear-gradient(90deg, rgba(47, 177, 255, .16), rgba(47, 177, 255, .04)); border: 1px solid #2fb1ff66; color: var(--text); }
.pp-clue.new { animation: ppIn .35s ease; }
@keyframes ppIn { from { transform: translateY(-6px); opacity: 0; } }
.pp-form { display: flex; gap: 8px; flex-wrap: wrap; }
.pp-in { flex: 1 1 220px; min-width: 0; font-size: 1rem; text-align: left; }
.pp-guesses { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.pp-guesses span { padding: 3px 10px; border-radius: 999px; font-size: .8rem; background: rgba(255, 77, 94, .12); border: 1px solid rgba(255, 77, 94, .35); color: #ffb3ba; text-decoration: line-through; }
.pp-guesses span.ok { background: rgba(61, 220, 132, .14); border-color: rgba(61, 220, 132, .4); color: var(--green); text-decoration: none; }
.pp-guesses i { font-style: normal; opacity: .8; }
.pp-gain { text-align: center; margin: 10px 0 0; font-size: .9rem; }
.pp-count { font-size: .82rem; }

/* cartes du lobby */
.gc-queens .gc-art { background: radial-gradient(circle at 50% 30%, #3a2a12, #0f0a05); }
.gc-tango .gc-art { background: radial-gradient(circle at 30% 30%, #2e2a14, #0a0f1c); }
.gc-pinpoint .gc-art { background: radial-gradient(circle at 70% 20%, #12304a, #060d14); }
.gc-sudoku .gc-art { background: radial-gradient(circle at 50% 40%, #1f2b1a, #080c07); }
.gc-demineur .gc-art { background: radial-gradient(circle at 50% 30%, #1f3a2a, #07100b); }
.gc-snake .gc-art { background: radial-gradient(circle at 50% 60%, #173a24, #06100a); }

/* ==========================================================================
   Ferme à bananes
   ========================================================================== */
.bn { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; font-weight: 700; }
.ban { width: 1.05em; height: 1.05em; flex: none; }
.fm-wrap { max-width: 1180px; margin: 0 auto; }
.fm-top { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr) auto; gap: 10px; align-items: stretch; margin-bottom: 10px; }
.fm-top > div { padding: 12px 14px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); display: grid; gap: 4px; align-content: start; min-width: 0; }
.fm-stock-row { display: flex; align-items: baseline; gap: 6px; }
.fm-big { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-title); font-size: 1.6rem; color: #ffd23f; }
.fm-big .ban { width: 28px; height: 28px; }
.fm-bar { height: 10px; border-radius: 999px; background: #0007; overflow: hidden; border: 1px solid #ffffff10; }
.fm-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #c99a00, #ffd23f); transition: width .5s; }
.fm-bar i.full { background: linear-gradient(90deg, #c0001a, var(--red)); }
.fm-kpi span { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.fm-kpi b { font-size: 1.15rem; } .fm-kpi b small { font-size: .75rem; color: var(--muted); font-weight: 600; }
.fm-kpi .btn { justify-self: start; padding: 5px 10px; font-size: .78rem; }
.fm-sellbtn { align-self: stretch; padding: 10px 22px; font-size: 1.05rem; }
.fm-sellbtn .ban { width: 22px; height: 22px; }
.fm-hint { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 9px 14px; border-radius: 12px; background: rgba(245, 197, 66, .08); border: 1px solid rgba(245, 197, 66, .25); color: #f0dca0; font-size: .9rem; }
.fm-hint .ic { width: 18px; height: 18px; color: var(--gold); flex: none; }
.fm-main { display: grid; grid-template-columns: minmax(0, 640px) minmax(280px, 1fr); gap: 16px; align-items: start; }
.fm-board { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: repeat(7, minmax(0, 1fr)); gap: 4px; padding: 8px; border-radius: 18px; background: radial-gradient(circle at 50% 50%, #3b2a14, #1e150a); border: 2px solid #4a3418; box-shadow: inset 0 0 30px #0008; aspect-ratio: 1; }
.fm-tile { position: relative; padding: 0; border: 0; border-radius: 9px; cursor: pointer; aspect-ratio: 1; min-width: 0; overflow: hidden; font: inherit; color: var(--text); transition: transform .12s, box-shadow .12s, filter .12s; }
.fm-tile.own { background: radial-gradient(circle at 35% 30%, #5aa83e, #3c7f2a 70%); box-shadow: inset 0 -3px 0 #2c5e1f, inset 0 0 0 1px #6fc24f55; }
.fm-tile.own:hover { filter: brightness(1.12); }
.fm-tile.empty::after { content: '+'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.6rem; font-weight: 300; color: #ffffff55; opacity: 0; transition: opacity .15s; }
.fm-tile.empty:hover::after { opacity: 1; }
.fm-tile.locked { background: #0e1d14; cursor: default; box-shadow: inset 0 0 0 1px #ffffff08; }
.fm-tile.locked::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 30% 30%, #1d4a2a 0 18%, transparent 19%), radial-gradient(circle at 72% 64%, #18402a 0 22%, transparent 23%), radial-gradient(circle at 60% 20%, #143522 0 12%, transparent 13%); opacity: .8; }
.fm-tile.buy { background: #173322; box-shadow: inset 0 0 0 2px #f5c54266; }
.fm-tile.buy:hover { box-shadow: inset 0 0 0 2px var(--gold); filter: brightness(1.15); }
.fm-buy { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 1px; color: var(--gold); }
.fm-buy .ic { width: 16px; height: 16px; } .fm-buy small { font-size: clamp(.5rem, 1.4vw, .68rem); font-weight: 800; }
.fm-tile.sel { box-shadow: 0 0 0 3px var(--gold), 0 0 18px rgba(245, 197, 66, .5); z-index: 2; transform: scale(1.04); }
.fm-art { position: absolute; inset: 2%; display: block; }
.fm-art svg { width: 100%; height: 100%; display: block; }
.fm-tile.ghost .fm-art { opacity: .45; filter: grayscale(.4); }
.fm-lv { position: absolute; top: 4px; left: 4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #1a1400cc; color: var(--gold); font-size: .68rem; font-weight: 800; display: grid; place-items: center; }
.fm-wk { position: absolute; top: 5px; right: 4px; display: flex; flex-direction: column; gap: 2px; }
.fm-wk i { width: 6px; height: 6px; border-radius: 50%; background: #0005; box-shadow: inset 0 0 0 1px #fff4; }
.fm-wk i.on { background: #c98a4a; box-shadow: 0 0 0 1px #3a2410; }
.fm-work { position: absolute; left: 4px; right: 4px; bottom: 4px; height: 15px; border-radius: 8px; background: #000a; overflow: hidden; }
.fm-work i { position: absolute; inset: 0 auto 0 0; background: repeating-linear-gradient(-45deg, #f5c542 0 6px, #d1950f 6px 12px); opacity: .85; }
.fm-work small { position: relative; display: block; text-align: center; font-size: clamp(.5rem, 1.3vw, .64rem); font-weight: 800; line-height: 15px; color: #fff; text-shadow: 0 1px 2px #000; }
.fm-tile.work .fm-art { animation: fmWork 1.6s ease-in-out infinite; }
@keyframes fmWork { 50% { transform: translateY(-2px); } }
.fm-side { padding: 16px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); min-width: 0; }
.fm-side h3 { margin: 0 0 6px; font-family: var(--font-title); font-weight: 400; color: var(--gold); font-size: 1.15rem; }
.fm-side h4 { margin: 14px 0 6px; font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.fm-side p { margin: 0 0 10px; font-size: .9rem; }
.fm-side-head { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.fm-side-art { width: 72px; height: 72px; flex: none; border-radius: 12px; background: radial-gradient(circle at 35% 30%, #5aa83e, #3c7f2a 70%); }
.fm-side-art svg { width: 100%; height: 100%; }
.fm-stats, .fm-q { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 4px; }
.fm-stats li, .fm-q li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; border-radius: 8px; background: #0003; font-size: .86rem; }
.fm-stats li span, .fm-q li span { color: var(--muted); }
.fm-stats i { font-style: normal; color: var(--green); }
.fm-up { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0 6px; padding: 10px 12px; border-radius: 12px; background: rgba(245, 197, 66, .07); border: 1px solid rgba(245, 197, 66, .2); }
.fm-up div { display: grid; gap: 1px; } .fm-up small { color: var(--muted); font-size: .75rem; } .fm-up b { font-size: 1.05rem; color: #ffd23f; }
.fm-err { color: #ff9aa4; font-size: .8rem !important; margin: 4px 0 0 !important; }
.fm-note { font-size: .8rem !important; }
.fm-price { font-family: var(--font-title); font-size: 1.5rem; color: var(--gold); }
.fm-demo { margin-top: 12px; opacity: .7; } .fm-demo:hover { opacity: 1; }
.fm-builds { display: grid; gap: 8px; }
.fm-build { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: #0003; border: 1px solid var(--line); }
.fm-build.off { opacity: .6; }
.fm-build-art { width: 52px; height: 52px; border-radius: 10px; background: radial-gradient(circle at 35% 30%, #5aa83e, #3c7f2a 70%); }
.fm-build-art svg { width: 100%; height: 100%; }
.fm-build b { display: block; } .fm-build small { display: block; color: var(--muted); font-size: .76rem; }
.fm-sell-pick { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
#fm-sell-r { width: 100%; accent-color: var(--gold); }
.fm-sell-sum { font-size: 1.2rem; text-align: center; }
.fm-help li { margin-bottom: 6px; }
.fm-visit .fm-board { max-width: 520px; margin: 10px auto 0; }
.fm-board.ro .fm-tile { cursor: default; }
.fm-visit-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.fm-visit-kpis div { padding: 8px 10px; border-radius: 10px; background: #0003; display: grid; }
.fm-visit-kpis span { font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
/* encart de l'accueil */
.fm-lobby { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; margin: 0 0 22px; padding: 12px 18px; border-radius: 18px; color: var(--text); background: linear-gradient(100deg, rgba(90, 168, 62, .18), rgba(245, 197, 66, .08)); border: 1px solid #3c7f2a88; transition: border-color .15s, transform .15s; }
.fm-lobby:hover { border-color: var(--gold); transform: translateY(-1px); }
.fm-lobby.full { border-color: var(--red); background: linear-gradient(100deg, rgba(255, 77, 94, .15), rgba(245, 197, 66, .06)); }
.fm-l-art { width: 64px; height: 64px; border-radius: 14px; background: radial-gradient(circle at 35% 30%, #5aa83e, #3c7f2a 70%); }
.fm-l-art svg { width: 100%; height: 100%; }
.fm-l-txt { display: grid; gap: 4px; min-width: 0; }
.fm-l-txt b { font-family: var(--font-title); font-weight: 400; color: var(--gold); font-size: 1.05rem; }
.fm-l-txt small { color: #cfe0d5; }
.fm-l-stock { font-family: var(--font-title); font-size: 1.3rem; color: #ffd23f; display: grid; justify-items: end; }
.fm-l-stock small { font-family: var(--font); font-size: .75rem; color: var(--muted); }
@media (max-width: 980px) {
  .fm-top { grid-template-columns: 1fr 1fr; }
  .fm-stock { grid-column: 1 / -1; }
  .fm-sellbtn { grid-column: 1 / -1; }
  .fm-main { grid-template-columns: 1fr; }
  .fm-board { padding: 5px; gap: 3px; }
  .fm-visit-kpis { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .fm-lobby { grid-template-columns: 48px 1fr; } .fm-l-art { width: 48px; height: 48px; } .fm-l-stock { grid-column: 1 / -1; justify-items: start; }
  .fm-lv { top: 2px; left: 2px; min-width: 14px; height: 14px; font-size: .55rem; }
  .fm-wk i { width: 4px; height: 4px; }
}
.fm-help-s { display: none; font-weight: 800; }
.nav a.nav-farm .ni { color: #ffd23f; }
@media (max-width: 560px) {
  .fm-help-l { display: none; } .fm-help-s { display: inline; }
  .fm-wrap .game-head { flex-wrap: wrap; gap: 8px; }
  .fm-wrap .game-head .actions { gap: 6px; }
  .fm-tabs button { padding: 6px 10px; font-size: .82rem; }
}
@media (max-width: 760px) { .nav > a .nl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; } }
@media (max-width: 400px) { .nav > a .nl, .nav-gbtn .nl { font-size: .55rem !important; } }
.seed { width: 1.05em; height: 1.05em; vertical-align: -2px; }
.fm-seeds { color: var(--gold); font-weight: 700; }
.fm-kpi #fm-replant { margin-top: 2px; }
.fm-seedbox { padding: 10px 12px; margin: 10px 0 4px; border-radius: 12px; background: linear-gradient(120deg, rgba(245, 197, 66, .12), rgba(245, 197, 66, .03)); border: 1px solid rgba(245, 197, 66, .3); }
.fm-seedbox h4 { margin: 0 0 6px !important; color: var(--gold) !important; display: flex; align-items: center; gap: 6px; }
.fm-seedbox p { font-size: .85rem; margin: 0 0 6px; }
.fm-seedbox .btn { margin-top: 8px; }
.fm-mtabs { display: flex; margin-bottom: 12px; }
.fm-mtabs button { flex: 1; }
/* fil : messages regroupés */
.fd-count { all: unset; display: inline-block; margin-left: 4px; padding: 0 7px; border-radius: 999px; font-size: .72rem; font-weight: 800; line-height: 1.5; color: #1a1400; background: var(--gold); cursor: pointer; vertical-align: 1px; }
.fd-count:hover { filter: brightness(1.1); }
.fd-sub { list-style: none; margin: 6px 0 2px; padding: 4px 0 0 10px; border-left: 2px solid var(--line); display: grid; gap: 2px; }
.fd-sub li { display: flex; justify-content: space-between; gap: 10px; font-size: .78rem; color: var(--muted); padding: 1px 0 !important; border: 0 !important; background: none !important; }
.fd-sub small { white-space: nowrap; }
.feed li.fd-group { align-items: flex-start; } .feed li.fd-group .fd-ic, .feed li.fd-group > small { margin-top: 2px; }
/* coffre-fort */
.vault-btn.has { color: var(--gold); }
.hero-vault { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; font-size: .8rem; color: var(--muted); font-weight: 600; vertical-align: 2px; }
.hero-vault .ic { width: 14px; height: 14px; }
.lb-vault { display: block; font-size: .7rem; }
.vt-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.vt-kpis > div { padding: 12px 14px; border-radius: 14px; background: #0003; border: 1px solid var(--line); display: grid; gap: 3px; }
.vt-kpis span { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.vt-kpis b { font-size: 1.25rem; }
.vt-safe { position: relative; background: linear-gradient(140deg, rgba(245, 197, 66, .14), rgba(0, 0, 0, .25)) !important; border-color: #6b5518 !important; }
.vt-safe > .ic { position: absolute; right: 10px; top: 10px; width: 26px; height: 26px; color: var(--gold); opacity: .8; }
.vt-tabs { display: flex; margin-bottom: 10px; } .vt-tabs button { flex: 1; }
.vt-row { display: flex; gap: 8px; } .vt-row input { flex: 1; min-width: 0; text-align: left; }
.vt-quick { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.vt-note { font-size: .8rem; margin: 6px 0 0; }
/* Crash : avance rapide une fois encaissé */
.crash-stage.ff::after { content: 'Avance rapide ▸▸'; position: absolute; top: 12px; right: 14px; padding: 3px 10px; border-radius: 999px; font-size: .72rem; font-weight: 800; color: #1a1400; background: var(--gold); animation: fgPulse 0.8s infinite; pointer-events: none; }
.crash-stage.crashed.ff::after { display: none; }

/* ---------------------------- Memory ---------------------------- */
.mm-board { --cols: 4; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: clamp(5px, 1.4vw, 10px); width: min(calc(var(--cols) * 110px), 100%); margin: 0 auto; user-select: none; }
.mm-card { position: relative; aspect-ratio: 1; padding: 0; border: 0; background: none; cursor: pointer; perspective: 600px; }
.mm-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .35s cubic-bezier(.3, .7, .4, 1.2); }
.mm-card.up .mm-inner { transform: rotateY(180deg); }
.mm-back, .mm-front { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 12px; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.mm-back { background: radial-gradient(circle at 50% 40%, #2c5a3c, #12301f 75%); border: 2px solid #3d6b4c; box-shadow: inset 0 0 0 3px #0d130f55, 0 3px 0 #08100b; }
.mm-back svg { width: 62%; height: 62%; opacity: .55; filter: grayscale(.3); }
.mm-card:hover:not(.up) .mm-back { border-color: var(--gold); }
.mm-front { transform: rotateY(180deg); background: linear-gradient(160deg, #22352a, #16231c); border: 2px solid var(--fc, var(--gold)); color: var(--fc, var(--gold)); }
.mm-front svg { width: 52%; height: 52%; filter: drop-shadow(0 2px 4px #0008); }
.mm-card.done .mm-front { background: linear-gradient(160deg, color-mix(in srgb, var(--fc) 28%, #16231c), #16231c); animation: mm-pop .4s ease; }
.mm-card.done { cursor: default; }
@keyframes mm-pop { 50% { transform: rotateY(180deg) scale(1.08); } }

/* ---------------------------- Jeux à gratter ---------------------------- */
.sc-pick { display: grid; gap: 8px; }
.sc-opt { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; text-align: left; padding: 10px 12px; border-radius: 12px; border: 2px solid var(--line); background: var(--panel2); cursor: pointer; transition: border-color .15s, transform .1s; }
.sc-opt b { font-size: .95rem; }
.sc-opt span { font-weight: 700; color: var(--gold); grid-row: span 2; align-self: center; }
.sc-opt small { color: var(--muted); font-size: .75rem; }
.sc-opt:hover:not(:disabled) { border-color: #4b6b57; }
.sc-opt.on { border-color: var(--sc-a); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc-a) 25%, transparent); }
.sc-opt:disabled { opacity: .55; cursor: not-allowed; }
.sc-t-banane { --sc-a: #ffd23f; --sc-b: #3b7a2a; --sc-c: #1f4a17; }
.sc-t-singe { --sc-a: #c9a6ff; --sc-b: #4b2e8a; --sc-c: #24154a; }
.sc-t-tresor { --sc-a: #f5c542; --sc-b: #7a4a10; --sc-c: #3a2306; }
.sc-stage { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; }
.sc-ticket { width: min(460px, calc(100% - 16px)); user-select: none; -webkit-user-select: none; padding: 14px; border-radius: 18px; background: linear-gradient(160deg, var(--sc-b), var(--sc-c)); border: 3px solid var(--sc-a); box-shadow: var(--shadow), inset 0 0 0 4px #0003; position: relative; }
.sc-ticket::before, .sc-ticket::after { content: ''; position: absolute; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: var(--bg); border: 3px solid var(--sc-a); }
.sc-ticket::before { left: -12px; clip-path: inset(0 0 0 50%); } .sc-ticket::after { right: -12px; clip-path: inset(0 50% 0 0); }
.sc-head { display: grid; text-align: center; margin-bottom: 12px; gap: 2px; }
.sc-head b { font-family: var(--font-title); font-size: clamp(1.1rem, 4vw, 1.5rem); color: var(--sc-a); text-shadow: 0 2px 0 #0007; letter-spacing: .5px; }
.sc-head span { font-size: .85rem; color: #fffc; }
.sc-head em { font-style: normal; font-size: .78rem; color: var(--sc-a); font-weight: 700; }
.sc-gridwrap { position: relative; border-radius: 12px; }
.sc-grid { --cols: 3; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 8px; }
.sc-cell { aspect-ratio: 1.25; border-radius: 10px; background: #fff8e4; color: #3a2a0a; display: grid; place-content: center; text-align: center; gap: 0; box-shadow: inset 0 -3px 0 #0002; transition: transform .2s, background .2s; }
.sc-cell b { font-family: var(--font-title); font-size: clamp(.85rem, 3.6vw, 1.25rem); line-height: 1.1; }
.sc-cell small { font-size: .7rem; font-weight: 700; color: #8a6a20; }
.sc-cell.win { background: linear-gradient(160deg, #fff3b0, #f5c542); box-shadow: 0 0 0 3px var(--green), 0 0 18px #3ddc8488; animation: sc-win .6s ease 2; }
@keyframes sc-win { 50% { transform: scale(1.07); } }
.sc-cover { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; border-radius: 12px; }
.sc-cover:active { cursor: grabbing; }
.sc-cover-plain { position: absolute; inset: 0; border-radius: 12px; background: repeating-linear-gradient(135deg, #0000 0 10px, #0001 10px 20px); }
.sc-gridwrap:has(.sc-cover-plain) .sc-cell { background: linear-gradient(160deg, var(--sc-a), color-mix(in srgb, var(--sc-a) 60%, #000)); color: #0006; }
.sc-foot { margin-top: 10px; text-align: center; font-size: .75rem; color: #fffa; }
.sc-msg { margin: 0; min-height: 1.6em; text-align: center; font-weight: 600; color: var(--muted); }
.sc-msg.win { color: var(--green); font-size: 1.1rem; }
.sc-msg.win b { color: var(--gold); }
.sc-msg.lose { color: var(--red); }

/* ---------------------------- Mots croisés ---------------------------- */
.cw-clue { max-width: 980px; margin: 0 auto 12px; padding: 10px 14px; min-height: 2.8em; border-radius: 12px; background: var(--panel2); border: 1px solid var(--line); font-size: .95rem; }
.cw-clue b { color: var(--gold); margin-right: 6px; }
.cw-clue small { color: var(--muted); }
.cw-layout { display: flex; gap: 22px; justify-content: center; align-items: flex-start; flex-wrap: wrap; }
.cw-gridwrap { position: relative; width: min(560px, 100%); }
.cw-grid { --cols: 11; --rows: 11; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); grid-template-rows: repeat(var(--rows), minmax(0, 1fr)); aspect-ratio: var(--cols) / var(--rows); width: 100%; gap: 2px; padding: 2px; background: #0d130f; border-radius: 8px; user-select: none; }
.cw-cell { position: relative; min-width: 0; min-height: 0; overflow: hidden; display: grid; place-items: center; background: #f4efe0; color: #18221c; border-radius: 2px; cursor: pointer; }
.cw-cell.blk { background: transparent; cursor: default; }
.cw-cell i { position: absolute; top: 1px; left: 2px; font-style: normal; font-size: clamp(.45rem, 1.4vw, .62rem); font-weight: 700; color: #5a6a5f; line-height: 1; }
.cw-cell span { font-weight: 800; font-size: clamp(.7rem, 3vw, 1.3rem); text-transform: uppercase; }
.cw-cell.word { background: #d8ecd9; }
.cw-cell.sel { background: #ffd95a; box-shadow: inset 0 0 0 2px #b88600; }
.cw-cell.given span { color: #1c6a3a; }
.cw-cell.bad { background: #ffc9cf; }
.cw-cell.bad span { color: #b0001a; }
.cw-grid.solved .cw-cell:not(.blk) { background: #bff0cf; transition: background .4s; }
.cw-input { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; border: 0; padding: 0; font-size: 16px; pointer-events: none; }
.cw-clues { width: min(380px, 100%); max-height: 560px; overflow: auto; padding: 4px 14px 12px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.cw-clues h4 { margin: 12px 0 6px; font-family: var(--font-title); font-weight: 400; color: var(--gold); font-size: .95rem; }
.cw-clues ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.cw-clues li { padding: 5px 8px; border-radius: 8px; cursor: pointer; font-size: .88rem; line-height: 1.3; }
.cw-clues li b { color: var(--muted); margin-right: 4px; }
.cw-clues li small { color: var(--muted); }
.cw-clues li:hover { background: var(--panel2); }
.cw-clues li.on { background: #2b4a37; }
.cw-clues li.ok { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--green); }
.cw-clues li.ok b { color: var(--green); }
@media (max-width: 860px) { .sc-wrap .sc-stage { order: -1; } }
@media (max-width: 700px) {
  .cw-clues { max-height: none; }
  .cw-clue { position: sticky; top: 64px; z-index: 5; }
}