/* RUSH TABLE G v4 — effets visuels supplémentaires (CSS pur, aucune image).
   Toutes les animations infinies sont sur des calques décoratifs (pointer-events: none) et coupées en « animations réduites ». */

/* ---------- Ambiance des lieux (sous les cartes de la colonne) ---------- */
.board .col { position: relative; }
.board .col > .side, .board .col > .loc { position: relative; z-index: 1; }
.amb { position: absolute; inset: 0; border-radius: 12px; overflow: hidden; pointer-events: none; z-index: 0; }
.amb i { position: absolute; display: block; will-change: transform, opacity; animation-delay: calc(var(--ph, 0) * -1s + var(--d, 0s)); animation-iteration-count: infinite; animation-timing-function: ease-in-out; }
/* (règle plus spécifique : les raccourcis « animation: » ci-dessous ne doivent pas annuler la boucle ni la phase) */
.board .amb i { animation-delay: calc(var(--ph, 0) * -1s + var(--d, 0s)); animation-iteration-count: infinite; }
.amb i:nth-child(2) { --d: -1.3s; } .amb i:nth-child(3) { --d: -2.6s; } .amb i:nth-child(4) { --d: -3.9s; }

/* Congélateur : brume givrée qui dérive + éclats de givre */
.a-congel { box-shadow: inset 0 0 22px rgba(165,216,255,.35); background: linear-gradient(rgba(165,216,255,.10), rgba(165,216,255,.02) 40%, rgba(165,216,255,.14)); }
.a-congel i { width: 170%; height: 34%; left: -35%; border-radius: 50%; background: radial-gradient(closest-side, rgba(220,240,255,.42), rgba(220,240,255,0)); animation: mist 7s; }
.a-congel i:nth-child(1) { bottom: -6%; } .a-congel i:nth-child(2) { bottom: 22%; animation-duration: 9s; opacity: .7; } .a-congel i:nth-child(3) { top: -8%; animation-duration: 8s; }
.a-congel i:nth-child(4) { width: 100%; height: 100%; left: 0; top: 0; border-radius: 0; background: radial-gradient(1.5px 1.5px at 18% 30%, #fff, transparent), radial-gradient(1.5px 1.5px at 72% 62%, #fff, transparent), radial-gradient(1px 1px at 40% 82%, #fff, transparent), radial-gradient(1.5px 1.5px at 86% 18%, #fff, transparent); animation: twinkle 2.4s; }
@keyframes mist { 0%, 100% { transform: translateX(-12%); opacity: .55; } 50% { transform: translateX(12%); opacity: 1; } }
@keyframes twinkle { 0%, 100% { opacity: .15; } 50% { opacity: .9; } }

/* Coin fumeur : volutes grises qui montent */
.a-fumeur i { width: 60px; height: 60px; left: 26%; bottom: 6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(215,210,210,.48), rgba(215,210,210,.12) 60%, rgba(215,210,210,0)); animation: smoke 5.2s ease-out; }
.a-fumeur i:nth-child(2) { left: 52%; } .a-fumeur i:nth-child(3) { left: 18%; } .a-fumeur i:nth-child(4) { left: 62%; --d: -4.6s; }
@keyframes smoke { 0% { transform: translate(0, 0) scale(.5); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(18px, -330px) scale(2.4); opacity: 0; } }

/* Cuisine : vapeur blanche + lueur des fourneaux */
.a-cuisine { background: radial-gradient(120% 40% at 50% 104%, rgba(255,122,26,.28), transparent 70%); }
.a-cuisine i { width: 38px; height: 70px; left: 22%; bottom: 4%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.45), rgba(255,255,255,.1) 60%, rgba(255,255,255,0)); animation: steam 3.4s ease-out; }
.a-cuisine i:nth-child(2) { left: 48%; } .a-cuisine i:nth-child(3) { left: 66%; }
.a-cuisine i:nth-child(4) { left: 0; right: 0; width: auto; bottom: 0; height: 28%; border-radius: 0; background: radial-gradient(90% 100% at 50% 100%, rgba(255,150,60,.35), transparent 70%); animation: heat 1.6s; }
@keyframes steam { 0% { transform: translateY(0) scaleX(.6); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-300px) scaleX(1.8); opacity: 0; } }
@keyframes heat { 0%, 100% { opacity: .55; } 40% { opacity: 1; } 70% { opacity: .7; } }

