/* Craps' own look on the game template (static/game.css styles the shell and the .gm-cell primitive), in the Inlay
   language: no felt, no stripes. The six point numbers as cells with the gold Point marker over the one that is on, two
   solid ivory dice drawn on a canvas in the open middle of the stage (flick or tap them to throw), the totals rail (what
   each total does to your bet on the next throw: mint up, coral lost, silver back), and the Pass line as a cell with a
   real chip once bet. One readout: the plate. */

.cp-stage { flex: 1; min-height: 0; display: flex; }
.cp-g { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 46px 16px 16px; pointer-events: none; }
.cp-pts { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; width: min(100%, 500px); }
.cp-pt { height: 58px; cursor: default; pointer-events: none; }
.cp-pt .cp-n { font: 800 28px/1 var(--f-num); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.cp-pt.pick .cp-n { color: var(--gold); }
.cp-pt.cp-hit { --lnc: var(--ink-2); } .cp-pt.cp-hit .cp-n { color: var(--ink); }
.cp-pt.cp-made { --lnc: var(--win); } .cp-pt.cp-made .cp-n { color: var(--win); }
.cp-puck { --k: 6px; position: absolute; top: -34px; left: 0; height: 26px; padding: 0 10px; display: grid; place-items: center; background: var(--gold); color: var(--on-gold);
  font: 700 13px/1 var(--f-ui); letter-spacing: .06em; text-transform: uppercase; opacity: 0; transform: translateX(-50%);
  clip-path: polygon(var(--k) 0, 100% 0, 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, 0 100%, 0 var(--k));
  transition: left .38s var(--e-settle), opacity .2s; }
.cp-puck.cp-on { opacity: 1; }
.cp-stem { position: absolute; top: -8px; left: 0; width: 2px; height: 8px; margin-left: -1px; background: var(--gold); opacity: 0; transition: left .38s var(--e-settle), opacity .2s; }
.cp-stem.cp-on { opacity: 1; }
/* the dice's canvas covers the tray and a little over it (a die's bounce rises above it); only there does a drag throw */
.cp-tray { position: relative; flex: 1; width: 100%; min-height: 200px; }
.cp-cv { position: absolute; left: 0; top: -30px; width: 100%; height: calc(100% + 36px); pointer-events: auto; touch-action: none; }

/* the totals rail: small cells, their own thinner inlay */
.cp-rail { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 4px; width: min(100%, 500px); margin-bottom: 12px; }
.cp-t { --k: 5px; height: 34px; cursor: default; pointer-events: none; box-shadow: none; }
.cp-t::before { inset: 2.5px; clip-path: polygon(calc(var(--k) - 1.46px) 0, 100% 0, 100% calc(100% - calc(var(--k) - 1.46px)), calc(100% - calc(var(--k) - 1.46px)) 100%, 0 100%, 0 calc(var(--k) - 1.46px)); }
.cp-t::after { inset: 4px; clip-path: polygon(calc(var(--k) - 2.34px) 0, 100% 0, 100% calc(100% - calc(var(--k) - 2.34px)), calc(100% - calc(var(--k) - 2.34px)) 100%, 0 100%, 0 calc(var(--k) - 2.34px)); }
.cp-t > i { font: 700 15px/1 var(--f-num); font-variant-numeric: tabular-nums; color: var(--ink-3); }
.cp-t.cp-w { --lnc: rgb(30 226 127 / .75); } .cp-t.cp-w > i { color: var(--win); }
.cp-t.cp-l { --lnc: rgb(255 77 103 / .75); } .cp-t.cp-l > i { color: var(--loss); }
.cp-t.cp-b { --lnc: var(--back); } .cp-t.cp-b > i { color: var(--back); }
.cp-t.cp-roll { --fill: var(--cell-hi); } .cp-t.cp-roll > i { color: var(--ink); }
.cp-t.cp-roll.cp-w > i { color: var(--win); } .cp-t.cp-roll.cp-l > i { color: var(--loss); } .cp-t.cp-roll.cp-b > i { color: var(--back); }
.cp-t.cp-roll:not(.cp-w):not(.cp-l):not(.cp-b) { --lnc: var(--ink-2); }

/* the bets: each line bet with its Odds / Lay cell beside it, closed until a point is on */
.cp-spots { display: flex; justify-content: center; gap: 12px; width: 100%; }
.cp-grp { flex: 0 1 260px; min-width: 0; display: flex; }
.cp-spot { flex: 1 1 0; min-width: 0; height: 72px; pointer-events: auto; touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.cp-spot > i { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 0 10px; }
.cp-lab { font: 600 15px/1 var(--f-ui); color: var(--ink); white-space: nowrap; }
.cp-pay { font: 700 16px/1 var(--f-num); color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cp-pay small { margin-left: 5px; font: 500 13px/1 var(--f-ui); color: var(--ink-3); }
.cp-pay.cp-plus { color: var(--win); }  /* what Odds or Lay paid, in place of the ratio */
.cp-amt { display: flex; visibility: hidden; height: 20px; align-items: center; gap: 6px; font: 700 15px/1 var(--f-num); color: var(--ink);
  font-variant-numeric: tabular-nums; transition: opacity .4s; }
.cp-spot.pick .cp-amt, .cp-spot.is-win .cp-amt, .cp-spot.is-loss .cp-amt, .cp-spot.is-back .cp-amt { visibility: visible; }
.cp-spot.is-loss .cp-amt { opacity: .45; }
/* a settled bet: mint, coral or silver over the gold of a placed chip */
.cp-spot.is-win { --lnc: var(--win); } .cp-spot.is-loss { --lnc: var(--loss); } .cp-spot.is-back { --lnc: var(--back); }
.cp-spot:not(.live) { cursor: default; }
.cp-spot.live:hover { --fill: var(--cell-hi); --lnc: var(--gold-line); }
.cp-spot.live:active { --fill: var(--cell-dn); --lnc: var(--gold-line); transform: scale(.95); }
.cp-chip { --chip: #c9d2de; width: 20px; height: 20px; flex: none; border-radius: 50%;
  background: radial-gradient(circle, var(--chip) 0 54%, rgb(255 255 255 / .9) 55% 58%, transparent 59%), repeating-conic-gradient(var(--chip) 0 22deg, #fff 22deg 30deg), var(--chip);
  box-shadow: inset 0 0 0 2px rgb(0 0 0 / .18), inset 0 -2px 0 rgb(0 0 0 / .22), 0 2px 4px rgb(3 6 12 / .45); }
.cp-chip.c50 { --chip: #d63a4e; } .cp-chip.c100 { --chip: #2f6fd6; } .cp-chip.c500 { --chip: #13935a; } .cp-chip.c1000 { --chip: #1c2633; } .cp-chip.c10000 { --chip: #f2b94a; }

/* Odds and Lay: they open beside their line bet once a point is on; "up to N×" under the label until a chip is on them,
   one gold pulse when they open; during the point only they take chips (the line bets are set on the come-out) */
.cp-grp .cp-odds { flex: 0 0 0; margin-left: 0; opacity: 0; visibility: hidden;
  transition: flex-grow .26s var(--e-out), margin .26s var(--e-out), opacity .18s, visibility 0s .26s; }
.cp-grp .cp-odds.cp-on, .cp-grp .cp-odds.cp-shown { flex: .74 1 0; margin-left: 6px; opacity: 1; visibility: visible;
  transition: flex-grow .26s var(--e-out), margin .26s var(--e-out), opacity .2s .08s; }
.cp-g.cp-live .cp-odds.cp-on:not(.pick):not(:hover) { --lnc: rgb(216 165 72 / .45); }
.cp-g.cp-live .cp-spot:not(.cp-odds) { cursor: default; }
.cp-g.cp-live .cp-spot:not(.cp-odds):active { transform: none; }
.cp-cap { font: 500 13px/1 var(--f-ui); color: var(--gold); white-space: nowrap; }
.cp-odds.pick .cp-cap, .cp-odds.is-win .cp-cap, .cp-odds.is-loss .cp-cap, .cp-odds.is-back .cp-cap { display: none; }
.cp-odds:not(.pick):not(.is-win):not(.is-loss):not(.is-back) .cp-amt { display: none; }
.cp-odds.cp-on.cp-pulse::before { animation: cp-pulse 1.1s var(--e-out) .25s 1 both; }
@keyframes cp-pulse { 0% { background-color: rgb(216 165 72 / .45); } 35% { background-color: var(--gold-hi, #ffd479); } 100% { background-color: rgb(216 165 72 / .45); } }
.cp-g:not(.cp-live) .cp-odds { cursor: default; }
.cp-g:not(.cp-live) .cp-odds:active { transform: none; }

@media (max-width: 899px) {
  .gm[data-game="craps"] .gm-play { min-height: 0; }
  .cp-g { padding: 42px 10px 12px; }
  .cp-pts { gap: 6px; }
  .cp-pt { height: 48px; }
  .cp-pt .cp-n { font-size: 24px; }
  .cp-tray { min-height: 150px; }
  .cp-rail { gap: 3px; margin-bottom: 10px; }
  .cp-t { height: 30px; }
  .cp-spot { height: 68px; }
  .cp-spots { gap: 8px; }
  .cp-grp .cp-spot > i { padding: 0 5px; }
}
@media (prefers-reduced-motion: reduce) { .cp-puck, .cp-stem, .cp-grp .cp-odds { transition: none; } .cp-odds.cp-on.cp-pulse::before { animation: none; } }