/* av-war.css — War (casino-war.html). Loaded after av-bj.css, which supplies the shared game layout (#main, #game-area, #stage,
   #bottom-zone, #sidebar, the chip row, the main button, the log) and the playing cards. Shell tokens and Inter only. */
#wr-table{--cw:92px;--ch:128px;width:min(100%,720px);margin:auto 0;display:flex;flex-direction:column;gap:12px}
.wr-zone{display:flex;flex-direction:column;gap:6px;align-items:center}
.wr-zhead{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--av-muted);min-height:24px}
.wr-zhead b{color:var(--av-white);font-weight:600}
.wr-tot{background:var(--av-raised);color:var(--av-white);font-weight:700;font-size:13px;padding:2px 10px;border-radius:999px;min-width:30px;text-align:center}
.wr-tot.w{background:var(--av-win-bg);color:var(--av-win)}.wr-tot.l{color:var(--av-muted)}
.wr-cards{display:flex;gap:12px;min-height:var(--ch);align-items:center;justify-content:center;perspective:900px}
.wr-cards .card{transition:opacity .35s}
.wr-cards .card.dim{opacity:.45}
/* a card slides out of the deck face up and lands in its place (--fx/--fy: the way back to the deck, set by the script) */
.wr-cards .card.fly{animation:wrDeal .42s cubic-bezier(.2,.8,.25,1) both}
@keyframes wrDeal{0%{transform:translate(var(--fx,150px),var(--fy,-130px)) rotate(10deg) scale(.55);opacity:0}12%{opacity:1}100%{transform:none;opacity:1}}
/* the deck: three card backs stacked at the top right of the table; it dips when you press Bet */
#wr-table{position:relative}
.wr-deck{position:absolute;right:6px;top:-6px;width:46px;height:64px;--cw:46px;--ch:64px;pointer-events:none}
.wr-deck .card{position:absolute;inset:0;border-radius:7px;box-shadow:0 2px 6px rgba(0,0,0,.45)}
.wr-deck .card:nth-child(1){transform:translate(-4px,4px)}.wr-deck .card:nth-child(2){transform:translate(-2px,2px)}
.wr-deck.tap{animation:wrTap .26s ease-out}
@keyframes wrTap{40%{transform:translateY(3px) scale(.96)}}
.wr-verdict{min-height:30px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;color:var(--av-muted)}
.wr-verdict.w{color:var(--av-win)}.wr-verdict.l{color:var(--av-loss)}
.wr-verdict small{font-size:13px;font-weight:600;margin-left:8px;color:var(--av-accent-soft)}

/* controls */
#wr-controls{display:flex;flex-direction:column;gap:8px}
.wr-bet-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.wr-bet-row .amt{font-size:24px;font-weight:700;color:var(--av-white)}.wr-bet-row .amt small{font-size:12px;font-weight:500;color:var(--av-muted);margin-left:4px}
.wr-tools{display:flex;gap:6px}
.wr-tie{display:flex;align-items:center;justify-content:center;gap:10px;font-size:13px;color:var(--av-text)}
.wr-tie small{color:var(--av-muted)}
#wr-main .acts{grid-template-columns:1fr 1fr}
#wr-main .act{line-height:1.15}
#wr-main .act small{display:block;font-size:12px;font-weight:600;color:var(--av-muted);margin-top:2px}
#wr-main .act.pri small{color:rgba(255,255,255,.8)}
#wr-go{transition:transform .08s}#wr-go:active:not(:disabled){transform:scale(.985)}

@media(max-width:720px){
  #wr-table{--cw:84px;--ch:117px}
  #wr-controls .rule{display:none}
}
/* small phones (about 667 px tall): smaller cards so both hands, the verdict and the controls all fit without scrolling */
@media(max-width:720px) and (max-height:720px){
  #wr-table{--cw:70px;--ch:98px;gap:6px}
  .wr-cards{gap:8px}
  #stage:has(#wr-table){padding-top:6px;padding-bottom:2px}
}

/* big screens: larger cards */
@media(min-width:1280px) and (min-height:860px){#wr-table{--cw:118px;--ch:165px;gap:16px}.wr-cards{gap:16px}.wr-verdict{font-size:22px}}
@media(min-width:1700px) and (min-height:1000px){#wr-table{--cw:140px;--ch:196px;gap:20px}.wr-cards{gap:20px}.wr-verdict{font-size:26px}}