/* av-tcp.css — Three Card Poker (tcp.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. */
#tc-table{--cw:92px;--ch:128px;width:min(100%,720px);margin:auto 0;display:flex;flex-direction:column;gap:12px}
.tc-zone{display:flex;flex-direction:column;gap:6px;align-items:center}
.tc-zhead{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--av-muted);min-height:24px}
.tc-zhead b{color:var(--av-white);font-weight:600}
.tc-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}
.tc-tot.w{background:var(--av-win-bg);color:var(--av-win)}.tc-tot.l{color:var(--av-muted)}
.tc-cards{display:flex;gap:12px;min-height:var(--ch);align-items:center;justify-content:center;perspective:900px}
.tc-cards .card{transition:opacity .35s}
.tc-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) */
.tc-cards .card.fly{animation:tcDeal .42s cubic-bezier(.2,.8,.25,1) both}
@keyframes tcDeal{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 */
#tc-table{position:relative}
.tc-deck{position:absolute;right:6px;top:-6px;width:46px;height:64px;--cw:46px;--ch:64px;pointer-events:none}
.tc-deck .card{position:absolute;inset:0;border-radius:7px;box-shadow:0 2px 6px rgba(0,0,0,.45)}
.tc-deck .card:nth-child(1){transform:translate(-4px,4px)}.tc-deck .card:nth-child(2){transform:translate(-2px,2px)}
.tc-deck.tap{animation:tcTap .26s ease-out}
@keyframes tcTap{40%{transform:translateY(3px) scale(.96)}}
.tc-verdict{min-height:78px;display:flex;flex-direction:column;gap:1px;text-align:center;align-items:center;justify-content:center;color:var(--av-muted)}
.tc-verdict .lbl{font-size:15px;font-weight:600;min-height:20px}
.tc-verdict .amt{font-size:34px;font-weight:800;line-height:1.1;letter-spacing:-.5px;min-height:38px;font-variant-numeric:tabular-nums}
.tc-verdict.w .lbl{color:var(--av-white)}.tc-verdict.w .amt{color:var(--av-win)}.tc-verdict.l .amt{color:var(--av-loss)}
.tc-verdict .amt.pop{animation:tcPop .5s cubic-bezier(.2,1.4,.4,1) both}
@keyframes tcPop{0%{transform:scale(.55);opacity:0}60%{transform:scale(1.14);opacity:1}100%{transform:none;opacity:1}}
.tc-verdict small{font-size:13px;font-weight:600;color:var(--av-accent-soft);min-height:16px}

/* controls: two spots, tap one with the selected chip */
.tc-spots{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tc-spot{position:relative;min-height:62px;border-radius:10px;border:1px solid var(--av-line);background:var(--av-panel);color:var(--av-white);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font:600 14px var(--av-font);transition:border-color .15s,background .15s,transform .08s;padding:2px}
.tc-spot:hover:not(:disabled){border-color:var(--av-accent-soft)}.tc-spot:active:not(:disabled){transform:scale(.985)}
.tc-spot small{font-size:11.5px;font-weight:500;color:var(--av-muted)}
.tc-spot .amt{font-size:14px;font-weight:700;color:var(--av-accent-soft);min-height:18px}
.tc-spot.has{border-color:var(--av-accent);background:var(--av-accent-bg)}
.tc-spot.won{border-color:var(--av-win);background:var(--av-win-bg)}.tc-spot.won .amt{color:var(--av-win)}
.tc-spot.lost{border-color:var(--av-loss)}.tc-spot.lost .amt{color:var(--av-loss)}
.tc-spot.back .amt{color:var(--av-muted)}
.tc-spot:disabled{cursor:default;opacity:.5}

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

@media(max-width:720px){
  #tc-table{--cw:84px;--ch:117px}
  #tc-controls .rule{display:none}
  .tc-spot{min-height:48px;font-size:13px}.tc-spot small{font-size:10.5px}
}
/* 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){
  #tc-table{--cw:60px;--ch:84px;gap:4px}
  .tc-spot{min-height:44px}.tc-spots{gap:6px}
  .tc-verdict{min-height:48px}.tc-verdict .lbl{font-size:13px;min-height:16px}.tc-verdict .amt{font-size:26px;min-height:28px}.tc-verdict small{font-size:11.5px;min-height:14px}
  .tc-cards{gap:8px}
  .tc-zhead{min-height:20px}
  #stage:has(#tc-table){padding-top:6px;padding-bottom:2px}
}

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