/* ══════════════════════════════════════════════════════════
   ROXI GACHA — styles ♡
   Raretés : C (commune) · R (rare) · SR (super rare) · UR (ultra)
   ══════════════════════════════════════════════════════════ */

/* couleurs de rareté */
:root{
  --rar-c:  #b48ea6;
  --rar-r:  #5aa2ff;
  --rar-sr: #ff2d8f;
  --rar-ur: #ffb400;
}

/* fenêtre gacha un peu plus large */
.win--gacha{ box-shadow:6px 6px 0 var(--shadow), 0 0 26px #ff6ec755; }
.win--gacha .win__bar{ background:linear-gradient(90deg,#ff4fa3,#8d5cff); }
.win--gacha .win__body{ padding:10px 12px 14px; max-height:68vh; }

/* barre de monnaies */
.g-cur{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:#fff; border:3px solid var(--ink); border-radius:12px;
  padding:6px 10px; margin-bottom:8px; font-size:1.1rem;
}
.g-cur b{ font-family:var(--font-pixel); font-size:.85rem; color:var(--ink); }
.g-cur .g-sep{ flex:1; }
.g-rates-btn{
  background:var(--pink-soft); border:2px solid var(--ink); border-radius:8px;
  font-size:.85rem; color:var(--ink); padding:2px 8px;
}
.g-rates-btn:hover{ background:var(--pink-2); color:#fff; }

/* onglets */
.g-tabs{ display:flex; gap:6px; margin-bottom:10px; }
.g-tabs button{
  flex:1; background:#fff; border:3px solid var(--ink); border-radius:10px;
  font-family:var(--font-ui); font-size:1rem; font-weight:600; color:var(--ink);
  padding:.45em .3em; box-shadow:2px 2px 0 var(--shadow);
}
.g-tabs button.on{ background:linear-gradient(var(--pink-2),var(--pink)); color:#fff; box-shadow:none; transform:translate(2px,2px); }
.g-tab[hidden]{ display:none; }

/* ── bannière de pull ── */
.g-banner{
  position:relative; overflow:hidden; text-align:center;
  background:linear-gradient(135deg,#ff9ed6,#b18cff 60%,#8fd8ff);
  border:3px solid var(--ink); border-radius:14px; padding:16px 12px 12px;
  margin-bottom:10px;
}
.g-banner::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at 18% 30%, #fff5 0 2px, transparent 3px) 0 0/46px 46px;
}
.g-banner__ava{
  width:74px; height:74px; border-radius:50%; object-fit:cover;
  border:4px solid #fff; box-shadow:0 0 0 3px var(--pink), 0 4px 14px #0003;
}
.g-banner__title{ font-family:var(--font-pixel); font-size:.9rem; color:#fff; text-shadow:2px 2px 0 var(--pink), 3px 3px 0 #0003; margin-top:8px; letter-spacing:1px; }
.g-banner__sub{ font-size:.95rem; color:#fff; text-shadow:1px 1px 0 #0004; }

/* jauges de pity */
.g-pity{ display:grid; gap:5px; margin:10px 0; }
.g-pity .row{ display:grid; grid-template-columns:86px 1fr 58px; align-items:center; gap:8px; font-size:.9rem; color:var(--ink); }
.g-pity .row b{ font-family:var(--font-pixel); font-size:.6rem; }
.g-pity .track{ height:12px; background:#fff; border:2px solid var(--ink); border-radius:8px; overflow:hidden; }
.g-pity .fill{ height:100%; background:linear-gradient(90deg,var(--pink-2),var(--pink)); transition:width .3s; }
.g-pity .fill.ur{ background:linear-gradient(90deg,#ffd35c,#ffb400); }

/* boutons de pull */
.g-pulls{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.g-free{ grid-column:1 / -1; }
.btn--free{
  background:linear-gradient(#ffe38a,var(--gold)); color:#7a4a00;
  animation:free-glow 1.6s ease-in-out infinite;
}
@keyframes free-glow{ 50%{ filter:brightness(1.12); } }
.btn--free:disabled{ animation:none; filter:grayscale(.55); opacity:.75; cursor:not-allowed; }
.btn--free:disabled:active{ transform:none; box-shadow:3px 3px 0 var(--shadow); }
.g-premium{
  margin-top:10px; padding:10px; border:3px dashed var(--rar-ur); border-radius:12px;
  background:linear-gradient(135deg,#fff6e3,#ffeef9);
}
.g-premium__head{ display:flex; align-items:center; justify-content:center; gap:6px; font-family:var(--font-pixel); font-size:.62rem; color:#7a4a00; margin-bottom:8px; }
.g-premium .g-pulls{ margin:0; }

/* ── collection ── */
.g-progress{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.g-progress .track{ flex:1; height:16px; background:#fff; border:3px solid var(--ink); border-radius:10px; overflow:hidden; }
.g-progress .fill{ height:100%; background:linear-gradient(90deg,var(--pink-2),var(--pink)); transition:width .4s; }
.g-progress b{ font-family:var(--font-pixel); font-size:.72rem; color:var(--pink); white-space:nowrap; }
.g-complete{
  display:none; text-align:center; font-family:var(--font-pixel); font-size:.7rem; color:#7a4a00;
  background:linear-gradient(#ffe38a,var(--gold)); border:3px solid var(--ink); border-radius:12px;
  padding:8px; margin-bottom:10px; box-shadow:2px 2px 0 var(--shadow);
}
.g-complete.on{ display:block; animation:pop .3s ease; }

.g-rarsec{ margin-bottom:12px; }
.g-rarsec h4{ font-family:var(--font-pixel); font-size:.62rem; letter-spacing:1px; margin:0 0 6px 2px; }
.g-rarsec.rc h4{ color:var(--rar-c); } .g-rarsec.rr h4{ color:var(--rar-r); }
.g-rarsec.rsr h4{ color:var(--rar-sr); } .g-rarsec.rur h4{ color:var(--rar-ur); }
.g-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }

/* mini-carte de collection */
.gmini{
  position:relative; aspect-ratio:3/4; border-radius:10px; overflow:hidden; padding:0;
  border:3px solid var(--ink); background:#fff; cursor:pointer;
  display:grid; place-items:center; font-size:1.7rem;
  box-shadow:2px 2px 0 var(--shadow); transition:transform .12s;
}
.gmini:hover{ transform:translateY(-3px); }
.gmini img{ width:100%; height:100%; object-fit:cover; display:block; }
.gmini .cnt{
  position:absolute; bottom:3px; right:3px; font-family:var(--font-pixel); font-size:.5rem;
  background:#fff; border:2px solid var(--ink); border-radius:6px; padding:1px 4px; color:var(--ink);
}
.gmini.locked{ background:#e7d7e2; color:#b48ea688; filter:grayscale(1); cursor:default; box-shadow:none; }
.gmini.locked:hover{ transform:none; }
.gmini.rar-C{ border-color:var(--rar-c); }
.gmini.rar-R{ border-color:var(--rar-r); box-shadow:2px 2px 0 #3d76c9; }
.gmini.rar-SR{ border-color:var(--rar-sr); box-shadow:0 0 10px #ff2d8f66, 2px 2px 0 var(--shadow); }
.gmini.rar-UR{ border-color:var(--rar-ur); box-shadow:0 0 12px #ffb40088, 2px 2px 0 #c98a00; }
.gmini .em{ background:linear-gradient(135deg,var(--pink-soft),#e9d9ff); position:absolute; inset:0; display:grid; place-items:center; }

/* ── shop ── */
.g-packs{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px; }
.g-pack{
  text-align:center; background:#fffafd; border:3px solid var(--ink); border-radius:12px;
  padding:12px 6px 10px; box-shadow:3px 3px 0 var(--shadow);
}
.g-pack .n{ font-family:var(--font-pixel); font-size:.9rem; color:var(--pink); }
.g-pack .d{ font-size:.85rem; color:#5a2b4d99; margin:4px 0 8px; }
.g-pack a{
  display:inline-block; font-size:.85rem; font-weight:700; color:#fff;
  background:linear-gradient(90deg,#ff2d8f,#a24bff); border:2px solid var(--ink); border-radius:8px;
  padding:4px 8px; box-shadow:2px 2px 0 var(--shadow);
}
.g-pack a:active{ transform:translate(2px,2px); box-shadow:0 0 0; }
.g-redeem{ background:#fff; border:3px solid var(--ink); border-radius:12px; padding:12px; }
.g-redeem label{ font-family:var(--font-ui); font-weight:700; font-size:1rem; letter-spacing:.5px; color:var(--ink); display:block; margin-bottom:8px; }
.g-redeem .row{ display:flex; gap:8px; }
.g-redeem input{
  flex:1; min-width:0; font-family:var(--font-ui); font-weight:600; font-size:1.05rem; letter-spacing:1.5px;
  border:3px solid var(--ink); border-radius:10px; padding:.55em .7em; color:var(--ink);
  background:var(--cream); text-transform:uppercase;
}
.g-redeem input:focus{ outline:none; border-color:var(--pink); }
.g-redeem .btn{ width:auto; margin:0; }
.g-redeem .msg{ font-size:.95rem; margin-top:8px; min-height:1.2em; }
.g-redeem .msg.ok{ color:#1d9d55; } .g-redeem .msg.ko{ color:#e03131; }
.g-legal{ font-size:.8rem; color:#5a2b4d88; text-align:center; margin-top:10px; line-height:1.5; }

/* ══════════ OVERLAY DE REVEAL ══════════ */
#gReveal{ position:fixed; inset:0; z-index:13000; display:grid; place-items:center; padding:20px; background:rgba(30,8,26,.93); backdrop-filter:blur(4px); }
#gReveal[hidden]{ display:none; }
#gReveal.flash-ur{ animation:urflash .7s ease; }
@keyframes urflash{ 0%{ background:rgba(255,180,0,.85); } 100%{ background:rgba(30,8,26,.93); } }
.gr-wrap{ text-align:center; max-width:660px; width:100%; }
.gr-cards{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }

/* carte révélée (flip 3D) */
.gflip{ width:104px; aspect-ratio:3/4; perspective:600px; }
.gr-cards.single .gflip{ width:190px; }
.gflip .inner{
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d; transform:rotateY(180deg);
  animation:gflipin .55s ease forwards; animation-delay:var(--fd, 0s);
}
@keyframes gflipin{ to{ transform:rotateY(0deg); } }
.gflip .face{
  position:absolute; inset:0; backface-visibility:hidden; border-radius:12px; overflow:hidden;
  border:3px solid var(--ink); display:grid; place-items:center;
}
.gflip .back{
  transform:rotateY(180deg); font-size:2.2rem;
  background:repeating-linear-gradient(45deg,#ff7ac0 0 12px,#ff96cd 12px 24px);
}
.gflip .front{ background:#fff; }
.gflip .front img{ width:100%; height:100%; object-fit:cover; }
.gflip .front .em{ position:absolute; inset:0; display:grid; place-items:center; font-size:2.6rem; background:linear-gradient(135deg,var(--pink-soft),#e9d9ff); }
.gr-cards.single .gflip .front .em{ font-size:4.5rem; }

/* liseré de rareté + étiquette */
.gflip .front.rar-C{ box-shadow:inset 0 0 0 3px var(--rar-c); }
.gflip .front.rar-R{ box-shadow:inset 0 0 0 3px var(--rar-r), 0 0 14px #5aa2ff88; }
.gflip .front.rar-SR{ box-shadow:inset 0 0 0 3px var(--rar-sr), 0 0 20px #ff2d8faa; }
.gflip .front.rar-UR{ box-shadow:inset 0 0 0 4px var(--rar-ur), 0 0 26px #ffb400cc; }
.gflip .tag{
  position:absolute; top:4px; left:4px; z-index:2;
  font-family:var(--font-pixel); font-size:.5rem; color:#fff; padding:2px 5px;
  border-radius:6px; border:2px solid var(--ink);
}
.tag.rar-C{ background:var(--rar-c); } .tag.rar-R{ background:var(--rar-r); }
.tag.rar-SR{ background:var(--rar-sr); } .tag.rar-UR{ background:var(--rar-ur); color:#5b3c00; }
.gflip .nm{
  position:absolute; bottom:0; left:0; right:0; z-index:2;
  font-size:.72rem; font-weight:700; color:#fff; padding:8px 4px 4px;
  background:linear-gradient(transparent,#000b);
}
.gflip .new{
  position:absolute; top:4px; right:4px; z-index:2;
  font-family:var(--font-pixel); font-size:.45rem; color:#7a4a00;
  background:linear-gradient(#ffe38a,var(--gold)); border:2px solid var(--ink); border-radius:6px; padding:2px 4px;
  animation:free-glow 1.2s ease-in-out infinite;
}

/* effet holo animé sur les UR */
.gflip .front.rar-UR::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(115deg,transparent 32%,#fff8 46%,#ffe38a66 52%,transparent 68%);
  background-size:280% 280%; animation:holo 2.4s linear infinite; mix-blend-mode:screen;
}
@keyframes holo{ 0%{ background-position:120% 120%; } 100%{ background-position:-40% -40%; } }

.gr-info{ color:#ffd9ee; font-size:1rem; margin-top:12px; min-height:1.3em; }
.gr-info b{ color:var(--gold); }
.gr-close{ margin-top:10px; width:auto; }
.gr-fanvue{ display:none; margin-top:8px; font-size:.95rem; color:#ffd9ee; }
.gr-fanvue a{ color:var(--gold); text-decoration:underline; }
.gr-fanvue.on{ display:block; }

/* confettis UR */
.gconf{ position:fixed; top:-14px; font-size:1.1rem; animation:gfall linear forwards; pointer-events:none; z-index:13100; }
@keyframes gfall{ to{ transform:translateY(108vh) rotate(660deg); opacity:.15; } }

/* ══════════ OVERLAYS SECONDAIRES ══════════ */
#gRatesPop, #gCardPop{ position:fixed; inset:0; z-index:13500; display:grid; place-items:center; padding:20px; background:rgba(42,15,36,.75); }
#gRatesPop[hidden], #gCardPop[hidden]{ display:none; }
.gpop{
  width:min(340px,92vw); background:var(--cream); border:4px solid var(--ink); border-radius:16px;
  padding:18px; box-shadow:8px 8px 0 var(--shadow); animation:pop .25s ease; text-align:center;
}
.gpop h3{ font-family:var(--font-pixel); font-size:.8rem; color:var(--pink); margin-bottom:10px; }
.gpop table{ width:100%; border-collapse:collapse; font-size:.95rem; }
.gpop td{ padding:4px 6px; border-bottom:2px dashed var(--pink-soft); color:var(--ink); text-align:left; }
.gpop td:last-child{ text-align:right; font-family:var(--font-pixel); font-size:.68rem; }
.gpop .fine{ font-size:.8rem; color:#5a2b4d88; margin-top:10px; line-height:1.5; }
.gpop .btn{ margin-top:12px; }

/* fiche carte agrandie */
#gCardPop .bigcard{ width:200px; margin:0 auto 10px; aspect-ratio:3/4; position:relative; border-radius:14px; overflow:hidden; border:4px solid var(--ink); }
#gCardPop .bigcard img{ width:100%; height:100%; object-fit:cover; }
#gCardPop .bigcard .em{ position:absolute; inset:0; display:grid; place-items:center; font-size:5rem; background:linear-gradient(135deg,var(--pink-soft),#e9d9ff); }
#gCardPop .meta{ font-size:1rem; color:var(--ink); }
#gCardPop .meta b{ font-family:var(--font-pixel); font-size:.72rem; }

/* toast */
#gToast{
  position:fixed; left:50%; bottom:calc(var(--bar-h) + 14px); transform:translateX(-50%) translateY(20px);
  z-index:14000; background:var(--ink); color:#fff; font-size:1rem;
  border:3px solid #fff; border-radius:12px; padding:.55em 1em;
  opacity:0; pointer-events:none; transition:.25s; max-width:88vw; text-align:center;
}
#gToast.on{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ══════════ SCÈNE D'ANTICIPATION (codes gambling) ══════════
   1. la capsule tremble de plus en plus (charge)
   2. l'aura prend la couleur de la meilleure rareté (tease)
   3. UR = near-miss : l'aura fait croire à un SR rose… puis vire OR
   4. burst : la capsule s'ouvre → cartes                       */
.gr-stage{ position:relative; display:grid; place-items:center; min-height:320px; cursor:pointer; }
.gr-stage[hidden]{ display:none; }

/* aura derrière la capsule */
.gr-aura{
  position:absolute; width:240px; height:240px; border-radius:50%;
  background:radial-gradient(circle, #ffffff44 0%, transparent 65%);
  animation:aura-pulse .6s ease-in-out infinite alternate;
  transition:background .3s;
}
@keyframes aura-pulse{ from{ transform:scale(.92); opacity:.75; } to{ transform:scale(1.12); opacity:1; } }
.gr-aura.tease-C{ background:radial-gradient(circle, #b48ea677 0%, transparent 65%); }
.gr-aura.tease-R{ background:radial-gradient(circle, #5aa2ffaa 0%, #5aa2ff33 40%, transparent 68%); width:290px; height:290px; }
.gr-aura.tease-SR{
  background:radial-gradient(circle, #ff2d8fcc 0%, #ff2d8f44 42%, transparent 70%);
  width:330px; height:330px; animation-duration:.3s;
}
.gr-aura.goldshift{
  background:radial-gradient(circle, #ffdf7aee 0%, #ffb40077 45%, transparent 75%);
  width:400px; height:400px; animation-duration:.18s;
}

/* capsule cœur */
.gr-capsule{ position:relative; width:140px; height:140px; animation:cap-in .4s cubic-bezier(.2,1.6,.4,1); }
@keyframes cap-in{ from{ transform:scale(.3) translateY(40px); opacity:0; } }
.cap-top, .cap-bottom{
  position:absolute; left:0; width:140px; height:70px; border:4px solid var(--ink);
  transition:transform .35s cubic-bezier(.5,-.3,.6,1), opacity .4s;
}
.cap-top{ top:0; border-radius:70px 70px 0 0; border-bottom:2px solid var(--ink);
  background:linear-gradient(#ff9ed6,#ff5aa9); }
.cap-bottom{ bottom:0; border-radius:0 0 70px 70px; border-top:2px solid var(--ink);
  background:linear-gradient(#fff,#ffe4f3); }
.cap-heart{
  position:absolute; inset:0; display:grid; place-items:center; font-size:2.6rem;
  filter:drop-shadow(2px 2px 0 #0002); transition:transform .3s, opacity .3s;
}

/* trois intensités de tremblement */
.gr-capsule.shake1{ animation:cap-shake .5s ease-in-out infinite; }
.gr-capsule.shake2{ animation:cap-shake .22s ease-in-out infinite; }
@keyframes cap-shake{
  0%,100%{ transform:rotate(0) translateX(0); }
  25%{ transform:rotate(-7deg) translateX(-5px); }
  75%{ transform:rotate(7deg) translateX(5px); }
}
.gr-stage.shakehard{ animation:stage-shake .1s linear infinite; }
@keyframes stage-shake{
  0%,100%{ transform:translate(0,0); } 25%{ transform:translate(-6px,3px); }
  50%{ transform:translate(5px,-4px); } 75%{ transform:translate(-3px,-3px); }
}

/* ouverture */
.gr-capsule.burst .cap-top{ transform:translateY(-110px) rotate(-24deg); opacity:0; }
.gr-capsule.burst .cap-bottom{ transform:translateY(110px) rotate(18deg); opacity:0; }
.gr-capsule.burst .cap-heart{ transform:scale(2.6); opacity:0; }
.gr-capsule.burst{ animation:none; }

.gr-skip{
  position:absolute; bottom:-8px; left:50%; transform:translateX(-50%);
  background:none; border:none; color:#ffd9ee99; font-family:var(--font-ui); font-size:.95rem;
  text-decoration:underline; cursor:pointer;
}
.gr-skip:hover{ color:#fff; }

/* ══════════ ONBOARDING ══════════ */
#gOnboard{ position:fixed; inset:0; z-index:13800; display:grid; place-items:center; padding:20px; background:rgba(30,8,26,.9); backdrop-filter:blur(4px); }
#gOnboard[hidden]{ display:none; }
.gob{
  width:min(340px,92vw); background:var(--cream); border:4px solid var(--ink); border-radius:18px;
  padding:20px 18px 16px; box-shadow:8px 8px 0 var(--shadow), 0 0 40px #ff2d8f66;
  text-align:center; animation:pop .3s cubic-bezier(.2,1.5,.4,1);
}
.gob__ava{
  width:84px; height:84px; border-radius:50%; object-fit:cover;
  border:4px solid #fff; box-shadow:0 0 0 4px var(--pink);
  margin-top:-52px; margin-bottom:8px; background:#fff;
}
.gob__bubble{ min-height:120px; display:grid; place-content:center; gap:8px; }
.gob__bubble .t{ font-family:var(--font-pixel); font-size:.82rem; color:var(--pink); line-height:1.7; }
.gob__bubble .d{ font-size:1.08rem; color:var(--ink); line-height:1.5; }
.gob__bubble .art{ font-size:2.4rem; animation:float 2.4s ease-in-out infinite; }
.gob-chips{ display:flex; justify-content:center; gap:6px; flex-wrap:wrap; margin:4px 0; }
.gob-chips span{
  font-family:var(--font-pixel); font-size:.55rem; color:#fff; padding:4px 8px;
  border-radius:10px; border:2px solid var(--ink);
}
.gob-chips .cc{ background:var(--rar-c); } .gob-chips .cr{ background:var(--rar-r); }
.gob-chips .csr{ background:var(--rar-sr); } .gob-chips .cur{ background:var(--rar-ur); color:#5b3c00; }
.gob__dots{ display:flex; justify-content:center; gap:6px; margin:12px 0 10px; }
.gob__dots i{ width:10px; height:10px; border-radius:50%; background:#e6c8da; border:2px solid var(--ink); transition:.2s; }
.gob__dots i.on{ background:var(--pink); transform:scale(1.25); }
.gob__nav{ display:flex; align-items:center; gap:10px; }
.gob__skip{ background:none; border:none; color:#5a2b4d88; font-family:var(--font-ui); font-size:.95rem; text-decoration:underline; cursor:pointer; }
.gob__skip:hover{ color:var(--pink); }
.gob__next{ flex:1; margin:0; }

/* ══════════ ACCOUNT.EXE ══════════ */
.acc-blurb{ text-align:center; font-size:1.05rem; color:var(--ink); line-height:1.5; margin-bottom:12px; }
.acc-form{ display:grid; gap:8px; }
.acc-form input{
  font-family:var(--font-ui); font-size:1.05rem; color:var(--ink);
  border:3px solid var(--ink); border-radius:10px; padding:.55em .7em; background:#fff;
}
.acc-form input:focus{ outline:none; border-color:var(--pink); }
.acc-btns{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.acc-btns .btn{ margin:0; }
.acc-msg{ font-size:.98rem; text-align:center; margin-top:10px; min-height:1.3em; color:var(--ink); }
.acc-msg.ok{ color:#1d9d55; } .acc-msg.ko{ color:#e03131; }
#accIn{ text-align:center; }
.acc-hi{ font-family:var(--font-pixel); font-size:.9rem; color:var(--pink); }
.acc-email{ font-size:1rem; color:#5a2b4d99; margin:6px 0 10px; word-break:break-all; }
.acc-sync{
  display:inline-block; font-size:.95rem; color:#1d9d55;
  background:#eafff2; border:2px solid var(--ink); border-radius:10px;
  padding:4px 10px; margin-bottom:12px;
}
.acc-sync.busy{ color:#b57700; background:#fff6df; }
.acc-gift{ display:inline-block; margin-top:6px; font-family:var(--font-pixel); font-size:.6rem; color:#7a4a00; background:linear-gradient(#ffe38a,var(--gold)); border:2px solid var(--ink); border-radius:10px; padding:4px 8px; }

/* ── incentives compte ── */
.gr-save{
  display:none; margin:10px auto 0; max-width:440px;
  font-family:var(--font-ui); font-size:.98rem; color:#7a4a00; line-height:1.4;
  background:linear-gradient(#ffe9b0,#ffd35c); border:3px solid var(--ink); border-radius:12px;
  padding:.6em .9em; cursor:pointer; box-shadow:3px 3px 0 var(--shadow);
  animation:free-glow 1.6s ease-in-out infinite;
}
.gr-save.on{ display:block; }
.gr-save:active{ transform:translate(3px,3px); box-shadow:0 0 0; }
.g-acc-cta{
  display:block; width:100%; text-align:center; margin-bottom:10px;
  font-family:var(--font-ui); font-size:1rem; font-weight:600; color:var(--ink); line-height:1.45;
  background:linear-gradient(135deg,#fff6e3,#ffeef9); border:3px dashed var(--rar-ur); border-radius:12px;
  padding:.7em .8em; cursor:pointer;
}
.g-acc-cta span{ font-size:.88rem; color:#5a2b4d99; text-decoration:underline; }
.g-acc-cta:hover{ background:linear-gradient(135deg,#fff0cd,#ffe4f4); }
.g-acc-cta[hidden]{ display:none; }

/* badge cadeau sur l'icône account (visible si déconnecté) */
.icon--gift{ position:relative; }
.icon--gift::after{
  content:"🎁 +3💎"; position:absolute; top:-4px; right:-4px;
  font-family:var(--font-pixel); font-size:.45rem; color:#7a4a00;
  background:linear-gradient(#ffe38a,var(--gold)); border:2px solid var(--ink); border-radius:10px;
  padding:3px 5px; box-shadow:2px 2px 0 var(--shadow); transform:rotate(8deg);
  animation:vip-wiggle 2.2s ease-in-out infinite; pointer-events:none;
}

/* ── responsive ── */
@media (max-width:820px){
  .win--gacha .win__body{ max-height:66vh; }
  .g-grid{ grid-template-columns:repeat(3,1fr); }
  .g-packs{ grid-template-columns:1fr; }
  .gflip{ width:88px; }
  .gr-cards.single .gflip{ width:170px; }
  .g-redeem .row{ flex-direction:column; }
  .g-redeem .btn{ width:100%; }
  .gr-stage{ min-height:280px; }
  .gr-aura.goldshift{ width:320px; height:320px; }
}