/* AniList Wrapped — styles */

/* ============================================================
   AniList Wrapped — fichier unique, aucun serveur requis.
   Réglages : objet CONFIG au début du <script>.
   Textes : objet T (en / fr / es) dans le <script>.
   ============================================================ */
:root{
  --night:#1B1640;
  --night-2:#262057;
  --paper:#F3F1FA;
  --sakura:#FF6FA3;
  --sky:#45C3FF;
  --yolk:#FFC93C;
  --mint:#3FE0B0;
  --display:"Dela Gothic One", "Arial Black", system-ui, sans-serif;
  --body:"Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--night);color:var(--paper);
  font-family:var(--body);font-size:17px;line-height:1.45;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--yolk);outline-offset:3px}
img{display:block}
.hidden{display:none !important}

/* ---------- Trame façon manga (screentone) ---------- */
.tone{position:relative;isolation:isolate}
.tone::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  width:min(120vw,720px);aspect-ratio:1;right:-28%;top:-18%;
  background-image:radial-gradient(circle, var(--tone-c, var(--sakura)) 32%, transparent 34%);
  background-size:14px 14px;
  -webkit-mask-image:radial-gradient(circle at 60% 40%, #000 0 22%, transparent 62%);
          mask-image:radial-gradient(circle at 60% 40%, #000 0 22%, transparent 62%);
  opacity:var(--tone-o, .55);
  animation:drift 22s linear infinite;
}
@keyframes drift{to{background-position:140px 70px}}

/* ---------- Accueil ---------- */
#home{min-height:100dvh;display:flex;align-items:center;padding:40px 24px}
.home-inner{width:100%;max-width:560px;margin:0 auto}
.home-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:28px}
.home-top .langs{margin-left:auto}
.visits{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:#CFC9EA;font-variant-numeric:tabular-nums;animation:titleIn .6s ease both}
.visits svg{width:18px;height:18px;color:var(--sky)}
.langs{display:inline-flex;gap:4px;background:var(--night-2);padding:4px;border-radius:99px}
.langs button{border:0;background:transparent;border-radius:99px;padding:6px 14px;font-weight:800;font-size:14px;cursor:pointer;color:#CFC9EA}
.langs button[aria-pressed="true"]{background:var(--paper);color:var(--night)}
.home-title{
  font-family:var(--display);font-weight:400;
  font-size:clamp(40px, 11vw, 72px);line-height:.95;letter-spacing:-.01em;
  margin-bottom:28px;
}
.home-title span{display:block;animation:titleIn .8s cubic-bezier(.2,.9,.3,1.15) both}
.home-title span:last-child{color:var(--sakura);animation-delay:.12s}
@keyframes titleIn{from{opacity:0;transform:translateY(40%) rotate(3deg)}}
.home-lead{max-width:44ch;margin-bottom:32px;color:#D9D4F0}
form.wrap-form{display:grid;grid-template-columns:1fr;gap:12px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:14px;font-weight:600;color:#CFC9EA}
.field input,.field select{
  height:56px;border-radius:14px;border:2px solid #4A4290;background:var(--night-2);
  padding:0 16px;font-size:18px;width:100%;
}
.field input::placeholder{color:#8C84BF}
.field input:focus,.field select:focus{border-color:var(--sky);outline:none}
.btn{
  height:56px;border:0;border-radius:14px;cursor:pointer;
  background:var(--sakura);color:var(--night);
  font-family:var(--display);font-size:18px;padding:0 22px;
  transition:transform .12s ease, filter .12s ease, box-shadow .12s ease;
  box-shadow:0 5px 0 #B63A6C;
}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 #B63A6C}
.btn[disabled]{opacity:.5;cursor:wait}
.btn.ghost{background:transparent;color:inherit;border:2px solid currentColor;box-shadow:none}
.btn.ghost:active{transform:scale(.97)}
.home-note{margin-top:22px;font-size:14px;color:#A9A2D3;max-width:52ch}
.credit{margin-top:28px;font-size:15px;font-weight:600;color:#CFC9EA}
.credit a{color:var(--sakura);text-decoration:none;font-weight:800;border-bottom:2px solid currentColor}
.credit a:hover{color:var(--yolk)}
.credit.small{font-size:12px;margin-top:40px;opacity:.85}
.credit.small a{border-bottom-width:1px}
/* crédit en bas de chaque story, dans la couleur du texte de la story */
.story-credit{
  position:absolute;z-index:6;left:0;right:0;bottom:max(10px, env(safe-area-inset-bottom));margin:0;
  text-align:center;font-size:11px;font-weight:600;color:var(--cur-fg, #fff);opacity:.6;pointer-events:none;
}
.story-credit a{color:inherit;border-bottom:1px solid currentColor;font-weight:800;pointer-events:auto}
.story-credit a:hover{color:inherit;opacity:.8}
.error{
  margin-top:18px;padding:14px 16px;border-radius:14px;
  background:#3A1E4A;border-left:5px solid var(--sakura);font-size:16px;
  animation:shake .4s ease;
}
@keyframes shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

/* ---------- Chargement / file d'attente ---------- */
#loading{min-height:100dvh;display:flex;align-items:center;padding:48px 24px}
.load-inner{width:100%;max-width:480px;margin:0 auto}
.load-title{font-family:var(--display);font-size:clamp(34px,8vw,52px);line-height:1;margin-bottom:12px}
.load-quip{font-size:18px;font-weight:600;color:var(--yolk);min-height:1.5em;margin-bottom:26px}
.load-quip span{display:inline-block;animation:quipSwap .45s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes quipSwap{from{opacity:0;transform:translateY(12px)}}
.steps{list-style:none;display:grid;gap:12px;margin-bottom:26px}
.steps li{display:flex;gap:12px;align-items:center;color:#8C84BF}
.steps li::before{content:"";width:14px;height:14px;border-radius:50%;border:2px solid currentColor;flex:none}
.steps li.doing{color:var(--paper)}
.steps li.doing::before{border-color:var(--yolk);background:var(--yolk);animation:pulse 1s ease-in-out infinite}
.steps li.done{color:#CFC9EA}
.steps li.done::before{background:var(--mint);border-color:var(--mint)}
@keyframes pulse{50%{transform:scale(.6)}}
.meter{height:12px;border-radius:99px;background:var(--night-2);overflow:hidden}
.meter i{
  display:block;height:100%;width:0;transition:width .3s ease;
  background:repeating-linear-gradient(-45deg, var(--sky) 0 12px, #7FD6FF 12px 24px);
  background-size:34px 34px;animation:stripes .8s linear infinite;
}
@keyframes stripes{to{background-position:34px 0}}
.queue-msg{margin-top:16px;font-size:15px;color:var(--yolk);min-height:1.4em}

/* ---------- Stories ---------- */
#stories{
  position:fixed;inset:0;z-index:10;background:#0E0B24;
  display:flex;align-items:center;justify-content:center;
}
.frame{
  position:relative;overflow:hidden;
  height:100dvh;width:100vw;
  user-select:none;-webkit-user-select:none;touch-action:manipulation;
}
@media (min-width:600px){
  .frame{height:min(94dvh, 900px);width:auto;aspect-ratio:9/16;border-radius:22px;box-shadow:0 30px 80px rgba(0,0,0,.45)}
}
.bars{position:absolute;z-index:5;top:max(12px, env(safe-area-inset-top));left:12px;right:12px;display:flex;gap:4px}
.bars span{flex:1;height:4px;border-radius:4px;background:rgba(255,255,255,.3);overflow:hidden}
.bars i{display:block;height:100%;width:0;background:#fff}
.ctrl{position:absolute;z-index:6;top:calc(max(12px, env(safe-area-inset-top)) + 14px);right:10px;display:flex;gap:6px}
.ctrl button{
  min-width:40px;height:40px;border-radius:99px;border:0;cursor:pointer;
  background:rgba(0,0,0,.28);color:#fff;display:grid;place-items:center;
  font-weight:800;font-size:13px;padding:0 10px;
}
.ctrl svg{width:18px;height:18px}
#slides{position:absolute;inset:0}
.slide{
  position:absolute;inset:0;display:none;flex-direction:column;justify-content:flex-end;
  padding:84px 28px 46px;background:var(--bg);color:var(--fg);overflow:hidden;
}
.slide.on{display:flex;z-index:2}
.slide.out{display:flex;z-index:1}
.slide.enter{animation:wipe .6s cubic-bezier(.7,0,.2,1) both}
.slide.enter-back{animation:fadeIn .35s ease both}
@keyframes wipe{
  from{clip-path:circle(0% at var(--ox,85%) var(--oy,50%))}
  to{clip-path:circle(150% at var(--ox,85%) var(--oy,50%))}
}
@keyframes fadeIn{from{opacity:0}}
.slide > *{position:relative;z-index:1}
.slide .lead{font-size:19px;font-weight:600;margin-bottom:6px;max-width:30ch}
.slide .h{font-family:var(--display);font-weight:400;font-size:clamp(34px, 9.4vw, 46px);line-height:1.04;margin-bottom:14px}
.slide .h.xl{font-size:clamp(44px, 13vw, 64px)}
.slide .h .w{display:inline-block}
.slide .p{font-size:17px;max-width:34ch;opacity:.92}
.slide .p + .p{margin-top:10px}
.num{font-family:var(--display);font-size:clamp(72px, 23vw, 120px);line-height:.9;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.num.m{font-size:clamp(46px, 13vw, 64px)}
.unit{font-size:20px;font-weight:600;margin-top:4px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:22px 0 18px}
.pair > div{min-width:0}
.spacer{flex:1}
.cover{border-radius:10px;object-fit:cover;background:rgba(0,0,0,.2);flex:none}
.adult{filter:blur(14px) saturate(.6)}
.avatar{width:132px;height:132px;border-radius:50%;object-fit:cover;border:5px solid var(--fg);margin-bottom:26px;background:var(--night-2)}

/* décor positionné en absolu (après .slide > * pour garder la priorité) */
.slide > .top-art{position:absolute;inset:0 0 auto 0;height:52%;z-index:0;overflow:hidden}
.top-art img{width:100%;height:100%;object-fit:cover}
.top-art::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom, transparent 30%, var(--bg) 96%)}
.slide > .band{
  position:absolute;left:-15%;right:-15%;top:var(--bt,16%);z-index:0;
  transform:rotate(-7deg);background:var(--fg);color:var(--bg);
  font-family:var(--display);font-size:26px;line-height:1;padding:12px 0;
  white-space:nowrap;overflow:hidden;
}
.band-in{display:inline-flex;animation:marq 18s linear infinite}
.band-in span{white-space:pre}
@keyframes marq{to{transform:translateX(-50%)}}
.slide > .confetti{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.confetti i{position:absolute;top:-24px;width:10px;height:16px;border-radius:2px;opacity:0}
.slide.speed::after{
  content:"";position:absolute;inset:-40%;z-index:0;pointer-events:none;
  background:repeating-conic-gradient(from 0deg at 50% 50%, var(--fg) 0deg .7deg, transparent .7deg 7deg);
  opacity:.09;animation:spin 90s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* bulle façon manga pour les blagues */
.quip{
  align-self:flex-start;position:relative;margin-top:22px;max-width:30ch;
  background:#fff;color:#1B1640;border:3px solid #1B1640;border-radius:22px;
  padding:10px 16px;font-weight:800;font-size:16px;line-height:1.3;
  transform:rotate(-2deg);box-shadow:4px 4px 0 #1B1640;
}
.quip::before{
  content:"";position:absolute;left:28px;top:-11px;width:18px;height:18px;background:#fff;
  border-left:3px solid #1B1640;border-top:3px solid #1B1640;transform:rotate(45deg) skew(8deg, 8deg);
}

/* histogramme mensuel */
.months{display:grid;grid-template-columns:repeat(var(--cols,12),1fr);gap:5px;align-items:end;height:200px;margin:8px 0 22px}
.months div{display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end}
.months b{display:block;width:100%;border-radius:6px 6px 2px 2px;background:var(--fg);opacity:.3;min-height:3px;transform-origin:bottom}
.months div.best b{opacity:1}
.months small{font-size:12px;font-weight:600;opacity:.75}
/* listes */
.rank{list-style:none;display:grid;gap:12px;margin-top:10px}
.rank li{display:flex;gap:14px;align-items:center}
.rank .r{font-family:var(--display);font-size:30px;width:30px;text-align:center;flex:none}
.rank .t{font-weight:800;font-size:17px;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rank .s{font-size:14px;opacity:.8}
.share{list-style:none;display:grid;gap:12px;margin-top:8px}
.share li{display:grid;gap:5px}
.share .row{display:flex;justify-content:space-between;font-weight:600}
.share .track{height:10px;border-radius:99px;background:color-mix(in srgb, var(--fg) 20%, transparent)}
.share .track i{display:block;height:100%;border-radius:99px;background:var(--fg);transform-origin:left}
.facts{display:grid;gap:14px;margin-top:6px}
.facts div{border-top:2px solid color-mix(in srgb, var(--fg) 35%, transparent);padding-top:10px}
.facts b{display:block;font-family:var(--display);font-size:26px;line-height:1.1;font-weight:400}
.facts span{font-size:15px;opacity:.85}
.chip-row{display:flex;gap:12px;align-items:center;margin-top:16px}
.grid-covers{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:10px 0 18px}
.grid-covers img{width:100%;aspect-ratio:2/3;border-radius:10px;object-fit:cover}
.badge{
  display:inline-block;font-family:var(--display);font-size:clamp(40px, 12vw, 58px);line-height:1;
  background:var(--fg);color:var(--bg);padding:14px 18px 16px;border-radius:18px;transform:rotate(-2deg);
  margin:4px 0 16px;align-self:flex-start;white-space:nowrap;box-shadow:6px 6px 0 color-mix(in srgb, var(--fg) 40%, transparent);
}
/* version compacte quand le contenu déborde (petits écrans) */
.slide.tight .h.xl{font-size:clamp(36px, 10vw, 50px)}
.slide.tight .num{font-size:clamp(60px, 18vw, 92px)}
.slide.tight .num.m{font-size:clamp(38px, 11vw, 52px)}
.slide.tight .p{font-size:15px}
.slide.tight .quip{font-size:14px;margin-top:14px}
.slide.tight .rank{gap:8px}
.slide.tight .rank .cover{width:44px !important;height:63px !important}
.slide.tight .months{height:140px}
.slide.tight .facts{gap:8px}
.slide.tight .facts b{font-size:21px}
.slide.tight .grid-covers{gap:6px}
/* récap */
.slide.recap{justify-content:flex-start;padding-top:72px;gap:14px}
.recap .preview{flex:1;min-height:0;display:flex;justify-content:center;align-items:center}
.recap .preview img{max-height:100%;max-width:100%;border-radius:14px;box-shadow:0 14px 40px rgba(0,0,0,.4)}
.recap .actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.recap .actions .btn{height:50px;font-size:15px;padding:0 10px;white-space:nowrap}
.recap .wait{opacity:.8;font-size:15px}

/* ---------- Animations des slides ---------- */
.slide.on [data-r]{animation:rise .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 110ms + 250ms)}
.slide.on .h .w{animation:wordIn .6s cubic-bezier(.2,.9,.3,1.25) both;animation-delay:calc(var(--w,0) * 70ms + 220ms)}
.slide.on .months b{animation:grow .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 45ms + 350ms)}
.slide.on .months div.best b{animation:grow .7s cubic-bezier(.2,.8,.2,1) both, bounce .5s ease 1.3s}
.slide.on .share .track i{animation:growx .8s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 90ms + 400ms)}
.slide.on .rank li{animation:flyIn .6s cubic-bezier(.2,.9,.3,1.15) both;animation-delay:calc(var(--i,0) * 120ms + 250ms)}
.slide.on .quip{animation:pop .55s cubic-bezier(.3,1.6,.5,1) both;animation-delay:var(--qd, 1.5s)}
.slide.on .badge{animation:stamp .55s cubic-bezier(.3,1.5,.5,1) both;animation-delay:.45s}
.slide.on .top-art img{animation:kenburns 9s ease-out both}
.slide.on .avatar{animation:spinIn .8s cubic-bezier(.2,.9,.3,1.2) both;animation-delay:.15s}
.slide.on .grid-covers img{animation:flip .6s cubic-bezier(.2,.9,.3,1.15) both;animation-delay:calc(var(--i,0) * 90ms + 200ms)}
.slide.on .confetti i{animation:fall 2.8s cubic-bezier(.3,.6,.5,1) forwards;animation-delay:calc(var(--d) + .8s)}
.num.punch{animation:punch .35s ease}
@keyframes rise{from{opacity:0;transform:translateY(22px)}}
@keyframes wordIn{from{opacity:0;transform:translateY(70%) rotate(5deg)}}
@keyframes grow{from{transform:scaleY(0)}}
@keyframes growx{from{transform:scaleX(0)}}
@keyframes bounce{40%{transform:scaleY(1.08)}70%{transform:scaleY(.97)}}
@keyframes flyIn{from{opacity:0;transform:translateX(70px) rotate(6deg)}}
@keyframes pop{from{opacity:0;transform:rotate(-10deg) scale(.3)}}
@keyframes stamp{from{opacity:0;transform:scale(2.6) rotate(-16deg)}}
@keyframes kenburns{from{transform:scale(1.18)}}
@keyframes spinIn{from{opacity:0;transform:scale(.3) rotate(-120deg)}}
@keyframes flip{from{opacity:0;transform:perspective(600px) rotateY(80deg)}}
@keyframes punch{50%{transform:scale(1.07)}}
@keyframes fall{
  0%{opacity:1;transform:translate(0,0) rotate(0)}
  100%{opacity:1;transform:translate(var(--x), 1100px) rotate(calc(var(--r) + 600deg))}
}
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation-duration:.001ms !important;animation-delay:0s !important;animation-iteration-count:1 !important;transition:none !important}
  .confetti{display:none}
}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============================================================
   Ajouts : modes, compteurs, quiz, personnages, duo, options de carte
   ============================================================ */
.home-pills{display:flex;flex-wrap:wrap;gap:14px}
.seg{display:inline-flex;gap:4px;background:var(--night-2);padding:4px;border-radius:99px;margin-bottom:18px}
.seg button{border:0;background:transparent;border-radius:99px;padding:8px 18px;font-weight:800;font-size:15px;cursor:pointer;color:#CFC9EA}
.seg button[aria-pressed="true"]{background:var(--sakura);color:var(--night)}
.duo-only{display:none}
.is-duo .duo-only{display:flex}
.optin{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:#CFC9EA;cursor:pointer;margin-top:4px}
.optin input{width:20px;height:20px;accent-color:var(--sakura);flex:none;margin-top:1px}
.is-duo .optin{display:none}

/* quiz */
.quiz{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0 6px}
.quiz button{
  border:3px solid transparent;border-radius:14px;background:rgba(0,0,0,.18);padding:0;cursor:pointer;overflow:hidden;
  display:flex;flex-direction:column;text-align:left;color:inherit;transition:transform .15s ease, border-color .15s ease;
}
.quiz button:hover{transform:translateY(-3px)}
.quiz img,.quiz .ph{width:100%;aspect-ratio:2/3;object-fit:cover;display:block;background:rgba(0,0,0,.2)}
.quiz span{font-size:12px;font-weight:800;line-height:1.2;padding:6px 7px 8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.quiz.done button{cursor:default;transform:none}
.quiz.done button:not(.right){opacity:.45}
.quiz button.right{border-color:var(--fg);opacity:1;animation:punch .4s ease}
.quiz button.wrong{animation:shake .4s ease}
.quiz-result{font-family:var(--display);font-size:24px;line-height:1.15;min-height:1.2em;margin-top:8px}
.slide.on .quiz button{animation:rise .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 110ms + 300ms)}

/* personnages */
.chars{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:10px 0 14px}
.chars figure{margin:0;min-width:0}
.chars img,.chars .ph{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:12px;display:block;background:rgba(0,0,0,.18)}
.chars figcaption{font-size:12px;font-weight:800;line-height:1.2;margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chars small{display:block;font-weight:600;opacity:.75;overflow:hidden;text-overflow:ellipsis}
.slide.on .chars figure{animation:flip .6s cubic-bezier(.2,.9,.3,1.15) both;animation-delay:calc(var(--i,0) * 90ms + 200ms)}

/* duo */
.duo-avatars{display:flex;margin-bottom:24px}
.duo-avatars img,.duo-avatars .ph{width:116px;height:116px;border-radius:50%;object-fit:cover;border:5px solid var(--fg);background:var(--night-2)}
.duo-avatars > :last-child{margin-left:-26px}
.slide.on .duo-avatars > :first-child{animation:slideL .7s cubic-bezier(.2,.9,.3,1.2) both .1s}
.slide.on .duo-avatars > :last-child{animation:slideR .7s cubic-bezier(.2,.9,.3,1.2) both .1s}
@keyframes slideL{from{opacity:0;transform:translateX(-90px) rotate(-20deg)}}
@keyframes slideR{from{opacity:0;transform:translateX(90px) rotate(20deg)}}
.legend{display:flex;gap:16px;font-size:14px;font-weight:800;margin:4px 0 10px}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.vs{list-style:none;display:grid;gap:12px}
.vs li{display:grid;gap:4px}
.vs .row{font-weight:700}
.vs .track{height:8px;border-radius:99px;background:color-mix(in srgb, var(--fg) 18%, transparent)}
.vs .track i{display:block;height:100%;border-radius:99px;transform-origin:left}
.slide.on .vs .track i{animation:growx .8s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 90ms + 400ms)}

/* profil compatible */
.match-card{display:flex;align-items:center;gap:16px;margin:16px 0 8px}
.match-card img,.match-card .ph{width:84px;height:84px;border-radius:50%;object-fit:cover;border:4px solid var(--fg);background:rgba(0,0,0,.2);flex:none}
.match-card b{display:block;font-family:var(--display);font-weight:400;font-size:28px;line-height:1.05;overflow-wrap:anywhere}
.match-card span{font-weight:700}
.slide .btn.match-go{align-self:flex-start;margin-top:14px;background:var(--fg);color:var(--bg);box-shadow:none;height:50px;font-size:16px}
.match-wait{font-weight:700;opacity:.85}

/* options de la carte */
.card-opts{display:flex;justify-content:space-between;align-items:center;gap:10px}
.swatches{display:flex;gap:8px}
.swatches button{width:28px;height:28px;border-radius:50%;border:3px solid transparent;cursor:pointer;background:var(--c);box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.swatches button[aria-pressed="true"]{border-color:#fff}
.fmt{display:inline-flex;gap:2px;background:rgba(255,255,255,.12);padding:3px;border-radius:99px}
.fmt button{border:0;background:transparent;border-radius:99px;padding:5px 11px;font-weight:800;font-size:13px;cursor:pointer;color:#fff}
.fmt button[aria-pressed="true"]{background:#fff;color:var(--night)}
@media (max-width:360px){.swatches button{width:24px;height:24px}}