/* ============================================================
   GACHA-YA! — design system "toy physics on fintech bones"
   Palette + règles issues du brief design (panel 14/08).
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Les règles d'auteur (`display:grid/flex`) battent le `[hidden]{display:none}`
   du navigateur : sans ce reset, overlay et ticket s'affichent au chargement
   et tout `el.hidden = true` devient sans effet. */
[hidden] { display: none !important; }

@property --angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

:root {
  --bg: #0C0A16;
  --surface: #161327;
  --surface2: #201C38;
  --text: #F5F2FF;
  --muted: #8F89AE;
  --accent: #FF4D9D;
  --accent2: #3DF2C6;
  --common: #9AA3B8;
  --rare: #3FA9FF;
  --epic: #B44DFF;
  --legendary: #FFC24D;
  /* variante texte de l'epic : #B44DFF ne fait que 4,2:1 en petit texte */
  --epic-ink: #C77BFF;
  --line: rgba(255, 255, 255, .08);
  --font-display: 'Fredoka', 'Outfit', system-ui, sans-serif;
  --font-body: 'Outfit', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', Consolas, monospace;
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --r-card: 20px;
}

html { scrollbar-color: var(--surface2) var(--bg); }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  min-height: 100vh;
  overflow-x: hidden;
}

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.hint { color: var(--muted); font-size: .84rem; line-height: 1.45; }
.center { text-align: center; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: .02em;
}
h2 { font-size: 1.35rem; margin-bottom: .9rem; }
h3 { font-size: 1rem; margin-bottom: .6rem; }

/* ---------- boutons : tactiles, partout, sans exception ---------- */
.btn {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--text);
  background: var(--surface2);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: .6rem 1.2rem;
  cursor: pointer;
  transition: transform 60ms ease, box-shadow 60ms ease, background 150ms ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, .45); }
