/* Coin flip's own look, on the game template (static/game.css styles the shell and the .gm-cell primitive): one canvas
   stage (static/coinflip.js draws the coin, gold heads and ivory tails, and its "tap to turn" hint) with the Heads /
   Tails cells under it, the streak's ladder across its top and Auto's setting over the cells; the history chips name the
   side that landed, in its coin's colour. */

.cf-stage { position: relative; flex: 1; min-height: 400px; }
.cf-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cf-sides { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 2; display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; width: min(calc(100% - 28px), 360px); }
.cf-s { height: 54px; }
.cf-s > i { display: flex; gap: 10px; align-items: center; justify-content: center; }
.cf-s > i b { font: 600 15px var(--f-ui); color: var(--ink-2); transition: color var(--t-hover); }
.cf-s > i svg { width: 26px; height: 26px; flex: none; }
.cf-s:hover { --fill: var(--cell-hi); --lnc: var(--gold-line); }
.cf-s:active { transform: scale(.95); }
.cf-s.pick > i b, .cf-s:hover > i b { color: var(--ink); }
.cf-s.rev.is-win > i b { color: var(--win); }
.cf-s.rev.is-loss > i b { color: var(--loss); }
.cf-sides.busy .cf-s, .gm.autoplaying .cf-s { cursor: default; }
.cf-sides.busy .cf-s:hover, .gm.autoplaying .cf-s:not(.pick):hover { --fill: var(--cell); --lnc: transparent; transform: none; }
.gm.autoplaying .cf-s.pick:hover { --lnc: var(--gold-line); }
.cf-stats dd { font-variant-numeric: tabular-nums; }
#cf-call { font: 600 16px var(--f-ui); }
/* the history chips: the side that landed as a mini face; a toss played here also shows what it paid */
.gm-recent .gm-pill svg.cf-mini { width: 15px; height: 15px; margin-right: 5px; flex: none; }
.gm-recent .gm-pill svg.cf-mini:only-child { margin-right: 0; }
@media (max-width: 899px) { .cf-stage { min-height: 380px; } .gm[data-game="coinflip"] .gm-play { min-height: 0; } }

/* the streak's ladder across the top of the stage: what each run of correct calls pays (0.97 × 2^n); the cells reached
   fill navy, the one held is gold, the next is outlined gold, a miss marks it coral; in Auto the cash-out cell is
   gold-outlined (tap a cell to set it) */
.cf-ladder { position: absolute; left: 12px; right: 12px; top: 12px; z-index: 2; display: flex; gap: 6px; margin: 0; padding: 0 0 2px;
  list-style: none; overflow-x: auto; scrollbar-width: none; -webkit-mask: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.cf-ladder::-webkit-scrollbar { display: none; }
.cf-l { --k: 6px; --fill: var(--cell-dn); --lnc: var(--fill); position: relative; isolation: isolate; flex: 0 0 auto; min-width: 76px; height: 44px;
  padding: 0 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: var(--lnc);
  clip-path: polygon(var(--k) 0, 100% 0, 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, 0 100%, 0 var(--k));
  transition: background-color .18s; }
.cf-l::after { content: ""; position: absolute; inset: 1.5px; z-index: -1; background: var(--fill); transition: background-color .18s;
  clip-path: polygon(calc(var(--k) - .6px) 0, 100% 0, 100% calc(100% - var(--k) + .6px), calc(100% - var(--k) + .6px) 100%, 0 100%, 0 calc(var(--k) - .6px)); }
.cf-l small { font: 500 11px/1 var(--f-ui); color: var(--ink-3); }
.cf-l b { font: 800 16px/1 var(--f-num); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cf-l.done { --fill: #2c4180; } .cf-l.done b { color: var(--ink); }
.cf-l.next { --lnc: var(--gold-line); } .cf-l.next b { color: var(--ink); }
.cf-l.on { --fill: var(--gold); --lnc: var(--gold); } .cf-l.on b { color: var(--on-gold); } .cf-l.on small { color: #5a3d0a; }
.cf-l.cashed { animation: cf-stamp .3s var(--e-settle); }
.cf-l.miss { --lnc: var(--loss); } .cf-l.miss b { color: var(--loss); }
.cf-auto-on .cf-l { cursor: pointer; }
.cf-l.target { --lnc: var(--gold); --fill: #2a2412; } .cf-l.target b { color: var(--gold); } .cf-l.target small { color: var(--gold-line); }
@keyframes cf-stamp { 50% { transform: scale(1.08); } }

/* Auto's setting on the stage: Cash out after N flips, the same call or alternating */
.cf-auto { position: absolute; left: 50%; bottom: 80px; transform: translateX(-50%); z-index: 2; display: flex; gap: 10px; align-items: center;
  justify-content: center; flex-wrap: wrap; width: min(calc(100% - 28px), 520px); }
.cf-auto[hidden] { display: none; }
.cf-after, .cf-alt { display: flex; align-items: center; gap: 6px; }
.cf-after span { font: 500 13px var(--f-ui); color: var(--ink-2); }
.cf-after b { min-width: 28px; text-align: center; font: 800 20px/1 var(--f-num); color: var(--gold); font-variant-numeric: tabular-nums; }
.cf-auto .gm-sec { --k: 6px; --fill: var(--stage); min-width: 0; height: 34px; padding: 0 12px; font-size: 13px; }
.cf-auto .cf-step { width: 34px; padding: 0; font: 600 18px/1 var(--f-ui); }
.cf-alt .gm-sec { --lnc: rgb(151 164 198 / .3); color: var(--ink-2); }
.cf-alt .gm-sec[aria-pressed="true"] { --lnc: var(--gold); color: var(--gold); }
.gm.autoplaying .cf-auto .gm-sec { opacity: .5; pointer-events: none; }
@media (max-width: 899px) {
  .cf-l { min-width: 64px; height: 40px; }
  .cf-l b { font-size: 15px; }
  .cf-auto { bottom: 76px; gap: 6px; }
}