/* RUSH TABLE G — habillage « haut de gamme » (100 % CSS, aucun fichier externe) */
@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@property --rx { syntax: '<angle>'; initial-value: 0deg; inherits: true; }
@property --ry { syntax: '<angle>'; initial-value: 0deg; inherits: true; }
@keyframes spinang { to { --ang: 360deg; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadein { from { opacity: 0; } }

/* ---------- Scène de fond ---------- */
body { background: #161618; }
#scene { position: fixed; inset: 0; z-index: 0; overflow: hidden;
  background: radial-gradient(120% 70% at 50% 0%, #8e2236 0%, #6d1a2a 38%, #4a1420 70%, #141416 100%); }
#scene .rays { position: absolute; left: 50%; top: calc(6vh - 80vmax); width: 160vmax; height: 160vmax; margin-left: -80vmax;
  background: repeating-conic-gradient(from 0deg, rgba(255,236,170,.085) 0 5deg, transparent 5deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 0 8%, rgba(0,0,0,.55) 22%, transparent 48%); mask: radial-gradient(circle, #000 0 8%, rgba(0,0,0,.55) 22%, transparent 48%);
  animation: spin 120s linear infinite; }
#scene .glow { position: absolute; left: 50%; top: -14vh; width: 70vmax; height: 40vmax; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,226,140,.22), transparent); }
#bg { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
#app { z-index: 2; background: transparent; }
#fx { position: fixed; inset: 0; z-index: 400; pointer-events: none; }
.screen.enter { animation: scrIn .34s cubic-bezier(.2,.8,.2,1) both; }
@keyframes scrIn { from { opacity: 0; transform: translateY(16px) scale(.985); } }

/* ---------- Logo ---------- */
.logo .rush, .endtitle.win { text-shadow: none !important; }
.logo { position: relative; display: flex; flex-direction: column; align-items: center; isolation: isolate; }
.logo .emblem { position: relative; width: 74px; height: 74px; border-radius: 50%; overflow: hidden; z-index: 2;
  background: radial-gradient(circle at 50% 30%, #b8384f, #6d1a2a 58%, #3d0f19);
  box-shadow: 0 0 0 3px #e2b13c, 0 0 0 5px #4a1420, 0 0 0 6px rgba(255,236,170,.7), 0 10px 22px rgba(0,0,0,.45), 0 0 34px rgba(255,211,107,.45); }
.emblem i { position: absolute; display: block; }
.emblem .sea { left: 0; right: 0; bottom: 0; height: 27%; background: repeating-linear-gradient(180deg, #6d1a2a 0 3px, #8e2236 3px 6px); }
.emblem .base { left: 50%; bottom: 25%; width: 46%; height: 15%; transform: translateX(-50%); background: #fff; border-radius: 2px; }
.emblem .dome { left: 50%; bottom: 39%; width: 30%; height: 15%; transform: translateX(-50%); background: #fff; border-radius: 40px 40px 0 0; }
.emblem .flame { left: 50%; top: 13%; width: 15px; height: 15px; margin-left: -7.5px; background: radial-gradient(circle at 60% 60%, #fff3b0 0 18%, #ffb347 40%, #e8590c 80%);
  border-radius: 50% 0 50% 50%; transform: rotate(-45deg); filter: drop-shadow(0 0 5px #ff9a3c); animation: flick .7s ease-in-out infinite alternate; }
@keyframes flick { to { transform: rotate(-45deg) scale(1.15, 1.05); filter: drop-shadow(0 0 9px #ffb347); } }
.logo .rush { margin-top: 2px; font-family: var(--serif); font-weight: 900; font-size: 68px; line-height: .92; letter-spacing: 3px; padding: 0 6px;
  background: linear-gradient(100deg, transparent 0 40%, rgba(255,255,255,.95) 50%, transparent 60% 100%) -300% 0 / 60% 100% no-repeat,
    linear-gradient(100deg, #a8741a 0, #f7d774 60px, #fff8dc 85px, #e2b13c 110px, #b8862b 180px, #f2cc63 260px, #fff3c4 290px, #c9962f 320px, #a8741a 400px) 0 0 / 400px 100% repeat-x;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 #160b0e) drop-shadow(0 0 16px rgba(255,211,107,.35)); animation: goldsweep 5s linear infinite; }
@keyframes goldsweep { 0% { background-position: -300% 0, 0 0; } 35% { background-position: 300% 0, 140px 0; } 100% { background-position: 300% 0, 400px 0; } }
@keyframes goldsweep2 { to { background-position: 300px 0; } }
.logo .tg { position: relative; margin-top: 4px; font-family: var(--serif); font-weight: 800; font-size: 16px; letter-spacing: 7px; color: #fff; padding: 4px 12px 4px 19px;
  background: linear-gradient(#8e2236, #4a1420); border-top: 2px solid #e2b13c; border-bottom: 2px solid #e2b13c; box-shadow: 0 6px 12px rgba(0,0,0,.35); }
.logo .tg::before, .logo .tg::after { content: ""; position: absolute; top: 4px; width: 16px; height: calc(100% - 4px); background: #3d0f19; z-index: -1; }
.logo .tg::before { left: -12px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 40% 50%); }
.logo .tg::after { right: -12px; clip-path: polygon(0 0, 100% 0, 60% 50%, 100% 100%, 0 100%); }
.logo .shine { display: none; position: absolute; inset: -10px -30px; z-index: 3; pointer-events: none; mix-blend-mode: soft-light; overflow: hidden; }
.logo .shine::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 34%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.95), transparent);
  transform: translateX(-120%) skewX(-18deg); animation: lsweep 3.6s ease-in-out infinite .6s; }
@keyframes lsweep { 0% { transform: translateX(-140%) skewX(-18deg); } 45%, 100% { transform: translateX(420%) skewX(-18deg); } }

/* ---------- Écran d'accueil (splash) ---------- */
#splash { position: fixed; inset: 0; z-index: 500; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; color: #fff; overflow: hidden;
  background: radial-gradient(90% 60% at 50% 42%, #8e2236, #4a1420 58%, #121214); transition: opacity .55s ease, transform .55s ease; cursor: pointer; }
#splash.out { opacity: 0; transform: scale(1.08); pointer-events: none; }
#splash .srays { position: absolute; left: 50%; top: 42%; width: 170vmax; height: 170vmax; margin: -85vmax 0 0 -85vmax;
  background: repeating-conic-gradient(rgba(255,226,140,.13) 0 4deg, transparent 4deg 12deg);
  -webkit-mask: radial-gradient(circle, #000 0 6%, transparent 42%); mask: radial-gradient(circle, #000 0 6%, transparent 42%); animation: spin 40s linear infinite, fadein 1.2s ease both; }
.big-logo .emblem { width: 104px; height: 104px; }
.big-logo .emblem .flame { width: 20px; height: 20px; margin-left: -10px; }
.big-logo .rush { font-size: 92px; }
.big-logo .tg { font-size: 21px; letter-spacing: 9px; }
#splash .logo { animation: logoIn 1.1s cubic-bezier(.2,1.35,.3,1) both .1s; }
@keyframes logoIn { from { transform: scale(.35) translateY(40px); opacity: 0; filter: blur(10px); } }
#splash .tagline { font-style: italic; font-size: 16px; opacity: .9; animation: fadein .8s ease both 1s; }
#splash .ld { width: 150px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.18); overflow: hidden; animation: fadein .5s both .9s; }
#splash .ld i { display: block; width: 45%; height: 100%; background: linear-gradient(90deg, transparent, #ffd36b, transparent); animation: ld 1.1s ease-in-out infinite; }
@keyframes ld { from { transform: translateX(-110%); } to { transform: translateX(240%); } }
#splash .tapgo { position: absolute; bottom: calc(46px + var(--safe-bot)); font-family: var(--serif); font-weight: 700; letter-spacing: 3px; font-size: 13px; text-transform: uppercase; animation: blink 1.6s ease-in-out infinite 1.4s; opacity: 0; }
@keyframes blink { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* ---------- Menu ---------- */
.menu .hero { height: 268px; }
.hero .sky { background: linear-gradient(#b8566a 0%, #e9c9a8 55%, #f7ecdd 88%); }
.hero .hrays { position: absolute; right: -170px; top: -150px; width: 520px; height: 520px; background: repeating-conic-gradient(rgba(255,255,255,.28) 0 5deg, transparent 5deg 16deg);
  -webkit-mask: radial-gradient(circle, #000 0 10%, transparent 62%); mask: radial-gradient(circle, #000 0 10%, transparent 62%); animation: spin 70s linear infinite; }
.hero .sun { box-shadow: 0 0 40px #ffe7a0, 0 0 110px rgba(255,211,107,.85); }
.hero .sea { background: linear-gradient(#6d1a2a, #5a1522); }
.hero .sea::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(172deg, rgba(255,255,255,0) 0 9px, rgba(255,255,255,.16) 9px 11px, rgba(255,255,255,0) 11px 18px); background-size: 220px 100%; animation: sea 9s linear infinite; }
.hero .shim { position: absolute; left: 0; right: 0; bottom: 0; height: 90px; pointer-events: none;
  background: radial-gradient(2px 1px at 20% 30%, #fff, transparent), radial-gradient(2px 1px at 64% 22%, #fff, transparent), radial-gradient(3px 1px at 78% 55%, #fff, transparent),
              radial-gradient(2px 1px at 40% 70%, #fff, transparent), radial-gradient(3px 1px at 88% 18%, #fff, transparent), radial-gradient(2px 1px at 10% 62%, #fff, transparent);
  animation: shim 2.4s ease-in-out infinite alternate; }
.hero .shim.b { animation-delay: 1.2s; transform: translateX(37px) scaleX(-1); }
@keyframes shim { from { opacity: .15; } to { opacity: .95; } }
.hero .birds { position: absolute; left: 24%; top: 40px; width: 26px; height: 8px; border-top: 2px solid rgba(74,20,32,.55); border-radius: 50% 50% 0 0; animation: bird 14s linear infinite; }
.hero .birds::after { content: ""; position: absolute; left: 30px; top: 10px; width: 18px; height: 6px; border-top: 2px solid rgba(74,20,32,.45); border-radius: 50% 50% 0 0; }
@keyframes bird { from { transform: translateX(-140px); } to { transform: translateX(380px); } }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 80px; background: linear-gradient(transparent, rgba(74,20,32,.7)); }
.menu .logo { margin-top: -66px; z-index: 3; }
.menu .subtitle { margin: 8px 0 12px; }
.iconbtn.sndbtn { position: absolute; right: 10px; top: calc(10px + var(--safe-top)); z-index: 5; background: rgba(74,20,32,.45) !important; backdrop-filter: blur(4px); }
.rankcard { width: min(320px, 86%); display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin-bottom: 14px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.06)); border: 1px solid rgba(255,236,170,.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.2); text-align: left; }
.rankcard .ri { font-size: 26px; filter: drop-shadow(0 0 6px rgba(255,211,107,.8)); }
.rankcard .rt { flex: 1; min-width: 0; }
.rankcard .rn { font-family: var(--serif); font-weight: 800; font-size: 15px; color: #ffe8a3; }
.rankcard .rs { font-size: 12px; opacity: .85; }
.rankcard .rb { height: 6px; border-radius: 3px; background: rgba(255,255,255,.15); overflow: hidden; margin-top: 4px; }
.rankcard .rb i { display: block; height: 100%; background: linear-gradient(90deg, #ffd36b, #ff8a3c); box-shadow: 0 0 8px #ffb347; }

/* ---------- Boutons ---------- */
.bigbtn, .sbtn, .actbtn, .iconbtn, .chip { position: relative; overflow: hidden; transition: transform .09s ease, box-shadow .09s ease, filter .15s; }
.bigbtn:active, .sbtn:active, .actbtn:active:not(:disabled), .chip:active { transform: translateY(2px) scale(.97); filter: brightness(1.08); }
.iconbtn:active { transform: scale(.9); }
.rip { position: absolute; width: 14px; height: 14px; border-radius: 50%; pointer-events: none; background: rgba(255,255,255,.6); transform: translate(-50%, -50%) scale(0); animation: rip .55s ease-out forwards; }
@keyframes rip { to { transform: translate(-50%, -50%) scale(26); opacity: 0; } }
.bigbtn.primary { border: 2px solid #ffc078; background: linear-gradient(#ff9b4d, #f06a1c 55%, #d9480f);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.45), 0 4px 0 #9c3504, 0 10px 22px rgba(232,89,12,.45); text-shadow: 0 2px 0 rgba(120,40,0,.5); }
.bigbtn.primary::after, .actbtn.go::after, .actbtn.tip:not(:disabled)::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 38%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: translateX(-150%) skewX(-20deg); animation: sheen 3.4s ease-in-out infinite; }
.actbtn.tip:not(:disabled)::after { animation-delay: 1.7s; }
@keyframes sheen { 0%, 55% { transform: translateX(-150%) skewX(-20deg); } 100% { transform: translateX(330%) skewX(-20deg); } }
.bigbtn:not(.primary):not(.outline) { background: linear-gradient(#ffffff, #f1ebe4); box-shadow: inset 0 -2px 0 rgba(109,26,42,.12), 0 4px 0 #b59a8a, 0 8px 16px rgba(0,0,0,.25); }
.bigbtn.outline { border-color: rgba(255,236,170,.55); background: rgba(255,255,255,.05); }

/* ---------- Cartes : cadres de rareté, foil, holo ---------- */
.hc { padding: 3px; box-shadow: 0 4px 8px rgba(0,0,0,.4); }
.hc.r-com { background: linear-gradient(145deg, #f1f4f8, #8f9aa8 38%, #ffffff 55%, #7d8896); }
.hc.r-rare { background: linear-gradient(145deg, #d5ecff, #2e86de 36%, #eef7ff 56%, #1a5aa0); }
.hc.r-epic { background: linear-gradient(145deg, #f6e3ff, #8e44ad 34%, #ffd9f6 52%, #5b2c83 76%, #d2b0ff); }
.hc.r-leg, .big.r-leg { background: conic-gradient(from var(--ang), #b8860b, #fff1b8, #d4af37, #fffbe6, #a67c00, #ffe27a, #b8860b); animation: spinang 3.2s linear infinite; }
.hc.r-leg { box-shadow: 0 0 12px rgba(255,211,107,.85), 0 4px 8px rgba(0,0,0,.4); }
.hc .in { position: relative; }
.hc .in::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 70%; pointer-events: none; z-index: 1; opacity: 0; }
.hc.r-rare .in::after { opacity: 1; background: linear-gradient(105deg, transparent 10%, rgba(255,255,255,.65) 50%, transparent 90%); mix-blend-mode: soft-light; transform: translateX(-120%); animation: foil 5.5s ease-in-out infinite; }
.hc.r-epic .in::after { opacity: 1; width: 90%; background: linear-gradient(105deg, transparent 5%, rgba(255,80,200,.35) 30%, rgba(80,230,255,.45) 50%, rgba(255,240,90,.35) 70%, transparent 95%); mix-blend-mode: color-dodge; transform: translateX(-120%); animation: foil 4.2s ease-in-out infinite; }
.hc.r-leg .in::after { opacity: 1; background: linear-gradient(105deg, transparent 10%, rgba(255,245,200,.9) 50%, transparent 90%); mix-blend-mode: overlay; transform: translateX(-120%); animation: foil 3s ease-in-out infinite; }
@keyframes foil { 0%, 40% { transform: translateX(-120%); } 100% { transform: translateX(220%); } }
.hc.r-epic .art { background: linear-gradient(135deg, rgba(255,140,230,.25), rgba(140,230,255,.25), rgba(255,250,150,.25)), linear-gradient(#f3e6d3, #fffaf2); }
.hc.r-leg .art { background: radial-gradient(circle at 70% 25%, #fff6c8, transparent 45%), linear-gradient(#ffe9a8, #fff8e6); }
.hc.r-leg .in::before { content: "✦"; position: absolute; right: 8px; top: 22px; z-index: 2; color: #fff; font-size: 11px; text-shadow: 0 0 6px #ffd36b; animation: twinkle 1.8s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: .2; transform: scale(.6) rotate(0); } 50% { opacity: 1; transform: scale(1.2) rotate(45deg); } }
/* constructeur : foil fixe (perfs), sauf la légendaire */
.grid .hc:not(.r-leg) .in::after { animation: none; transform: translateX(40%); opacity: .55; }
/* main */
.hand .hc { transition: transform .18s cubic-bezier(.3,1.5,.5,1), filter .2s; }
.hand .hc.can { box-shadow: 0 0 0 1px rgba(255,236,170,.5), 0 0 12px rgba(255,211,107,.55), 0 4px 8px rgba(0,0,0,.4); }
.hand .hc.sel { transform: translateY(-18px) scale(1.1) rotate(-2deg); filter: drop-shadow(0 0 10px #ffd36b) drop-shadow(0 12px 10px rgba(0,0,0,.45)); z-index: 3; }
.hand .hc.deal { animation: deal .42s cubic-bezier(.2,1.3,.4,1) both; animation-delay: calc(var(--i, 0) * 45ms); }
@keyframes deal { from { transform: translateY(70px) rotate(8deg) scale(.7); opacity: 0; } }
.hc.dim { filter: grayscale(.65) brightness(.72); }
/* plateau */
.mc { box-shadow: 0 2px 5px rgba(0,0,0,.35); }
.mc.r-rare { box-shadow: 0 0 0 1px #8fc1ee, 0 2px 5px rgba(0,0,0,.35); }
.mc.r-epic { box-shadow: 0 0 0 1px #e3b8ff, 0 0 9px rgba(190,120,255,.65); }
.mc.r-epic .ini { background: linear-gradient(135deg, rgba(255,140,230,.28), rgba(140,230,255,.28), rgba(255,250,150,.28)), linear-gradient(#f3e6d3, #fffaf2); }
.mc.r-leg { border: 3px solid transparent; background: linear-gradient(#fffaf0, #fffaf0) padding-box, conic-gradient(from var(--ang), #b8860b, #fff1b8, #d4af37, #fffbe6, #a67c00, #ffe27a, #b8860b) border-box;
  animation: spinang 3.2s linear infinite; box-shadow: 0 0 12px rgba(255,211,107,.9); }
.mc.r-leg .ini { background: radial-gradient(circle at 70% 25%, #fff6c8, transparent 50%), linear-gradient(#ffe9a8, #fff8e6); }
.mc.back { background: radial-gradient(circle at 50% 40%, #8e2236, #6d1a2a 60%, #4a1420), var(--navy); border-color: #e2b13c; }
.mc.back::before { content: ""; position: absolute; inset: 3px; border-radius: 5px; background: var(--meander) repeat center / 12px 6px; opacity: .35; }
.mc.back::after { color: #ffe8a3; font-size: 14px; letter-spacing: 1px; text-shadow: 0 0 8px rgba(255,211,107,.8); content: "RTG"; }
.mc.flip { animation: rev .6s cubic-bezier(.2,.9,.3,1.25) both; z-index: 5; }
@keyframes rev { 0% { transform: perspective(400px) rotateY(95deg) scale(1.4); filter: brightness(2.6); } 55% { transform: perspective(400px) rotateY(-8deg) scale(1.18); filter: brightness(1.5); } 100% { transform: none; filter: none; } }
.mc.slam { animation: slam .34s cubic-bezier(.3,1.7,.45,1) both; }
@keyframes slam { from { transform: scale(1.35); filter: brightness(1.6); } }
.mc.dropin { animation: dropin .5s cubic-bezier(.2,1.2,.4,1) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes dropin { from { transform: translateY(-46px) scale(.55) rotate(-8deg); opacity: 0; } }
.mc.pulse { animation: pulse2 .5s ease; }
@keyframes pulse2 { 40% { transform: scale(1.2); filter: brightness(1.35) drop-shadow(0 0 8px rgba(255,236,170,.9)); } }
.mc .p.boost { animation: pboost .55s cubic-bezier(.2,1.6,.4,1); }
@keyframes pboost { 40% { transform: scale(1.7); filter: brightness(1.6) drop-shadow(0 0 6px #fff); } }
.loc { border: 1px solid rgba(226,177,60,.75); background: linear-gradient(#ffffff, #f5efe8); box-shadow: 0 4px 0 rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.6), 0 0 14px rgba(0,0,0,.25); }
.loc.closed { border-color: rgba(255,255,255,.35); }
.loc.reveal { animation: locrev .85s cubic-bezier(.2,.9,.25,1.15) both; z-index: 6; }
@keyframes locrev { 0% { transform: perspective(600px) rotateY(180deg) scale(.75); filter: brightness(2.4); } 55% { transform: perspective(600px) rotateY(-10deg) scale(1.1); filter: brightness(1.6); box-shadow: 0 0 40px rgba(255,236,170,1); } 100% { transform: none; filter: none; } }
.loc .tot { transition: background .25s; }
.loc .tot.lead { background: linear-gradient(#5bd473, #2b8a3e); box-shadow: 0 0 0 2px #b2f2bb, 0 0 12px rgba(105,219,124,.85); }
.tot.bump { animation: totb .45s ease; }
@keyframes totb { 40% { transform: translateX(-50%) scale(1.35); filter: brightness(1.4); } }
.side { transition: background .25s, box-shadow .25s; }
.side.me { background: linear-gradient(rgba(255,255,255,.09), rgba(255,255,255,.04)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.side.opp { background: linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.08)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); }
.side.ok { animation: okp 1s ease-in-out infinite alternate; }
@keyframes okp { from { background: rgba(255,211,107,.14); box-shadow: inset 0 0 0 2px rgba(255,211,107,.6); } to { background: rgba(255,211,107,.3); box-shadow: inset 0 0 0 2px #ffd36b, 0 0 16px rgba(255,211,107,.55); } }
.side.hover { animation: none; background: rgba(255,211,107,.45); box-shadow: inset 0 0 0 3px #fff3c4, 0 0 22px rgba(255,211,107,.8); }
.col.zwin .side.me { background: rgba(255,211,107,.28); box-shadow: inset 0 0 0 2px #ffd36b, 0 0 24px rgba(255,211,107,.85); }
.col.zwin .loc { box-shadow: 0 0 0 3px #ffd36b, 0 0 28px rgba(255,211,107,.95); }
.col.zlose .side.opp { background: rgba(255,90,90,.18); box-shadow: inset 0 0 0 2px rgba(255,120,120,.8), 0 0 20px rgba(255,90,90,.55); }
.col.zlose .side.me { filter: saturate(.45) brightness(.75); }
.col.ztie .loc { box-shadow: 0 0 0 3px #e6d3bd, 0 0 18px rgba(230,211,189,.7); }
.col.zwin, .col.zlose, .col.ztie { animation: zin .5s ease both; }
@keyframes zin { 40% { transform: scale(1.04); } }
/* nombres flottants */
.float { font-size: 26px; text-shadow: 0 0 10px currentColor, 0 2px 0 rgba(0,0,0,.6); animation: float2 1.05s cubic-bezier(.2,1.3,.4,1) forwards; }
.float.up { color: #9cf5ac; } .float.dn { color: #ff9a9a; }
@keyframes float2 { 0% { transform: translate(-50%, 8px) scale(.35); opacity: 0; } 25% { transform: translate(-50%, -16px) scale(1.4); opacity: 1; } 100% { transform: translate(-50%, -50px) scale(1); opacity: 0; } }
/* orbe d'énergie */
.energy .flame { width: 52px; height: 52px; font-size: 25px; border: 2px solid #ffe8a3; text-shadow: 0 2px 0 rgba(120,40,0,.6);
  background: radial-gradient(circle at 40% 30%, #fff4cc 0 7%, #ffb347 24%, #ef6418 58%, #7a2a00 100%);
  box-shadow: 0 0 0 3px rgba(74,20,32,.95), 0 0 16px rgba(255,138,60,.85), 0 0 34px rgba(255,138,60,.4); animation: orb 2.2s ease-in-out infinite; }
.energy .flame::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 55%, rgba(255,236,170,.95) 72%, transparent 88%);
  -webkit-mask: radial-gradient(circle, transparent 0 60%, #000 62% 70%, transparent 73%); mask: radial-gradient(circle, transparent 0 60%, #000 62% 70%, transparent 73%); animation: spin 2.4s linear infinite; }
@keyframes orb { 50% { box-shadow: 0 0 0 3px rgba(74,20,32,.95), 0 0 24px rgba(255,160,70,1), 0 0 50px rgba(255,138,60,.6); } }
.energy .flame.empty { filter: grayscale(.85) brightness(.7); animation: none; }
.energy .flame.empty::before { display: none; }
.energy .flame.tick { animation: orbtick .45s cubic-bezier(.2,1.6,.4,1); }
@keyframes orbtick { 40% { transform: scale(1.25); filter: brightness(1.5); } }
.actbtn.go.ready { animation: readyp 1.1s ease-in-out infinite; }
@keyframes readyp { 50% { box-shadow: 0 3px 0 #a33a05, 0 0 0 3px rgba(255,236,170,.75), 0 0 22px rgba(255,138,60,.95); filter: brightness(1.12); } }
.tipjar.hot { animation: hot 1s ease-in-out infinite alternate; }
@keyframes hot { to { box-shadow: 0 0 16px rgba(255,211,107,.9); border-color: #ffd36b; } }
.ghead .turnbox { text-shadow: 0 0 10px rgba(255,211,107,.35); }
.ghost { filter: drop-shadow(0 14px 14px rgba(0,0,0,.5)) drop-shadow(0 0 12px rgba(255,211,107,.8)); transform: translate(-50%, -60%) scale(1.14) rotate(-3deg); }
/* carte volante */
.flyer { position: fixed; z-index: 360; pointer-events: none; will-change: transform; filter: drop-shadow(0 12px 14px rgba(0,0,0,.5)) drop-shadow(0 0 10px rgba(255,211,107,.7)); }
.flyer > .hc { width: 100% !important; height: 100% !important; transform: none !important; }
/* éclat lumineux */
.flare { position: fixed; z-index: 380; pointer-events: none; border-radius: 50%; mix-blend-mode: screen; transform: translate(-50%, -50%) scale(.2);
  background: radial-gradient(circle, #fff 0, var(--fc) 16%, rgba(255,211,107,.3) 38%, transparent 68%); animation: flare .62s ease-out forwards; }
.flare::after { content: ""; position: absolute; left: -70%; right: -70%; top: 48.5%; height: 3%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent); }
@keyframes flare { 0% { transform: translate(-50%, -50%) scale(.2); opacity: 0; } 22% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.35); opacity: 0; } }
/* bannière de tour */
.banner { position: fixed; left: 0; right: 0; top: 23%; z-index: 300; pointer-events: none; display: flex; justify-content: center; }
.banner .bin { width: 100%; max-width: 520px; text-align: center; font-family: var(--serif); font-weight: 900; color: #fff; font-size: 30px; letter-spacing: 4px; padding: 8px 0;
  background: linear-gradient(90deg, transparent, rgba(74,20,32,.94) 16%, rgba(142,34,54,.96) 50%, rgba(74,20,32,.94) 84%, transparent);
  border-top: 2px solid; border-bottom: 2px solid; border-image: linear-gradient(90deg, transparent, #e2b13c 20%, #fff3c4 50%, #e2b13c 80%, transparent) 1;
  text-shadow: 0 0 14px rgba(255,211,107,.75), 0 2px 0 #160b0e; animation: ban 1.35s cubic-bezier(.2,.9,.2,1) forwards; }
.banner .bin small { display: block; font-family: var(--sans); font-size: 14px; letter-spacing: 1px; font-weight: 700; color: #ffe8a3; text-shadow: none; }
.banner.last .bin { color: #ffe8a3; }
@keyframes ban { 0% { transform: translateX(-70%) skewX(-14deg); opacity: 0; } 18% { transform: translateX(0) skewX(-4deg); opacity: 1; } 28% { transform: none; } 80% { transform: translateX(3%); opacity: 1; } 100% { transform: translateX(70%) skewX(-14deg); opacity: 0; } }
/* Gros pourboire! */
.tipfx { position: fixed; inset: 0; z-index: 350; pointer-events: none; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 45%, rgba(255,211,107,.28), rgba(22,14,16,.78) 68%); animation: tipbg 1.8s ease forwards; }
.tipfx .stamp { width: min(320px, 82vw); font-family: var(--serif); font-weight: 900; font-size: 34px; text-align: center; line-height: 1; color: #3d2a00; padding: 14px 22px 12px; border-radius: 16px;
  background: linear-gradient(#fff6cf, #ffd36b 42%, #d4a017); border: 3px solid #fff; box-shadow: 0 0 0 4px #b8860b, 0 0 60px rgba(255,211,107,.95), 0 16px 30px rgba(0,0,0,.5);
  transform: rotate(-6deg); animation: stamp .6s cubic-bezier(.2,1.5,.4,1) both; }
.tipfx .stamp small { display: block; font-family: var(--sans); font-size: 15px; font-weight: 700; letter-spacing: .5px; margin-top: 6px; }
.tipfx .stamp b { display: block; font-size: 30px; margin-top: 4px; }
@keyframes stamp { 0% { transform: scale(3.2) rotate(-16deg); opacity: 0; } 55% { transform: scale(.9) rotate(-5deg); opacity: 1; } 100% { transform: scale(1) rotate(-6deg); } }
@keyframes tipbg { 0% { opacity: 0; } 10%, 78% { opacity: 1; } 100% { opacity: 0; } }
/* toasts */
.toast { background: linear-gradient(rgba(142,34,54,.96), rgba(74,20,32,.96)); border: 1px solid rgba(255,211,107,.85); box-shadow: 0 6px 18px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.2); }
/* fiche de carte (inclinaison + reflet) */
.big { transform: perspective(800px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .35s ease; box-shadow: 0 18px 30px rgba(0,0,0,.35); animation: sway 7s ease-in-out infinite; }
.big.tilting { transition: none; animation: none; }
@keyframes sway { 0%, 100% { --ry: -5deg; --rx: 2deg; } 50% { --ry: 5deg; --rx: -2deg; } }
.big.r-com { background: linear-gradient(145deg, #f1f4f8, #8f9aa8 38%, #ffffff 55%, #7d8896); }
.big.r-rare { background: linear-gradient(145deg, #d5ecff, #2e86de 36%, #eef7ff 56%, #1a5aa0); }
.big.r-epic { background: linear-gradient(145deg, #f6e3ff, #8e44ad 34%, #ffd9f6 52%, #5b2c83 76%, #d2b0ff); }
.big .glare { position: absolute; inset: 6px; border-radius: 10px; pointer-events: none; z-index: 3; mix-blend-mode: overlay;
  background: radial-gradient(circle at var(--mx, 30%) var(--my, 20%), rgba(255,255,255,.75), transparent 48%); }
.big .holo { position: absolute; inset: 6px; border-radius: 10px; pointer-events: none; z-index: 3; opacity: 0; }
.big.r-rare .holo { opacity: .35; mix-blend-mode: soft-light; background: linear-gradient(calc(110deg + var(--ry) * 5), transparent 25%, rgba(255,255,255,.9) 50%, transparent 75%); }
.big.r-epic .holo, .big.r-leg .holo { opacity: .4; mix-blend-mode: color-dodge;
  background: linear-gradient(calc(115deg + var(--ry) * 6), transparent 8%, rgba(255,80,200,.5) 28%, rgba(80,230,255,.6) 44%, rgba(255,240,90,.5) 60%, rgba(120,255,160,.4) 74%, transparent 92%); }
.big.r-leg { box-shadow: 0 0 30px rgba(255,211,107,.8), 0 18px 30px rgba(0,0,0,.35); }
.sheet { animation: sheet2 .32s cubic-bezier(.2,1.1,.3,1); }
@keyframes sheet2 { from { transform: translateY(70px); opacity: .3; } }
#modal { animation: fadein .2s ease; backdrop-filter: blur(2px); }
/* fin de service : cinématique */
.endov { flex-direction: column; overflow: hidden; background: radial-gradient(circle at 50% 30%, rgba(142,34,54,.88), rgba(22,14,16,.97) 70%); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: fadein .45s ease both; }
.endov .erays { position: absolute; left: 50%; top: 24%; width: 980px; height: 980px; margin: -490px 0 0 -490px; pointer-events: none;
  background: repeating-conic-gradient(rgba(255,226,140,.2) 0 6deg, transparent 6deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 0 8%, transparent 46%); mask: radial-gradient(circle, #000 0 8%, transparent 46%); animation: spin 30s linear infinite, fadein 1s ease both; }
.endov.lose .erays { background: repeating-conic-gradient(rgba(255,120,80,.07) 0 6deg, transparent 6deg 18deg); }
.endov.draw .erays { background: repeating-conic-gradient(rgba(255,220,200,.1) 0 6deg, transparent 6deg 18deg); }
.endhero { position: relative; z-index: 2; text-align: center; margin-bottom: 14px; }
.endhero .logo { animation: medal .8s cubic-bezier(.2,1.5,.35,1) both; }
.endhero .logo .emblem { width: 92px; height: 92px; }
.endov.lose .endhero .emblem { filter: grayscale(.6) brightness(.85); box-shadow: 0 0 0 3px #8f8486, 0 0 0 5px #4a1420, 0 10px 22px rgba(0,0,0,.45); }
.endov.lose .endhero .flame { animation: none; filter: none; opacity: .5; }
@keyframes medal { from { transform: scale(.2) rotate(-30deg); opacity: 0; } }
.endtitle { margin: 12px 0 0; font-family: var(--serif); font-weight: 900; font-size: 34px; max-width: 94vw; line-height: 1.02; letter-spacing: 1px; color: #fff; animation: ttl .7s cubic-bezier(.2,1.5,.35,1) both .2s; }
.endtitle.win { background: linear-gradient(100deg, #b8862b, #fff3c4 30%, #e2b13c 50%, #fff8dc 70%, #b8862b) 0 0 / 300px 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 #160b0e) drop-shadow(0 0 18px rgba(255,211,107,.6)); animation: ttl .7s cubic-bezier(.2,1.5,.35,1) both .2s, goldsweep2 3s linear infinite; }
.endtitle.lose { color: #ffd0d0; text-shadow: 0 3px 0 #160b0e, 0 0 18px rgba(255,90,90,.5); }
@keyframes ttl { from { transform: scale(2.2); opacity: 0; letter-spacing: 12px; } }
.endsub { color: #ffe8a3; font-size: 14px; margin-top: 4px; animation: fadein .5s both .6s; }
.endov .endcard { position: relative; z-index: 2; animation: cardup .55s cubic-bezier(.2,1.1,.3,1) both .45s; box-shadow: 0 20px 40px rgba(0,0,0,.45), 0 0 0 2px rgba(226,177,60,.55); }
@keyframes cardup { from { transform: translateY(60px); opacity: 0; } }
.endcard .zs div { animation: chipin .4s cubic-bezier(.2,1.5,.4,1) both; animation-delay: calc(.75s + var(--i) * .16s); }
.endcard .zs div.w { background: linear-gradient(#fff8dc, #ffeeb5); box-shadow: inset 0 0 0 1px #e2b13c; }
.endcard .zs div.l { background: #fff0f0; }
@keyframes chipin { from { transform: scale(.4); opacity: 0; } }
.endcard .gain { font-size: 34px; text-shadow: 0 0 14px currentColor; }
.endcard .prog { height: 12px; box-shadow: inset 0 1px 2px rgba(0,0,0,.2); }
.endcard .prog i { width: 0; transition: width 1.1s cubic-bezier(.3,.9,.3,1); box-shadow: 0 0 10px #ffb347; position: relative; overflow: hidden; }
.endcard .prog i::after { content: ""; position: absolute; inset: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent); animation: ld 1.4s ease-in-out infinite; }
.endcard .rk { margin-top: 12px; font-family: var(--serif); font-weight: 800; color: #6d1a2a; }
.endcard .rk.promo { animation: promo .8s ease 2; }
@keyframes promo { 50% { transform: scale(1.18); color: #e8590c; text-shadow: 0 0 12px rgba(255,211,107,.9); } }
.endcard .endbtns { animation: fadein .5s both 1.5s; }

@media (max-height: 700px) { .menu .hero { height: 210px; } .menu .logo { margin-top: -56px; } .logo .rush { font-size: 54px; } .endtitle { font-size: 32px; } .endhero .logo .emblem { width: 70px; height: 70px; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
  #scene .rays, #bg, .hero .hrays, .hero .shim, .hero .birds { display: none; }
}

/* bandeau des petites cartes : icône de famille seulement (les pastilles coût/rendement cachent les coins) */
.hc .band { font-size: 10px; letter-spacing: 0; }
.hc .band .fn { display: none; }
.actbtn.tip { white-space: nowrap; }
.menu { overflow-y: auto; overflow-x: hidden; }
@media (max-height: 700px) {
  .menu .hero { height: 150px; } .hero .house { bottom: 44px; transform: scale(.8); transform-origin: left bottom; } .hero .dome { bottom: 98px; transform: scale(.8); transform-origin: center bottom; }
  .hero .sun { top: 22px; width: 70px; height: 70px; } .hero .sea { height: 60px; } .hero .shim { height: 60px; }
  .menu .logo { margin-top: -40px; } .menu .logo .emblem { width: 58px; height: 58px; } .logo .rush { font-size: 48px; } .logo .tg { font-size: 14px; letter-spacing: 6px; }
  .menu .subtitle { font-size: 14px; margin: 6px 0 8px; } .rankcard { margin-bottom: 10px; padding: 6px 10px; } .btns { gap: 9px; } .bigbtn { padding: 12px 14px; font-size: 16px; }
  .actbtn.tip { font-size: 11px; padding: 9px 9px; } .energy .flame { width: 46px; height: 46px; font-size: 22px; }
}

.grid .info { width: 20px; height: 20px; bottom: -11px; left: -5px; font-size: 11px; }
.grid .wrap.in::after { bottom: -11px; }