/* =====================================================================
   ASE Game — thème « Asentum » (chargé en dernier par toutes les pages)
   Noir profond, lignes de repère en pointillés, titres Plus Jakarta Sans
   en deux tons, textes DM Mono, boutons carrés en majuscules espacées.
   ===================================================================== */
:root, :root[data-theme="dark"], :root[data-theme="light"] {
  --night: #000000; --deep: #0A0A0A; --deeper: #050505; --line: #1F1F1F; --line-strong: #2E2E2E;
  --ink: #FFFFFF; --muted: #8C8C8C; --dim: #A6A6A6;
  --indigo: #4949DF; --indigo-hi: #8B8BFF; --violet: #C77DFF;
  --gold: #F4C542; --gold-ink: #2A1E00; --ok: #26CC6B; --warn: #F29751;
  --ball-face: #F2F2F2; --ball-ink: #0A0A0A;
  --shadow: none; --r-panel: 2px; --r-ctl: 0px;
  --display: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --body: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  color-scheme: dark;
}
/* Uniquement en mode sombre : même si le système ou un ancien réglage demande le clair */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --night: #000000; --deep: #0A0A0A; --deeper: #050505; --line: #1F1F1F; --ink: #FFFFFF; --muted: #8C8C8C;
    --indigo-hi: #8B8BFF; --violet: #C77DFF; --ball-face: #F2F2F2; --ball-ink: #0A0A0A; color-scheme: dark; }
}

/* Repères en pointillés, comme sur asentum.com */
body {
  font-size: 14px; letter-spacing: .01em;
  background-color: var(--night);
  background-image:
    repeating-linear-gradient(to bottom, var(--line-strong) 0 8px, transparent 8px 16px),
    repeating-linear-gradient(to bottom, var(--line-strong) 0 8px, transparent 8px 16px);
  background-size: 1px 100%, 1px 100%;
  background-position: calc(50% - min(568px, 50vw - 10px)) 0, calc(50% + min(568px, 50vw - 10px)) 0;
  background-repeat: no-repeat; background-attachment: fixed;
}
.top { border-bottom: 1px dashed var(--line-strong); padding-block: 18px !important; }
main { padding-top: 8px; }

/* Typographie */
h1, h2, h3, .brand-name, .jackpot, .amount, .stat dd, .hero-stats dd, .live-stats dd, .podium strong, .cart-total strong, .buy-total strong, #qty {
  font-family: var(--display) !important;
}
h2 { font-size: 1.5rem; letter-spacing: -0.02em; }
.dim, h1 .dim, h2 .dim { color: var(--dim); }
.brand-name { font-family: var(--body) !important; font-weight: 500 !important; font-size: 1rem !important; letter-spacing: .32em !important; text-transform: uppercase; }
.muted, .hero-sub, .hero-label, .p-label, .cart-note, .intro p { color: var(--muted) !important; }
.hero-label, .p-label, .hero-stats dt, .live-stats dt, .stat dt, .tabs button, .state, .admin-box label, .odds thead th, .res-table th {
  font-family: var(--body) !important; text-transform: uppercase; letter-spacing: .14em; font-size: .72rem !important; font-weight: 500 !important;
}

