/* Rock Paper Scissors' own look, on the game template (static/game.css styles the shell and the .gm-cell primitive):
   the streak row (five steps ahead in the ladder colours, the steps behind as mint ticks), the house's ivory prism (drawn
   by static/rps.js on the canvas behind), and the three hands as cut cells you tap (plus Random). In Auto the hand tapped
   is gold-inlaid and "Cash out after N wins" sits under the hands. */

.rp-stage { position: relative; flex: 1; min-height: 360px; container-type: size; }
.rp-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.rp { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 14px 12px 8px; pointer-events: none;
  --cs: min(23cqw, 27cqh, 112px); }
.rp button { pointer-events: auto; }

/* the streak row */
.rp-streak { display: flex; align-items: center; gap: 6px; height: 30px; flex: none; max-width: 100%; }
.rp-tks { display: flex; gap: 3px; align-items: center; margin-right: 4px; font: 700 13px/1 var(--f-num); color: var(--win); }
.rp-tk { width: 5px; height: 14px; background: var(--win); clip-path: polygon(2px 0, 100% 0, 100% calc(100% - 2px), calc(100% - 2px) 100%, 0 100%, 0 2px); }
.rp-sc { --k: 6px; --fill: var(--cell); --lnc: var(--fill); position: relative; isolation: isolate; height: 30px; min-width: clamp(46px, 11cqw, 60px); padding: 0 8px;
  display: grid; place-items: center; border: 0; background: var(--lnc); color: var(--ink-2); font: 700 15px/1 var(--f-num); font-variant-numeric: tabular-nums;
  clip-path: polygon(var(--k) 0, 100% 0, 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, 0 100%, 0 var(--k));
  transition: opacity .2s, background-color var(--t-hover) var(--e-out); }
.rp-sc::after { content: ""; position: absolute; inset: 1.5px; z-index: -1; background: var(--fill); transition: background-color var(--t-hover);
  clip-path: polygon(calc(var(--k) - .88px) 0, 100% 0, 100% calc(100% - calc(var(--k) - .88px)), calc(100% - calc(var(--k) - .88px)) 100%, 0 100%, 0 calc(var(--k) - .88px)); }
.rp-sc.l2 { --fill: #2c4180; color: var(--ink); } .rp-sc.l3 { --fill: #2c4180; color: var(--ivory); } .rp-sc.l4 { color: var(--gold); }
.rp-sc.nx { --lnc: var(--gold-line); }
.rp-sc.dark, .rp-tks.dark { opacity: .25; }
button.rp-sc { cursor: pointer; font-family: var(--f-num); }  /* over the shell's .gm button face */
.gm button.rp-sc { font-family: var(--f-num); }
button.rp-sc:not(.nx):hover { --fill: var(--cell-hi); --lnc: rgb(216 165 72 / .55); }

/* the prism's room (the canvas draws it there) and the labels */
.rp-prism { flex: 1 1 auto; width: 100%; min-height: 90px; max-height: 300px; }
.rp-lbl { display: block; height: 13px; color: var(--ink-2); font: 500 13px/1 var(--f-ui); text-align: center; white-space: nowrap; }
.rp-hl { margin: 2px 0 12px; }

/* the hands: cut cells with the line icons; yours lights up as it throws */
.rp-hands { display: flex; align-items: flex-start; gap: clamp(6px, 2.4cqw, 14px); }
.rp-hand { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.rp-hand .gm-cell { width: var(--cs); height: var(--cs); }
.rp-hand.rnd .gm-cell { width: calc(var(--cs) * .56); }
.rp .gm-cell > i svg { width: 58%; height: 58%; }
.rp-q { color: var(--gold); font: 800 clamp(22px, 4cqw, 30px)/1 var(--f-num); }
.rp .gm-cell.rp-rand { --lnc: rgb(216 165 72 / .55); }
.rp-hand .rp-lbl { color: var(--ink-3); }
.rp-hand.on .rp-lbl { color: var(--ink); }
.rp .gm-cell.rp-mine { --fill: var(--cell-hi); --lnc: var(--gold-line); }
.rp-hands.busy .gm-cell { cursor: default; }
.rp-cap { height: 13px; margin-top: 10px; color: var(--ink-3); font: 500 13px/1 var(--f-ui); }
.rp.dim .rp-hands, .rp.dim .rp-streak { filter: brightness(.9); }

/* Auto: the hand to throw is picked on the board (gold inlay), the cash-out step under it */
.rp .gm-cell.pick { --lnc: var(--gold-line); }
.rp .gm-cell.pick:not(.rev):hover { --lnc: var(--gold-hi); }
.rp-auto { display: none; align-items: center; gap: 8px; height: 34px; margin-top: 10px; flex: none; }
.rp.auto .rp-auto { display: flex; }
.rp.auto .rp-cap { display: none; }
.rp-auto .rp-lbl { height: auto; line-height: 1; color: var(--ink-2); }
.rp-auto em { color: var(--ink); font: 700 16px/1 var(--f-num); font-style: normal; font-variant-numeric: tabular-nums; }
.rp-stp { --k: 6px; --fill: var(--cell); --lnc: var(--fill); position: relative; isolation: isolate; flex: none; width: 34px; height: 34px; display: grid; place-items: center;
  padding: 0; border: 0; background: var(--lnc); cursor: pointer;
  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 var(--t-hover) var(--e-out), transform var(--t-press) var(--e-out); }
.rp-stp::after { content: ""; position: absolute; inset: 1.5px; z-index: -1; background: var(--fill);
  clip-path: polygon(calc(var(--k) - .88px) 0, 100% 0, 100% calc(100% - calc(var(--k) - .88px)), calc(100% - calc(var(--k) - .88px)) 100%, 0 100%, 0 calc(var(--k) - .88px)); }
.rp-stp:hover { --fill: var(--cell-hi); --lnc: var(--gold-line); }
.rp-stp:active { transform: scale(.95); }
.rp-stp:disabled { opacity: .35; cursor: default; --fill: var(--cell); --lnc: var(--fill); transform: none; }
.rp-stp svg { width: 14px; height: 14px; overflow: visible; }
.rp-stp path { fill: none; stroke: var(--ink-2); stroke-width: 2.2; stroke-linecap: round; }
.rp-stp:hover:not(:disabled) path { stroke: var(--ink); }
.rp-n { min-width: 26px; text-align: center; color: var(--ink); font: 800 24px/1 var(--f-num); font-variant-numeric: tabular-nums; }
.gm.autoplaying .rp-auto button, .gm.autoplaying button.rp-sc { opacity: .5; pointer-events: none; }
.gm.autoplaying .rp-hands .gm-cell { cursor: default; }

@media (max-width: 899px) {
  .gm[data-game="rps"] .gm-play { min-height: 0; }
  .rp-stage { flex: none; height: 400px; min-height: 0; }  /* a set height: the hands are sized off it (cqh) */
}