/* ==========================================================================
   Kutaj Casino Group — casino.css
   Rich animated game visuals. Loaded after app.css.
   ========================================================================== */

/* Animated lobby aurora upgrade ------------------------------------------- */
.aurora {
    animation: auroraDrift 18s ease-in-out infinite alternate;
}
@keyframes auroraDrift {
    0%   { transform: translate3d(0,0,0) scale(1); }
    50%  { transform: translate3d(-3%, 2%, 0) scale(1.08); }
    100% { transform: translate3d(3%, -2%, 0) scale(1.04); }
}

/* Floating chips/particles behind the hero ------------------------------- */
.hero { position: relative; }
.hero-fx { position: absolute; inset: -40px -10px; z-index: -1; overflow: hidden; pointer-events: none; }
.hero-fx span {
    position: absolute; bottom: -40px;
    width: 26px; height: 26px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff6, transparent 60%), var(--grad);
    box-shadow: 0 0 18px rgba(0,229,255,.6);
    opacity: .0; animation: floatUp 9s linear infinite;
}
.hero-fx span:nth-child(odd){ background: radial-gradient(circle at 35% 30%, #fff6, transparent 60%), var(--grad-gold, linear-gradient(120deg,#FFC94A,#FF3FB8)); }
@keyframes floatUp {
    0%   { transform: translateY(0) scale(.6) rotate(0deg); opacity: 0; }
    10%  { opacity: .8; }
    90%  { opacity: .5; }
    100% { transform: translateY(-460px) scale(1) rotate(220deg); opacity: 0; }
}

/* Game card glow sweep ---------------------------------------------------- */
.game-card { position: relative; }
.game-card::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.08) 50%, transparent 70%);
    transform: translateX(-120%); transition: transform .6s ease; pointer-events: none;
}
.game-card:hover::before { transform: translateX(120%); }
.game-card-glyph { transition: transform .25s ease, box-shadow .25s ease; }
.game-card:hover .game-card-glyph { transform: scale(1.08) rotate(-4deg); box-shadow: 0 0 26px rgba(154,107,255,.55); }

/* Generic game stage wrapper --------------------------------------------- */
.cv-stage {
    position: relative;
    border-radius: 18px;
    background:
        radial-gradient(70% 90% at 50% 0%, rgba(77,124,255,.16), transparent 70%),
        linear-gradient(180deg, rgba(7,21,39,.85), rgba(5,8,22,.9));
    border: 1px solid var(--stroke-strong, rgba(120,140,200,.32));
    padding: 1.4rem;
    overflow: hidden;
    margin-bottom: 1rem;
}
.cv-stage::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(0deg, transparent, transparent 26px, rgba(255,255,255,.018) 27px);
}
.cv-canvas { display: block; width: 100%; height: auto; border-radius: 12px; position: relative; z-index: 1; }