/* Stationnement : phares d'auto qui balaient le mur (bandes de lumière douces) */
.a-stationnement i { top: 0; bottom: 0; width: 70%; left: 0; background: linear-gradient(90deg, rgba(255,236,170,0), rgba(255,236,170,.30) 45%, rgba(255,250,225,.42) 50%, rgba(255,236,170,.30) 55%, rgba(255,236,170,0)); animation: sweep 6s linear; }
.a-stationnement i:nth-child(2) { --d: -3s; animation-duration: 7.5s; opacity: .7; }
.a-stationnement i:nth-child(3), .a-stationnement i:nth-child(4) { top: auto; bottom: 10px; width: 16px; height: 9px; border-radius: 50%; background: radial-gradient(closest-side, #fffbe6, rgba(255,236,170,.6) 50%, rgba(255,236,170,0)); box-shadow: 0 0 14px 4px rgba(255,236,170,.45); animation: lights 6s linear; }
.a-stationnement i:nth-child(4) { --d: -5.75s; }
@keyframes sweep { 0% { transform: translateX(-110%); } 100% { transform: translateX(160%); } }
@keyframes lights { 0% { transform: translateX(-30px); opacity: 0; } 8% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(150px); opacity: 0; } }

/* Toilette : bulles de savon */
.a-toilette i { width: 12px; height: 12px; left: 25%; bottom: 0; border-radius: 50%; border: 1px solid rgba(205,238,255,.75); box-shadow: 0 0 6px rgba(165,216,255,.45); background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.95) 0 14%, rgba(205,238,255,.08) 38%, rgba(205,238,255,.22) 100%); animation: bubble 4.6s ease-in; }
.a-toilette i:nth-child(2) { left: 60%; width: 9px; height: 9px; } .a-toilette i:nth-child(3) { left: 42%; width: 15px; height: 15px; } .a-toilette i:nth-child(4) { left: 78%; width: 7px; height: 7px; }
@keyframes bubble { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; } 50% { transform: translate(8px, -160px); } 100% { transform: translate(-6px, -330px); opacity: 0; } }

/* La passe : lampes chauffantes qui pulsent */
.a-passe i { left: 4%; right: 4%; top: -12%; height: 46%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255,140,40,.5), rgba(255,140,40,.12) 60%, rgba(255,140,40,0)); animation: lamp 2.8s; }
.a-passe i:nth-child(2) { top: auto; bottom: -14%; height: 36%; opacity: .7; } .a-passe i:nth-child(3), .a-passe i:nth-child(4) { display: none; }
@keyframes lamp { 0%, 100% { opacity: .55; transform: scaleX(.92); } 50% { opacity: 1; transform: scaleX(1.05); } }

