/* polices hébergées sur le site (licence SIL OFL, voir fonts/) : aucune requête vers Google */
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/space-grotesk-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/space-grotesk-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/space-grotesk-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'VT323'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/vt323-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  --bg: #0c0e1a;
  --bg2: #151830;
  --ink: #ecebf5;
  --mute: #9b9bb8;
  --line: #2a2e50;
  --acc: #5ef0a8;
  --e0: #7d8798; --e0b: #343b48;
  --e1: #2e9e5b; --e1b: #165c34;
  --e2: #2f7de1; --e2b: #173f99;
  --e3: #8a4fd8; --e3b: #4f2394;
  --e4: #f08a24; --e4b: #c2410c;
  --e5: #e5383b; --e5b: #7f0e18;
  --gold: #f6c945;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background:
    radial-gradient(1200px 600px at 50% -10%, #1d2250 0%, transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px),
    var(--bg);
  color: var(--ink);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  min-height: 100vh;
  padding-bottom: 84px;
  overflow-x: clip;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; cursor: pointer; }
.hidden { display: none !important; }

/* ── header ─────────────────────────────── */
.top {
  position: sticky; top: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: rgba(12,14,26,.86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.logo {
  font-family: 'VT323', monospace; font-size: 22px; line-height: .85; letter-spacing: 1px;
  color: var(--acc); text-shadow: 0 0 8px rgba(94,240,168,.55);
}
.tag { font-size: 12px; color: var(--mute); }
.hud { display: flex; gap: 8px; flex-shrink: 0; }
.pill {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 999px;
  background: var(--bg2); border: 1px solid var(--line);
  font-family: 'VT323', monospace; font-size: 20px;
}
.pill b { font-weight: 400; }
.pill.sound { cursor: pointer; font-size: 18px; color: inherit; }
.pill.sound.off { opacity: .4; text-decoration: line-through; }

main { max-width: 1040px; margin: 0 auto; padding: 16px; }
.view { display: none; }
.view.active { display: block; }

/* ── barre d'onglets ────────────────────── */
.tabs {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
  display: flex; justify-content: center; gap: 4px;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  background: rgba(12,14,26,.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
}
.tab {
  flex: 1; max-width: 160px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px; border: 0; border-radius: 12px; background: none;
  color: var(--mute); font-size: 12px;
}
.tab span { font-size: 20px; filter: grayscale(1) opacity(.6); }
.tab.active { color: var(--ink); background: var(--bg2); }
.tab.active span { filter: none; }

/* ── boutons ────────────────────────────── */
.btn {
  border: 0; border-radius: 12px; padding: 12px 18px;
  background: var(--acc); color: #062314; font-weight: 700;
  box-shadow: 0 4px 0 #2a9e68;
  transition: transform .1s;
}
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #2a9e68; }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.ghost { background: var(--bg2); color: var(--ink); border: 1px solid var(--line); box-shadow: none; font-weight: 500; }
.btn.danger { color: #ff8a8a; }

.progress { height: 8px; border-radius: 99px; background: var(--bg2); overflow: hidden; border: 1px solid var(--line); }
.progress > div { height: 100%; background: var(--acc); transition: width .4s; }
.progress.e0 > div { background: var(--e0); } .progress.e1 > div { background: var(--e1); } .progress.e2 > div { background: var(--e2); }
.progress.e3 > div { background: var(--e3); } .progress.e4 > div { background: var(--e4); }
.progress.e5 > div { background: var(--e5); }

/* ── booster : disquette ────────────────── */
.stage { display: flex; flex-direction: column; align-items: center; padding-top: 24px; }
.disk {
  position: relative; width: 230px; aspect-ratio: 90 / 94; border: 0; padding: 0;
  background: linear-gradient(160deg, #3b4fc4, #1f2a7a);
  clip-path: polygon(0 0, 92% 0, 100% 6%, 100% 100%, 0 100%);
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.08);
  animation: float 3.2s ease-in-out infinite;
  filter: drop-shadow(0 18px 24px rgba(0,0,0,.5));
}
.disk::after { /* reflet */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.14) 45%, transparent 55%);
  background-size: 250% 100%; animation: sweep 4s linear infinite;
}
.disk-shutter {
  position: absolute; top: 0; left: 22%; width: 56%; height: 36%;
  background: linear-gradient(180deg, #e3e6ea, #9aa2ab);
  border-radius: 0 0 3px 3px;
}
.disk-shutter i { position: absolute; top: 18%; left: 58%; width: 18%; height: 62%; background: #1b1f33; border-radius: 2px; }
.disk-label {
  position: absolute; left: 10%; right: 10%; bottom: 0; height: 52%;
  background: repeating-linear-gradient(180deg, #fbf7ec 0 18px, #e9e2cf 18px 19px);
  border-radius: 4px 4px 0 0;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px;
  color: #1b2470;
}
.disk-label b { font-family: 'VT323', monospace; font-size: 26px; font-weight: 400; letter-spacing: 1px; }
.disk-label small { font-size: 12px; font-weight: 500; }
.disk-notch { position: absolute; left: 4%; bottom: 4%; width: 7%; height: 7%; background: #0f1550; border-radius: 1px; }
.disk.insert { animation: insert .55s ease-in forwards; }
.disk.empty { filter: grayscale(1) brightness(.6); animation: none; }
@keyframes float { 50% { transform: translateY(-10px) rotate(-1.5deg); } }
@keyframes insert { 30% { transform: translateY(-14px) scale(1.04); } 100% { transform: translateY(160px) scale(.6); opacity: 0; } }
@keyframes sweep { from { background-position: 150% 0; } to { background-position: -100% 0; } }

.hint { color: var(--mute); margin: 26px 0 10px; }
.stock { text-align: center; }
.stock-dots { display: flex; gap: 8px; justify-content: center; }
.stock-dots i { width: 22px; height: 22px; border-radius: 4px; background: var(--bg2); border: 1px solid var(--line); }
.stock-dots i.on { background: #3b4fc4; border-color: #6d7ff0; box-shadow: 0 0 10px rgba(109,127,240,.5); }
.stock p { font-family: 'VT323', monospace; font-size: 20px; color: var(--mute); margin: 8px 0 0; }

/* ── booster : connexion modem ──────────── */
.dialup { width: min(360px, 100%); background: #c0c0c0; color: #000; border: 2px solid; border-color: #fff #404040 #404040 #fff; font-family: Tahoma, 'MS Sans Serif', sans-serif; margin-top: 60px; }
.dialup-bar { display: flex; justify-content: space-between; align-items: center; padding: 3px 6px; background: linear-gradient(90deg, #000080, #1084d0); color: #fff; font-size: 13px; font-weight: 700; }
.dialup-bar i { font-style: normal; background: #c0c0c0; color: #000; width: 16px; height: 14px; display: grid; place-items: center; font-size: 10px; border: 1px solid; border-color: #fff #404040 #404040 #fff; }
.dialup-body { padding: 18px; }
.dialup-icons { font-size: 30px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.dots { display: flex; gap: 5px; }
.dots i { width: 6px; height: 6px; background: #000080; animation: blink 0.9s infinite; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 50% { opacity: .15; } }
.dialup p { font-size: 13px; text-align: center; margin: 14px 0 10px; }
.dialup .progress { height: 18px; border-radius: 0; background: #fff; border: 1px solid; border-color: #404040 #fff #fff #404040; }
.dialup .progress > div { background: repeating-linear-gradient(90deg, #000080 0 12px, transparent 12px 14px); transition: width .35s steps(6); }

/* ── booster : révélation ───────────────── */
.pull { width: 100%; }
.slot { position: relative; perspective: 1000px; }

/* une carte à la fois : la carte en cours au centre, les suivantes empilées derrière */
#booster-reveal { padding-top: 6px; }
.solo-ui { --cw: clamp(200px, min(80vw, calc((100svh - 340px) * .716)), 320px); width: var(--cw); display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.solo-ui #solo-count { font-family: 'VT323', monospace; font-size: 22px; color: var(--acc); }
.solo-ui .linkish { margin: 0; }
.pull.solo {
  --cw: clamp(200px, min(80vw, calc((100svh - 340px) * .716)), 320px);
  position: relative; height: calc(var(--cw) * 88 / 63 + 58px);
}
.pull.solo .slot {
  position: absolute; top: 0; left: 50%; width: var(--cw); margin-left: calc(var(--cw) / -2);
  transition: transform .5s cubic-bezier(.3,.8,.3,1), opacity .5s;
  animation: soloIn .55s backwards cubic-bezier(.2,.9,.3,1.15); animation-delay: calc(var(--i) * 70ms);
}
.pull.solo .slot.cur { z-index: 10; }
.pull.solo .slot.wait {
  z-index: calc(9 - var(--k)); pointer-events: none;
  transform: translate(calc(var(--k) * 8px), calc(var(--k) * -8px)) scale(calc(1 - var(--k) * .035));
}
.pull.solo .slot.wait .react { visibility: hidden; }
.pull.solo .slot.gone { z-index: 11; pointer-events: none; opacity: 0; transform: translateX(-120vw) rotate(-14deg); }
@keyframes soloIn { from { translate: 0 90px; opacity: 0; } }
.solo-hint { color: var(--mute); font-size: 13px; margin: 4px 0 0; text-align: center; min-height: 1.4em; }

/* les 5 cartes ensemble : 2 + 2 + 1 (téléphone), 3 + 2 (tablette), 5 (ordinateur) */
.pull.grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 14px; }
.pull.grid .slot { width: calc(50% - 7px); animation: deal .5s backwards cubic-bezier(.2,.9,.3,1.2); animation-delay: calc(var(--i) * 90ms); }
@media (min-width: 560px) { .pull.grid .slot { width: calc(33.333% - 10px); max-width: 230px; } }
@media (min-width: 860px) { .pull.grid .slot { width: calc(20% - 12px); } }
@keyframes deal { from { opacity: 0; transform: translateY(60px) rotate(-8deg) scale(.8); } }
.flip { position: relative; aspect-ratio: 63 / 88; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3,1.4,.5,1); cursor: pointer; }
.flip.open { transform: rotateY(180deg); }
.flip-back, .flip-front { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flip-front { transform: rotateY(180deg); }
.flip:not(.open):hover { transform: translateY(-6px); }
.badge {
  position: absolute; top: -10px; right: -6px; transform: rotate(6deg); z-index: 5;
  font-family: 'VT323', monospace; font-size: 17px; padding: 1px 8px; border-radius: 6px; white-space: nowrap;
}
.badge.new { background: var(--acc); color: #062314; box-shadow: 0 0 12px rgba(94,240,168,.7); }
.badge.dup { background: var(--bg2); color: var(--mute); border: 1px solid var(--line); }
.slot.burst::before {
  content: ''; position: absolute; inset: -30%; z-index: -1; border-radius: 50%;
  animation: burst 1.2s ease-out forwards;
}
.slot.burst-E::before { background: radial-gradient(circle, rgba(205,108,255,.65), transparent 60%); }
.slot.burst-L::before { background: conic-gradient(from 0deg, #ff5f6d, #ffc371, #5ef0a8, #4fc3f7, #b388ff, #ff5f6d); filter: blur(30px); opacity: .7; }
@keyframes burst { from { transform: scale(.2); opacity: 1; } to { transform: scale(1.1); opacity: .35; } }
.react { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.react button { border: 1px solid var(--line); background: var(--bg2); border-radius: 999px; padding: 5px 12px; font-size: 16px; filter: grayscale(.8); opacity: .75; transition: .15s; }
.react button.on { filter: none; opacity: 1; border-color: var(--acc); background: #12352a; transform: scale(1.08); }
.react.big button { font-size: 14px; padding: 10px 14px; }
.pull-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 26px; }
.pull-sum { font-family: 'VT323', monospace; font-size: 20px; color: var(--acc); text-align: center; margin: 0 0 16px; }

/* ── dos de carte ───────────────────────── */
.card-back {
  container-type: inline-size;
  width: 100%; aspect-ratio: 63 / 88; border-radius: 5% / 3.6%;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 6px, transparent 6px 12px),
    linear-gradient(160deg, #23285a, #0d0f24);
  border: 2px solid #3a417f;
  display: grid; place-items: center;
  box-shadow: 0 10px 22px rgba(0,0,0,.45);
}
.cb-screen {
  width: 76%; aspect-ratio: 4 / 3; border-radius: 10% / 13%;
  background: radial-gradient(ellipse at center, #10331f, #04110a 80%);
  border: 3cqw solid #cfc8b4; box-shadow: inset 0 0 6cqw rgba(0,0,0,.8);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: 'VT323', monospace; color: var(--acc); text-align: center;
  text-shadow: 0 0 2cqw rgba(94,240,168,.8);
}
.cb-screen span { font-size: 10cqw; line-height: .85; }
.cb-screen small { font-size: 6cqw; opacity: .7; margin-top: 2cqw; }
.bR { border-color: var(--gold); box-shadow: 0 0 16px rgba(246,201,69,.45), 0 10px 22px rgba(0,0,0,.45); }
.bE { border-color: #cd6cff; box-shadow: 0 0 22px rgba(205,108,255,.6), 0 10px 22px rgba(0,0,0,.45); }
.bL { border-color: #fff; animation: rainbowGlow 2s linear infinite; }
@keyframes rainbowGlow {
  0% { box-shadow: 0 0 26px #ff5f6d; } 25% { box-shadow: 0 0 26px #ffc371; }
  50% { box-shadow: 0 0 26px #5ef0a8; } 75% { box-shadow: 0 0 26px #b388ff; } 100% { box-shadow: 0 0 26px #ff5f6d; }
}

/* ── carte ──────────────────────────────── */
.card {
  container-type: inline-size;
  position: relative; width: 100%; aspect-ratio: 63 / 88;
  border-radius: 5% / 3.6%; overflow: hidden;
  --era: var(--e1); --era2: var(--e1b);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .45s ease;
  box-shadow: 0 10px 22px rgba(0,0,0,.45);
  text-align: left; color: #14131c;
}
.card.tilting { transition: none; }
.card.e0 { --era: var(--e0); --era2: var(--e0b); }
.card.e2 { --era: var(--e2); --era2: var(--e2b); }
.card.e3 { --era: var(--e3); --era2: var(--e3b); }
.card.e4 { --era: var(--e4); --era2: var(--e4b); }
.card.e5 { --era: var(--e5); --era2: var(--e5b); }
.c-face {
  position: absolute; inset: 0; padding: 3.4cqw;
  display: flex; flex-direction: column; gap: 2.2cqw;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.25), transparent 50%),
    linear-gradient(165deg, var(--era), var(--era2));
}
.c-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 2cqw;
  background: #fbf8ef; border-radius: 2.4cqw; padding: 1.6cqw 3cqw;
  box-shadow: inset 0 -0.6cqw 0 rgba(0,0,0,.12);
}
.c-name { font-size: 6.2cqw; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-year { font-family: 'VT323', monospace; font-size: 6cqw; color: var(--era2); flex-shrink: 0; }
.c-art { flex: 1 1 auto; min-height: 0; border-radius: 1.6cqw; overflow: hidden; box-shadow: 0 0 0 0.8cqw rgba(0,0,0,.25); }
.c-type {
  display: flex; justify-content: space-between; gap: 2cqw;
  font-size: 3.5cqw; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: .04em;
  padding: 0 1cqw; text-shadow: 0 0.3cqw 0 rgba(0,0,0,.3);
}
.c-type span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-rar { flex-shrink: 0; }
.c-desc {
  margin: 0; background: #fbf8ef; border-radius: 2cqw; padding: 2.4cqw 3cqw;
  font-size: 3.75cqw; line-height: 1.32; font-style: italic;
  height: 24cqw; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
}
.c-foot { display: flex; justify-content: space-between; font-family: 'VT323', monospace; font-size: 4.4cqw; color: rgba(255,255,255,.9); padding: 0 1cqw; line-height: 1; }

/* fenêtre d'illustration — une interface par époque */
.win { height: 100%; display: flex; flex-direction: column; background: #fff; }
.w-bar { display: flex; align-items: center; gap: 1.2cqw; padding: 1.2cqw 1.8cqw; font-size: 3.4cqw; flex-shrink: 0; }
.w-bar span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-bar i { font-style: normal; }
.w-body { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2cqw; padding: 3cqw; position: relative; }
.art-icon { font-size: 25cqw; line-height: 1; filter: drop-shadow(0 1.2cqw 0 rgba(0,0,0,.18)); }
.art-text { font-size: 5.4cqw; text-align: center; max-width: 100%; line-height: 1.1; }
.art-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }

/* 0 · terminal des origines */
.e0 .win { background: #050805; border: 0.6cqw solid #2a2f2a; }
.e0 .w-bar { background: #0e140e; color: #46ff7a; font-family: 'VT323', monospace; font-size: 4.2cqw; text-shadow: 0 0 1.5cqw rgba(70,255,122,.6); }
.e0 .w-body { background: radial-gradient(ellipse at center, #0f2414, #030603 80%); }

/* 1 · Windows 98 */
.e1 .win { background: #c0c0c0; border: 0.6cqw solid; border-color: #fff #404040 #404040 #fff; }
.e1 .w-bar { background: linear-gradient(90deg, #000080, #1084d0); color: #fff; font-family: Tahoma, sans-serif; font-weight: 700; }
.e1 .w-bar i { background: #c0c0c0; color: #000; width: 4cqw; height: 3.6cqw; display: grid; place-items: center; font-size: 2.6cqw; border: 0.3cqw solid; border-color: #fff #404040 #404040 #fff; }
.e1 .w-body { margin: 1.4cqw; background: #008080; border: 0.5cqw solid; border-color: #404040 #fff #fff #404040; }
.e1 .art-text { font-family: 'VT323', monospace; font-size: 7cqw; color: #fff; text-shadow: 0.4cqw 0.4cqw 0 #000; }

/* 2 · Windows XP / MSN */
.e2 .win { background: #ece9d8; border: 0.6cqw solid #0831d9; border-top: 0; }
.e2 .w-bar { background: linear-gradient(180deg, #3a8cf7, #0a54de 45%, #0447c7); color: #fff; font-family: 'Trebuchet MS', Tahoma, sans-serif; font-weight: 700; border-radius: 2cqw 2cqw 0 0; text-shadow: 0.2cqw 0.2cqw 0 #00237a; }
.e2 .w-bar .x { background: linear-gradient(#e87a5a, #c3300f); border: 0.3cqw solid #fff; border-radius: 0.8cqw; width: 4.4cqw; height: 4.4cqw; display: grid; place-items: center; font-size: 2.8cqw; }
.e2 .w-body { background: linear-gradient(180deg, #ffffff, #dbe8fb); }
.e2 .art-text { font-family: Tahoma, sans-serif; color: #0a3a9c; font-weight: 700; }

/* 3 · navigateur / web plat */
.e3 .win { background: #f1f1f4; }
.e3 .w-bar { background: #e2e2e8; gap: 1cqw; }
.e3 .w-bar .dot { width: 2.4cqw; height: 2.4cqw; border-radius: 50%; background: #ff5f57; }
.e3 .w-bar .dot:nth-child(2) { background: #febc2e; } .e3 .w-bar .dot:nth-child(3) { background: #28c840; }
.e3 .w-bar .url { margin-left: 1.4cqw; background: #fff; border-radius: 99px; padding: 0.6cqw 2.4cqw; color: #555; font-size: 3cqw; }
.e3 .w-body { background: linear-gradient(160deg, #fff, #ece4fb); }
.e3 .art-text { font-family: 'Helvetica Neue', Arial, sans-serif; font-weight: 700; color: #3b5998; }

/* 4 · story Instagram / Snap */
.e4 .win { background: linear-gradient(160deg, #feda75, #fa7e1e 35%, #d62976 70%, #962fbf); color: #fff; }
.e4 .w-bar { flex-direction: column; align-items: stretch; gap: 1.4cqw; }
.e4 .segs { display: flex; gap: 1cqw; }
.e4 .segs i { flex: 1; height: 0.7cqw; border-radius: 1cqw; background: rgba(255,255,255,.45); }
.e4 .segs i:first-child { background: #fff; }
.e4 .who { display: flex; align-items: center; gap: 1.4cqw; font-weight: 700; font-size: 3.2cqw; }
.e4 .av { width: 4.4cqw; height: 4.4cqw; border-radius: 50%; background: #fff; border: 0.6cqw solid #d62976; flex-shrink: 0; }
.e4 .art-text { font-weight: 700; background: rgba(0,0,0,.35); padding: 1cqw 3cqw; border-radius: 2cqw; }

/* 5 · vidéo verticale TikTok */
.e5 .win { background: radial-gradient(ellipse at 50% 30%, #2b2b33, #050507 75%); color: #fff; position: relative; }
.e5 .w-side { position: absolute; right: 2cqw; bottom: 4cqw; z-index: 2; display: flex; flex-direction: column; gap: 2.4cqw; font-style: normal; font-size: 4cqw; }
.e5 .w-side i { font-style: normal; text-align: center; opacity: .9; }
.e5 .art-text { font-weight: 700; text-shadow: -0.5cqw 0 0 #25f4ee, 0.5cqw 0 0 #fe2c55; }
.e5 .art-icon { filter: drop-shadow(-0.8cqw 0 0 #25f4ee) drop-shadow(0.8cqw 0 0 #fe2c55); }

/* rareté */
.rU .c-face { box-shadow: inset 0 0 0 1.1cqw #d9dee6, inset 0 0 0 1.6cqw rgba(0,0,0,.15); }
.rR .c-face { box-shadow: inset 0 0 0 1.3cqw var(--gold), inset 0 0 0 1.8cqw rgba(0,0,0,.2); }
.rE .c-face { box-shadow: inset 0 0 0 1.3cqw #d7a6ff, inset 0 0 0 1.8cqw rgba(60,0,90,.35); }
.rL .c-face { box-shadow: inset 0 0 0 1.4cqw #fff, inset 0 0 0 2cqw rgba(0,0,0,.2); }
.rR .c-rar, .rE .c-rar, .rL .c-rar { color: #fff7cc; }

.c-holo, .c-glare { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; }
.c-glare { background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.45), transparent 45%); mix-blend-mode: overlay; opacity: 0; transition: opacity .3s; }
.card.tilting .c-glare { opacity: 1; }
.rR .c-holo {
  background: linear-gradient(115deg, transparent 40%, rgba(255,240,180,.55) 50%, transparent 60%);
  background-size: 300% 100%; animation: sweep 3.5s linear infinite; mix-blend-mode: overlay;
}
.rE .c-holo {
  background: linear-gradient(125deg, rgba(255,120,220,.35), rgba(120,160,255,.35), rgba(255,120,220,.35));
  background-size: 200% 200%; background-position: var(--mx, 50%) var(--my, 50%);
  mix-blend-mode: color-dodge; opacity: .45;
}
.rL .c-holo {
  background:
    repeating-linear-gradient(115deg, #ff5f6d 0%, #ffc371 8%, #5ef0a8 16%, #4fc3f7 24%, #b388ff 32%, #ff5f6d 40%);
  background-size: 300% 300%; background-position: var(--mx, 30%) var(--my, 30%);
  mix-blend-mode: color-dodge; opacity: .38;
  animation: holoDrift 6s linear infinite;
}
.card.tilting.rL .c-holo { animation: none; opacity: .55; }
@keyframes holoDrift { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }
.rL .c-face::after { /* paillettes */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, #fff 0.4cqw, transparent 0.6cqw);
  background-size: 9cqw 11cqw; opacity: .25; mix-blend-mode: overlay;
}

/* ── classeur ───────────────────────────── */
.album-head { position: sticky; top: 61px; z-index: 5; background: rgba(12,14,26,.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: 8px 0 12px; margin: -8px 0 6px; }
.eras { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 10px; scrollbar-width: none; }
.eras button { flex-shrink: 0; border: 1px solid var(--line); background: var(--bg2); border-radius: 999px; padding: 6px 12px; font-size: 13px; color: var(--mute); }
.eras button.on { color: var(--ink); border-color: var(--acc); }
.ap-row { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 6px; }
.ap-row span { font-family: 'VT323', monospace; font-size: 20px; }
.album { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 560px) { .album { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; } }
.era-title { grid-column: 1 / -1; margin: 18px 0 2px; font-size: 16px; display: flex; align-items: baseline; gap: 8px; }
.era-title small { color: var(--mute); font-weight: 400; font-family: 'VT323', monospace; font-size: 17px; }
.cell { position: relative; padding: 0; border: 0; background: none; display: block; transition: transform .15s; }
.cell:hover { transform: translateY(-3px); }
.cell .card { box-shadow: 0 4px 10px rgba(0,0,0,.4); }
.count { position: absolute; right: 4px; bottom: 4px; background: #000c; color: #fff; font-family: 'VT323', monospace; font-size: 16px; padding: 0 6px; border-radius: 6px; }
.cell.missing {
  aspect-ratio: 63 / 88; border-radius: 5% / 3.6%;
  border: 2px dashed var(--line); background: linear-gradient(170deg, #141831, #0e1124);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-family: 'VT323', monospace; color: #4b5080;
}
.cell.missing.e0 { border-color: #3a404c; } .cell.missing.e1 { border-color: #1f4a33; } .cell.missing.e2 { border-color: #1e3566; }
.cell.missing.e3 { border-color: #3b2766; } .cell.missing.e4 { border-color: #5e3a17; }
.cell.missing.e5 { border-color: #5a1a20; }
.m-num { font-size: 18px; } .m-q { font-size: 44px; line-height: 1; } .m-r { font-size: 14px; }

/* ── fiche ──────────────────────────────── */
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; }
.modal-back { position: absolute; inset: 0; background: rgba(4,5,12,.82); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.modal-box { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; max-height: 100%; overflow-x: hidden; overflow-y: auto; padding: 12px 24px; scrollbar-width: none; animation: pop .25s ease-out; }
.modal-box::-webkit-scrollbar { display: none; }
@keyframes pop { from { transform: scale(.9); opacity: 0; } }
.modal-x { position: absolute; top: 0; right: 0; z-index: 3; border: 1px solid var(--line); background: var(--bg2); width: 34px; height: 34px; border-radius: 50%; }
.modal-card { width: min(330px, 78vw); margin-top: 8px; }
.modal-info { text-align: center; max-width: 360px; }
.mi-meta { color: var(--mute); font-size: 13px; margin: 0 0 6px; }
.mi-q { font-weight: 700; margin: 0 0 10px; }
.mi-small { color: var(--mute); font-size: 12px; margin-top: 10px; }
.ghost-card { position: relative; filter: grayscale(.4) brightness(.75); }
.gc-num { position: absolute; bottom: 9%; left: 0; right: 0; text-align: center; font-family: 'VT323', monospace; font-size: 34px; color: var(--mute); }

/* ── souvenirs ──────────────────────────── */
.stats h3 { font-size: 15px; margin: 26px 0 10px; }
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 640px) { .kpis { grid-template-columns: repeat(4, 1fr); } }
.kpis div { background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.kpis b { display: block; font-family: 'VT323', monospace; font-size: 38px; font-weight: 400; line-height: 1; color: var(--acc); }
.kpis span { font-size: 12px; color: var(--mute); }
.erabars { display: flex; flex-direction: column; gap: 8px; }
.eb { display: grid; grid-template-columns: 110px 1fr 54px; align-items: center; gap: 10px; font-size: 13px; }
.eb b { font-family: 'VT323', monospace; font-weight: 400; font-size: 18px; text-align: right; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--line); background: var(--bg2); border-radius: 999px; padding: 6px 12px; font-size: 13px; }
.stats-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }

/* ── toast ──────────────────────────────── */
.toast {
  position: fixed; left: 50%; bottom: 96px; z-index: 60; transform: translate(-50%, 20px);
  background: #fbf8ef; color: #14131c; padding: 10px 16px; border-radius: 12px; font-weight: 500; font-size: 14px;
  opacity: 0; pointer-events: none; transition: .25s; max-width: calc(100vw - 32px);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 420px) {
  .tag { display: none; }
  .pill { font-size: 17px; padding: 4px 7px; gap: 4px; }
  .pill.sound { font-size: 16px; padding: 4px 6px; }
  .hud { gap: 4px; }
  .top { padding: 10px 12px; gap: 8px; }
  .album-head { top: 58px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* drapeau « souvenir français » (dessiné en CSS : les drapeaux emoji ne s'affichent pas sous Windows) */
.c-fr { display: inline-block; flex-shrink: 0; width: 1.5em; height: 1em; border-radius: 2px; vertical-align: -0.1em;
  background: linear-gradient(90deg, #0055a4 33.3%, #fff 33.3% 66.6%, #ef4135 66.6%); box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.c-head .c-fr { width: 5.4cqw; height: 3.6cqw; margin-left: auto; align-self: center; }

/* ── accueil : assistant d'installation (première visite) ── */
.linkish { margin-top: 18px; border: 0; background: none; color: var(--mute); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.linkish:hover { color: var(--ink); }
.intro { position: fixed; inset: 0; z-index: 70; display: grid; grid-template-columns: minmax(0, 440px); place-content: center; place-items: center; padding: 16px; background: rgba(4,5,12,.86); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.in-win {
  width: min(440px, 100%); max-height: 100%; display: flex; flex-direction: column;
  background: #c0c0c0; color: #000; border: 2px solid; border-color: #fff #404040 #404040 #fff;
  box-shadow: 0 20px 60px rgba(0,0,0,.6); animation: pop .25s ease-out;
}
.in-win .dialup-bar i { cursor: pointer; }
.in-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 18px 4px; font-size: 14px; line-height: 1.45; }
.in-art {
  height: 190px; display: grid; place-items: center; margin-bottom: 12px; overflow: hidden;
  background: #008080; border: 2px solid; border-color: #404040 #fff #fff #404040;
}
.in-body h2 { font-family: Tahoma, 'MS Sans Serif', sans-serif; font-size: 17px; margin: 0 0 6px; }
.in-text p { margin: 0 0 8px; }
.in-text .c-fr { vertical-align: -0.15em; }
.in-rar { white-space: normal; }
.in-rar em { font-style: normal; font-weight: 700; }
.in-rar .g { color: #8a6200; } .in-rar .p { color: #7a1fb0; }
.in-rar .l { background: linear-gradient(90deg, #d4145a, #e08a00, #138a52, #1767c2, #7b2ff7); -webkit-background-clip: text; background-clip: text; color: transparent; }
.in-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px 12px; border-top: 1px solid #808080; box-shadow: inset 0 1px 0 #fff; }
.in-dots { display: flex; gap: 5px; }
.in-dots i { width: 8px; height: 8px; background: #808080; }
.in-dots i.on { background: #000080; }
.in-btns { display: flex; gap: 6px; margin-left: auto; }
.w98 {
  font-family: Tahoma, 'MS Sans Serif', sans-serif; font-size: 13px; color: #000;
  background: #c0c0c0; padding: 6px 12px; min-width: 84px; white-space: nowrap;
  border: 2px solid; border-color: #fff #404040 #404040 #fff; box-shadow: inset -1px -1px 0 #808080;
}
.w98:active { border-color: #404040 #fff #fff #404040; box-shadow: inset 1px 1px 0 #808080; }
.w98.main { font-weight: 700; outline: 1px solid #000; outline-offset: -5px; }
/* étape 1 : éventail de cartes */
.in-fan { position: relative; width: 300px; height: 170px; }
.in-fan .card { position: absolute; top: 6px; left: 50%; width: 112px; margin-left: -56px; transform-origin: 50% 120%; animation: none; }
.in-fan .card:nth-child(1) { transform: translateX(-74px) rotate(-14deg) scale(.88); }
.in-fan .card:nth-child(2) { z-index: 2; transform: translateY(-4px); }
.in-fan .card:nth-child(3) { transform: translateX(74px) rotate(14deg) scale(.88); }
/* étape 2 : 5 cartes distribuées */
.in-deal { display: flex; gap: 8px; padding: 0 10px; }
.in-deal > div { width: 64px; animation: deal .5s backwards cubic-bezier(.2,.9,.3,1.2); animation-delay: calc(var(--i) * 110ms); }
.in-deal > div:last-child { transform: translateY(-8px); }
/* étape 3 : doublon → Ko → case manquante */
.in-ko { display: flex; align-items: center; gap: 10px; }
.in-ko-dup { position: relative; width: 70px; }
.in-ko-dup .badge { top: -8px; right: -14px; font-size: 15px; }
.in-ko-pill { background: var(--bg2); color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 6px 10px; font-family: 'VT323', monospace; font-size: 20px; }
.in-ko-pill b { font-weight: 400; }
.in-ko-miss { width: 70px; background: rgba(0,0,0,.25); color: #9fb4ff; }
.in-ko-miss .m-q { font-size: 32px; }
.in-arrow { color: #fff; font-size: 22px; text-shadow: 1px 1px 0 #000; animation: nudge 1.2s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateX(4px); } }
/* étape 4 : réactions */
.in-react { margin: 0; flex-wrap: wrap; padding: 0 10px; }
.in-react button { color: var(--ink); cursor: default; }
@media (max-width: 380px) {
  .in-art { height: 160px; }
  .in-fan { transform: scale(.85); }
  .in-deal > div { width: 52px; }
  .in-ko { gap: 6px; } .in-ko-dup, .in-ko-miss { width: 58px; }
  .w98 { min-width: 0; padding: 6px 10px; }
}

/* ── booster : le PC (la disquette entre, l'écran s'allume, on plonge dedans) ── */
#booster-connect {
  position: fixed; inset: 0; z-index: 30; padding: 0 16px; justify-content: center; overflow: hidden;
  background: radial-gradient(900px 500px at 50% 30%, #1d2250 0%, transparent 65%), var(--bg);
}
.pc { --pw: min(340px, 84vw); width: var(--pw); position: relative; transition: transform .55s cubic-bezier(.6,0,.9,.4); margin-top: -40px; }
.pc-monitor {
  position: relative; padding: 7% 7% 13%; border-radius: 16px;
  background: linear-gradient(170deg, #e9e3d1, #c9c1aa); box-shadow: inset 0 -6px 0 rgba(0,0,0,.12), 0 18px 30px rgba(0,0,0,.45);
}
.pc-screen {
  position: relative; aspect-ratio: 4 / 3; border-radius: 12px / 14px; overflow: hidden;
  background: radial-gradient(ellipse at center, #1a1f1c, #070908 80%);
  box-shadow: inset 0 0 0 4px #9d957f, inset 0 0 24px rgba(0,0,0,.9);
  display: grid; place-items: center;
}
.pc-screen::before { /* lignes du tube cathodique */
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 3px), radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.12), transparent 50%);
}
.pc-screen::after { /* allumage : une ligne blanche qui s'ouvre */
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; z-index: 2;
  background: #fff; box-shadow: 0 0 18px #fff; transform: scaleX(0); opacity: 0;
}
.pc.on .pc-screen { background: #008080; transition: background .1s .25s; }
.pc.on .pc-screen::after { animation: crtOn .4s ease-out; }
@keyframes crtOn { 0% { transform: scaleX(0); opacity: 1; } 45% { transform: scaleX(1); opacity: 1; height: 2px; } 100% { transform: scaleX(1); height: 100%; top: 0; margin-top: 0; opacity: 0; } }
.pc-screen .dialup { width: 86%; margin: 0; opacity: 0; transform: scale(.9); transition: opacity .2s, transform .25s; box-shadow: 2px 2px 0 rgba(0,0,0,.35); }
.pc.dial .pc-screen .dialup { opacity: 1; transform: none; }
.pc-screen .dialup-bar { font-size: clamp(8px, 2.8vw, 11px); padding: 2px 4px; }
.pc-screen .dialup-bar i { width: 12px; height: 11px; font-size: 8px; }
.pc-screen .dialup-body { padding: 8px 10px 10px; }
.pc-screen .dialup-icons { font-size: clamp(14px, 5vw, 20px); gap: 6px; }
.pc-screen .dots i { width: 4px; height: 4px; }
.pc-screen .dialup p { font-size: clamp(8px, 2.8vw, 11px); margin: 6px 0; min-height: 2.4em; display: grid; place-items: center; }
.pc-screen .dialup .progress { height: 10px; }
.pc-badge { position: absolute; left: 0; right: 0; bottom: 3.5%; text-align: center; font-family: 'VT323', monospace; font-size: 15px; color: #7a7260; display: flex; justify-content: center; align-items: center; gap: 6px; }
.pc-badge i { width: 8px; height: 8px; border-radius: 50%; background: #3d4636; box-shadow: inset 0 1px 1px rgba(0,0,0,.5); }
.pc.on .pc-badge i { background: #5ef06a; box-shadow: 0 0 6px #5ef06a; }
.pc-neck { width: 34%; height: 14px; margin: 0 auto; background: linear-gradient(#b3aa92, #9c937b); }
.pc-case {
  position: relative; width: 112%; margin-left: -6%; height: calc(var(--pw) * .24); border-radius: 8px;
  background: linear-gradient(175deg, #e4dec9, #c4bca4); box-shadow: inset 0 -5px 0 rgba(0,0,0,.12), 0 16px 26px rgba(0,0,0,.5);
}
.pc-power { position: absolute; left: 6%; top: 50%; width: calc(var(--pw) * .085); aspect-ratio: 1; margin-top: calc(var(--pw) * -.0425); border-radius: 4px; background: #d6cfb9; box-shadow: inset -1px -2px 0 rgba(0,0,0,.2), 0 1px 0 #fff; }
.pc-power i { position: absolute; right: -9px; top: 2px; width: 4px; height: 4px; border-radius: 50%; background: #5ef06a; box-shadow: 0 0 5px #5ef06a; }
.pc-vents { position: absolute; left: 22%; top: 30%; width: 22%; height: 40%; background: repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 2px, transparent 2px 6px); border-radius: 2px; }
.pc-drive {
  position: absolute; right: 7%; top: 22%; width: 40%; height: 56%; border-radius: 3px;
  background: linear-gradient(#d3ccb5, #bdb59c); box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 rgba(0,0,0,.25);
}
.pc-slot { position: absolute; left: 12%; right: 12%; top: 32%; height: 5px; border-radius: 2px; background: #1b1a16; box-shadow: inset 0 2px 2px #000; }
.pc-led { position: absolute; left: 12%; bottom: 14%; width: 9px; height: 4px; border-radius: 1px; background: #4a5240; }
.pc.on .pc-led { animation: ledBlink .18s steps(2) 9; }
.pc.dial .pc-led { background: #5ef06a; box-shadow: 0 0 6px #5ef06a; animation: ledBlink .35s steps(2) infinite; }
@keyframes ledBlink { 50% { background: #4a5240; box-shadow: none; } }
.pc-eject { position: absolute; right: 12%; bottom: 12%; width: 14px; height: 6px; border-radius: 2px; background: #cfc8b1; box-shadow: inset -1px -1px 0 rgba(0,0,0,.25), inset 1px 1px 0 #fff; }
/* la fente « avale » la disquette : tout ce qui passe sous la fente est caché */
.pc-mouth { position: absolute; left: -40%; right: -40%; bottom: calc(68% - 2px); height: calc(var(--pw) * 1.4); overflow: hidden; pointer-events: none; perspective: 420px; perspective-origin: 50% 100%; }
.pc-disk {
  position: absolute; left: 50%; bottom: 0; width: calc(var(--pw) * .25); aspect-ratio: 90 / 94; margin-left: calc(var(--pw) * -.125);
  background: linear-gradient(160deg, #3b4fc4, #1f2a7a); border-radius: 3px;
  clip-path: polygon(0 0, 90% 0, 100% 8%, 100% 100%, 0 100%);
  transform-origin: 50% 100%; opacity: 0; transform: translateY(-160%);
}
.pd-shutter { position: absolute; top: 0; left: 24%; width: 52%; height: 36%; background: linear-gradient(#e3e6ea, #9aa2ab); border-radius: 0 0 2px 2px; }
.pd-label { position: absolute; left: 12%; right: 12%; bottom: 0; height: 50%; background: repeating-linear-gradient(180deg, #fbf7ec 0 5px, #e9e2cf 5px 6px); border-radius: 2px 2px 0 0; }
.pc.inserting .pc-disk { animation: diskIn .95s cubic-bezier(.45,0,.4,1) forwards; }
@keyframes diskIn {
  0%   { opacity: 0; transform: translateY(-220%) scale(1.5); }
  18%  { opacity: 1; }
  55%  { opacity: 1; transform: translateY(-14%) rotateX(0deg) scale(1.05); }
  70%  { transform: translateY(0) rotateX(62deg) scale(1); }
  100% { opacity: 1; transform: translateY(105%) rotateX(78deg) scale(1); }
}
.pc.zoom .pc-screen .dialup { opacity: 0; transition: opacity .3s .15s; }
.flash { position: fixed; inset: 0; z-index: 80; pointer-events: none; background: #e9fff4; opacity: 0; transition: opacity .45s ease-out; }
.flash.in { opacity: .92; transition: opacity .16s ease-in; }

/* ── collections à thème et succès ──────── */
.seg { display: flex; gap: 6px; background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 4px; }
.seg button { flex: 1; border: 0; background: none; border-radius: 10px; padding: 9px 8px; color: var(--mute); font-weight: 500; font-size: 14px; }
.seg button.on { background: #22274f; color: var(--ink); }
.seg small { font-family: 'VT323', monospace; font-size: 16px; color: var(--acc); margin-left: 4px; }
.sets-intro { margin: 12px 2px 14px; }
.st-list { display: grid; gap: 12px; }
@media (min-width: 720px) { .st-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.st { background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 12px 12px 10px; }
.st.full { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(246,201,69,.25), 0 0 18px rgba(246,201,69,.12); }
.st.full .progress > div { background: var(--gold); }
.st-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.st-ic { font-size: 20px; }
.st-head b { flex: 1; min-width: 0; font-size: 15px; }
.st-n { font-family: 'VT323', monospace; font-size: 20px; color: var(--acc); }
.st-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 6px; margin-top: 10px; }
.st-tile {
  position: relative; aspect-ratio: 1; padding: 0; border-radius: 8px; overflow: hidden;
  border: 2px solid #3a3f6e; background: #0f1226; display: grid; place-items: center;
}
.st-tile span { font-size: 20px; }
.st-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.st-tile.rU { border-color: #d9dee6; } .st-tile.rR { border-color: var(--gold); }
.st-tile.rE { border-color: #cd6cff; } .st-tile.rL { border-color: #fff; box-shadow: 0 0 8px rgba(255,255,255,.5); }
.st-tile.missing { border: 2px dashed #353a66; background: #0e1124; color: #4b5080; font-family: 'VT323', monospace; line-height: .9; display: flex; flex-direction: column; justify-content: center; }
.st-tile.missing b { font-size: 22px; font-weight: 400; } .st-tile.missing small { font-size: 11px; }
.st-rw { margin: 9px 0 0; font-size: 12px; color: var(--mute); }
.st.full .st-rw { color: var(--gold); font-weight: 700; }
.ach-list { display: grid; gap: 8px; }
@media (min-width: 720px) { .ach-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ach { display: flex; align-items: center; gap: 12px; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.ach.got { border-color: rgba(246,201,69,.6); }
.ach-ic { width: 38px; height: 38px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px; background: #0f1226; font-size: 18px; color: var(--gold); filter: grayscale(1) opacity(.55); }
.ach.got .ach-ic { filter: none; background: #2b2610; }
.ach-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ach-txt b { font-size: 14px; } .ach-txt small { font-size: 12px; color: var(--mute); }
.ach-txt .progress { height: 6px; margin-top: 3px; }
.ach-rw { flex-shrink: 0; text-align: right; font-family: 'VT323', monospace; font-size: 18px; color: var(--acc); line-height: 1.05; }
.ach-rw small { font-family: 'Space Grotesk', sans-serif; font-size: 11px; color: var(--mute); }
.ach.got .ach-rw { color: var(--gold); font-size: 24px; }
.mi-sets { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 14px 0 0; }
.mi-sets span { font-size: 12px; background: var(--bg2); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; color: var(--mute); }

/* récompense */
.reward { position: fixed; inset: 0; z-index: 75; display: grid; place-items: center; padding: 16px; background: rgba(4,5,12,.84); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.rw-box {
  position: relative; width: min(360px, 100%); max-height: 100%; overflow-y: auto; text-align: center;
  background: linear-gradient(170deg, #1f2452, #12152e); border: 2px solid var(--gold); border-radius: 20px; padding: 26px 20px 20px;
  box-shadow: 0 0 40px rgba(246,201,69,.25), 0 20px 50px rgba(0,0,0,.6); animation: rwPop .5s cubic-bezier(.2,1.4,.4,1);
}
@keyframes rwPop { from { transform: scale(.6) rotate(-4deg); opacity: 0; } }
.rw-icon { position: relative; width: 96px; height: 96px; margin: 0 auto 10px; display: grid; place-items: center; }
.rw-icon::before { /* rayons qui tournent */
  content: ''; position: absolute; inset: -30px; border-radius: 50%;
  background: repeating-conic-gradient(rgba(246,201,69,.32) 0 12deg, transparent 12deg 30deg);
  mask: radial-gradient(circle, #000 25%, transparent 70%); -webkit-mask: radial-gradient(circle, #000 25%, transparent 70%);
  animation: spin 9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.rw-icon span { position: relative; font-size: 56px; color: var(--gold); filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); animation: float 2.4s ease-in-out infinite; }
.rw-kind { margin: 0; font-family: 'VT323', monospace; font-size: 20px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); }
.rw-box h2 { margin: 4px 0 0; font-size: 21px; }
.rw-list { list-style: none; margin: 10px 0 0; padding: 0; text-align: left; display: grid; gap: 6px; max-height: 40vh; overflow-y: auto; }
.rw-list li { display: grid; grid-template-columns: 28px 1fr; column-gap: 8px; align-items: center; background: rgba(255,255,255,.04); border-radius: 10px; padding: 6px 10px; }
.rw-list li span { grid-row: span 2; font-size: 18px; text-align: center; color: var(--gold); }
.rw-list li b { font-size: 13px; } .rw-list li small { font-size: 11px; color: var(--mute); }
.rw-gain { margin: 14px 0 16px; font-family: 'VT323', monospace; font-size: 30px; color: var(--acc); text-shadow: 0 0 10px rgba(94,240,168,.5); }

/* ── Épique / Légendaire : suspense puis explosion ── */
.pull .slot.charging, .pull .slot.lit { z-index: 12 !important; } /* au-dessus du voile (#fx) */
.slot.charging .flip { animation: charge var(--charge, 1500ms) cubic-bezier(.5,0,.9,.6) forwards; cursor: default; }
@keyframes charge {
  0%   { transform: none; }
  15%  { transform: translate(-1px, 0) rotate(-.4deg) scale(1.01); }
  30%  { transform: translate(2px, -1px) rotate(.6deg) scale(1.02); }
  45%  { transform: translate(-3px, 1px) rotate(-1deg) scale(1.03); }
  60%  { transform: translate(4px, -2px) rotate(1.4deg) scale(1.045); }
  72%  { transform: translate(-5px, 2px) rotate(-1.8deg) scale(1.06); }
  82%  { transform: translate(6px, -2px) rotate(2.2deg) scale(1.07); }
  90%  { transform: translate(-6px, 3px) rotate(-2.4deg) scale(1.08); }
  96%  { transform: translate(5px, -3px) rotate(2deg) scale(1.09); }
  100% { transform: scale(1.1); }
}
.slot.charging .flip-back::after { /* la carte se remplit de lumière */
  content: ''; position: absolute; inset: -6%; border-radius: 8%; pointer-events: none;
  background: radial-gradient(circle, #fff 0%, rgba(255,255,255,.75) 35%, transparent 70%);
  animation: chargeLight var(--charge, 1500ms) ease-in forwards;
}
.slot.charging-E .flip-back::after { background: radial-gradient(circle, #fff 0%, rgba(205,108,255,.8) 40%, transparent 72%); }
@keyframes chargeLight { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1.05); } }
.slot.charging-L .card-back { animation: rainbowGlow .35s linear infinite; }

.fx {
  position: fixed; inset: 0; z-index: 11; pointer-events: none; opacity: 0; transition: opacity .5s;
  background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), transparent calc(var(--s, 300px) * .45), rgba(3,4,10,.86) calc(var(--s, 300px) * 1.1));
}
.fx.on { opacity: 1; transition: opacity .9s; }
.fx::before { /* rayons arc-en-ciel derrière la carte */
  content: ''; position: absolute; left: var(--x, 50%); top: var(--y, 50%); width: calc(var(--s, 300px) * 3.2); aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255,95,109,.85) 0 7deg, transparent 7deg 20deg, rgba(255,195,113,.8) 20deg 27deg, transparent 27deg 40deg, rgba(94,240,168,.8) 40deg 47deg, transparent 47deg 60deg, rgba(179,136,255,.85) 60deg 67deg, transparent 67deg 80deg);
  mask: radial-gradient(circle, #000 18%, transparent 62%); -webkit-mask: radial-gradient(circle, #000 18%, transparent 62%);
  animation: fxSpin 6s linear infinite;
}
@keyframes fxSpin { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(360deg); } }

.confetti { position: fixed; z-index: 40; width: 0; height: 0; pointer-events: none; }
.confetti i { position: absolute; left: 0; top: 0; opacity: 0; animation: confetti 1.5s cubic-bezier(.15,.75,.35,1) forwards; image-rendering: pixelated; }
@keyframes confetti {
  0%   { opacity: 1; transform: translate(0, 0) rotate(0); }
  55%  { opacity: 1; transform: translate(var(--dx), var(--dy)) rotate(calc(var(--rot) * .6)); }
  100% { opacity: 0; transform: translate(calc(var(--dx) * 1.15), calc(var(--dy) + 140px)) rotate(var(--rot)); }
}
.legend-banner {
  position: fixed; z-index: 41; pointer-events: none; white-space: nowrap;
  font-family: 'VT323', monospace; font-size: clamp(30px, 10vw, 48px); letter-spacing: 2px; line-height: 1;
  transform: translate(-50%, -50%); animation: banner 2.2s cubic-bezier(.2,1.3,.4,1) forwards;
}
.lb-L {
  background: linear-gradient(90deg, #ff5f6d, #ffc371, #5ef0a8, #4fc3f7, #b388ff, #ff5f6d); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 10px rgba(255,255,255,.6)) drop-shadow(0 3px 0 #000);
  animation: banner 2.2s cubic-bezier(.2,1.3,.4,1) forwards, bannerHue 1s linear infinite;
}
.lb-E { color: #f0c8ff; font-size: clamp(24px, 7vw, 36px); text-shadow: 0 0 12px #cd6cff, 0 3px 0 #000; }
@keyframes banner {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(-6deg); }
  14%  { opacity: 1; transform: translate(-50%, -50%) scale(1.15) rotate(2deg); }
  24%  { transform: translate(-50%, -50%) scale(1) rotate(0); }
  78%  { opacity: 1; transform: translate(-50%, -60%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -110%) scale(.95); }
}
@keyframes bannerHue { to { background-position: 200% 0; } }
/* secousse à l'impact : propriété « translate » séparée, pour ne pas gêner la rotation du retournement */
.flip.quake { animation: quake .45s linear; }
@keyframes quake {
  10% { translate: -8px 4px; } 20% { translate: 7px -5px; } 30% { translate: -6px 3px; }
  45% { translate: 5px -2px; } 60% { translate: -3px 2px; } 80% { translate: 2px -1px; } 100% { translate: 0 0; }
}

/* ── sauvegarde en ligne ─────────────────── */
.save-box { background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin-bottom: 18px; }
.save-box h3 { margin: 0 0 10px; font-size: 15px; }
.sv-code { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sv-code code {
  font-family: 'VT323', monospace; font-size: 30px; letter-spacing: 2px; color: var(--acc);
  background: #0b0e1d; border: 1px dashed var(--acc); border-radius: 10px; padding: 4px 12px; text-shadow: 0 0 8px rgba(94,240,168,.45);
  user-select: all;
}
.sv-code .btn { padding: 9px 14px; }
.sv-status { margin: 10px 0 0; font-size: 13px; }
.sv-conflict { margin-top: 10px; background: #2b1a10; border: 1px solid #a8642a; border-radius: 10px; padding: 10px 12px; }
.sv-conflict p { margin: 0 0 10px; font-size: 13px; }
.sv-row { display: flex; gap: 8px; flex-wrap: wrap; }
.sv-row .btn { padding: 10px 14px; }
.sv-restore { margin-top: 12px; font-size: 13px; }
.sv-restore summary { cursor: pointer; color: var(--mute); text-decoration: underline; text-underline-offset: 3px; }
.sv-restore .sv-row { margin-top: 10px; }
.sv-restore input {
  flex: 1; min-width: 0; font-family: 'VT323', monospace; font-size: 24px; letter-spacing: 2px; text-transform: uppercase;
  background: #0b0e1d; color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px;
}
.sv-restore input:focus { outline: none; border-color: var(--acc); }

/* ── écran Boosters : tout est centré verticalement entre l'en-tête et la barre d'onglets ── */
#view-booster.active { display: flex; flex-direction: column; min-height: calc(100svh - 182px); }
#view-booster > .stage:not(#booster-connect) { flex: 1; justify-content: center; padding-top: 0; padding-bottom: 3vh; } /* un peu au-dessus du centre exact : plus naturel à l'œil */

/* ── téléphone : les 5 cartes du booster tiennent dans l'écran (2 + 2 + 1, sans défiler) ──
   largeur limitée par la hauteur disponible ; les réactions ❤️/🤷 se font pendant la révélation ou en ouvrant la carte */
@media (max-width: 559px) {
  .pull.grid { --gw: min(calc(50% - 7px), calc((100svh - 310px) / 3 * .716)); gap: 10px 12px; }
  .pull.grid .slot { width: var(--gw); }
  .pull.grid .react { display: none; }
  .pull.grid .badge { font-size: 13px; padding: 0 5px; top: -8px; right: -4px; }
  #booster-reveal .pull-sum { margin-bottom: 12px; }
  #booster-reveal .pull-sum::after { content: 'Touchez une carte pour l’agrandir'; display: block; font-family: 'Space Grotesk', sans-serif; font-size: 12px; color: var(--mute); margin-top: 2px; }
  #booster-reveal .pull-actions { margin-top: 14px; flex-wrap: nowrap; }
  #booster-reveal .pull-actions .btn { padding: 11px 14px; font-size: 15px; white-space: nowrap; }
}

/* ── fond animé (bg.js) : derrière tout le contenu ── */
#bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; transition: opacity .8s; }
#bg.calm { opacity: .3; }
#bg.soft { opacity: .55; }

/* ── signaler un problème / mes données ── */
.fb { display: flex; flex-direction: column; gap: 8px; background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
.fb-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.fb-kinds label { display: flex; align-items: center; gap: 6px; font-size: 13px; background: #0b0e1d; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.fb-kinds input { accent-color: var(--acc); margin: 0; }
.fb textarea, .fb input:not([type]) {
  font: inherit; font-size: 14px; color: var(--ink); background: #0b0e1d; border: 1px solid var(--line); border-radius: 10px; padding: 10px; resize: vertical;
}
.fb textarea:focus, .fb input:focus { outline: none; border-color: var(--acc); }
.fb .btn { align-self: flex-start; }
.share { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 12px; cursor: pointer; }
.share input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--acc); flex-shrink: 0; }
.stats .mi-small a { color: var(--mute); }

/* ── pub récompensée ── */
.ad-btn { margin-top: 18px; font-size: 14px; border-color: #3b4fc4; }
.ad-btn b { color: var(--acc); }
.ad-btn small { display: block; font-size: 11px; color: var(--mute); font-weight: 400; margin-top: 2px; }
.ad-btn + .linkish { margin-top: 12px; }
.ad-sim { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,.92); }
.ad-sim-box { width: min(420px, 100%); text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.ad-sim-tag { margin: 0; font-family: 'VT323', monospace; font-size: 18px; letter-spacing: 2px; color: var(--mute); }
.ad-sim-screen { width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; border: 2px dashed var(--line); display: grid; place-content: center; gap: 8px; padding: 16px; color: var(--mute); }
.ad-sim-screen span { font-size: 48px; }
.ad-sim-count { margin: 0; font-size: 15px; }
.ad-sim-count b { font-family: 'VT323', monospace; font-size: 24px; color: var(--acc); }