/* SlotDrop — coquille partagée : header de l'artefact + composants repris.
   Remplace theme.css et premium.css. Généré par build-shell.py. */


/* ═══════════════════════════════════════════════════════════════
   SlotDrop 2026 v2 — identité sombre + vert conservée, énergie remise.
   Règle : de la profondeur par superposition de surfaces et de couleur,
   pas par lueur. Chaque section a sa propre matière.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --r: 22px; --r-sm: 14px; --max: 1180px;
  --ease: cubic-bezier(.2,.7,.2,1);
}
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #070b12; --bg-2: #0e141f; --bg-3: #151d2b; --bg-4: #1c2636;
  --line: rgba(255,255,255,.08); --line-2: rgba(255,255,255,.16);
  --text: #f2f5f9; --text-2: #aab4c2; --text-3: #6d7887;
  --green: #22f08e; --green-2: #10c96f; --green-ink: #03261a;
  --gold: #ffc632; --gold-2: #f5a300; --gold-ink: #2b1a03;
  --violet: #a78bfa; --blue: #5bb6ff; --coral: #ff7a59;
  --aurora: radial-gradient(900px 520px at 18% -10%, rgba(34,240,142,.22), transparent 60%),
            radial-gradient(700px 420px at 92% 8%, rgba(91,182,255,.14), transparent 60%),
            radial-gradient(600px 400px at 60% 110%, rgba(167,139,250,.10), transparent 60%);
  --card-shadow: 0 30px 60px -40px rgba(0,0,0,.9);
}
[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f6f9; --bg-2: #ffffff; --bg-3: #eaeef4; --bg-4: #dfe5ee;
  --line: rgba(10,20,30,.10); --line-2: rgba(10,20,30,.20);
  --text: #0b1118; --text-2: #465262; --text-3: #7b8794;
  --green: #0f9d63; --green-2: #0b7f50; --green-ink: #ffffff;
  --gold: #f2b000; --gold-2: #d99a00; --gold-ink: #2b1a03;
  --violet: #6d4fd6; --blue: #1f7ed6; --coral: #e8552f;
  --aurora: radial-gradient(900px 520px at 18% -10%, rgba(15,157,99,.16), transparent 60%),
            radial-gradient(700px 420px at 92% 8%, rgba(31,126,214,.12), transparent 60%),
            radial-gradient(600px 400px at 60% 110%, rgba(109,79,214,.08), transparent 60%);
  --card-shadow: 0 30px 60px -44px rgba(10,20,30,.35);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--text); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; padding-bottom: 72px; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
h1,h2,h3 { margin: 0; line-height: 1.05; letter-spacing: -.035em; font-weight: 800; }
h2 { font-size: clamp(34px, 4.6vw, 56px); }
h3 { font-size: 20px; letter-spacing: -.02em; font-weight: 700; }
p { margin: 0; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; }
.kicker::before { content: ""; width: 22px; height: 2px; background: currentColor; border-radius: 2px; }

/* Boutons */
.btn { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 999px; font-weight: 700; font-size: 15px; border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: transform .25s var(--ease), background .2s, border-color .2s, box-shadow .25s; position: relative; overflow: hidden; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(.985); }
.btn-gold { background: linear-gradient(135deg,#ffdf6b 0%,#ffc632 38%,#f5a300 72%,#ffd970 100%); color: var(--gold-ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 10px 30px -14px rgba(255,190,40,.8); }
.btn-gold::after { content:""; position:absolute; inset:0; background: linear-gradient(110deg,transparent 38%,rgba(255,255,255,.7) 50%,transparent 62%); transform: translateX(-130%); animation: sweep 4.5s ease-in-out infinite; pointer-events:none; }
@keyframes sweep { 0%,8%{transform:translateX(-130%)} 30%{transform:translateX(130%)} 100%{transform:translateX(130%)} }
.btn-green { background: var(--green); color: var(--green-ink); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--bg-3); }
.btn-sm { height: 38px; padding: 0 16px; font-size: 14px; }


/* ── Header : îlot flottant en verre ── */
.navwrap { position: sticky; top: 0; z-index: 50; padding: 14px 16px 0; pointer-events: none; }
.nav { pointer-events: auto; max-width: var(--max); margin: 0 auto; height: 66px; display: flex; align-items: center; gap: 6px; padding: 0 10px 0 18px;
  border-radius: 999px; border: 1px solid var(--line-2);
  background: color-mix(in srgb, var(--bg-2) 72%, transparent);
  backdrop-filter: blur(20px) saturate(1.4); -webkit-backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: 0 20px 50px -30px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06);
  transition: height .3s var(--ease), background .3s, box-shadow .3s; }
