/* Action callouts (bet / raise / 3-bet / 4-bet / all-in stamps) and turn-timer urgency. */

/* ------------------------------------------------ colour steps (callouts.js kindOf)
   One step per action, shared by the stamp, the plate badge and the chip pill on the felt.
   --cc: the action colour · --ct: lettering on it (white lettering always gets an ink stroke) */
.k-check { --cc: var(--sky); --ct: var(--ink); }
.k-fold { --cc: var(--grey); --ct: var(--ink); }
.k-blind { --cc: #fff; --ct: var(--ink); }
.k-call { --cc: var(--teal); --ct: var(--ink); }
.k-turn { --cc: var(--teal); --ct: #fff; }
.k-bet { --cc: var(--yellow); --ct: var(--ink); }
.k-raise { --cc: var(--orange); --ct: #fff; }
.k-b3 { --cc: var(--red); --ct: #fff; }
.k-b4 { --cc: var(--purple); --ct: #fff; }
.k-allin { --cc: var(--pink); --ct: #fff; }
/* amounts and seconds: plain rounded figures (the display face's old-style digits read badly small) */
.cstamp .cs-a, .betlbl, .plate .ptimer .psec, #timerbar .cl-tsec { --num: "Arial Rounded MT Bold", "Arial Black", var(--font); }

/* ------------------------------------------------ stamps: the word on an inked sticker, the amount
   in a paper pill under it; from the 3-bet up a jagged impact star behind. callouts.js moves them
   (transform / opacity only) and sizes nothing: the steps below set the size. Over the plates and
   the 3D callouts, under the top bar, the dock and every card or dialog (style.css: layers); gone
   with the dock when leaving the room. */
#clStamps { position: fixed; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; }
#dock[hidden] ~ #clStamps, #dock[hidden] ~ #clVig { display: none; }
.cstamp { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; isolation: isolate; will-change: transform, opacity; }
.cstamp[hidden], .cstamp [hidden] { display: none; }
.cstamp .cs-w { display: block; padding: .12em .4em .16em; font: 900 26px/1 var(--display); color: var(--ct); background: var(--cc) var(--grain);
  border: 3px solid var(--ink); border-radius: 14px 10px 14px 10px / 10px 14px 10px 14px; box-shadow: 0 4px 0 var(--ink), var(--cel); white-space: nowrap; letter-spacing: .03em; }
.cstamp.k-turn .cs-w, .cstamp.k-raise .cs-w, .cstamp.k-b3 .cs-w, .cstamp.k-b4 .cs-w, .cstamp.k-allin .cs-w { -webkit-text-stroke: .14em var(--ink); paint-order: stroke fill; text-shadow: .03em .07em 0 var(--ink); }
.cstamp .cs-a { position: relative; z-index: 1; margin-top: -6px; padding: 1px 10px 2px; font: 900 17px/1.15 var(--num); font-style: normal; color: var(--ink); background: var(--paper);
  border: 2.5px solid var(--ink); border-radius: 999px; box-shadow: 0 2px 0 var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* an all-in's own move (RAISE / 3-BET … / CALL) rides on top as a little ink ribbon */
.cstamp .cs-sub { position: relative; z-index: 1; margin-bottom: -5px; padding: 1px 8px 2px; font: 900 12px/1.2 var(--display); color: var(--paper); background: var(--ink);
  border-radius: 6px; rotate: 5deg; white-space: nowrap; letter-spacing: .04em; }
/* sizes escalate with the level; checks and folds stay small and quiet */
.cstamp.k-check .cs-w, .cstamp.k-fold .cs-w, .cstamp.k-blind .cs-w { font-size: 16px; border-width: 2.5px; box-shadow: 0 3px 0 var(--ink); }
.cstamp.k-call .cs-w, .cstamp.k-turn .cs-w { font-size: 21px; }
.cstamp.k-bet .cs-w { font-size: 25px; }
.cstamp.k-raise .cs-w { font-size: 29px; }
.cstamp.k-b3 .cs-w { font-size: 32px; }
.cstamp.k-b4 .cs-w { font-size: 34px; }
.cstamp.k-allin .cs-w { font-size: 36px; }
.cstamp.k-b4 .cs-a, .cstamp.k-allin .cs-a { font-size: 19px; }
/* impact star: an ink copy under a cream one (the .comic.burst recipe), bigger per level */
.cstamp.k-b3::before, .cstamp.k-b3::after, .cstamp.k-b4::before, .cstamp.k-b4::after, .cstamp.k-allin::before, .cstamp.k-allin::after {
  content: ''; position: absolute; z-index: -1; clip-path: var(--burst); }
.cstamp.k-b3::before { inset: -16px -22px; background: var(--ink); }
.cstamp.k-b3::after { inset: -12px -18px; background: radial-gradient(circle, #fff6d0 45%, #ffe7a0 100%); }
.cstamp.k-b4::before { inset: -20px -28px; background: var(--ink); rotate: 8deg; }
.cstamp.k-b4::after { inset: -16px -24px; background: radial-gradient(circle, #fff6d0 40%, #f3c9ff 100%); rotate: 8deg; }
.cstamp.k-allin::before { inset: -24px -32px; background: var(--ink); rotate: -6deg; }
.cstamp.k-allin::after { inset: -20px -28px; background: radial-gradient(circle, #fff6d0 30%, var(--yellow) 75%, var(--orange) 100%); rotate: -6deg; }

/* ------------------------------------------------ plate badges: the stamp's words and colour */
.plate .badge.cb { font: 900 12px/1.25 var(--display); padding: 1px 8px 2px; color: var(--ct); background: var(--cc); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.plate .badge.cb.k-raise, .plate .badge.cb.k-b3, .plate .badge.cb.k-b4, .plate .badge.cb.k-allin { -webkit-text-stroke: 2.5px var(--ink); paint-order: stroke fill; }
.plate .badge.cb.k-b3, .plate .badge.cb.k-b4, .plate .badge.cb.k-allin { font-size: 13px; }

/* ------------------------------------------------ chip pills on the felt (main.js betLbls): bigger,
   inked, a chip in the action's colour; re-raises and all-ins fill the pill with it */
.betlbl { display: flex; align-items: center; gap: 4px; padding: 2px 9px 2px 3px; font: 900 15px/1.1 var(--num); color: var(--ink); background: var(--paper);
  border: 2.5px solid var(--ink); border-radius: 999px; box-shadow: 0 2px 0 var(--ink); font-variant-numeric: tabular-nums; }
.betlbl[hidden] { display: none; }
.betlbl i { flex: none; box-sizing: border-box; width: 17px; height: 17px; border-radius: 50%; border: 2px solid var(--ink);
  background: radial-gradient(circle, var(--cc, var(--yellow)) 0 33%, #fff 34% 43%, transparent 44%), repeating-conic-gradient(var(--cc, var(--yellow)) 0 30deg, #fff 30deg 45deg); }
.betlbl b { font-weight: 900; }
.betlbl.k-blind { --cc: var(--muted); }
.betlbl.k-b3, .betlbl.k-b4, .betlbl.k-allin { background: var(--cc); color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill; font-size: 16px; }
.betlbl.k-b3 i, .betlbl.k-b4 i, .betlbl.k-allin i { --cc: var(--yellow); }

/* ------------------------------------------------ whose turn: the acting plate gets a coloured ring
   and glow, and a thick bar under it draining green → amber (50 %) → red (25 %); a seconds chip in
   the last 10 s; a throb and a small shake in the last 5 s. Classes from callouts.js frame():
   t-mid / t-low (colour step), t-num (seconds shown), t-urg (last 5 s). */
.plate.active { --tc: var(--teal); z-index: 1; }
.plate.active.t-mid { --tc: var(--gold2); }
.plate.active.t-low { --tc: var(--red); }
.plate.active .tag { border-color: var(--ink); animation: none; box-shadow: 0 3px 0 var(--ink), 0 0 0 4px var(--tc), 0 0 0 7px rgba(255,255,255,.6), 0 0 26px 10px var(--tc); }
.plate .ptimer { position: relative; width: calc(100% - 4px); height: 11px; margin-top: 3px; overflow: visible; background: none; border-radius: 0; }
.plate .ptimer > span { position: absolute; inset: 0; overflow: hidden; border: 2px solid var(--ink); border-radius: 6px; background: rgba(var(--ink-rgb), .5); box-shadow: 0 2px 0 var(--ink); }
.plate .ptimer i { display: block; height: 100%; border-radius: 0; background: var(--tc); box-shadow: inset 0 2px 0 rgba(255,255,255,.45); will-change: transform; }
.plate .ptimer .psec { position: absolute; right: -12px; top: 50%; translate: 0 -50%; display: none; place-items: center; box-sizing: border-box; min-width: 25px; height: 25px; padding: 0 4px;
  border-radius: 13px; border: 2.5px solid var(--ink); background: var(--paper); box-shadow: 0 2px 0 var(--ink); font: 900 14px/1 var(--num); color: var(--ink); font-variant-numeric: tabular-nums; }
.plate.active.t-num .ptimer .psec { display: grid; }
/* a plate pulled in from the screen edge (main.js frame() .edge): the chip tucks inside the bar's end */
.plate.edge .ptimer .psec { right: 2px; }
.plate.active.t-low .ptimer .psec { background: var(--red); color: #fff; -webkit-text-stroke: 2.5px var(--ink); paint-order: stroke fill; }
.plate.active.t-urg .tag { animation: clThrob .45s ease-in-out infinite alternate, clJitter .16s steps(2) infinite; }
.plate.active.t-urg .ptimer .psec { animation: clThrob .45s ease-in-out infinite alternate; }
@keyframes clThrob { to { scale: 1.09; } }
@keyframes clJitter { 0% { rotate: -1.8deg; } 50% { rotate: 1.8deg; } }

/* ------------------------------------------------ my turn: big seconds on the dynamite fuse, the
   same colour steps; callouts.js kicks the number on every tick of the last 5 s */
#timerbar .cl-tsec { position: relative; z-index: 2; flex: none; box-sizing: border-box; min-width: 38px; height: 31px; margin-right: 2px; padding: 0 6px; display: grid; place-items: center;
  border-radius: 16px; border: 3px solid var(--ink); background: var(--teal); box-shadow: 0 3px 0 var(--ink), var(--cel);
  font: 900 21px/1 var(--num); color: #fff; -webkit-text-stroke: 3.5px var(--ink); paint-order: stroke fill; font-variant-numeric: tabular-nums; }
#timerbar.t-mid .cl-tsec { background: var(--gold2); }
#timerbar.t-low .cl-tsec { background: var(--red); }
/* last 5 s: a red edge pulsing once a second over the table (under the HUD, never clickable) */
#clVig { position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .3s;
  box-shadow: inset 0 0 0 5px rgba(217,65,43,.7), inset 0 0 90px 24px rgba(217,65,43,.85); }
#clVig.on { opacity: 1; animation: clVig 1s ease-in-out infinite; }
@keyframes clVig { 50% { opacity: .4; } }

/* reduced motion: colour and numbers only (no throb, shake or pulse; the red edge holds still) */
html.rm .plate.active.t-urg .tag, html.rm .plate.active.t-urg .ptimer .psec { animation: none !important; }
html.rm #clVig.on { animation: none !important; opacity: .7; }
@media (prefers-reduced-motion: reduce) {
  .plate.active.t-urg .tag, .plate.active.t-urg .ptimer .psec { animation: none !important; }
  #clVig.on { animation: none !important; opacity: .7; }
}

/* ------------------------------------------------ phones (main.js PHONE): the pills and the plate
   timers a size down, with the smaller name plates (here, after style.css, so they win) */
@media (max-width: 480px), (max-height: 500px) {
  .betlbl { gap: 3px; padding: 1px 7px 1px 2px; font-size: 13px; border-width: 2px; }
  .betlbl i { width: 14px; height: 14px; border-width: 1.5px; }
  .betlbl.k-b3, .betlbl.k-b4, .betlbl.k-allin { font-size: 14px; -webkit-text-stroke-width: 2.5px; }
  .plate .ptimer { height: 8px; margin-top: 2px; }
  .plate .ptimer > span { border-width: 1.5px; border-radius: 4px; }
  .plate .ptimer .psec { min-width: 21px; height: 21px; right: -10px; font-size: 12px; border-width: 2px; }
  .plate.edge .ptimer .psec { right: 2px; }
}