/* Result banner pulse ----------------------------------------------------- */
.game-result.show { animation: resPop .35s cubic-bezier(.2,1.4,.4,1); }
@keyframes resPop { 0% { transform: scale(.96); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.game-result.win::before { content: "🎉 "; }
.win-flash { animation: winFlash .8s ease; }
@keyframes winFlash { 0%,100% { box-shadow: 0 0 0 rgba(124,255,107,0);} 50% { box-shadow: 0 0 50px rgba(124,255,107,.5);} }

/* ---- Coin Toss ---------------------------------------------------------- */
.coin3d-wrap { display: grid; place-items: center; padding: 1.2rem 0 1.6rem; perspective: 900px; }
.coin3d {
    width: 130px; height: 130px; position: relative; transform-style: preserve-3d;
    transition: transform .1s linear;
}
.coin3d .face {
    position: absolute; inset: 0; border-radius: 50%;
    display: grid; place-items: center; font-weight: 900; font-size: 2.4rem; color: #1a1407;
    backface-visibility: hidden;
    background: radial-gradient(circle at 35% 30%, #ffe9a8, #FFC94A 55%, #c8922a 100%);
    box-shadow: inset 0 0 18px rgba(255,255,255,.5), 0 0 30px rgba(255,201,74,.5);
    border: 4px solid #e8b94e;
}
.coin3d .tails { transform: rotateY(180deg);
    background: radial-gradient(circle at 35% 30%, #cfe9ff, #8ab4ff 55%, #4d7cff 100%);
    color: #07101e; border-color: #9ec3ff;
}
.coin3d.spin { animation: coinSpin var(--spin-dur,1.8s) cubic-bezier(.2,.7,.3,1) forwards; }
@keyframes coinSpin {
    0%   { transform: rotateY(0) translateY(0); }
    50%  { transform: rotateY(1440deg) translateY(-50px); }
    100% { transform: rotateY(var(--final-rot,3600deg)) translateY(0); }
}

/* ---- Dice Duel ---------------------------------------------------------- */
.dice-arena { display: flex; align-items: center; justify-content: center; gap: 2rem; padding: 1.4rem 0; }
.die3d {
    width: 84px; height: 84px; border-radius: 16px; display: grid; place-items: center;
    font-size: 2.6rem; font-weight: 900; position: relative;
    background: linear-gradient(145deg, #16224a, #0a1326);
    border: 1px solid var(--stroke-strong, rgba(120,140,200,.32));
    box-shadow: inset 0 2px 10px rgba(255,255,255,.08), 0 10px 30px -10px #000;
    color: var(--cyan, #00E5FF);
}
.die3d.p2 { color: var(--magenta, #FF3FB8); }
.die3d.rolling { animation: diceRoll .5s ease infinite; }
@keyframes diceRoll { 0%,100% { transform: rotate(-8deg) translateY(0);} 50% { transform: rotate(8deg) translateY(-10px);} }
.dice-vs { font-weight: 900; color: var(--ink-mute, #6f7aa3); font-size: 1.1rem; letter-spacing: .1em; }

/* ---- Lucky Wheel (canvas) ----------------------------------------------- */
.wheel-zone { display: grid; place-items: center; padding: .6rem 0 1.2rem; position: relative; }
.wheel-pointer-top {
    width: 0; height: 0; border-left: 13px solid transparent; border-right: 13px solid transparent;
    border-top: 22px solid var(--gold, #FFC94A); margin-bottom: -10px; z-index: 3;
    filter: drop-shadow(0 0 8px rgba(255,201,74,.8));
}

/* ---- Slots --------------------------------------------------------------- */
.slot-machine {
    background: linear-gradient(180deg, #1a1240, #0a1326);
    border: 2px solid var(--violet, #8B5CFF);
    border-radius: 18px; padding: 1.2rem; position: relative;
    box-shadow: 0 0 40px -10px rgba(139,92,255,.6), inset 0 0 30px rgba(0,0,0,.4);
}
.slot-window { display: flex; gap: .7rem; justify-content: center; padding: .6rem; background: #05080f; border-radius: 12px; }
.slot-reel {
    width: 88px; height: 110px; overflow: hidden; border-radius: 10px; position: relative;
    background: linear-gradient(180deg, #0c1530, #060a18);
    border: 1px solid var(--stroke-strong, rgba(120,140,200,.32));
    box-shadow: inset 0 8px 14px rgba(0,0,0,.6), inset 0 -8px 14px rgba(0,0,0,.6);
}
.slot-strip { display: flex; flex-direction: column; will-change: transform; }
.slot-cell { height: 110px; display: grid; place-items: center; font-size: 3rem; }
.slot-reel.spin .slot-strip { animation: reelRun .25s linear infinite; }
@keyframes reelRun { from { transform: translateY(0);} to { transform: translateY(-330px);} }
.slot-payline { position: absolute; left: 8px; right: 8px; top: 50%; height: 2px; background: var(--gold,#FFC94A); opacity:.5; box-shadow: 0 0 10px var(--gold,#FFC94A); }
.slot-machine.win { animation: winFlash 1s ease 2; }

/* ---- Greyhound Race (canvas) -------------------------------------------- */
.race-zone { padding: .4rem 0 1rem; }
.race-meta { display:flex; justify-content:space-between; font-size:.8rem; color: var(--ink-dim,#aab3d4); margin-top:.4rem; }

/* ---- RPS ---------------------------------------------------------------- */
.rps-arena { display: flex; align-items: center; justify-content: center; gap: 1.6rem; padding: 1.4rem 0; min-height: 120px; }
.rps-hand { font-size: 3.4rem; transition: transform .15s ease; filter: drop-shadow(0 6px 14px rgba(0,0,0,.5)); }
.rps-hand.player { transform: scaleX(-1); }
.rps-hand.shake { animation: rpsShake .4s ease infinite; }
@keyframes rpsShake { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-14px);} }
.rps-hand.player.shake { animation: rpsShakeP .4s ease infinite; }
@keyframes rpsShakeP { 0%,100%{ transform: scaleX(-1) translateY(0);} 50%{ transform: scaleX(-1) translateY(-14px);} }
.rps-vs-big { font-weight: 900; color: var(--violet,#8B5CFF); }

/* Confetti canvas overlay ------------------------------------------------- */
.fx-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 5; }

/* Bet bar polish ---------------------------------------------------------- */
.bet-bar { background: rgba(7,21,39,.5); border-radius: 14px; padding: 1rem; border: 1px solid var(--stroke); }
#playButton { min-width: 130px; position: relative; overflow: hidden; }
#playButton.busy { opacity: .7; pointer-events: none; }

/* Win/lose number popup --------------------------------------------------- */
.delta-pop {
    position: absolute; left: 50%; top: 30%; transform: translateX(-50%);
    font-weight: 900; font-size: 2rem; pointer-events: none; z-index: 6;
    animation: deltaUp 1.3s ease forwards; text-shadow: 0 2px 12px #000;
}
.delta-pop.win { color: var(--green,#7CFF6B); }
.delta-pop.lose { color: var(--red,#FF3B5C); }
@keyframes deltaUp { 0%{ opacity:0; transform: translate(-50%, 10px) scale(.8);} 20%{opacity:1;} 100%{ opacity:0; transform: translate(-50%, -60px) scale(1.2);} }