/*
  MyCasino V29 — Mobile/Responsive Audit + Motion Polish
  Frontend-only layer. No RTP, payout, payment or wallet logic is changed here.
*/

/* ---------- Layer safety ---------- */
body.modal-open{overflow:hidden!important}
body.modal-open .mobile-dock,
body.game-open .mobile-dock,
body.mobile-menu-open .mobile-dock,
body.maintenance-active .mobile-dock{display:none!important}

/* The mobile menu must sit above the app, but below full-screen modals. */
@media(max-width:900px){
  .sidebar{z-index:92!important}
  .sidebar.open{z-index:92!important;box-shadow:24px 0 70px rgba(0,0,0,.62)!important}
}

/* ---------- Mobile viewport: reserve real space for topbar + dock ---------- */
@media(max-width:900px){
  body:not(.modal-open):not(.maintenance-active){
    height:100vh!important;
    height:100dvh!important;
    overflow:hidden!important;
    padding-bottom:0!important;
  }
  body:not(.modal-open):not(.maintenance-active) .app-content{
    position:fixed!important;
    z-index:1!important;
    top:58px!important;
    right:0!important;
    bottom:calc(74px + env(safe-area-inset-bottom))!important;
    left:0!important;
    width:100%!important;
    max-width:none!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    padding-top:0!important;
    padding-bottom:14px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-y:contain!important;
    scroll-padding-top:10px!important;
    scroll-padding-bottom:18px!important;
  }
  .mobile-dock{
    height:58px!important;
    min-height:58px!important;
    z-index:78!important;
  }
  .mobile-dock a,.mobile-dock button{
    min-width:0!important;
    min-height:48px!important;
    touch-action:manipulation!important;
  }

  /* 44px is a much safer finger target than the old 34–40px controls. */
  #mobileMenu,.wallet-button,.avatarBtn{
    min-height:44px!important;
    height:44px!important;
    touch-action:manipulation!important;
  }
  #mobileMenu{width:44px!important;min-width:44px!important;padding:0!important}
  .wallet-button{min-width:44px!important}
  .brand{min-height:44px!important;align-items:center!important}
  .category-chip{min-height:44px!important}

  /* All generic modal tab systems stay reachable and never hide under each other. */
  .tabbar,.wallet-tabs,.management-tabs{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:7px!important;
    overflow:visible!important;
    padding-bottom:10px!important;
  }
  .tabbar button,.wallet-tabs button,.management-tabs button{
    flex:1 1 132px!important;
    min-width:0!important;
    min-height:44px!important;
    height:auto!important;
    padding:9px 11px!important;
    white-space:normal!important;
    line-height:1.2!important;
    touch-action:manipulation!important;
  }

  /* Game/full-screen modals always win over navigation layers. */
  .modal-overlay{z-index:120!important}
  .modal-overlay .game-modal,.multiplayer-modal{z-index:121!important}
  .game-modal .modal-close,.multiplayer-modal .modal-close{z-index:140!important}
}

/* Categories: on small phones show every category instead of cutting the row off. */
@media(max-width:560px){
  .category-row{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
    width:calc(100% - 12px)!important;
    overflow:visible!important;
    padding:14px 0 5px!important;
  }
  .category-chip{
    width:100%!important;
    min-width:0!important;
    min-height:44px!important;
    height:auto!important;
    padding:8px 9px!important;
    white-space:normal!important;
    line-height:1.12!important;
    text-align:center!important;
    touch-action:manipulation!important;
  }
  .category-chip:last-child:nth-child(odd){grid-column:1/-1!important}
}

@media(max-width:360px){
  .topbar-inner{gap:4px!important;padding-left:6px!important;padding-right:6px!important}
  .avatarBtn{max-width:70px!important;padding-inline:7px!important;font-size:9px!important}
  .wallet-button{width:44px!important;min-width:44px!important;max-width:44px!important}
}

/* ---------- Owner console mobile navigation ---------- */
.owner-mobile-select{display:none}
@media(max-width:820px){
  .owner-console-nav{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:8px!important;
    overflow:visible!important;
    padding:9px 48px 9px 10px!important;
    white-space:normal!important;
  }
  .owner-console-brand{
    display:flex!important;
    width:auto!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
  }
  .owner-console-brand small{display:block!important}
  .owner-nav-group,.owner-nav-status{display:none!important}
  .owner-mobile-select{
    display:block!important;
    width:100%!important;
    min-height:44px!important;
    border:1px solid rgba(78,160,224,.24)!important;
    border-radius:11px!important;
    padding:0 38px 0 12px!important;
    background:#0b2235!important;
    color:#eaf6ff!important;
    font-size:12px!important;
    font-weight:850!important;
    outline:none!important;
  }
  .owner-console-header{padding-top:13px!important}
  .owner-console-content{padding-bottom:calc(22px + env(safe-area-inset-bottom))!important}
}