[data-theme="light"] .nav { box-shadow: 0 20px 50px -34px rgba(10,20,30,.35), inset 0 1px 0 rgba(255,255,255,.8); }
.navwrap.tight .nav { height: 56px; background: color-mix(in srgb, var(--bg-2) 88%, transparent); }
.logo { font-weight: 900; font-size: 21px; letter-spacing: -.04em; display: flex; align-items: center; gap: 9px; margin-right: 10px; }
.logo i { width: 30px; height: 30px; border-radius: 9px; background: var(--green); display: inline-grid; place-items: center; color: var(--green-ink); font-style: normal; font-size: 15px; font-weight: 900; box-shadow: inset 0 -2px 0 rgba(0,0,0,.18); }
.logo b { color: var(--green); }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links > a, .nav-links > .dd > button { height: 40px; padding: 0 14px; border-radius: 999px; font-size: 14.5px; font-weight: 600; color: var(--text-2); display: inline-flex; align-items: center; gap: 7px; background: transparent; border: 0; cursor: pointer; font-family: inherit; transition: background .2s, color .2s; }
.nav-links > a:hover, .nav-links > .dd > button:hover, .nav-links > .dd.open > button { color: var(--text); background: var(--bg-3); }
.nav-links > a.on { color: var(--text); }
.nav-links > a.on::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--green); }
.dd { position: relative; }
.dd > button svg { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.dd.open > button svg { transform: rotate(180deg); }
.menu { position: absolute; top: calc(100% + 12px); left: -8px; width: 560px; padding: 10px; border-radius: 20px;
  background: color-mix(in srgb, var(--bg-2) 92%, transparent); border: 1px solid var(--line-2);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 30px 70px -30px rgba(0,0,0,.8);
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  opacity: 0; transform: translateY(-6px) scale(.98); pointer-events: none; transition: opacity .2s var(--ease), transform .25s var(--ease); }
.dd.open .menu { opacity: 1; transform: none; pointer-events: auto; }
.mi { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; padding: 12px; border-radius: 14px; transition: background .15s; }
.mi:hover { background: var(--bg-3); }
.mi .ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; }
.mi b { display: block; font-size: 14.5px; font-weight: 700; color: var(--text); letter-spacing: -.01em; }
.mi span { display: block; font-size: 12.5px; color: var(--text-3); margin-top: 1px; }
.mi em { font-style: normal; font-family: var(--mono); font-weight: 800; font-size: 12px; margin-left: 6px; }
.ic-g { background: color-mix(in srgb, var(--green) 20%, transparent); } .mi .ic-g + div em { color: var(--green); }
.ic-y { background: color-mix(in srgb, var(--gold) 22%, transparent); }  .mi .ic-y + div em { color: var(--gold); }
.ic-v { background: color-mix(in srgb, var(--violet) 22%, transparent); } .mi .ic-v + div em { color: var(--violet); }
.ic-b { background: color-mix(in srgb, var(--blue) 20%, transparent); }  .mi .ic-b + div em { color: var(--blue); }
.ic-c { background: color-mix(in srgb, var(--coral) 20%, transparent); } .mi .ic-c + div em { color: var(--coral); }
.menu .foot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; padding: 10px 12px 4px; border-top: 1px solid var(--line); margin-top: 4px; font-size: 13px; color: var(--text-3); }
.menu .foot a { color: var(--green); font-weight: 700; }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.theme-btn { width: 40px; height: 40px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--text-2); cursor: pointer; display: grid; place-items: center; transition: background .2s, color .2s; }
.theme-btn:hover { background: var(--bg-3); color: var(--text); }
.theme-btn svg { width: 18px; height: 18px; }
[data-theme="dark"] .ico-sun { display: none; } [data-theme="light"] .ico-moon { display: none; }
.burger { display: none; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; color: var(--text); cursor: pointer; place-items: center; }
.burger svg { width: 18px; height: 18px; }
.sheet { display: none; }
@media (max-width: 960px) {
  .navwrap { padding: 10px 10px 0; }
  .nav { height: 58px; padding: 0 8px 0 14px; }
  .nav-links, .nav-right .btn-ghost { display: none; }
  .burger { display: grid; }
  .sheet { position: fixed; inset: 0; z-index: 70; background: var(--bg); padding: 20px; display: none; flex-direction: column; gap: 6px; }
  .sheet.open { display: flex; }
  .sheet a { padding: 14px 16px; border-radius: 14px; font-weight: 700; font-size: 18px; }
  .sheet a:hover { background: var(--bg-3); }
  .sheet .close { align-self: flex-end; margin-bottom: 8px; }
}


@media (max-width: 960px) {
  .navwrap { padding: 10px 10px 0; }
  .nav { height: 58px; padding: 0 8px 0 14px; }
  .nav-links, .nav-right .btn-ghost { display: none; }
  .burger { display: grid; }
  .sheet { position: fixed; inset: 0; z-index: 70; background: var(--bg); padding: 20px; display: none; flex-direction: column; gap: 6px; }
  .sheet.open { display: flex; }
  .sheet a { padding: 14px 16px; border-radius: 14px; font-weight: 700; font-size: 18px; }
  .sheet a:hover { background: var(--bg-3); }
  .sheet .close { align-self: flex-end; margin-bottom: 8px; }
}
@media (max-width: 960px) {
  .nav-links { display: none; }
}

/* « Donate » dans le menu : discret mais repérable — la teinte or du site,
   pas un bouton. Le point vert de la page active reste géré par .on. */
.nav-links > a.give { color: var(--gold); }
.nav-links > a.give:hover { color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, transparent); }
.nav-links > a.give.on { color: var(--gold); }
.nav-links > a.give.on::before { background: var(--gold); }
.sheet a.give { color: var(--gold); }

/* ── Pont : les anciens noms de variables suivent la nouvelle palette ──
   theme.css et premium.css ne sont plus chargés ; les règles reprises
   ci-dessous les utilisent encore. On les redéfinit une seule fois. */
:root {
  --bg-deep: var(--bg); --bg-glow: var(--bg-3); --bg-card: var(--bg-2);
  --surface: var(--bg-2); --surface-1: var(--bg-2); --surface-2: var(--bg-3);
  --card: var(--bg-2); --s1: var(--bg-2); --s2: var(--bg-3);
  --txt: var(--text); --text-dim: var(--text-2); --dim: var(--text-2); --dim2: var(--text-3);
  --accent: var(--green); --acc: var(--green); --accent-2: var(--blue);
  --accent-soft: color-mix(in srgb, var(--green) 14%, transparent);
  --red-soft: color-mix(in srgb, var(--coral) 16%, transparent);
  --font-body: var(--font); --font-display: var(--font); --font-b: var(--font); --font-d: var(--font);
  --sd-accent: var(--green); --sd-accent-2: var(--blue); --sd-violet: var(--violet); --sd-gold: var(--gold);
  --sd-grad: linear-gradient(135deg, var(--green) 0%, var(--blue) 100%);
  --sd-grad-soft: linear-gradient(135deg, color-mix(in srgb, var(--green) 12%, transparent), color-mix(in srgb, var(--blue) 8%, transparent));
  --sd-glass: color-mix(in srgb, var(--text) 4%, transparent);
  --sd-glass-h: color-mix(in srgb, var(--text) 7%, transparent);
  --sd-line: var(--line); --sd-line-h: color-mix(in srgb, var(--green) 35%, transparent);
  --sd-glow: none; --sd-shadow: var(--card-shadow);
  --sd-ease: cubic-bezier(.2,.7,.2,1); --sd-spring: cubic-bezier(.16,1,.3,1);
  --sd-snap: cubic-bezier(.34,1.56,.64,1); --p-ease: cubic-bezier(.16,1,.3,1);
  --sd-e1: 0 1px 2px rgba(0,0,0,.30);
  --sd-e2: 0 4px 12px -2px rgba(0,0,0,.40), 0 1px 2px rgba(0,0,0,.25);
  --sd-e3: 0 12px 32px -8px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.30);
  --sd-e4: 0 28px 70px -20px rgba(0,0,0,.70), 0 4px 12px rgba(0,0,0,.35);
  --p-bg: var(--bg); --p-card: var(--bg-2); --p-card-2: var(--bg-2);
  --p-ink: var(--text); --p-ink-2: var(--text-2); --p-ink-3: var(--text-3);
  /* --red est un alias légitime vers --coral.
     « --gold: var(--gold) » se trouvait ici, et c'était une variable qui se
     référençait elle-même. Le CSS traite ce cas comme invalide : le jeton ne
     vaut plus rien du tout, et il écrasait les deux définitions valides plus
     haut (#ffc632 en sombre, #f2b000 en clair).
     Conséquence visible : dans le coach blackjack, les boutons HIT et DOUBLE
     se retrouvaient sans fond, avec un texte presque noir sur fond sombre —
     donc invisibles. L'exercice paraissait n'offrir que STAND et SPLIT.
     On ne ré-alias pas --gold : il est déjà défini au bon endroit. */
  --red: var(--coral);
}

