/* Casino War. Classes use the cw- prefix. Felt, chips and cards come from /demos/_tables/ (tb-, pc-). */
.cw-screen { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 14px; align-items: start; }
.cw-main { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.cw-side { min-width: 0; display: flex; flex-direction: column; gap: 12px; }

.cw-table { --rail: 20px; height: 540px; }
.cw-felt { --cw: 84px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 0 18px 16px; }
.cw-tray { position: absolute; left: 50%; top: 0; transform: translateX(-50%); z-index: 2; }
.cw-discard { position: absolute; left: 18px; top: 12px; z-index: 2; }
.cw-shoe { position: absolute; right: 16px; top: 8px; z-index: 2; }
.cw-shoe .tb-shoe-body { transform: scale(.9); transform-origin: 50% 0; }
.cw-shoe.refill .tb-shoe-body { animation: cwrefill .8s cubic-bezier(.2,.8,.3,1.2); }
@keyframes cwrefill { 0% { transform: scale(.9) translateY(-26px); opacity: 0; } 100% { transform: scale(.9); opacity: 1; } }
.cw-arc { position: absolute; left: 0; right: 0; top: 246px; height: 64px; pointer-events: none; z-index: 1; }
.cw-arc svg { left: 0; top: 0; width: 100%; height: 100%; }

.cw-row { position: relative; z-index: 3; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 22px; width: 100%; }
.cw-row.d { margin-top: 64px; }
.cw-row.p { margin-top: 74px; }
.cw-slot { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.cw-slot.war { justify-self: start; opacity: .38; transition: opacity .3s; }
.cw-felt.at-war .cw-slot.war { opacity: 1; }
.cw-who { font: 800 11px Inter, sans-serif; letter-spacing: .24em; text-transform: uppercase; color: rgba(255,240,220,.7); }
.cw-cardbox { height: calc(var(--cw) * 1.4); display: flex; align-items: center; }
.cw-cardbox .pc.win .pc-front { box-shadow: 0 0 0 3px var(--tb-win), 0 10px 26px -6px rgba(53,227,154,.5); }
.cw-cardbox .pc.tie .pc-front { box-shadow: 0 0 0 3px var(--you), 0 10px 26px -6px rgba(255,178,30,.5); }
.cw-burn { justify-self: end; display: flex; height: calc(var(--cw) * .98); align-items: center; padding-bottom: 4px; }
.cw-burn .pc { --cw: 48px; }
.cw-burn .pc + .pc { margin-left: -30px; }
.cw-burn-l { font: 600 9.5px 'IBM Plex Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-right: 8px; }
.cw-vs { position: relative; z-index: 3; margin-top: 10px; font: 600 11px 'IBM Plex Mono', monospace; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,240,220,.55); min-height: 18px; text-align: center; }
.cw-vs b { color: #fff; }

.cw-bets { position: absolute; z-index: 3; right: 5%; bottom: 34px; display: flex; flex-direction: column; gap: 16px; align-items: center; }
.cw-spot { --spot: 84px; }
.cw-spot.war { border-style: dashed; }
.cw-spot.war.off { opacity: .35; pointer-events: none; }

/* war moment */
.cw-war { position: absolute; z-index: 14; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(440px, 88%); text-align: center; padding: 18px 22px 20px; border-radius: 18px;
  background: linear-gradient(180deg, rgba(40,6,10,.96), rgba(14,4,6,.96)); border: 1px solid rgba(255,120,120,.4); box-shadow: 0 30px 80px -20px rgba(0,0,0,.9), 0 0 0 6px rgba(255,60,60,.08); animation: cwin .5s cubic-bezier(.2,.9,.3,1.3); }
.cw-war[hidden] { display: none; }
@keyframes cwin { from { opacity: 0; transform: translate(-50%, -50%) scale(.7); } }
.cw-war-t { display: block; font: 900 46px/1 Inter, sans-serif; letter-spacing: .3em; margin-right: -.3em; color: #ff5a6e; text-transform: uppercase; animation: cwpulse 1.2s ease-in-out infinite; }
@keyframes cwpulse { 50% { text-shadow: 0 0 22px rgba(255,90,110,.6); } }
.cw-war p { margin: 10px 0 14px; font-size: 13.5px; color: rgba(255,255,255,.8); }
.cw-war-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.cw-felt.shake { animation: cwshake .5s; }
@keyframes cwshake { 0%, 100% { transform: none; } 20% { transform: translate(-6px, 2px); } 40% { transform: translate(6px, -2px); } 60% { transform: translate(-4px, 1px); } 80% { transform: translate(3px, 0); } }
.cw-felt.at-war::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2; box-shadow: inset 0 0 120px rgba(255,40,60,.35); animation: cwglow 1.6s ease-in-out infinite; }
@keyframes cwglow { 50% { box-shadow: inset 0 0 160px rgba(255,40,60,.5); } }
.cw-count { position: absolute; z-index: 13; left: 50%; top: 50%; transform: translate(-50%, -50%); font: 900 120px/1 Inter, sans-serif; color: rgba(255,255,255,.9); pointer-events: none; animation: cwcount .7s ease-out forwards; }
@keyframes cwcount { from { transform: translate(-50%, -50%) scale(1.6); opacity: 0; } 30% { opacity: 1; } to { transform: translate(-50%, -50%) scale(.8); opacity: 0; } }

/* controls */
.cw-ctrl { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 14px; background: var(--s-panel); border: 1px solid var(--s-line); }
.cw-bal .tb-balance { padding: 0; border: 0; background: none; gap: 9px; }
.cw-bal .tb-balance-v { font-size: 19px; }
.cw-rack .tb-rchip { --chip: 44px; }
.cw-rack .tb-rack { gap: 8px; }
.cw-ctrl-btns { display: flex; gap: 6px; flex: 1; justify-content: flex-end; }
.cw-deal { min-width: 132px; }

/* side */
.cw-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.cw-h small { font-size: 10.5px; color: var(--s-faint); }
.cw-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--s-line); }
.cw-stats div small { display: block; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--s-dim); }
.cw-stats div b { font: 800 16px/1.2 Inter, sans-serif; font-variant-numeric: tabular-nums; }
.cw-recent { padding: 10px 13px; }
.cw-recent .tb-hist-row { padding: 5px 0; }
.tb-paycard .tb-pay small { font: 600 10px 'IBM Plex Mono', monospace; color: var(--s-faint); margin-left: 6px; }

@media (max-width: 1100px) {
  .cw-screen { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .cw-table { height: 520px; }
  .cw-bets { position: relative; right: auto; bottom: auto; flex-direction: row; margin-top: auto; }
  .cw-row.p { margin-top: 30px; }
  .cw-spot { --spot: 70px; }
  .cw-felt { --cw: 60px; padding: 0 8px 12px; }
  .cw-tray, .cw-arc, .cw-discard { display: none; }
  .cw-shoe .tb-shoe-body { transform: scale(.6); }
  .cw-row { gap: 10px; }
  .cw-row.d { margin-top: 56px; }
  .cw-burn .pc { --cw: 34px; }
  .cw-burn .pc + .pc { margin-left: -24px; }
  .cw-ctrl { flex-wrap: wrap; }
  .cw-rack { order: 3; width: 100%; display: flex; justify-content: center; }
  .cw-ctrl-btns { order: 4; justify-content: center; }
  .cw-deal { order: 2; margin-left: auto; min-width: 110px; }
  .cw-war-t { font-size: 34px; }
}