/* Tables never push the whole mobile modal wider than the viewport. */
@media(max-width:900px){
  .table-wrap,.owner-table-wrap,.payout-table-wrap{max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}
  .table{width:max-content!important;min-width:100%!important}
  .owner-console-card,.panel,.payout-wallet-card{min-width:0!important;max-width:100%!important}
  code{overflow-wrap:anywhere}
}

/* ---------- Game surface motion ---------- */
.game-stage{
  position:relative!important;
  isolation:isolate!important;
  contain:paint!important;
}
.game-stage>*{position:relative;z-index:2}
.game-stage:before{
  content:"";
  position:absolute;
  z-index:0;
  inset:-28%;
  pointer-events:none;
  background:
    radial-gradient(circle at 24% 22%,rgba(66,190,255,.18),transparent 26%),
    radial-gradient(circle at 76% 72%,rgba(46,246,196,.09),transparent 28%);
  filter:blur(8px);
  animation:v29StageDrift 8s ease-in-out infinite alternate;
}
.game-stage:after{
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  pointer-events:none;
  opacity:.18;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.12) 49%,transparent 63%);
  transform:translateX(-120%);
  animation:v29StageSweep 7s ease-in-out infinite;
}
@keyframes v29StageDrift{to{transform:translate3d(4%,-3%,0) scale(1.06)}}
@keyframes v29StageSweep{0%,63%{transform:translateX(-120%)}82%,100%{transform:translateX(120%)}}

/* Result FX are visual only and never decide a game outcome. */
.game-fx-layer{position:absolute!important;z-index:60!important;inset:0!important;overflow:hidden!important;pointer-events:none!important}
.game-fx-particle{
  position:absolute!important;
  left:50%!important;
  top:52%!important;
  width:8px!important;
  height:8px!important;
  border-radius:2px!important;
  background:var(--fx-color,#54d9ff)!important;
  box-shadow:0 0 18px rgba(84,217,255,.45)!important;
  transform:translate(-50%,-50%) rotate(0deg)!important;
  animation:v29FxBurst var(--fx-time,.86s) cubic-bezier(.15,.7,.2,1) forwards!important;
  animation-delay:var(--fx-delay,0s)!important;
}
.game-fx-layer.win{--fx-color:#61f3c6}.game-fx-layer.push{--fx-color:#65c7ff}.game-fx-layer.loss{--fx-color:#ff7280}
@keyframes v29FxBurst{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(0deg)}
  12%{opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + var(--fx-x)),calc(-50% + var(--fx-y))) scale(.9) rotate(var(--fx-r))}
}
.game-stage.fx-win{animation:v29StageWin .56s ease-out}
.game-stage.fx-push{animation:v29StagePush .42s ease-out}
.game-stage.fx-loss{animation:v29StageLoss .34s ease-out}
@keyframes v29StageWin{0%{box-shadow:inset 0 0 0 rgba(80,247,191,0)}45%{box-shadow:inset 0 0 48px rgba(80,247,191,.20),0 0 32px rgba(60,205,255,.12)}100%{box-shadow:inset 0 0 0 rgba(80,247,191,0)}}
@keyframes v29StagePush{50%{filter:brightness(1.13)}}
@keyframes v29StageLoss{25%{transform:translateX(-3px)}50%{transform:translateX(3px)}75%{transform:translateX(-1px)}100%{transform:none}}

/* Game cards feel responsive without changing any game odds. */
@media(hover:hover) and (pointer:fine){
  .game-card .game-art img,.original-card img{transition:transform .28s cubic-bezier(.2,.75,.2,1),filter .28s ease!important}
  .game-card:hover .game-art img,.original-card:hover img{transform:scale(1.025) translateY(-2px)!important;filter:saturate(1.08) brightness(1.04)!important}
}
.game-card:active .game-art,.original-card:active img{transform:scale(.985)!important}