/* ── repris de theme.css ── */
.article-card,
.articles-box .article-row,
.tool-card,
.related-card,
.bonus-card,
.toc,
.lb-box, .leaderboard-box {
  background:
    linear-gradient(rgba(255,255,255,.028), rgba(255,255,255,.014)) padding-box !important;
  border: 1px solid var(--sd-line) !important;
  box-shadow: var(--sd-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .3s var(--sd-ease), border-color .3s, box-shadow .3s var(--sd-ease) !important;
}
#sd-progress {
  background: var(--sd-grad) !important;
  box-shadow: 0 0 14px rgba(0,255,136,.7), 0 0 4px rgba(0,212,255,.8) !important;
  height: 3px !important;
}
.sd-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--sd-ease), transform .6s var(--sd-ease); }
.sd-reveal.sd-in { opacity: 1; transform: none; }
.sd-reveal { opacity:1; transform:none; }
#sd-top {
  position: fixed; right: 18px; bottom: 18px; z-index: 500;
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,22,34,.85); color: var(--sd-accent);
  border: 1px solid rgba(0,255,136,.3);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  cursor: pointer; font-size: 18px;
  opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity .3s, transform .3s var(--sd-ease), border-color .2s, box-shadow .2s;
  box-shadow: var(--sd-shadow);
}
#sd-top.sd-show { opacity: 1; pointer-events: auto; transform: none; }
#sd-top:hover { border-color: var(--sd-accent); box-shadow: var(--sd-glow); }
.hs-item { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.hs-item strong {
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 20px; font-weight: 800; letter-spacing: -.02em;
  background: var(--sd-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hs-item span {
  font-size: 10px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: #6e88a0;
}
.hs-sep { width: 1px; height: 30px; background: var(--sd-line); }
.hs-item strong { font-size: 17px; }
.hs-item span { font-size: 9px; }
#sd-toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 600;
  transform: translate(-50%, 16px);
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px; border-radius: 980px;
  background: rgba(10,22,34,.92);
  border: 1px solid rgba(0,255,136,.35);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  color: #eaf3ff; font: 700 13px/1 'Sora', system-ui, sans-serif;
  box-shadow: var(--sd-glow), var(--sd-shadow);
  opacity: 0; pointer-events: none;
  transition: opacity .4s var(--sd-ease), transform .4s var(--sd-ease);
}
#sd-toast.sd-show { opacity: 1; transform: translate(-50%, 0); }
#sd-toast .sd-toast-fire { font-size: 17px; }
#sd-next {
  position: fixed; left: 18px; bottom: 18px; z-index: 500;
  width: min(320px, calc(100vw - 36px));
  padding: 16px 18px; border-radius: 18px;
  background: rgba(10,22,34,.92);
  border: 1px solid rgba(0,255,136,.25);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--sd-shadow);
  opacity: 0; pointer-events: none; transform: translateY(14px);
  transition: opacity .45s var(--sd-ease), transform .45s var(--sd-ease);
}
#sd-next.sd-show { opacity: 1; pointer-events: auto; transform: none; }
#sd-next .sdn-label {
  font: 700 9px/1 'Sora', system-ui, sans-serif;
  letter-spacing: .12em; text-transform: uppercase;
  background: var(--sd-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  display: block; margin-bottom: 7px;
}
#sd-next a {
  color: #eaf3ff; font: 700 14px/1.45 'Sora', system-ui, sans-serif;
  display: block; text-decoration: none;
}
#sd-next a:hover { color: var(--sd-accent); }
#sd-next .sdn-close {
  position: absolute; top: 8px; right: 10px;
  background: none; border: none; color: #4e6678;
  font-size: 15px; cursor: pointer; padding: 4px; line-height: 1;
}
#sd-next .sdn-close:hover { color: #eaf3ff; }
#sd-next { left: 12px; bottom: 74px; }
.sd-progress-strip {
  display: flex; align-items: center; gap: 14px;
  margin: 0 auto 34px; max-width: 560px;
  padding: 13px 20px; border-radius: 16px;
  background: rgba(255,255,255,.028);
  border: 1px solid var(--sd-line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.sd-progress-strip .sdp-txt {
  font: 700 12px/1.4 'Sora', system-ui, sans-serif;
  color: #8fa8c0; white-space: nowrap;
}
.sd-progress-strip .sdp-txt strong { color: var(--sd-accent); }
.sd-progress-strip .sdp-bar {
  flex: 1; height: 6px; border-radius: 4px;
  background: rgba(255,255,255,.07); overflow: hidden;
}
.sd-progress-strip .sdp-fill {
  height: 100%; border-radius: 4px;
  background: var(--sd-grad);
  box-shadow: 0 0 10px rgba(0,255,136,.5);
  transition: width .8s var(--sd-ease);
}
.sd-edge {
  position: relative; overflow: hidden;
  padding: 26px 26px 24px; border-radius: 20px;
  background: linear-gradient(160deg, #0d2030, #0a1826 70%);
  border: 1px solid rgba(0,255,136,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), var(--sd-shadow);
}
.sd-edge::before {
  content:""; position:absolute; inset:-40% -20%;
  background: radial-gradient(ellipse 40% 55% at 80% 15%, rgba(0,255,136,.12), transparent 60%);
  pointer-events:none;
}
.sd-edge > * { position: relative; }
.sd-edge .sde-label {
  display: inline-flex; align-items: center; gap: 6px;
  font: 700 10px/1 'Sora', system-ui, sans-serif;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--sd-accent); margin-bottom: 12px;
}
.sd-edge .sde-q {
  font: 800 clamp(17px, 2.6vw, 22px)/1.35 'Sora', system-ui, sans-serif;
  color: #eaf3ff; margin-bottom: 16px; letter-spacing: -.02em;
}
.sd-edge .sde-a {
  display: none;
  font: 400 15px/1.75 system-ui, sans-serif;
  color: #b6cbdd; margin-bottom: 14px;
}
.sd-edge.sde-open .sde-a { display: block; animation: sd-fadeup .5s var(--sd-ease); }
.sd-edge.sde-open .sde-btn { display: none; }
.sd-edge .sde-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 24px; border-radius: 980px; border: none; cursor: pointer;
  background: var(--sd-grad); color: #041018;
  font: 800 13px/1 'Sora', system-ui, sans-serif;
  box-shadow: 0 6px 24px -6px rgba(0,255,136,.55);
  transition: transform .25s var(--sd-ease), filter .2s;
}
.sd-edge .sde-btn:hover { transform: translateY(-2px); filter: brightness(1.07); }
.sd-edge .sde-link {
  display: inline-flex; align-items: center; gap: 6px;
  font: 700 13px/1 'Sora', system-ui, sans-serif;
  color: var(--sd-accent); text-decoration: none;
}
.sd-edge .sde-link:hover { text-decoration: underline; }
#sd-progress { height: 2px !important; box-shadow: 0 0 10px rgba(0,255,136,.5) !important; }
#sd-toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 900;
  transform: translate(-50%, 130%);
  display: flex; align-items: center; gap: 9px;
  padding: 12px 20px; border-radius: 14px;
  background: rgba(10,22,34,.90);
  border: 1px solid rgba(0,255,136,.28);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: var(--sd-e4);
  font-size: 13px; font-weight: 600; color: #eaf3ff;
  letter-spacing: -.008em; white-space: nowrap;
  transition: transform .6s var(--sd-snap), opacity .4s;
  opacity: 0;
}
#sd-toast.sd-show { transform: translate(-50%, 0); opacity: 1; }
.sd-toast-fire { font-size: 16px; animation: sd-flame 1.6s ease-in-out infinite; }
.sd-progress-strip {
  display: flex; align-items: center; gap: 12px;
  width: 100%; max-width: 560px;
  margin: 0 auto 22px;
  padding: 0 4px;
}
.sd-progress-strip { gap: 9px; }
#sd-next {
  position: fixed; right: 18px; bottom: 74px; z-index: 480;
  max-width: 320px; padding: 15px 40px 15px 17px;
  border-radius: 16px;
  background: rgba(10,22,34,.90);
  border: 1px solid rgba(0,255,136,.24);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  box-shadow: var(--sd-e4);
  opacity: 0; pointer-events: none; transform: translateY(14px) scale(.97);
  transition: opacity .45s var(--sd-spring), transform .45s var(--sd-spring);
}
#sd-next.sd-show { opacity: 1; pointer-events: auto; transform: none; }
.sdn-label {
  display: block; font-size: 9.5px; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--sd-accent); margin-bottom: 5px;
}
#sd-next a {
  display: block; font-size: 13.5px; font-weight: 650; line-height: 1.45;
  color: #eaf3ff; letter-spacing: -.01em;
  transition: color .2s;
}
#sd-next a:hover { color: var(--sd-accent); }
.sdn-close {
  position: absolute; top: 9px; right: 9px;
  width: 24px; height: 24px; border-radius: 7px;
  background: transparent; border: none; cursor: pointer;
  color: #5a7a92; font-size: 12px; line-height: 1;
  transition: background .2s, color .2s;
}
.sdn-close:hover { background: rgba(255,255,255,.07); color: #eaf3ff; }
#sd-next { right: 12px; left: 12px; max-width: none; bottom: 70px; }
.sd-edge {
  position: relative; overflow: hidden;
  padding: 26px 26px 24px; border-radius: 20px;
  background: linear-gradient(165deg, rgba(0,255,136,.055), rgba(0,212,255,.025) 60%, rgba(255,255,255,.012));
  border: 1px solid rgba(0,255,136,.18);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--sd-e3);
}
.sd-edge::before {
  content: ""; position: absolute; inset: -50% -20%;
  background: radial-gradient(ellipse 40% 55% at 80% 15%, rgba(0,255,136,.10), transparent 62%);
  pointer-events: none;
}
.sd-edge > * { position: relative; }
.sde-label {
  display: block; font-size: 9.5px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--sd-accent); margin-bottom: 12px;
}
.sde-q {
  font-family: 'Sora', system-ui, sans-serif;
  font-size: clamp(16px, 2.6vw, 20px); font-weight: 700;
  line-height: 1.35; letter-spacing: -.022em;
  color: #eaf3ff; margin-bottom: 16px; text-wrap: balance;
}
.sde-a {
  max-height: 0; overflow: hidden; opacity: 0;
  font-size: 14px; line-height: 1.72; color: rgba(232,242,255,.80);
  letter-spacing: -.005em;
  transition: max-height .65s var(--sd-spring), opacity .45s .12s, margin .5s var(--sd-spring);
}
.sd-edge.sde-open .sde-a { max-height: 340px; opacity: 1; margin-bottom: 6px; }
.sde-link { color: var(--sd-accent); font-weight: 700; white-space: nowrap; }
.sde-link:hover { text-decoration: underline; }
.sde-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 40px; padding: 0 20px; margin-top: 4px;
  border-radius: 11px; border: 1px solid rgba(0,255,136,.32);
  background: rgba(0,255,136,.07); color: var(--sd-accent);
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 12.5px; font-weight: 750; letter-spacing: -.005em;
  cursor: pointer;
  transition: background .25s, transform .35s var(--sd-spring), border-color .25s;
}
.sde-btn:hover { background: rgba(0,255,136,.13); transform: translateY(-1px); border-color: rgba(0,255,136,.5); }
.sde-btn:active { transform: scale(.97); }
.sd-edge.sde-open .sde-btn { display: none; }
.sd-faq { margin: 52px 0 8px; }
.sd-faq > h2 {
  font-family: 'Sora', system-ui, sans-serif;
  font-size: clamp(19px, 3vw, 24px); font-weight: 800;
  letter-spacing: -.022em; line-height: 1.2;
  color: #eaf3ff; margin-bottom: 18px;
  padding-top: 40px; border-top: 1px solid rgba(148,190,255,.09);
}
.sd-faq-item {
  border: 1px solid rgba(148,190,255,.09);
  border-radius: 14px; margin-bottom: 10px;
  background: rgba(255,255,255,.022);
  box-shadow: var(--sd-e1);
  overflow: hidden;
  transition: border-color .25s, box-shadow .3s var(--sd-spring);
}
.sd-faq-item[open] { border-color: rgba(0,255,136,.22); box-shadow: var(--sd-e2); }
.sd-faq-item summary {
  list-style: none; cursor: pointer;
  padding: 16px 46px 16px 18px; position: relative;
  font-family: 'Sora', system-ui, sans-serif;
  font-size: 14.5px; font-weight: 650; line-height: 1.5;
  letter-spacing: -.012em; color: #eaf3ff;
  transition: color .2s;
}
.sd-faq-item summary::-webkit-details-marker { display: none; }
.sd-faq-item summary:hover { color: var(--sd-accent); }
.sd-faq-item summary::after {
  content: "+"; position: absolute; right: 17px; top: 50%;
  transform: translateY(-50%);
  font-size: 19px; font-weight: 400; line-height: 1;
  color: var(--sd-accent);
  transition: transform .35s var(--sd-spring);
}
.sd-faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.sd-faq-a { padding: 0 18px 17px; }
.sd-faq-a p {
  font-size: 14.5px !important; line-height: 1.75 !important;
  color: rgba(232,242,255,.76) !important;
  letter-spacing: -.004em; margin: 0 !important;
}
.key-takeaway, .highlight-box, .formula-box, .warning-box,
.red-flag, .checklist-item, .sd-faq-item {
  background: var(--p-card) !important;
  backdrop-filter: none !important;
}
#sd-progress {
  height: 2px !important;
  background: linear-gradient(90deg,#00ff88,#00d4ff) !important;
  animation: none !important;
  box-shadow: 0 0 10px rgba(0,255,136,.5) !important;
}
.hs-item strong { text-shadow: none !important; }
.hs-sep { background: rgba(255,255,255,.09) !important; }
.h-signin-btn{height:36px;padding:0 14px;background:transparent;border:1.5px solid rgba(255,255,255,.22);border-radius:9px;color:#e8f0fe;font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;white-space:nowrap;transition:border-color .2s,color .2s;}
.h-signin-btn:hover{border-color:#00ff88;color:#00ff88;}
.h-user-wrap{display:flex;align-items:center;gap:9px;cursor:pointer;}
.h-avatar-emoji{width:30px;height:30px;border-radius:50%;background:rgba(0,255,136,.15);border:2px solid #00ff88;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;}
.h-initial{width:30px;height:30px;border-radius:50%;background:#00ff88;color:#0b141d;font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.h-level-name{font-size:10px;font-weight:800;color:#00ff88;letter-spacing:.07em;line-height:1;text-transform:uppercase;}
.h-xp-track{width:72px;height:4px;background:rgba(255,255,255,.1);border-radius:4px;overflow:hidden;}
.h-xp-fill{height:100%;background:linear-gradient(90deg,#00c96e,#00ff88);border-radius:4px;transition:width .5s ease;}
.h-rank-badge{font-size:10px;font-weight:800;color:#ffd700;letter-spacing:.02em;line-height:1;}
.h-rank-badge{display:none;}
.bonus-btn, .cta-btn, .inline-cta-btn, .affiliate-btn, .bonus-cta-btn,
.btn-primary, .reg-btn-primary, .levelup-cta-real,
.spin-btn, .pk-lock-btn, .add-btn, .submit-btn {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg,#ffdf6b 0%,#ffc632 38%,#f5a300 72%,#ffd970 100%) !important;
  color: #33200a !important;
  border: none !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(140,80,0,.25),
    0 1px 2px rgba(0,0,0,.35),
    0 8px 26px -10px rgba(255,190,40,.75) !important;
}
.bonus-btn::after, .cta-btn::after, .inline-cta-btn::after, .affiliate-btn::after,
.bonus-cta-btn::after, .btn-primary::after, .reg-btn-primary::after,
.levelup-cta-real::after, .spin-btn::after, .pk-lock-btn::after,
.add-btn::after, .submit-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg,
    transparent 38%,
    rgba(255,255,255,.72) 50%,
    transparent 62%);
  transform: translateX(-130%);
  pointer-events: none;
  animation: sdGoldSweep 4.5s ease-in-out infinite;
}
.bonus-btn:hover, .cta-btn:hover, .inline-cta-btn:hover, .affiliate-btn:hover,
.bonus-cta-btn:hover, .btn-primary:hover, .reg-btn-primary:hover,
.levelup-cta-real:hover, .spin-btn:hover:not(:disabled),
.pk-lock-btn:hover:not(:disabled), .add-btn:hover, .submit-btn:hover {
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    0 2px 4px rgba(0,0,0,.35),
    0 12px 32px -10px rgba(255,190,40,.95) !important;
}
.bonus-btn::after, .cta-btn::after, .inline-cta-btn::after, .affiliate-btn::after,
  .bonus-cta-btn::after, .btn-primary::after, .reg-btn-primary::after,
  .levelup-cta-real::after, .spin-btn::after, .pk-lock-btn::after,
  .add-btn::after, .submit-btn::after { animation: none; }
@keyframes sd-shimmer {
  0%   { background-position: 130% 0; }
  60%, 100% { background-position: -90% 0; }
}
@keyframes sd-flame {
  0%,100% { transform: scale(1) rotate(-4deg); }
  50%     { transform: scale(1.18) rotate(4deg); filter: brightness(1.25); }
}
@keyframes sd-fadeup { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes sdGoldSweep {
  0%, 8%  { transform: translateX(-130%); }
  30%     { transform: translateX(130%); }
  100%    { transform: translateX(130%); }
}

/* ── repris de premium.css ── */
.xp-bar-fill, .pct-bar-fill, .h-xp-fill { position: relative; overflow: hidden; }
.sd-streak-hot { animation: sdFlame .8s ease-in-out infinite; display: inline-block; }
.sd-streak-banner {
  position: fixed; left: 50%; top: 38%; transform: translate(-50%,-50%) scale(.7);
  padding: 12px 28px; border-radius: 16px; z-index: 10001; pointer-events: none;
  background: linear-gradient(135deg, rgba(17,29,40,.95), rgba(31,48,68,.95));
  border: 1.5px solid #ffd700; color: #ffd700;
  font-weight: 900; font-size: 22px; letter-spacing: .06em; text-align: center;
  box-shadow: 0 8px 40px rgba(255,215,0,.25);
  animation: sdBanner 1.6s cubic-bezier(.2,.8,.3,1) forwards;
}
#sd-confetti {
  position: fixed; inset: 0; z-index: 10000; pointer-events: none;
}
#sd-mute {
  position: fixed; right: 14px; bottom: 86px; z-index: 9000;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(17,29,40,.9); border: 1.5px solid #1f3044;
  color: #e8f0f8; font-size: 17px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
  transition: transform .15s, border-color .2s;
  -webkit-tap-highlight-color: transparent;
}
#sd-mute:hover { border-color: #00ff88; }
#sd-mute:active { transform: scale(.9); }
.xp-float { text-shadow: 0 0 12px rgba(0,255,136,.8); font-weight: 900 !important; }
.sd-ambient { position: fixed; inset: -20%; z-index: -1; pointer-events: none; overflow: hidden; }
.sd-ambient i { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .14; will-change: transform; }
.sd-ambient .a { width: 55vw; height: 55vw; min-width:320px; min-height:320px; left: -12%; top: -14%; background: #00ff88; animation: sdDrift1 26s ease-in-out infinite alternate; }
.sd-ambient .b { width: 48vw; height: 48vw; min-width:280px; min-height:280px; right: -10%; bottom: -12%; background: #00c6ff; animation: sdDrift2 32s ease-in-out infinite alternate; }
.sd-ambient .c { width: 30vw; height: 30vw; left: 40%; top: 55%; background: #a29bfe; opacity: .07; animation: sdDrift1 38s ease-in-out infinite alternate-reverse; }
.sd-ambient::after {
  content: ''; position: absolute; inset: 0; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}
.table, .poker-table,
.panel,                    
.roulette-container,       
.contact-form,             
.reg-box {                 
  background: linear-gradient(165deg, rgba(17,29,40,.82), rgba(11,20,29,.9));
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-color: rgba(255,255,255,.07);
  box-shadow: 0 24px 60px -24px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.05);
}
.seo-section, .donate-section, .verdict {
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.modal-box, .levelup-box {
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.06), 0 0 60px -20px rgba(0,255,136,.25);
}
.affiliate-btn, .bonus-btn, .pk-lock-btn, .levelup-cta-real, .cta .p,
.spin-btn, .reg-btn-primary {
  position: relative; overflow: hidden;
  background-image: linear-gradient(135deg, #00ff88 0%, #00e07c 55%, #00c6ff 140%);
  box-shadow: 0 8px 28px -8px rgba(0,255,136,.55), inset 0 1px 0 rgba(255,255,255,.35);
}
.affiliate-btn::after, .bonus-btn::after, .pk-lock-btn::after, .levelup-cta-real::after, .cta .p::after,
.spin-btn::after, .reg-btn-primary::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.5) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform .6s ease;
  pointer-events: none;
}
.affiliate-btn:hover::after, .bonus-btn:hover::after, .pk-lock-btn:hover:not(:disabled)::after,
  .levelup-cta-real:hover::after, .cta .p:hover::after,
  .spin-btn:hover:not(:disabled)::after, .reg-btn-primary:hover::after { transform: translateX(120%); }
#sd-quests {
  position: fixed; right: 14px; bottom: calc(138px + env(safe-area-inset-bottom, 0px)); z-index: 9000;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(17,29,40,.9); border: 1.5px solid #1f3044;
  font-size: 17px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
  transition: transform .15s, border-color .2s;
  -webkit-tap-highlight-color: transparent;
}
#sd-quests:hover { border-color: #00ff88; }
#sd-quests:active { transform: scale(.9); }
#sd-quests.sd-q-ready { border-color: #ffd700; animation: sdChestPulse 1.6s ease-in-out infinite; }
#sd-qpanel {
  position: fixed; right: 12px; bottom: calc(190px + env(safe-area-inset-bottom, 0px)); z-index: 9001;
  width: min(340px, calc(100vw - 24px));
  background: linear-gradient(165deg, rgba(17,29,40,.97), rgba(11,20,29,.98));
  border: 1px solid rgba(255,255,255,.09); border-radius: 18px;
  padding: 16px;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 24px 60px -18px rgba(0,0,0,.7);
  opacity: 0; transform: translateY(12px) scale(.97); pointer-events: none;
  transition: opacity .25s ease, transform .25s cubic-bezier(.2,.8,.3,1);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; color: #e8f0f8;
}
#sd-qpanel.open { opacity: 1; transform: none; pointer-events: auto; }
.sd-q-head { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 15px; }
.sd-q-streak { margin-left: auto; font-size: 12px; font-weight: 800; color: #ff9f43; }
.sd-q-close { background: none; border: none; color: #7a98b8; font-size: 14px; cursor: pointer; padding: 4px; }
.sd-q-sub { font-size: 12px; color: #7a98b8; margin: 4px 0 12px; }
.sd-q-sub b { color: #00ff88; }
.sd-q-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px;
  text-decoration: none; color: inherit; margin-bottom: 6px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.05);
  transition: border-color .2s;
}
.sd-q-row:hover { border-color: rgba(0,255,136,.35); }
.sd-q-row.done { opacity: .75; }
.sd-q-ico { font-size: 18px; flex-shrink: 0; }
.sd-q-mid { flex: 1; min-width: 0; }
.sd-q-label { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 4px; }
.sd-q-track { display: block; height: 5px; background: rgba(255,255,255,.08); border-radius: 5px; overflow: hidden; }
.sd-q-fill { display: block; height: 100%; background: linear-gradient(90deg, #00c96e, #00ff88); border-radius: 5px; transition: width .4s; }
.sd-q-row.done .sd-q-fill { background: linear-gradient(90deg, #00ff88, #00c6ff); }
.sd-q-check { font-size: 13px; font-weight: 900; color: #00ff88; flex-shrink: 0; }
.sd-q-chest {
  margin-top: 10px; padding: 12px; border-radius: 12px; text-align: center;
  font-size: 13px; font-weight: 800; color: #7a98b8;
  background: rgba(255,255,255,.03); border: 1.5px dashed rgba(255,255,255,.15);
  width: 100%; font-family: inherit;
}
.sd-q-chest.ready {
  cursor: pointer; color: #0b141d; border: none;
  background: linear-gradient(135deg, #ffd700, #ff9f43);
  box-shadow: 0 8px 24px -8px rgba(255,215,0,.6);
  animation: sdChestPulse 1.6s ease-in-out infinite;
}
.sd-q-chest.ready:active { transform: scale(.97); }
.sd-q-chest.claimed { border-style: solid; color: #ffd700; }
#sd-flame {
  display: inline-flex; align-items: center; gap: 3px;
  background: rgba(255,159,67,.12); border: 1px solid rgba(255,159,67,.4);
  border-radius: 20px; padding: 4px 10px; margin-right: 10px;
  font-size: 13px; font-weight: 900; color: #ff9f43; cursor: pointer;
  font-family: inherit; flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
#sd-flame b { font-variant-numeric: tabular-nums; }
#sd-quests.sd-q-ready, .sd-q-chest.ready { animation: none !important; }
#sd-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 9999;
  background: linear-gradient(90deg, #00ff88, #00c6ff);
  box-shadow: 0 0 10px rgba(0,255,136,.6);
  transition: width .08s linear;
}
.drill-stats b, .pk-drill-stats b, .pk-guess-val, .xp-points, .lb-xp, .ds-score { font-variant-numeric: tabular-nums; }
.table, .poker-table, .panel, .contact-form, .roulette-container,
  .tool-tabs, .mode-switch, .verdict, .seo-section, .reg-box { border-width: .5px; }
.drill-btn, .pk-lock-btn, .affiliate-btn, .spin-btn, .bonus-btn, .reg-btn-primary,
.new-hand-btn, .mode-btn, .tool-tab, .rank-btn, .suit-btn, .drill-chip, .ds-share-btn {
  transition-timing-function: cubic-bezier(.34,1.56,.64,1);
}
.affiliate-btn:active, .spin-btn:active, .bonus-btn:active, .reg-btn-primary:active { transform: scale(.96); }
.sd-ambient { animation: sdPar linear both; animation-timeline: scroll(); }
#sd-mute {
  bottom: calc(86px + env(safe-area-inset-bottom, 0px));
  right: calc(14px + env(safe-area-inset-right, 0px));
}
.sd-streak-banner { top: calc(38% + env(safe-area-inset-top, 0px)); }
.table, .poker-table, .panel, .contact-form, .roulette-container, .reg-box,
  .tool-tabs, .mode-switch, .modal-box, .levelup-box {
    background: #111d28; backdrop-filter: none; -webkit-backdrop-filter: none;
  }
.sd-deal, .verdict.show, .drill-feedback.show, .pk-drill-fb.show, .result-area.show,
  .card-slot.selected .card-display, .sd-streak-hot, .sd-streak-banner,
  .sd-ambient i, .tool-tab.active, .mode-btn.active { animation: none !important; }
.sd-ambient { animation: none !important; }
.verdict, .modal-box, .levelup-box { position: relative; }
.verdict::before, .levelup-box::before {
    content: ''; position: absolute; inset: -1.5px; z-index: -1;
    border-radius: inherit;
    background: conic-gradient(from var(--sda), rgba(0,255,136,.5), transparent 30%, transparent 65%, rgba(0,198,255,.4), rgba(0,255,136,.5));
    animation: sdSpin 5s linear infinite;
    filter: blur(1px);
  }
.sd-ambient::before {
  content: ''; position: absolute; inset: 0 0 55% 0; opacity: .05;
  background-image: radial-gradient(rgba(232,240,248,.9) 1px, transparent 1.2px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent);
  mask-image: linear-gradient(180deg, #000, transparent);
}
.verdict::before, .levelup-box::before { animation: none !important; }
.bonus-btn, .cta-btn, .inline-cta-btn, .affiliate-btn, .bonus-cta-btn,
.btn-primary, .reg-btn-primary, .levelup-cta-real,
.spin-btn, .pk-lock-btn, .add-btn, .submit-btn {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg,#ffdf6b 0%,#ffc632 38%,#f5a300 72%,#ffd970 100%) !important;
  color: #33200a !important;
  border: none !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(140,80,0,.25),
    0 1px 2px rgba(0,0,0,.35),
    0 8px 26px -10px rgba(255,190,40,.75) !important;
}
.bonus-btn::after, .cta-btn::after, .inline-cta-btn::after, .affiliate-btn::after,
.bonus-cta-btn::after, .btn-primary::after, .reg-btn-primary::after,
.levelup-cta-real::after, .spin-btn::after, .pk-lock-btn::after,
.add-btn::after, .submit-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg,
    transparent 38%,
    rgba(255,255,255,.72) 50%,
    transparent 62%);
  transform: translateX(-130%);
  pointer-events: none;
  animation: sdGoldSweep 4.5s ease-in-out infinite;
}
.bonus-btn:hover, .cta-btn:hover, .inline-cta-btn:hover, .affiliate-btn:hover,
.bonus-cta-btn:hover, .btn-primary:hover, .reg-btn-primary:hover,
.levelup-cta-real:hover, .spin-btn:hover:not(:disabled),
.pk-lock-btn:hover:not(:disabled), .add-btn:hover, .submit-btn:hover {
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    0 2px 4px rgba(0,0,0,.35),
    0 12px 32px -10px rgba(255,190,40,.95) !important;
}
.bonus-btn::after, .cta-btn::after, .inline-cta-btn::after, .affiliate-btn::after,
  .bonus-cta-btn::after, .btn-primary::after, .reg-btn-primary::after,
  .levelup-cta-real::after, .spin-btn::after, .pk-lock-btn::after,
  .add-btn::after, .submit-btn::after { animation: none; }
@keyframes sdDeal {
  from { opacity: 0; transform: translateY(-30px) rotate(-7deg) scale(.8); filter: brightness(1.6); }
  60%  { filter: brightness(1.15); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes sdPop {
  from { transform: scale(.6); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
@keyframes sdRise {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes sdShine { 55% { transform: translateX(100%); } 100% { transform: translateX(100%); } }
@keyframes sdFlame {
  0%,100% { transform: scale(1); text-shadow: 0 0 6px rgba(255,159,67,.6); }
  50%     { transform: scale(1.18); text-shadow: 0 0 14px rgba(255,159,67,.9); }
}
@keyframes sdBanner {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(.7); }
  15%  { opacity: 1; transform: translate(-50%,-50%) scale(1.05); }
  25%  { transform: translate(-50%,-50%) scale(1); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%,-62%) scale(1); }
}
@keyframes sdDrift1 { to { transform: translate(9vw, 7vh) scale(1.15); } }
@keyframes sdDrift2 { to { transform: translate(-8vw, -6vh) scale(1.08); } }
@keyframes sdChestPulse {
  0%,100% { box-shadow: 0 4px 16px rgba(0,0,0,.4), 0 0 0 0 rgba(255,215,0,.5); }
  50%     { box-shadow: 0 4px 16px rgba(0,0,0,.4), 0 0 0 9px rgba(255,215,0,0); }
}
@keyframes sdBreath {
  0%,100% { box-shadow: 0 2px 12px rgba(0,255,136,.35); }
  50%     { box-shadow: 0 2px 22px rgba(0,255,136,.6); }
}
@keyframes sdPar { from { transform: translateY(0); } to { transform: translateY(-7%); } }
@keyframes sdSpin { to { --sda: 360deg; } }
@keyframes sdHue { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes sdDeal3d {
  from { opacity: 0; transform: translateY(-26px) rotateY(85deg) scale(.85); filter: brightness(1.5); }
  55%  { opacity: 1; filter: brightness(1.1); }
  to   { opacity: 1; transform: none; filter: none; }
}
@keyframes sdGoldSweep {
  0%, 8%  { transform: translateX(-130%); }
  30%     { transform: translateX(130%); }
  100%    { transform: translateX(130%); }
}

/*sd-nav-resp*/
/* ── Header : tenir dans la largeur de l'écran, à toutes les tailles ── */

/* Un enfant flex refuse de rétrécir sous la largeur de son contenu tant
   qu'on ne lui donne pas min-width:0. Sans ça, aucune des règles qui
   suivent ne peut empêcher le débordement. */
.nav { min-width: 0; }
.nav > .logo { min-width: 0; flex: 0 1 auto; overflow: hidden; white-space: nowrap; }
.nav-right { min-width: 0; }

/* Le mot « Slot » doit rester blanc, « Drop » vert. Sur les 340 pages
   /hands/ et les articles, la feuille propre à la page contient
   « a { color: var(--acc) } » — une règle destinée aux liens du texte.
   Elle est chargée après sd-shell.css et, à spécificité égale, elle
   gagnait : le logo passait entièrement en vert, alors que l'accueil,
   qui n'a pas cette règle, l'affichait correctement. La marque ne
   s'écrivait donc pas pareil selon la page.
   Un sélecteur de classe l'emporte sur un sélecteur de balise quel que
   soit l'ordre des feuilles : la couleur du logo cesse de dépendre du
   CSS de la page qui l'accueille. */
.nav > .logo { color: var(--text); }

@media (max-width: 960px) {
  /* Le bouton partenaire n'est pas supprimé : il est déjà en bas du menu
     mobile, en pleine largeur, où il est bien plus visible que comprimé
     dans une barre de 355 px. */
  .nav-right > .btn-gold,
  .nav-right .btn-ghost,
  .nav-right .h-signin-btn { display: none !important; }

  /* Connecté, auth.js pose un bloc avatar + pseudo + barre d'XP (~120 px).
     Sur mobile on ne garde que l'avatar — c'est lui le bouton du profil,
     le reste est dans le panneau qu'il ouvre. */
  #header-auth-slot { min-width: 0; margin-right: 0; }
  #header-auth-slot .h-level-name,
  #header-auth-slot .h-xp-track,
  #header-auth-slot .h-rank-badge { display: none !important; }

  .nav { padding: 0 8px 0 14px; }
  .nav-right { gap: 6px; flex: 0 0 auto; }
  .burger { flex: 0 0 auto; }
}

@media (max-width: 360px) {
  /* iPhone SE et consorts : on resserre, on ne masque rien de plus. */
  .nav > .logo { font-size: 18px; margin-right: 4px; gap: 6px; }
  .nav-right { gap: 4px; }
}

/* Menu mobile : défile sur les écrans courts (paysage, petits téléphones)
   et ne fait plus défiler la page derrière lui. */
.sheet { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
/*/sd-nav-resp*/


/*sd-optin*/
/* ── Offre intégrée des pages /hands/ ──────────────────────────────────
   Posée par add-hands-optin.py sous le bloc des chiffres.

   Discrète par construction : filet fin, aucun aplat de couleur, aucune
   icône. Elle doit se lire comme une suite de la page et non comme une
   publicité glissée dedans — le visiteur vient de recevoir une réponse
   utile, et c'est ce crédit-là qui fait agir, pas le contraste.

   Le champ est à 16 px : en dessous, iOS zoome tout seul à la mise au
   point et recadre la page sous les doigts du visiteur. */
.sd-oi{margin:26px 0;padding:18px 20px;border:1px solid var(--line);
  border-left:3px solid var(--green);border-radius:12px;
  background:color-mix(in srgb, var(--green) 4%, transparent);}
.sd-oi h2{font-family:var(--font-display,var(--font,inherit));font-size:16px;
  font-weight:800;line-height:1.3;margin:0 0 6px;letter-spacing:-.01em;
  color:var(--text);background:none;}
.sd-oi p{font-size:13.5px;line-height:1.6;color:var(--text-dim);margin:0;}
.sd-oi-f{display:flex;gap:8px;margin:14px 0 10px;flex-wrap:wrap;}
.sd-oi-f input{flex:1 1 190px;min-width:0;height:44px;padding:0 13px;
  font-family:inherit;font-size:16px;color:var(--text);background:var(--bg);
  border:1px solid var(--line);border-radius:9px;}
.sd-oi-f input:focus{outline:2px solid var(--green);outline-offset:1px;}
.sd-oi-f button{flex:0 0 auto;height:44px;padding:0 20px;
  font-family:var(--font-display,var(--font,inherit));font-size:14px;
  font-weight:800;color:var(--bg);background:var(--green);border:0;
  border-radius:9px;cursor:pointer;transition:opacity .15s;}
.sd-oi-f button:hover{opacity:.88;}
.sd-oi-f button:disabled{opacity:.5;cursor:default;}
.sd-oi-n{font-size:12px;color:var(--text-dim);margin:0;}
.sd-oi-n.ok{color:var(--green);font-weight:600;}
.sd-oi-n.err{color:var(--coral);font-weight:600;}
.sd-oi-dl{display:inline-flex;align-items:center;height:44px;padding:0 20px;
  margin:2px 0 10px;font-family:var(--font-display,var(--font,inherit));
  font-size:14px;font-weight:800;color:var(--bg);background:var(--green);
  border-radius:9px;text-decoration:none;}
@media(max-width:420px){.sd-oi{padding:15px 16px;}.sd-oi-f button{flex:1 1 100%;}}
/*/sd-optin*/