/* ============================================================================
   TwinEagles Arcade — shared branded skin for all station games
   Loaded AFTER each game's inline <style>; uses !important on key visual props
   so it reliably reskins existing card/tile classes without touching game logic.
   Palette: gold #C9A84C · gold-dim #8B6914 · navy #0F1B2D
   ============================================================================ */

:root{
  --te-gold:#C9A84C; --te-gold-lt:#e7c96b; --te-gold-dk:#8B6914;
  --te-navy:#0F1B2D; --te-felt-a:#12503a; --te-felt-b:#0c3527;
  --te-ivory:#f6f2e6; --te-ivory-sh:#e7dfca;
}

/* ---- Branded ambiance on the page (all games) --------------------------- */
body.te-game{
  background:
    radial-gradient(1200px 520px at 50% -8%, rgba(201,168,76,.10), transparent 60%),
    radial-gradient(900px 600px at 50% 120%, rgba(201,168,76,.06), transparent 60%),
    radial-gradient(circle at center,#16233a 0%, var(--te-navy) 70%) !important;
}
/* faint crest watermark, bottom-right, non-interactive */
body.te-game::after{
  content:""; position:fixed; right:-40px; bottom:-40px; width:340px; height:340px;
  background:url(/game/te-cardback.svg) center/contain no-repeat;
  opacity:.05; filter:grayscale(.2); pointer-events:none; z-index:0;
}
body.te-game > *{ position:relative; z-index:1; }

/* Broadcast-felt play surface for the card tables */
body.te-poker .board,
body.te-poker .seats,
body.te-solitaire .panel{
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,.05), transparent 55%),
    linear-gradient(160deg, var(--te-felt-a), var(--te-felt-b)) !important;
  border:1px solid rgba(201,168,76,.35) !important;
  box-shadow: inset 0 2px 30px rgba(0,0,0,.45), 0 4px 20px rgba(0,0,0,.35) !important;
}

/* ---- Card backs → TwinEagles crest ------------------------------------- */
.pcard.back,               /* poker face-down */
.pcard.facedown,           /* solitaire face-down */
.pile.back:not(.empty),    /* solitaire stock */
.pile.deck{                /* uno draw pile */
  background:url(/game/te-cardback.svg) center/cover no-repeat, #0b1626 !important;
  color:transparent !important;
  border:1px solid var(--te-gold-dk) !important;
  box-shadow:0 3px 8px rgba(0,0,0,.5) !important;
}
.pile.deck{ color:var(--te-gold) !important; } /* keep the deck count legible */

/* ---- Premium card faces (poker + solitaire share .pcard) ---------------- */
.pcard.red, .pcard.black,
.pcard.faceup,
.pile.faceup{
  background:linear-gradient(155deg, var(--te-ivory) 0%, #fffdf7 45%, var(--te-ivory-sh) 100%) !important;
  border:1px solid rgba(139,105,20,.55) !important;
  border-radius:8px !important;
  box-shadow:0 3px 7px rgba(0,0,0,.4), inset 0 0 0 2px rgba(255,255,255,.6) !important;
  position:relative; overflow:hidden;
}
.pcard.red, .pile.faceup.red{ color:#c0182c !important; }
.pcard.black, .pile.faceup.black{ color:#16233a !important; }

/* enhancer-built structure: corner indices + center pip */
.pcard[data-te], .pile[data-te]{ font-weight:800 !important; }
.te-i{ position:absolute; left:3px; top:1px; line-height:1; font-size:.62em; letter-spacing:-.5px; text-align:center; }
.te-i .te-s{ display:block; font-size:.92em; margin-top:-1px; }
.te-i.br{ left:auto; right:3px; top:auto; bottom:1px; transform:rotate(180deg); }
.te-p{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
       font-size:1.7em; opacity:.9; }
.pcard.big .te-p{ font-size:2em; }
/* subtle gold corner flourish on faces */
.pcard[data-te]::before{ content:""; position:absolute; inset:2px; border:1px solid rgba(201,168,76,.28);
       border-radius:6px; pointer-events:none; }

/* ---- Hover lift + deal/flip animation ----------------------------------- */
.pcard, .hcard{ transition:transform .16s ease, box-shadow .16s ease; }
.pcard.faceup:hover, .pcard.red:hover, .pcard.black:hover{
  transform:translateY(-4px) !important; box-shadow:0 8px 16px rgba(0,0,0,.5) !important; z-index:6;
}
.myhand .pcard, .seat-cards .pcard, .community .pcard{ animation:teDeal .32s cubic-bezier(.2,.7,.2,1) both; }
.myhand .pcard:nth-child(2){ animation-delay:.06s }
.community .pcard:nth-child(2){ animation-delay:.05s } .community .pcard:nth-child(3){ animation-delay:.10s }
.community .pcard:nth-child(4){ animation-delay:.15s } .community .pcard:nth-child(5){ animation-delay:.20s }
@keyframes teDeal{ from{ opacity:0; transform:translateY(-14px) rotate(-6deg) scale(.9) } to{ opacity:1; transform:none } }

/* ---- UNO polish --------------------------------------------------------- */
.hcard{ border:2px solid rgba(255,255,255,.35) !important;
        box-shadow:0 3px 7px rgba(0,0,0,.4), inset 0 0 14px rgba(255,255,255,.14) !important;
        border-radius:10px !important; }
.hcard::after{ content:""; position:absolute; inset:5px; border:1px solid rgba(255,255,255,.4);
        border-radius:7px; pointer-events:none; }
.hcard{ position:relative; }
.c-wild{ background:conic-gradient(from 210deg, #ef4444, #f5b700, #22c55e, #3b82f6, #ef4444) !important; }

/* ---- Gold-foil buttons & tabs ------------------------------------------ */
.btn-gold,
.tab-btn.active,
button.btn-gold{
  background:linear-gradient(180deg, var(--te-gold-lt), var(--te-gold) 55%, var(--te-gold-dk)) !important;
  color:#20160a !important; border:1px solid rgba(255,255,255,.35) !important;
  box-shadow:0 2px 0 var(--te-gold-dk), 0 4px 12px rgba(201,168,76,.35) !important;
  text-shadow:0 1px 0 rgba(255,255,255,.35); position:relative; overflow:hidden;
}
.btn-gold::after{ content:""; position:absolute; top:0; left:-60%; width:40%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-18deg); animation:teSheen 4.5s ease-in-out infinite; }
@keyframes teSheen{ 0%,72%{ left:-60% } 86%{ left:120% } 100%{ left:120% } }

/* ---- Branded page header accent (crumb bar) ----------------------------- */
.game-crumb, .header{ border-bottom:1px solid rgba(201,168,76,.30) !important;
  box-shadow:0 1px 0 rgba(201,168,76,.15); }
.header-title{ text-shadow:0 0 14px rgba(201,168,76,.35); }

/* ---- Win confetti canvas (injected by te-arcade.js) --------------------- */
#teConfetti{ position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:9999; }

@media (max-width:560px){
  .te-p{ font-size:1.4em; } .te-i{ font-size:.58em; }
  body.te-game::after{ width:220px; height:220px; }
}