/* Crash: moving marker follows the already-known result curve. */
.crash-rocket{
  position:absolute!important;
  z-index:8!important;
  left:8%;
  bottom:18%;
  width:18px;
  height:18px;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  background:#e9fbff!important;
  color:#0f7ec5!important;
  box-shadow:0 0 0 5px rgba(86,204,255,.10),0 0 24px rgba(66,201,255,.55)!important;
  font-size:10px!important;
}
.crash-rocket:after{content:"";position:absolute;right:13px;width:22px;height:6px;border-radius:999px;background:linear-gradient(90deg,transparent,#4cc8ff);filter:blur(1px)}
.crash-stage.crashed .crash-rocket{animation:v29RocketPop .36s ease-out}
@keyframes v29RocketPop{50%{transform:scale(1.45);filter:brightness(1.5)}100%{transform:scale(.75);opacity:.35}}

/* Plinko */
.plinko-ball{box-shadow:0 0 0 4px rgba(93,211,255,.12),0 0 22px rgba(73,203,255,.50)!important}
.plinko-ball.landed{animation:v29BallLand .34s cubic-bezier(.18,.9,.25,1)!important}
.plinko-bins span.hit{animation:v29BinHit .5s cubic-bezier(.18,.9,.25,1)!important}
@keyframes v29BallLand{0%{transform:translate(-50%,-50%) scale(.72)}55%{transform:translate(-50%,-50%) scale(1.35)}100%{transform:translate(-50%,-50%) scale(1)}}
@keyframes v29BinHit{0%{transform:translateY(0)}45%{transform:translateY(-8px) scale(1.08)}100%{transform:none}}

/* Dino parallax + dust */
.dino-stage{overflow:hidden!important}
.dino-sky:after{content:"";position:absolute;inset:10% -30% auto;height:2px;background:repeating-linear-gradient(90deg,transparent 0 30px,rgba(143,204,235,.22) 31px 66px);animation:v29SkyMove 3.6s linear infinite}
.dino-track:after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:repeating-linear-gradient(90deg,rgba(95,198,150,.3) 0 16px,transparent 16px 27px);animation:v29GroundMove .55s linear infinite}
.dino-sprite.running{filter:drop-shadow(0 8px 12px rgba(0,0,0,.28)) drop-shadow(0 0 10px rgba(72,238,158,.18))!important}
@keyframes v29SkyMove{to{transform:translateX(-15%)}}
@keyframes v29GroundMove{to{background-position:-43px 0}}

/* Wheel */
.result-wheel.spinning .wheel-pointer{animation:v29PointerTick .12s ease-in-out infinite alternate!important}
.result-wheel.hit .wheel-pointer{animation:v29PointerHit .38s cubic-bezier(.18,.9,.25,1)!important;color:#8ff5d5!important}
@keyframes v29PointerTick{to{transform:translateY(4px) rotate(-4deg)}}
@keyframes v29PointerHit{40%{transform:translateY(7px) scale(1.25)}100%{transform:none}}

/* Roulette */
.roulette-table.spinning .roulette-ball{filter:drop-shadow(0 0 8px #fff) drop-shadow(0 0 16px rgba(100,210,255,.65))!important}
.roulette-numbers button.hit{animation:v29RouletteHit .58s cubic-bezier(.18,.9,.25,1)!important}
@keyframes v29RouletteHit{0%{transform:scale(.75)}55%{transform:scale(1.18)}100%{transform:none}}

/* Slots */
.slot-machine.spinning{animation:v29MachineHum .14s ease-in-out infinite alternate}
.slot-machine.win-flash{animation:v29SlotWin .6s ease-out!important}
@keyframes v29MachineHum{to{transform:translateY(-1px)}}
@keyframes v29SlotWin{45%{box-shadow:0 0 0 3px rgba(93,238,197,.2),0 0 42px rgba(70,202,255,.28);filter:brightness(1.18)}100%{filter:none}}

/* Target / vault */
.vault-door.winner{animation:v29VaultWinner .58s cubic-bezier(.18,.9,.25,1)!important}
.vault-door.empty{transition:opacity .25s ease,transform .25s ease!important;transform:scale(.97)!important}
@keyframes v29VaultWinner{0%{transform:perspective(500px) rotateY(0) scale(.9)}55%{transform:perspective(500px) rotateY(-10deg) scale(1.08)}100%{transform:none}}

/* Session games */
.mines-board button.safe{box-shadow:inset 0 0 22px rgba(69,240,168,.15)!important}
.mines-board button.bomb{box-shadow:0 0 24px rgba(255,83,101,.20)!important}
.playing-card{transform-origin:50% 110%!important;box-shadow:0 8px 18px rgba(0,0,0,.20)!important}

@media(max-width:600px){
  .game-stage:after{opacity:.10}
  .game-fx-particle{width:7px!important;height:7px!important}
  .crash-rocket{width:15px;height:15px;font-size:8px!important}
}

@media(prefers-reduced-motion:reduce){
  .game-stage:before,.game-stage:after,.game-fx-particle,.game-stage.fx-win,.game-stage.fx-push,.game-stage.fx-loss,
  .crash-rocket,.plinko-ball,.plinko-bins span,.dino-sky:after,.dino-track:after,.result-wheel .wheel-pointer,
  .roulette-numbers button,.slot-machine,.vault-door{animation:none!important;transition:none!important}
}

/* Plinko grid must be allowed to shrink on 320/360px phones. */
.plinko-bins{grid-template-columns:repeat(var(--plinko-cols,13),minmax(0,1fr))!important;min-width:0!important}
.plinko-bins span{min-width:0!important;overflow:hidden!important;text-overflow:clip!important}
@media(max-width:380px){
  .plinko-bins{gap:2px!important;left:1%!important;right:1%!important}
  .plinko-bins span{padding:1px!important;font-size:6px!important}
}

@media(max-width:900px){
  .game-modal .modal-close{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important}
  .game-controls .game-settings button,
  .game-controls .bet-tools button,
  .game-controls .roulette-quick button,
  .game-controls .target-btn,
  .game-controls .play-button,
  #sessionActions button{min-height:44px!important;touch-action:manipulation!important}
}