/* Shared professional card-game styling */
:root{
  --bwg-card-felt0:#0b3b22;
  --bwg-card-felt1:#0f4f2a;
  --bwg-card-felt2:#082b19;
  --bwg-card-panel:rgba(0,0,0,.24);
  --bwg-card-line:rgba(255,255,255,.14);
  --bwg-card-text:#f8fff9;
  --bwg-card-muted:#d7f5df;
  --bwg-card-gold:#ffd166;
  --bwg-card-gold-2:#f59f00;
  --bwg-card-shadow:0 24px 70px rgba(0,0,0,.45);
}

html, body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

body{
  color:var(--bwg-card-text);
  background:
    radial-gradient(circle at center, #37ef81 0%, var(--bwg-card-felt1) 22%, var(--bwg-card-felt0) 56%, var(--bwg-card-felt2) 100%) !important;
}

.app,
.game-shell,
.card-game,
.table,
.table-area,
.table-scroll,
.board,
.board-shell,
.board-wrap,
.playWrap,
.pyramid-board,
.card-table,
.solitaire-board,
.game-board,
.poker-table,
.blackjack-table,
.bridge-table,
.trick-table,
.canasta-table{
  background:
    radial-gradient(circle at center, rgba(255,255,255,.04), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.01)) !important;
  border:1px solid var(--bwg-card-line) !important;
  border-radius:30px !important;
  box-shadow:var(--bwg-card-shadow) !important;
}

.topbar,
.hud,
.statusRow,
.scoreboard,
.action-panel,
.controls-area,
.message-area,
.hudItem,
.hudPill,
.panel{
  background:var(--bwg-card-panel) !important;
  border:1px solid var(--bwg-card-line) !important;
  box-shadow:var(--bwg-card-shadow) !important;
  backdrop-filter:blur(12px);
}

.btn,
.actionBtn,
.game-btn,
.primary,
.primary-btn,
.secondary-btn,
.chipBtn,
.betBtn,
.targetBtn,
.pile-btn,
.top-btn,
.control-btn{
  border-radius:14px !important;
  font-family:"Space Grotesk",sans-serif !important;
  font-weight:800 !important;
}

.primary,
.primary-btn,
.btn.primary,
.actionBtn.primary{
  color:#1d1200 !important;
  background:linear-gradient(135deg,var(--bwg-card-gold),var(--bwg-card-gold-2)) !important;
}

.card,
.playing-card,
.hand-card,
.pile,
.pile-slot,
.slot,
.foundation-pile,
.freecell,
.completed-pile,
.removed-pile,
.deck-pile,
.tableau .card,
.waste .card,
.stock .card{
  border-radius:14px !important;
  box-shadow:0 12px 28px rgba(0,0,0,.45) !important;
}

.card-corner-helper,
.k,
.v,
.sym,
.red,
.black{
  text-shadow:
    0 1px 0 rgba(255,255,255,.8),
    0 2px 4px rgba(0,0,0,.28);
}

.card-corner-helper{
  position:absolute !important;
  top:5px !important;
  left:5px !important;
  background:rgba(255,255,255,.9) !important;
  border-radius:8px !important;
  padding:3px 5px !important;
  font-size:clamp(.58rem,1.4vw,.82rem) !important;
  line-height:1 !important;
  font-weight:900 !important;
  pointer-events:none !important;
  z-index:10 !important;
}

.card.bwg-deal-in,
.playing-card.bwg-deal-in,
.hand-card.bwg-deal-in{
  animation:bwgDealIn .34s cubic-bezier(.2,.9,.2,1) both;
}

.bwg-win-dance{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9999;
  overflow:hidden;
}

.bwg-win-dance .bwg-win-card{
  position:absolute;
  width:var(--bwg-win-card-width, 78px);
  height:calc(var(--bwg-win-card-width, 78px) * 1.42);
  border-radius:14px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.86), rgba(255,255,255,.72)),
    linear-gradient(180deg, rgba(255,209,102,.18), rgba(41,242,212,.10));
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 18px 40px rgba(0,0,0,.24);
  transform:translate3d(0,0,0);
  animation:bwgWinFloat 1.45s ease-in-out infinite;
}

.bwg-win-dance .bwg-win-card::before{
  content:"♠";
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:rgba(10,10,10,.88);
  font-size:1.35rem;
  font-weight:900;
}

@keyframes bwgDealIn{
  from{opacity:0; transform:translateY(-18px) scale(.88) rotate(-4deg)}
  to{opacity:1; transform:translateY(0) scale(1) rotate(0)}
}

@keyframes bwgWinFloat{
  0%{transform:translateY(0) rotate(-6deg) scale(.98)}
  50%{transform:translateY(-12px) rotate(6deg) scale(1.04)}
  100%{transform:translateY(0) rotate(-6deg) scale(.98)}
}

@media (max-width: 900px){
  .app,
  .game-shell,
  .card-game,
  .table,
  .table-area,
  .table-scroll,
  .board,
  .board-shell,
  .board-wrap,
  .playWrap,
  .pyramid-board,
  .card-table,
  .solitaire-board,
  .game-board{
    border-radius:22px !important;
  }

  .topbar-scroll{
    gap:8px !important;
    padding:10px 10px !important;
  }

  .topbar-scroll .title{
    font-size:16px !important;
  }

  .topbar-scroll .hudItem{
    padding:5px 9px !important;
    font-size:12px !important;
  }

  .topbar-scroll .btn,
  .topbar-scroll .top-btn,
  .topbar-scroll .control-btn{
    min-height:34px !important;
    padding:7px 10px !important;
  }
}

@media (max-width: 720px){
  .topbar-scroll{
    flex-wrap:wrap !important;
    justify-content:flex-start !important;
  }

  .topbar-scroll .back{
    order:-2;
  }

  .topbar-scroll .title{
    order:-1;
    width:100%;
    white-space:normal !important;
    line-height:1.05;
  }

  .topbar-scroll .hudItem{
    flex:0 0 auto;
  }

  .cpu-area{
    justify-content:flex-start !important;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding-bottom:10px;
  }

  .seat{
    scroll-snap-align:start;
  }

  .human-area,
  .message-area,
  .deck-area,
  .books-area{
    width:100% !important;
  }

  .message-area{
    grid-column: 1 / -1 !important;
  }

  .hand-row{
    justify-content:flex-start !important;
    overflow-x:auto;
    padding-bottom:8px;
    scroll-snap-type:x proximity;
  }

  .hand-row .card,
  .hand-row .playing-card{
    scroll-snap-align:start;
  }
}