/* Boutons : carrés, majuscules espacées */
.btn, .chip, .step, .icon-btn, .all-games {
  font-family: var(--body); border-radius: 0 !important; text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; font-weight: 500;
}
.btn { padding: .95em 1.3em; background: transparent; border: 1px solid var(--line-strong); color: var(--ink); position: relative; }
.btn:hover:not(:disabled) { border-color: var(--ink); }
.btn-primary { background: var(--ink); color: var(--night); border-color: var(--ink); }
.btn-primary:hover:not(:disabled) { background: var(--ok); border-color: var(--ok); color: #0A1D12; }
.btn-ghost {
  border-color: transparent;
  background:
    linear-gradient(var(--line-strong), var(--line-strong)) top left / 10px 1px, linear-gradient(var(--line-strong), var(--line-strong)) top left / 1px 10px,
    linear-gradient(var(--line-strong), var(--line-strong)) top right / 10px 1px, linear-gradient(var(--line-strong), var(--line-strong)) top right / 1px 10px,
    linear-gradient(var(--line-strong), var(--line-strong)) bottom left / 10px 1px, linear-gradient(var(--line-strong), var(--line-strong)) bottom left / 1px 10px,
    linear-gradient(var(--line-strong), var(--line-strong)) bottom right / 10px 1px, linear-gradient(var(--line-strong), var(--line-strong)) bottom right / 1px 10px;
  background-repeat: no-repeat;
}
.btn-wallet { border-color: var(--line-strong); }
.btn-danger { color: var(--warn); border-color: var(--warn); }
.icon-btn { border-radius: 0 !important; }
.chip:hover, .step:hover:not(:disabled) { border-color: var(--ink) !important; }
.link-btn, a { color: var(--violet); }
.link-btn { font-family: var(--body); text-transform: uppercase; letter-spacing: .1em; font-size: .75rem; }

/* Étiquettes : fond teinté, texte coloré en mono */
.tag, .net, .state {
  font-family: var(--body); border-radius: 0 !important; border: 0 !important; text-transform: uppercase; letter-spacing: .12em; font-size: .68rem !important; padding: .35em .7em !important;
  background: #141414; color: var(--muted);
}
.net { background: #1A0F26; color: var(--violet) !important; }
.tag.ok { background: #0A1D12; color: var(--ok); }
.tag.win { background: #231A05; color: var(--gold); }
.tag.warn { background: #231409; color: var(--warn); }
.live .state, .game.live .state { background: #0A1D12; color: var(--ok) !important; display: inline-flex; width: max-content; }
.dot { box-shadow: none !important; background: var(--ok) !important; border-radius: 0 !important; width: 6px !important; height: 6px !important; }

/* Panneaux : noir, bordure fine, angles nets */
.hero, .picker, .cart, .panel, .buy, .game, .admin-box, .stat, .podium li, .claim-banner, .cart-list li, .dlg, .toast {
  border-radius: var(--r-panel) !important; box-shadow: none !important;
}
.picker, .cart, .panel, .buy, .game { background: var(--deep) !important; border: 1px solid var(--line) !important; }
.hero {
  background-color: var(--deep) !important; border: 1px solid var(--line) !important;
  /* trame de points « pixel », comme les visuels d'Asentum */
  background-image: radial-gradient(circle, rgba(255,255,255,.09) 1px, transparent 1.4px) !important;
  background-size: 7px 7px !important;
}
.hero::after { content: none; }
.hero-main, .podium, .hero-stats { position: relative; }
.jackpot { letter-spacing: -0.05em; }
.jackpot .unit, .unit { color: var(--violet) !important; font-family: var(--body) !important; letter-spacing: .1em !important; font-weight: 500 !important; }
.hero-stats div, .live-stats div { border-top: 1px dashed var(--line-strong) !important; }
.podium li { background: #0D0D0D !important; border: 1px solid var(--line) !important; }
.stat { background: #0D0D0D !important; border: 1px solid var(--line); }
.admin-box { background: #0D0D0D !important; border: 1px solid var(--line); }
.claim-banner { background: #0A1D12 !important; border: 1px solid #154D2C !important; }
.claim-banner strong { color: var(--ok) !important; }
.cart-list li { background: #0D0D0D !important; }
input, select { border-radius: 0 !important; font-family: var(--body); background: #050505 !important; }

/* Onglets */
.tabs { border-bottom: 1px dashed var(--line-strong) !important; }
.tabs button[aria-selected="true"] { border-bottom-color: var(--ink) !important; color: var(--ink) !important; }

/* Bandeau démo : comme le bandeau violet d'asentum.com */
.demobar { background: #1A0F26 !important; color: var(--violet) !important; font-family: var(--body); font-weight: 500 !important; letter-spacing: .06em; font-size: .78rem !important; }
.demobar .btn { background: var(--violet) !important; color: #120A1C !important; border-color: var(--violet) !important; }

/* Notifications, fenêtres */
.toast { background: #0D0D0D !important; border: 1px solid var(--line-strong) !important; border-left: 3px solid var(--violet) !important; font-size: .85rem; }
.toast.ok { border-left-color: var(--ok) !important; }
.toast.err { border-left-color: var(--warn) !important; }
.dlg { background: #0A0A0A !important; border: 1px solid var(--line-strong) !important; }
.choice { border-radius: 0 !important; }

/* Page d'accueil */
.intro h1 { font-weight: 700 !important; letter-spacing: -0.045em !important; }
.game { transition: border-color .15s !important; }
.game:hover { transform: none !important; border-color: var(--line-strong) !important; }
.game-art { background: #050505 !important; background-image: radial-gradient(circle, rgba(255,255,255,.12) 1px, transparent 1.4px) !important; background-size: 7px 7px !important; border-bottom: 1px solid var(--line); }
.game.soon .game-art, .game.raffle .game-art { border-bottom: 0; border-right: 1px solid var(--line); }
.foot { font-family: var(--body); font-size: .75rem; letter-spacing: .04em; border-top: 1px dashed var(--line-strong); padding-top: 18px !important; }

/* Tapis de dés : noir avec trame de points, comme les visuels d'Asentum */
.dice-table { background-color: #050505 !important; background-image: radial-gradient(circle, rgba(255,255,255,.11) 1px, transparent 1.4px) !important; background-size: 9px 9px !important;
  box-shadow: none !important; border: 1px solid var(--line-strong); border-radius: 0 !important; }
.table-hint { font-family: var(--body) !important; text-transform: uppercase; letter-spacing: .3em; font-size: .75rem !important; color: var(--muted) !important; font-weight: 500 !important; }
.roll-slots .slot { border-radius: 50%; }
.printer-head { border-radius: 0 !important; background: #111 !important; border: 1px solid var(--line-strong); font-family: var(--body) !important; letter-spacing: .3em !important; font-weight: 500 !important; }
.printer-slot { border-radius: 0 !important; }
.medal { border-radius: 0 !important; }
@media (max-width: 520px) {
  .brand-name { letter-spacing: .18em !important; font-size: .85rem !important; }
  .top { gap: 8px !important; }
  .top-actions { min-width: 0; gap: 6px !important; }
  .btn-wallet { padding: .8em .7em !important; letter-spacing: .06em !important; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }
  .icon-btn { width: 36px !important; height: 36px !important; flex: none; }
}