/* Higher or Lower's own look, on the game template (static/game.css styles the shell and the hairline .gm-sec): the
   trail of small cards across the top, the ivory card in the middle with the deck beside it, Higher above and Lower
   below as hairline cells (the call's chance and what it pays), and the two halves of the card to tap. */

.hl-stage { --cw: 126px; --ch: calc(var(--cw) * 1.4); position: relative; flex: 1; min-height: 470px; display: flex; flex-direction: column; align-items: center;
  container-type: inline-size; }
.hl-trail { flex: none; height: 79px; margin-top: 9px; padding: 4px 4px 0; max-width: calc(100% - 16px); display: flex; justify-content: center; gap: 10px; overflow: hidden; }
.hl-mc { flex: none; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.hl-mini { width: 40px; height: 54px; background: var(--ivory); color: #0c152b; border-radius: 5px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px; box-shadow: 0 4px 10px rgb(0 0 0 / .35); transition: box-shadow .15s; }
.hl-mini b { font: 800 19px/1 var(--f-num); }
.hl-mini i { font: normal 15px/1 var(--f-ui); }
.hl-mini.red { color: #c4313f; }
.hl-mc.hl-tr .hl-mini { box-shadow: 0 0 0 1.5px var(--stage), 0 0 0 3px var(--gold-line); }
.hl-tag { font: 700 13px/1 var(--f-num); font-variant-numeric: tabular-nums; color: var(--ink-3); height: 13px; white-space: nowrap; }
.hl-tag.t-win { color: var(--win); } .hl-tag.t-loss { color: var(--loss); }
.hl-tag:not(.t-win):not(.t-loss) { font: 500 13px/1 var(--f-ui); }
/* a skipped card: a small ghost, tagged "Skip" (a card a right call reached keeps its mint multiplier, "Skip" beside it) */
.hl-mc.hl-skp .hl-mini { width: 32px; height: 43px; margin-top: 11px; background: transparent; color: var(--ink-3); box-shadow: inset 0 0 0 1px rgb(244 236 220 / .28); }
.hl-mc.hl-skp .hl-mini.red { color: rgb(196 49 63 / .75); }
.hl-mc.hl-skp .hl-mini b { font-size: 15px; } .hl-mc.hl-skp .hl-mini i { font-size: 12px; }
.hl-tag.t-skip { color: var(--ink-3); }
.hl-sk { margin-left: 4px; font: 500 10px/1 var(--f-ui); font-style: normal; color: var(--ink-3); vertical-align: 1px; }
.hl-col { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding-bottom: 6px; }
.hl-mid { position: relative; width: var(--cw); height: var(--ch); flex: none; }
.hl-slot { position: absolute; inset: 0; }

/* a card: ivory, the rank in the corners, the suit in the middle; face down it is a cell with a gold inlay */
.hl-card { position: absolute; left: 0; top: 0; width: var(--cw); height: var(--ch); background: var(--ivory); border-radius: 7px; color: #0c152b;
  box-shadow: 0 8px 16px rgb(0 0 0 / .38), 0 1px 0 rgb(255 255 255 / .6) inset; font-family: var(--f-num); }
.hl-card::after { content: ""; position: absolute; inset: 4px; border: 1px solid rgb(216 165 72 / .6); border-radius: 4px; pointer-events: none; transition: border-color .2s; }
.hl-card .r { position: absolute; left: 8px; top: 6px; font-weight: 800; font-size: calc(var(--cw) * .3); line-height: 1; }
.hl-card .r2 { left: auto; top: auto; right: 8px; bottom: 6px; transform: rotate(180deg); }
.hl-card .s { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--cw) * .5); font-family: var(--f-ui); }
.hl-card.red { color: #c4313f; }
.hl-card.down { background: var(--cell); }
.hl-card.down > * { display: none; }
.hl-card.down::after { border-color: var(--gold-line); }
.hl-card.down::before { content: ""; position: absolute; left: 50%; top: 50%; width: 34%; aspect-ratio: 1; border: 1px solid var(--gold-line); transform: translate(-50%, -50%) rotate(45deg); }
.hl-card.hl-win::after { border: 2px solid var(--win); inset: 4px; }
.hl-card.hl-loss::after { border: 2px solid var(--loss); inset: 4px; }

/* the deck beside the card */
.hl-deck { position: absolute; left: calc(100% + 18px); top: 0; width: calc(var(--cw) * .78); height: calc(var(--ch) * .78); }
.hl-stage.live .hl-deck { cursor: pointer; }
.hl-deck i { position: absolute; inset: 0; border-radius: 6px; background: #e6dcc4; box-shadow: 0 1px 0 #b3a588; }
.hl-deck i:nth-child(1) { transform: translate(4px, 4px); background: #cfc3a6; }
.hl-deck i:nth-child(2) { transform: translate(2px, 2px); }
.hl-deck .hl-card { inset: 0; width: auto; height: auto; border-radius: 6px; box-shadow: 0 6px 12px rgb(0 0 0 / .35), 1px 1px 0 #f3ead6; }

/* Skip: a hairline under the deck, as wide as it, its foot level with the card's */
.hl-stage .hl-skip { --k: 7px; position: absolute; left: calc(100% + 18px); bottom: 0; width: calc(var(--cw) * .78); min-width: 0; height: calc(var(--ch) * .22 - 8px);
  padding: 0; display: flex; align-items: center; justify-content: center; gap: 4px; font: 600 13px/1 var(--f-ui); }
.hl-skip > * { position: relative; z-index: 1; }
.hl-skip svg { width: 14px; height: 14px; }
.hl-skip b { font-weight: 600; }

/* the halves of the card: tap the upper half for Higher, the lower for Lower */
.hl-hz { position: absolute; left: 0; right: 0; height: 50%; z-index: 3; display: flex; justify-content: center; border-radius: 7px; cursor: pointer; color: #0c152b;
  transition: background-color var(--t-hover) var(--e-out); }
.hl-hz.up { top: 0; align-items: flex-start; padding-top: 2px; } .hl-hz.dn { bottom: 0; align-items: flex-end; padding-bottom: 2px; }
.hl-hz svg, .hl-call svg { width: 24px; height: 24px; }
.hl-hz svg { opacity: 0; transition: opacity var(--t-hover), transform var(--t-hover) var(--e-out); }
.hl-stage svg path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.hl-hz.dn svg { transform: rotate(180deg); }
.hl-hz.on { background: rgb(242 185 74 / .16); box-shadow: inset 0 0 0 1.5px var(--gold-line); }
.hl-hz.on svg { opacity: 1; }
.hl-hz.up.on svg { transform: translateY(-2px); } .hl-hz.dn.on svg { transform: rotate(180deg) translateY(-2px); }
.hl-stage:not(.live) .hl-hz, .hl-hz.off { pointer-events: none; }

/* Higher and Lower: hairline cells with the call's chance and what it would pay */
.hl-stage .hl-call { --fill: var(--stage); flex: none; width: min(calc(var(--cw) * 2.1), calc(100cqw - 32px)); min-width: 0; height: 60px; padding: 0 16px;
  display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; column-gap: 10px; align-items: center; text-align: left; }
.hl-call > * { position: relative; z-index: 1; }
.hl-call svg { width: 20px; height: 20px; color: var(--gold); }
.hl-call.dn svg { transform: rotate(180deg); }
.hl-lab { display: flex; flex-direction: column; gap: 5px; min-width: 0; font-style: normal; }
.hl-lab span:empty { display: none; }
.hl-call b { font: 600 15px/1 var(--f-ui); color: var(--gold); }
.hl-call span { font: 500 13px/1 var(--f-ui); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.hl-call em { font: 800 28px/1 var(--f-num); font-style: normal; font-variant-numeric: tabular-nums; color: var(--ink); grid-column: 3; }
.hl-call.s-hover { --lnc: var(--gold-line); --fill: var(--cell); }
.hl-call.pick { --lnc: var(--gold-line); --fill: var(--cell); }
.hl-call.lost { --lnc: rgb(255 77 103 / .7); color: var(--loss); }
.hl-call.lost b, .hl-call.lost svg { color: var(--loss); }
.hl-stage .hl-call:disabled { cursor: default; transform: none; }
.hl-stage .hl-call:disabled:not(.pick):not(.lost) { opacity: .4; }
.hl-stage .hl-call:disabled:hover { --fill: var(--stage); --lnc: rgb(216 165 72 / .55); }
.hl-stage .hl-call.pick:disabled:hover { --fill: var(--cell); --lnc: var(--gold-line); }
.hl-stage .hl-call.lost:disabled:hover { --lnc: rgb(255 77 103 / .7); }
.hl-call.none em { color: var(--ink-3); }
.hl-tie { font: 500 13px/1 var(--f-ui); color: var(--ink-2); font-variant-numeric: tabular-nums; flex: none; }

@media (max-width: 899px) {
  .gm[data-game="higherlower"] .gm-play { min-height: 0; }
  .hl-stage { --cw: 107px; min-height: 420px; }
  .hl-trail { margin-top: 6px; gap: 8px; height: 77px; }
  .hl-col { gap: 8px; }
  .hl-deck { left: calc(100% + 14px); width: calc(var(--cw) * .66); height: calc(var(--ch) * .66); }
  .hl-stage .hl-skip { left: calc(100% + 14px); width: calc(var(--cw) * .66); height: calc(var(--ch) * .34 - 10px); font-size: 12px; }
  .hl-stage .hl-call { height: 54px; padding: 0 14px; }
  .hl-call em { font-size: 25px; }
}