/* Comptoir hôtesse : projecteur doré + scintillements d'accueil */
.a-comptoir i { width: 90%; height: 120%; left: 5%; top: -10%; transform-origin: 50% 0; background: radial-gradient(60% 100% at 50% 0, rgba(255,226,140,.38), rgba(255,226,140,.1) 60%, rgba(255,226,140,0) 100%); animation: spot 7s; }
.a-comptoir i:nth-child(2) { width: 100%; height: 100%; left: 0; top: 0; clip-path: none; background: radial-gradient(1.5px 1.5px at 22% 70%, #ffe8a3, transparent), radial-gradient(2px 2px at 74% 40%, #ffe8a3, transparent), radial-gradient(1.5px 1.5px at 50% 88%, #ffe8a3, transparent); animation: twinkle 1.9s; }
.a-comptoir i:nth-child(3), .a-comptoir i:nth-child(4) { display: none; }
@keyframes spot { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }

/* ---------- Combat : secousse de colonne, synergie, faisceaux de zone, combo ---------- */
.side.quake { animation: quake .32s ease-out; }
@keyframes quake { 20% { transform: translate(0, 3px); } 45% { transform: translate(0, -2px); } 70% { transform: translate(0, 1px); } }
.mc.synergy { animation: syn .7s ease-out; }
@keyframes syn { 0% { box-shadow: 0 0 0 0 rgba(140,233,154,0); } 30% { box-shadow: 0 0 0 3px #8ce99a, 0 0 22px rgba(140,233,154,.95); } 100% { box-shadow: 0 0 0 0 rgba(140,233,154,0); } }
.float.combo { font-size: 15px; color: #c3fae8; white-space: nowrap; margin-top: -30px; letter-spacing: .5px; text-shadow: 0 0 12px #63e6be, 0 2px 0 rgba(0,0,0,.7); }
.zbeam { position: fixed; z-index: 4; pointer-events: none; transform-origin: 50% 100%; animation: beam .7s cubic-bezier(.2,.9,.3,1) both; border-radius: 12px 12px 0 0; }
.zbeam.w { background: linear-gradient(to top, rgba(255,214,107,.55), rgba(255,214,107,.18) 45%, rgba(255,214,107,0)); box-shadow: 0 0 34px rgba(255,214,107,.45); }
.zbeam.w::before { content: ""; position: absolute; left: 50%; width: 3px; margin-left: -1.5px; top: 0; bottom: 0; background: linear-gradient(to top, rgba(255,251,230,.9), rgba(255,251,230,0) 75%); box-shadow: 0 0 12px 3px rgba(255,236,170,.55); }
.zbeam.l { transform-origin: 50% 0; background: linear-gradient(rgba(255,90,90,.45), rgba(255,90,90,.08) 70%, rgba(255,90,90,0)); }
.zbeam::after { content: ""; position: absolute; inset: 0 30%; background: linear-gradient(to top, rgba(255,255,255,.55), transparent 70%); filter: blur(4px); }
.zbeam.l::after { display: none; }
@keyframes beam { 0% { transform: scaleY(0); opacity: 0; } 60% { opacity: 1; } 100% { transform: scaleY(1); opacity: .85; } }

/* Orbe d'énergie : cœur qui bat + onde */
.energy .flame { position: relative; }
.energy .flame::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid rgba(255,180,90,.8); pointer-events: none; animation: orbwave 2.2s ease-out infinite; }
.energy .flame.empty::after { display: none; }
@keyframes orbwave { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.65); opacity: 0; } }

/* ---------- Menus : boutons lumineux au toucher / survol ---------- */
button:not(:disabled):active, .tile:active, .chip:active { filter: brightness(1.18) saturate(1.1); }
.playbtn:active, .sbtn.pri:active, .lvb:active, .claim:active, .buy:active { box-shadow: 0 0 0 2px #ffe8a3, 0 0 26px rgba(255,211,107,.9) !important; }
.tab:active .ti { filter: drop-shadow(0 0 8px #ffd36b); }
@media (hover: hover) {
  button:not(:disabled):hover, .tile:hover { filter: brightness(1.1); }
  .playbtn:hover, .sbtn.pri:hover { box-shadow: 0 0 0 2px rgba(255,232,163,.8), 0 0 22px rgba(255,211,107,.7); }
  .grid .wrap .hc:not(.locked):hover { box-shadow: 0 0 0 2px var(--r, #ffd36b), 0 0 18px var(--r, #ffd36b); }
}
.tab.on .ti { filter: drop-shadow(0 0 6px rgba(255,211,107,.85)); }

/* Collection : reflet qui passe lentement sur les cartes débloquées (décalé carte par carte) */
.grid .wrap .hc:not(.locked)::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 5;
  background: linear-gradient(115deg, transparent 0 38%, rgba(255,255,255,.38) 46%, rgba(255,255,255,.08) 52%, transparent 60%) no-repeat;
  background-size: 300% 100%; background-position: 150% 0; animation: shimmer 6.5s ease-in-out infinite; }
.grid .wrap:nth-child(3n+1) .hc::after { animation-delay: -1.1s; } .grid .wrap:nth-child(3n+2) .hc::after { animation-delay: -2.9s; } .grid .wrap:nth-child(5n) .hc::after { animation-delay: -4.4s; }
.grid .wrap .hc.f2::after, .grid .wrap .hc.f3::after, .grid .wrap .hc.f4::after { animation-duration: 3.6s; background-image: linear-gradient(115deg, transparent 0 36%, rgba(255,255,255,.55) 45%, rgba(190,160,255,.25) 52%, transparent 62%); }
@keyframes shimmer { 0%, 55% { background-position: 150% 0; } 85%, 100% { background-position: -50% 0; } }

/* ---------- Réglages : curseurs de volume ---------- */
.volrow { padding: 0 0 12px; border-bottom: 1px solid rgba(255,255,255,.08); }
.volrow .tog { border-bottom: 0; padding-bottom: 6px; }
.volrow .vs { display: flex; align-items: center; gap: 10px; padding: 0 2px; }
.volrow .vs .ic { font-size: 14px; opacity: .7; }
.volrow .vs output { min-width: 44px; text-align: right; font-variant-numeric: tabular-nums; color: #ffe8a3; font-weight: 700; font-size: 13px; }
.volrow input[type=range] { flex: 1; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #d4af37 var(--v, 60%), rgba(255,255,255,.14) var(--v, 60%)); outline: none; }
.volrow input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff4cc, #d4af37 60%, #8a6d12); border: 2px solid #2b2b2e; box-shadow: 0 0 10px rgba(255,211,107,.6); }
.volrow input[type=range]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #d4af37; border: 2px solid #2b2b2e; }
.volrow.off input[type=range] { opacity: .4; }

/* ---------- Animations réduites : tout est figé ---------- */
body.reduce .amb i, body.reduce .energy .flame::after, body.reduce .grid .wrap .hc::after, body.reduce .zbeam, body.reduce .side.quake, body.reduce .mc.synergy { animation: none !important; }
body.reduce .grid .wrap .hc::after, body.reduce .energy .flame::after { display: none; }
body.reduce .a-fumeur i, body.reduce .a-cuisine i:not(:nth-child(4)), body.reduce .a-toilette i, body.reduce .a-stationnement i { opacity: 0; }