.btn:active { transform: translateY(2px); box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
.btn--ghost { background: transparent; }
/* encre sombre sur le rose : le blanc n'atteint que 2,8:1 (échec AA) */
.btn--cta {
  width: 100%;
  min-height: 72px;
  font-size: 1.15rem;
  color: #2A0416;
  background: var(--accent);
  border: none;
  border-radius: 18px;
  box-shadow: 0 6px 0 #b82f6f, 0 12px 24px rgba(255, 77, 157, .35);
}
.btn--cta:hover { transform: translateY(-2px); box-shadow: 0 8px 0 #b82f6f, 0 16px 30px rgba(255, 77, 157, .45); }
.btn--cta:active { transform: translateY(3px); box-shadow: 0 3px 0 #b82f6f, 0 6px 12px rgba(255, 77, 157, .3); }
.btn--claim {
  width: 100%;
  min-height: 56px;
  font-size: 1rem;
  background: var(--accent2);
  color: #06251d;
  border: none;
  border-radius: 16px;
  box-shadow: 0 5px 0 #1e9c7d, 0 10px 20px rgba(61, 242, 198, .25);
  margin-top: .75rem;
}
.btn--claim:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #1e9c7d, 0 14px 26px rgba(61, 242, 198, .3); }
.btn--claim:active { transform: translateY(3px); box-shadow: 0 2px 0 #1e9c7d; }

/* focus clavier visible sur tout ce qui est actionnable */
:focus-visible {
  outline: 3px solid var(--accent2);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- stickers ---------- */
.sticker {
  display: inline-block;
  background: var(--legendary);
  color: #221a04;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  padding: .28rem .6rem;
  border-radius: 10px;
  transform: rotate(-4deg);
  box-shadow: 0 0 0 3px #fff, 0 4px 10px rgba(0, 0, 0, .35);
}
.sticker--price { transform: rotate(3deg); }
.sticker--dice { background: var(--surface2); color: var(--text); box-shadow: 0 0 0 3px var(--line); margin-right: .5rem; }

/* ---------- topbar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-inline: 1.25rem;
  background: var(--surface);
  border-bottom: 1.5px solid var(--line);
}
.brand { display: flex; align-items: center; gap: .6rem; }
.logo { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: .02em; }
.cap-glyph {
  width: 22px; height: 22px; border-radius: 50%;
  background: linear-gradient(180deg, var(--accent) 46%, #0C0A16 46% 54%, #fff 54%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .4);
}
.demo-badge {
  border: none; cursor: pointer;
  /* zone tactile élargie sans grossir le sticker */
  margin: -10px; padding: calc(.25rem + 10px) calc(.55rem + 10px);
  background-clip: content-box;
  background: var(--legendary);
  color: #221a04;
  font-family: var(--font-display); font-weight: 700; font-size: .7rem;
  padding: .25rem .55rem; border-radius: 8px;
  transform: rotate(-4deg);
  box-shadow: 0 0 0 3px #fff3, 0 3px 8px rgba(0, 0, 0, .35);
}
.tabs {
  display: flex; gap: 4px;
  margin-inline: auto;
  background: var(--surface2);
  border-radius: 999px;
  padding: 4px;
}
.tabs button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;
  font-family: var(--font-display); font-weight: 600; font-size: .85rem;
  letter-spacing: .03em;
  color: var(--muted);
  background: transparent; border: none;
  border-radius: 999px;
  padding: .45rem 1.1rem;
  cursor: pointer;
  transition: color 200ms ease, background 200ms ease;
}
.tabs button.active { color: #2A0416; background: var(--accent); box-shadow: 0 2px 10px rgba(255, 77, 157, .4); }

/* ---------- marquee ---------- */
.marquee {
  height: 36px;
  background: var(--surface2);
  border-bottom: 1.5px solid var(--line);
  overflow: hidden;
  display: flex;
  align-items: center;
}
.marquee__track {
  display: inline-flex;
  gap: 2.5rem;
  align-items: center;
  white-space: nowrap;
  padding-inline: 1.25rem;
  font-family: var(--font-mono);
  font-size: .78rem;
  animation: marquee 45s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee .jp { font-weight: 700; cursor: pointer; }
.marquee .jp .jp-amt {
  background: linear-gradient(90deg, #ff4d4d, #ffc24d, #3df2c6, #3fa9ff, #b44dff, #ff4d9d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: hue 2s linear infinite;
}
.marquee .pull { color: var(--muted); }
.marquee .g-common { color: var(--common); }
.marquee .g-rare { color: var(--rare); }
.marquee .g-epic { color: var(--epic-ink); }
.marquee .g-legendary { color: var(--legendary); }
.digit { display: inline-block; }
.digit.roll { animation: digitRoll 300ms var(--ease); }
@keyframes digitRoll {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* ---------- layout ---------- */
main { max-width: 1240px; margin: 0 auto; padding: 1.5rem 1.5rem 4rem; }
.view { animation: viewIn 300ms var(--ease); }
@keyframes viewIn { from { opacity: 0; transform: translateY(12px); } }
.card {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r-card);
  padding: 1.25rem;
  margin-block: 1rem;
}

/* ---------- hero ---------- */
.hero {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: 2rem;
  align-items: center;
  min-height: 78vh;
}
.machine-stage { display: grid; place-items: center; position: relative; }

/* ---------- la machine ---------- */
.machine {
  position: relative;
  width: 380px;
  height: 520px;
  border-radius: 48px;
  background: linear-gradient(180deg, var(--surface2), #1a1630 70%, #151228);
  border: 1.5px solid var(--line);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.machine::before, .machine::after {
  content: '';
  position: absolute;
  top: 40px; bottom: 40px;
  width: 10px;
  border-radius: 6px;
  background: linear-gradient(180deg, #ff77b6, var(--accent));
  box-shadow: 0 0 14px rgba(255, 77, 157, .35);
}
.machine::before { left: -5px; }
.machine::after { right: -5px; }
.machine.shake { animation: shake 500ms ease-in-out; }
@keyframes shake {
  0%, 100% { transform: translateX(0) rotate(0); }
  20% { transform: translateX(-3px) rotate(-.6deg); }
  40% { transform: translateX(3px) rotate(.6deg); }
  60% { transform: translateX(-3px) rotate(-.4deg); }
  80% { transform: translateX(3px) rotate(.4deg); }
}
.machine__dome {
  position: absolute;
  inset: 22px 22px auto;
  height: 55%;
  border-radius: 34px;
  background: radial-gradient(120% 100% at 30% 15%, rgba(255, 255, 255, .12), rgba(255, 255, 255, .02) 60%);
  border: 1.5px solid rgba(255, 255, 255, .12);
  box-shadow: inset 0 -24px 44px rgba(0, 0, 0, .4), inset 0 10px 22px rgba(255, 255, 255, .05);
  overflow: hidden;
}
.cap {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--c) 47%, rgba(12,10,22,.9) 47% 53%, #f6f4ff 53%);
  box-shadow: inset -5px -8px 12px rgba(0, 0, 0, .3), 0 5px 12px rgba(0, 0, 0, .35);
  animation: capFloat var(--dur, 4s) ease-in-out var(--delay, 0s) infinite alternate;
}
@keyframes capFloat {
  from { transform: translateY(-6px) rotate(var(--rot, 8deg)); }
  to { transform: translateY(6px) rotate(calc(var(--rot, 8deg) * -1)); }
}
.machine.jitter .cap { animation: capJitter 120ms linear infinite alternate; }
@keyframes capJitter {
  from { transform: translate(-3px, -2px); }
  to { transform: translate(3px, 2px); }
}
.machine__sticker { position: absolute; top: 44px; right: 34px; z-index: 2; }
.machine__eyes {
  position: absolute;
  top: 34%; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 26px;
  opacity: 0;
  transition: opacity 600ms ease;
  z-index: 3;
}
.machine__eyes.on { opacity: 1; }
.eye {
  width: 32px; height: 42px;
  background: #fff;
  border-radius: 50%;
  display: grid; place-items: center;
  animation: blink 4s infinite;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .3);
}
.pupil { width: 12px; height: 12px; background: var(--bg); border-radius: 50%; transition: transform 100ms; }
@keyframes blink { 0%, 93%, 100% { transform: scaleY(1); } 95%, 98% { transform: scaleY(.12); } }

.machine__panel {
  position: absolute;
  left: 30px; right: 30px;
  bottom: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.coin-slot {
  width: 16px; height: 46px;
  border-radius: 8px;
  background: #07060d;
  box-shadow: inset 0 0 10px #000;
  transition: box-shadow 200ms ease;
}
.coin-slot.glow { box-shadow: inset 0 0 10px #000, 0 0 20px rgba(255, 255, 255, .8); }
.crank {
  width: 90px; height: 90px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff8ec1, var(--accent) 70%);
  box-shadow: inset 0 -12px 20px rgba(0, 0, 0, .35), 0 10px 24px rgba(255, 77, 157, .35);
  display: grid; place-items: center;
  cursor: pointer;
  transition: transform 900ms ease-in-out;
}
.crank.spin { transform: rotate(360deg); }
.crank__bar {
  position: relative;
  width: 62px; height: 14px;
  border-radius: 8px;
  background: rgba(12, 10, 22, .85);
}
.crank__bar::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 14px; height: 62px;
  transform: translate(-50%, -50%);
  border-radius: 8px;
  background: rgba(12, 10, 22, .85);
}
.chute {
  width: 86px; height: 62px;
  border-radius: 14px;
  background: #07060d;
  box-shadow: inset 0 8px 16px #000;
  position: relative;
  overflow: hidden;
  perspective: 300px;
}
.chute__flap {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #2a2545, #1a1730);
  border-radius: 14px;
  transform-origin: top;
  transition: transform 200ms ease-in;
}
.chute__flap.open { transform: rotateX(70deg); }
.machine__tray {
  position: absolute;
  left: 50%; bottom: 18px;
  transform: translateX(-50%);
  width: 210px; height: 48px;
  border-radius: 0 0 26px 26px;
  background: #0a0913;
  box-shadow: inset 0 10px 18px rgba(0, 0, 0, .85), 0 1.5px 0 rgba(255, 255, 255, .06);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.tray-cap {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--c, #f6f4ff) 47%, rgba(12,10,22,.9) 47% 53%, #f6f4ff 53%);
  box-shadow: inset -4px -6px 10px rgba(0, 0, 0, .3), 0 4px 10px rgba(0, 0, 0, .4);
  transition: box-shadow 400ms ease, background 400ms ease;
}
.tray-cap.wobble { animation: wobble 1.2s ease-in-out infinite; transform-origin: bottom center; }
@keyframes wobble { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
.tray-cap.drop { animation: capDrop 550ms var(--spring); }
@keyframes capDrop {
  0% { transform: translateY(-90px); }
  70% { transform: translateY(0) scaleY(.8); }
  100% { transform: translateY(0) scaleY(1); }
}
.coin {
  position: absolute;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe9a8, var(--legendary) 70%);
  color: #3a2c00;
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-weight: 700; font-size: .7rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .45);
  z-index: 5;
  transition: transform 550ms var(--spring), opacity 200ms ease 450ms;
}

/* ---------- buy panel ---------- */
.buy-panel { padding: 1.5rem; border-radius: 24px; position: relative; overflow: hidden; }
.buy-panel__title { font-size: 2rem; line-height: 1.1; margin-bottom: 1.1rem; }
.pay-seg, .qty-pills {
  display: flex; gap: 4px;
  background: var(--surface2);
  border-radius: 999px;
  padding: 4px;
  margin-block: .6rem;
}
.pay-seg button, .qty-pills button {
  flex: 1;
  min-height: 44px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  font-family: var(--font-display); font-weight: 600; font-size: .85rem;
  color: var(--muted);
  background: transparent; border: none;
  border-radius: 999px;
  padding: .45rem .5rem;
  cursor: pointer;
  transition: color 150ms ease, background 150ms ease;
}
.pay-seg button em, .qty-pills button em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: .7rem;
  color: #A29CC0;          /* couleur explicite : l'opacity cassait le contraste */
}
.pay-seg button.active, .qty-pills button.active { color: var(--text); background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--accent); }
.qty-pills { max-width: 320px; }
.qty-pills button { flex-direction: row; gap: 6px; }
.pay-seg .lbl { display: inline-flex; align-items: center; gap: 4px; }
.flame {
  width: 10px; height: 14px;
  background: radial-gradient(circle at 50% 80%, #ffb054, var(--accent) 80%);
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  animation: flick 500ms ease-in-out infinite alternate;
}
@keyframes flick { from { transform: scale(1) rotate(-4deg); } to { transform: scale(1.15) rotate(4deg); } }
#btn-open { margin-block: .9rem .5rem; }

.pity { margin-top: 1rem; }
.pity__dots { display: flex; gap: 6px; margin-bottom: .35rem; }
.pity__dots .dot {
  width: 16px; height: 22px;
  border-radius: 8px;
  background: var(--surface2);
  border: 1.5px solid var(--line);
  transition: background 300ms ease, box-shadow 300ms ease;
}
.pity__dots .dot.on { background: var(--accent); box-shadow: 0 0 10px rgba(255, 77, 157, .5); }

.mint-meter { margin-top: 1rem; }
.mint-meter__bar {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: var(--surface2);
  overflow: hidden;
}
.mint-meter__bar span {
  display: block; height: 100%;
  background: var(--accent2);
  border-radius: 999px;
  transition: width 600ms var(--ease);
}
.mint-meter__bar .shine {
  position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .25) 50%, transparent 70%);
  animation: sweep 3s linear infinite;
}
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.mint-meter p { margin-top: .3rem; }

/* order ticket */
.ticket {
  position: absolute; inset: 0;
  background: var(--surface);
  border-radius: 24px;
  padding: 1.5rem;
  display: flex; flex-direction: column; justify-content: center; gap: 1rem;
  animation: ticketIn 240ms var(--ease);
  z-index: 5;
}
@keyframes ticketIn { from { transform: translateY(30px); opacity: 0; } }
.ticket pre {
  font-size: .82rem;
  line-height: 1.9;
  color: var(--text);
  background: var(--surface2);
  border: 1.5px dashed var(--line);
  border-radius: 12px;
  padding: 1rem;
  white-space: pre-wrap;
}
.ticket__row { display: flex; gap: .6rem; }
.ticket__row .btn--cta { min-height: 56px; font-size: 1rem; flex: 2; }
.ticket__row .btn--ghost { flex: 1; border-radius: 18px; }

/* ---------- odds ---------- */
.odds-table { width: 100%; border-collapse: collapse; }
.odds-table th {
  text-align: left;
  font-family: var(--font-display);
  font-size: .8rem;
  color: var(--muted);
  padding: .4rem .5rem;
  border-bottom: 1.5px solid var(--line);
}
.odds-table th:last-child, .odds-table td:last-child { text-align: right; }
.odds-table td { padding: .55rem .5rem; border-bottom: 1px solid var(--line); }
.odds-table tr:last-child td { border-bottom: none; }
.odds-table .tier-name { font-family: var(--font-display); font-weight: 600; }
.odds-table .pct { font-family: var(--font-mono); font-weight: 700; }
.chipdot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .5rem; vertical-align: baseline; }
.odds__verify { margin-top: .6rem; }
.fair { margin-top: 1rem; color: var(--muted); font-size: .9rem; display: flex; align-items: center; gap: .4rem; }
.rainbow-text {
  background: linear-gradient(90deg, #ff4d4d, #ffc24d, #3df2c6, #3fa9ff, #b44dff, #ff4d9d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: hue 2s linear infinite;
  font-weight: 700;
}
@keyframes hue { to { filter: hue-rotate(360deg); } }

/* ---------- catalog + raretés ---------- */
.catalog { margin-top: 2rem; }
.filter-pills { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }
.filter-pills button {
  display: inline-flex; align-items: center;
  min-height: 44px;                      /* cible tactile */
  font-family: var(--font-display); font-weight: 600; font-size: .74rem;
  letter-spacing: .04em;
  color: var(--muted);
  background: var(--surface2);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: .35rem .95rem;
  cursor: pointer;
  transition: color 150ms, background 150ms, transform 60ms;
}
.filter-pills button:hover { transform: translateY(-2px); }
.filter-pills button.active { color: #2A0416; background: var(--accent); border-color: transparent; }

.catalog-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}
.tier-head {
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  margin: 1.8rem 0 .9rem;
  padding-bottom: .5rem;
  border-bottom: 1.5px solid var(--line);
  font-size: .95rem;
  letter-spacing: .06em;
}
.tier-head:first-child { margin-top: .25rem; }
.pcard {
  position: relative;
  border-radius: 16px;
  background: var(--surface);
  padding: 1rem;
  transition: transform 250ms var(--spring);
}
.pcard:hover { transform: translateY(-4px); }
.pcard h4 { display: flex; align-items: center; font-family: var(--font-display); font-weight: 600; font-size: 1.02rem; margin: .6rem 0 .3rem; }
.pcard .blurb { color: var(--muted); font-size: .84rem; line-height: 1.45; }
.pcard .durs { margin-top: .6rem; display: flex; gap: .3rem; flex-wrap: wrap; }
.durchip {
  font-family: var(--font-mono); font-size: .68rem;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  padding: .1rem .4rem;
  color: var(--muted);
}
.tier-tag {
  position: absolute;
  top: -10px; right: 10px;
  font-family: var(--font-display); font-weight: 700; font-size: .64rem;
  text-transform: uppercase;
  padding: .2rem .5rem;
  border-radius: 8px;
  transform: rotate(3deg);
  color: #10101c;
  box-shadow: 0 0 0 2.5px rgba(255, 255, 255, .85);
}
/* la pastille de type vit dans le titre : en absolu à droite elle
   entrait en collision avec le sticker de rareté */
.type-badge { display: inline-block; width: 12px; height: 12px; margin-right: .45rem; vertical-align: baseline; flex: none; }
.type-badge.b-duration { border-radius: 5px; background: var(--accent2); }
.type-badge.b-instant { border-radius: 50%; background: var(--accent); }
.type-badge.b-meta { background: var(--rare); transform: rotate(45deg); border-radius: 3px; }
.type-badge.b-cosmetic { background: var(--muted); clip-path: polygon(0 0, 70% 0, 100% 50%, 70% 100%, 0 100%); }

/* langage de lumière des raretés — double encodé partout */
.t-common { border: 1.5px solid rgba(154, 163, 184, .4); }
/* Le reflet passe par le background de la carte : un ::after débordant
   imposerait `overflow:hidden`, qui tronquait le sticker de rareté. */
.t-rare {
  position: relative;
  border: 1.5px solid var(--rare);
  box-shadow: 0 0 18px rgba(63, 169, 255, .35);
}
.t-rare:hover {
  background-image: linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, .13) 50%, transparent 58%);
  background-size: 300% 100%;
  background-repeat: no-repeat;
  animation: shineSweep 900ms ease 1;
}
@keyframes shineSweep { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.t-epic {
  border: 2px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box,
              linear-gradient(135deg, var(--epic), var(--accent)) border-box;
  box-shadow: 0 0 26px rgba(180, 77, 255, .45);
}
.t-legendary {
  border: 2px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box,
              conic-gradient(from var(--angle), var(--legendary), #fff7e0, var(--legendary)) border-box;
  animation: angleSpin 4s linear infinite;
  box-shadow: 0 0 10px rgba(255, 194, 77, .45), 0 0 34px rgba(255, 194, 77, .22);
}
@keyframes angleSpin { to { --angle: 360deg; } }
.t-jackpot {
  border: 2px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box,
              conic-gradient(#ff4d4d, #ffc24d, #3df2c6, #3fa9ff, #b44dff, #ff4d9d, #ff4d4d) border-box;
  animation: hue 2s linear infinite;
  box-shadow: 0 0 16px rgba(255, 255, 255, .45);
}
.tier-tag--jackpot { background: var(--surface); box-shadow: 0 0 0 2.5px rgba(255, 255, 255, .85), 0 0 14px rgba(255, 255, 255, .35); }
.tag-common { background: var(--common); }
.tag-rare { background: var(--rare); }
.tag-epic { background: var(--epic); }
.tag-legendary { background: var(--legendary); }
.g-common { color: var(--common); }
.g-rare { color: var(--rare); }
.g-epic { color: var(--epic-ink); }
.g-legendary { color: var(--legendary); }

/* ---------- reveal overlay ---------- */
.reveal-overlay {
  position: fixed; inset: 0;
  z-index: 900;
  background: rgba(5, 4, 10, .78);
  display: grid;
  /* `safe center` + scroll : sur un écran court la carte déborderait
     et son bouton CLOSE deviendrait inatteignable */
  align-items: safe center;
  justify-items: center;
  overflow-y: auto;
  padding-block: 2rem;
  animation: fadeIn 300ms ease;
}
.reveal-overlay.strobe { animation: strobe 200ms steps(1) 4; }
@keyframes strobe { 0% { background: rgba(5, 4, 10, .78); } 50% { background: rgba(32, 28, 56, .85); } }
@keyframes fadeIn { from { opacity: 0; } }
.reveal-stage { position: relative; display: grid; place-items: center; min-width: min(480px, 92vw); min-height: 380px; }
.godray {
  position: absolute;
  width: 720px; height: 720px;
  border-radius: 50%;
  background: repeating-conic-gradient(var(--ray, rgba(180, 77, 255, .10)) 0 12deg, transparent 12deg 24deg);
  animation: spin 60s linear infinite;
  pointer-events: none;
}
@keyframes spin { to { transform: rotate(360deg); } }
.bigcap { position: relative; width: 180px; height: 180px; z-index: 2; }
.bigcap__half {
  position: absolute; left: 0; right: 0;
  height: 50%;
  transition: transform 450ms var(--spring);
}
.bigcap__half--top {
  top: 0;
  border-radius: 90px 90px 0 0;
  background: linear-gradient(180deg, var(--c, #f6f4ff), color-mix(in srgb, var(--c, #f6f4ff) 70%, #000));
  box-shadow: inset 0 8px 16px rgba(255, 255, 255, .25);
}
.bigcap__half--bottom {
  bottom: 0;
  border-radius: 0 0 90px 90px;
  background: linear-gradient(180deg, #fdfcff, #cfc9e8);
  box-shadow: inset 0 -8px 16px rgba(0, 0, 0, .18);
}
.bigcap.rainbow .bigcap__half--top { background: conic-gradient(#ff4d4d, #ffc24d, #3df2c6, #3fa9ff, #b44dff, #ff4d9d, #ff4d4d); animation: hue 2s linear infinite; }
.bigcap.open .bigcap__half--top { transform: rotate(-28deg) translateY(-60px); }
.bigcap.open .bigcap__half--bottom { transform: rotate(14deg) translateY(30px); }
.bigcap.shake2s { animation: shake 500ms ease-in-out 4; }
.flashwhite { animation: flash 150ms ease 1; }
@keyframes flash { 50% { filter: brightness(3); } }

.rng-status {
  position: absolute;
  bottom: -64px;
  width: 100%;
  text-align: center;
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--muted);
}
.skip-hint {
  position: absolute;
  top: 12px; right: 16px;
  font-family: var(--font-mono);
  font-size: .74rem;
  color: var(--muted);
  background: none;
  border: none;
  padding: .5rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 300ms ease;
}
.skip-hint.on { opacity: .8; }

.pity-banner {
  position: absolute;
  top: 8%;
  font-family: var(--font-display);
  font-weight: 700;
  color: #2A0416;
  background: var(--accent);
  padding: .6rem 1.2rem;
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(255, 77, 157, .5);
  animation: bannerIn 400ms var(--spring);
  z-index: 4;
  text-align: center;
}
@keyframes bannerIn { from { transform: translateY(-60px); opacity: 0; } }

.prize-card {
  width: min(420px, 92vw);
  border-radius: 24px;
  padding: 1.6rem;
  text-align: center;
  transform: rotateY(90deg);
  z-index: 3;
}
.reveal-stage { perspective: 900px; }
.prize-card.in { transform: rotateY(0); transition: transform 400ms var(--ease); }
.prize-card .tier-line { font-family: var(--font-display); font-weight: 700; font-size: .85rem; letter-spacing: .1em; }
.prize-card h3 { font-size: 1.7rem; margin: .5rem 0 .2rem; }
.prize-card .val { font-family: var(--font-mono); font-size: 1.05rem; margin-block: .4rem; }
.prize-card .val--jackpot {
  font-size: clamp(2rem, 9vw, 4rem);
  font-weight: 700;
  background: linear-gradient(90deg, #ff4d4d, #ffc24d, #3df2c6, #3fa9ff, #b44dff, #ff4d9d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: hue 2s linear infinite;
}
.prize-card .blurb { color: var(--muted); font-size: .88rem; }
.prize-card .serial { font-family: var(--font-mono); font-size: .72rem; color: var(--muted); margin-top: .4rem; }
.prize-card .row { display: flex; flex-direction: column; gap: .5rem; margin-top: 1.1rem; }
.prize-card .stamp {
  position: absolute;
  top: 18px; left: 14px;
  font-family: var(--font-display); font-weight: 700;
  color: var(--accent2);
  border: 2.5px solid var(--accent2);
  border-radius: 8px;
  padding: .1rem .5rem;
  transform: rotate(-12deg);
}
.prize-card.lost { filter: grayscale(.9); transition: filter 300ms ease; }

.cfx {
  position: absolute;
  width: 6px; height: 6px;
  top: 50%; left: 50%;
  animation: burst 700ms ease-out var(--d, 0ms) forwards;
  opacity: 0;
  z-index: 2;
}
@keyframes burst {
  0% { opacity: 1; transform: translate(0, 0) rotate(0); }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) rotate(var(--rot)); }
}

.flip-coin {
  width: 120px; height: 120px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1.6s cubic-bezier(.2, .7, .3, 1);
  margin-inline: auto;
}
.flip-coin div {
  position: absolute; inset: 0;
  border-radius: 50%;
  backface-visibility: hidden;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700;
}
.flip-coin .face-w { background: radial-gradient(circle at 35% 30%, #a8ffe9, var(--accent2) 70%); color: #06251d; }
.flip-coin .face-l { background: radial-gradient(circle at 35% 30%, #3a3654, var(--surface2) 70%); color: var(--muted); transform: rotateY(180deg); }

.fglyph {
  position: fixed;
  top: -5vh;
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--muted);
  animation: ffall 900ms ease-in var(--d, 0ms) forwards;
  z-index: 950;
  pointer-events: none;
}
@keyframes ffall { to { transform: translateY(110vh) rotate(30deg); opacity: .2; } }

/* ---------- dashboard ---------- */
.stat-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-block: 1rem; }
.stat-tiles .tile {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 20px;
  padding: 1rem 1.2rem;
}
.tile .k { font-family: var(--font-display); font-size: .8rem; color: var(--muted); }
.tile .v { font-family: var(--font-mono); font-weight: 700; font-size: 1.35rem; margin-top: .25rem; }
.tile .v.green { color: var(--accent2); }
/* minmax(0,…) : sans ça une piste `1fr` se dilate au min-content
   de son contenu et déborde la page en mobile */
.dash-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1rem; align-items: start; }
.dash-side { display: flex; flex-direction: column; min-width: 0; }
.dash-grid > * { min-width: 0; }

.shelf-row { position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.1rem; padding: .8rem .4rem 1.2rem; }
.shelf-row::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6px;
  border-radius: 4px;
  background: var(--surface2);
  box-shadow: 0 8px 14px rgba(0, 0, 0, .45);
}
.shelf-item {
  width: 104px;
  min-height: 132px;
  text-align: center;
  cursor: pointer;
  transition: transform 250ms var(--spring);
  position: relative;
  padding: .5rem .25rem;
  border-radius: 14px;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
}
.shelf-item:hover { transform: translateY(-6px); }
.shelf-item .capvis {
  display: grid;
  width: 52px; height: 52px;
  margin: 0 auto .4rem;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--c, #9AA3B8) 47%, rgba(12,10,22,.9) 47% 53%, #f6f4ff 53%);
  box-shadow: inset -4px -6px 10px rgba(0, 0, 0, .3), 0 5px 10px rgba(0, 0, 0, .4);
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; color: rgba(12, 10, 22, .8);
}
.shelf-item.opened .capvis { background: linear-gradient(180deg, var(--c, #9AA3B8) 30%, transparent 30%), linear-gradient(180deg, transparent 55%, #f6f4ff 55%); box-shadow: 0 5px 10px rgba(0, 0, 0, .4); }
.shelf-item .nm { display: block; font-size: .72rem; line-height: 1.2; color: var(--text); }
.shelf-item .sub { display: block; margin-top: .15rem; font-family: var(--font-mono); font-size: .62rem; line-height: 1.35; color: var(--muted); }
.shelf-item.t-legendary::before {
  content: '';
  position: absolute;
  left: 50%; bottom: 2px;
  width: 70px; height: 12px;
  transform: translateX(-50%);
  background: rgba(255, 194, 77, .35);
  filter: blur(6px);
  border-radius: 50%;
}
.empty-state { text-align: center; padding: 2rem 1rem; }
.empty-state .capvis { margin-inline: auto; margin-bottom: .8rem; }

.fx {
  display: flex;
  align-items: center;
  gap: .8rem;
  background: var(--surface2);
  border-radius: 14px;
  border-left: 3px solid var(--tier-c, var(--accent));
  padding: .6rem .8rem;
  margin-block: .5rem;
}
/* urgence = rouge dédié, jamais une couleur de rareté */
.fx.expiring .donut { --dc: #ff6b6b; animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .6; } }
.donut {
  --p: 50;
  --dc: var(--accent);
  width: 72px; height: 72px;
  flex: none;
  border-radius: 50%;
  background: conic-gradient(var(--dc) calc(var(--p) * 1%), var(--surface) 0);
  display: grid; place-items: center;
}
.donut i {
  font-style: normal;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--surface2);
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: .55rem;
  white-space: nowrap;      /* "21h 55m" tenait sur deux lignes */
}
.fx .nm { font-family: var(--font-display); font-weight: 600; font-size: .9rem; }
.fx .src { font-size: .72rem; color: var(--muted); }

.claim-rows .crow {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--line);
}
.claim-rows .crow:last-child { border-bottom: none; }
.crow .lbl { font-size: .88rem; }
.crow .lbl .sub { display: block; font-size: .7rem; color: var(--muted); }
.crow .amt { font-family: var(--font-mono); font-weight: 700; }
.crow .amt--chips { display: flex; flex-wrap: wrap; gap: .35rem .6rem; justify-content: flex-end; }
.stock-chip { display: inline-flex; align-items: baseline; gap: .25rem; }
.tick-chip {
  font-family: var(--font-mono);
  font-size: .7rem;
  border: 1.5px solid var(--muted);
  border-radius: 6px;
  padding: 0 .35rem;
  margin-right: .3rem;
}

.protocol-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; }
.protocol-grid > * { min-width: 0; }
.basket { overflow-x: auto; }
.tax-bar {
  display: flex;
  height: 30px;
  border-radius: 999px;
  overflow: hidden;
  border: 1.5px solid var(--line);
}
.tax-bar button { display: block; height: 100%; border: none; padding: 0; transition: filter 150ms ease; cursor: pointer; }
.tax-bar button:hover { filter: brightness(1.3); }
.tax-legend { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .6rem; font-size: .78rem; color: var(--muted); }
.tax-legend .dotc { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: .3rem; }
.basket-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.basket-table th { text-align: left; color: var(--muted); font-weight: 400; padding: .3rem .4rem; border-bottom: 1.5px solid var(--line); }
.basket-table td { padding: .45rem .4rem; border-bottom: 1px solid var(--line); }
.basket-table tr:last-child td { border-bottom: none; }
.basket-table .up { color: var(--accent2); }
.basket-table .down { color: #ff6b6b; }

/* ---------- toasts + popover ---------- */
.toasts {
  position: fixed;
  bottom: 1rem; right: 1rem;
  display: flex; flex-direction: column; gap: .5rem;
  z-index: 1000;
  max-width: min(360px, 90vw);
  pointer-events: none;
}
.toast {
  background: var(--surface2);
  color: var(--text);
  border: 1.5px solid var(--line);
  border-left: 3px solid var(--accent);
  padding: .65rem 1rem;
  border-radius: 12px;
  font-size: .86rem;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 300ms ease, transform 300ms var(--spring);
}
.toast.on { opacity: 1; transform: translateY(0); }
.toast--success { border-left-color: var(--accent2); }
.toast--error { border-left-color: #ff6b6b; }
.popover {
  position: fixed;
  background: var(--surface2);
  color: var(--text);
  border: 1.5px solid var(--line);
  padding: .8rem 1rem;
  border-radius: 12px;
  max-width: 300px;
  z-index: 1001;
  font-size: .85rem;
  line-height: 1.45;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .5);
  opacity: 0;
  transition: opacity 150ms ease;
}
.popover.on { opacity: 1; }
.popover p { color: var(--muted); margin-top: .3rem; }
.popover .btn { margin-top: .6rem; width: 100%; font-size: .8rem; }

/* ---------- footer ---------- */
.footer {
  max-width: 1240px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 3rem;
  color: var(--muted);
  font-size: .8rem;
  line-height: 1.7;
  text-align: center;
  border-top: 1.5px solid var(--line);
}
.footer .cap-glyph { display: inline-block; margin-top: 1rem; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .hero { grid-template-columns: minmax(0, 1fr); min-height: auto; gap: 1rem; }
  .dash-grid, .protocol-grid { grid-template-columns: minmax(0, 1fr); }
  .stat-tiles { grid-template-columns: minmax(0, 1fr); }
}
#btn-connect .short { display: none; }

@media (max-width: 720px) {
  /* deux lignes maximum : le badge démo migre sur le ruban,
     le libellé du bouton raccourcit */
  .topbar { position: static; flex-wrap: wrap; height: auto; padding-block: .5rem; gap: .5rem; }
  .topbar .demo-badge { display: none; }
  /* le ruban défile en translateX : un badge simplement posé dans le flux se
     ferait traverser par le texte. On l'ancre à gauche, au-dessus, avec un
     halo de la couleur du ruban pour que le texte disparaisse proprement. */
  .marquee { position: relative; }
  .marquee__track { padding-left: 6.5rem; }
  .marquee::before {
    content: 'DEMO MODE';
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    background: var(--legendary);
    color: #221a04;
    font-family: var(--font-display); font-weight: 700; font-size: .62rem;
    padding: .15rem .4rem;
    border-radius: 6px;
    box-shadow: 0 0 0 .5rem var(--surface2);
  }
  #btn-connect .full { display: none; }
  #btn-connect .short { display: inline; }
  #btn-connect { margin-left: auto; padding-inline: .9rem; }
  .tabs { order: 3; width: 100%; }
  .tabs button { flex: 1; }
}
@media (max-width: 460px) {
  .machine { transform: scale(.82); transform-origin: top center; margin-bottom: -90px; }
  .buy-panel__title { font-size: 1.6rem; }
  main { padding-inline: 1rem; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  /* Toutes les animations infinies sont COUPÉES, pas accélérées : les
     raccourcir à 50ms les transformerait en stroboscope à 20 Hz. */
  .marquee__track,
  .cap, .machine.jitter .cap, .tray-cap.wobble, .flame, .mint-meter__bar .shine,
  .t-legendary, .t-jackpot, .rainbow-text, .godray, .machine__eyes .eye,
  .fx.expiring .donut, .marquee .jp .jp-amt, .prize-card .val--jackpot,
  .reveal-overlay.strobe, .bigcap.shake2s, .machine.shake { animation: none !important; }
  .cfx, .fglyph { display: none; }
  /* le reste (entrées ponctuelles) passe en fondu court */
  *, *::before, *::after { transition-duration: 50ms !important; animation-duration: 50ms !important; }
}