/* Cases' own look, on the game template (static/game.css styles the shell and the .gm-cell primitive): the four cases
   as cells across the top of the stage, their odds as ladder cells on hover (or a long press), ×1 to ×4 under them, and
   the strips of prizes on one canvas (static/cases.js draws them, stacked). */

.cs-stage { position: relative; flex: 1; min-height: 380px; }
.cs-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cs-sel { position: absolute; left: 12px; right: 12px; top: 12px; z-index: 3; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cs-case { height: 66px; -webkit-touch-callout: none; }
.cs-case > i { display: flex; align-items: center; justify-content: center; gap: 10px; }
.cs-case > i span { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.cs-case > i b { font: 600 14px/1 var(--f-ui); color: var(--ink-2); }
.cs-case > i em { font: 800 18px/1 var(--f-num); font-style: normal; color: var(--ink); font-variant-numeric: tabular-nums; }
.cs-case > i svg { width: 30px; height: 30px; flex: none; }
.cs-case:hover { --fill: var(--cell-hi); --lnc: var(--gold-line); }
.cs-case:active { transform: scale(.95); }
.cs-case.pick > i b { color: var(--ink); }
.cs-case.pick > i em { color: var(--gold); }
.cs-sel.busy .cs-case, .gm.autoplaying .cs-case { cursor: default; }
.cs-sel.busy .cs-case:not(.pick), .gm.autoplaying .cs-case:not(.pick) { opacity: .5; }
.cs-sel.busy .cs-case:hover, .gm.autoplaying .cs-case:hover { --fill: var(--cell); transform: none; }
.cs-sel.busy .cs-case:not(.pick):hover, .gm.autoplaying .cs-case:not(.pick):hover { --lnc: transparent; }

/* ×1 to ×4: how many cases open at once (hairline cells under the cases; the strips stack below them) */
.cs-count { position: absolute; left: 50%; top: 86px; transform: translateX(-50%); z-index: 3; display: flex; gap: 6px; }
.cs-count .gm-sec { --k: 6px; --fill: var(--stage); min-width: 0; width: 52px; height: 30px; padding: 0; font: 700 15px/1 var(--f-num); color: var(--ink-2); }
.cs-count .gm-sec[aria-pressed="true"] { --lnc: var(--gold); color: var(--gold); }
.cs-count.busy .gm-sec, .gm.autoplaying .cs-count .gm-sec { pointer-events: none; }
.cs-count.busy .gm-sec:not([aria-pressed="true"]), .gm.autoplaying .cs-count .gm-sec:not([aria-pressed="true"]) { opacity: .45; }

/* a case's odds: its prizes as ladder cells with their chance */
.cs-odds { --k: 10px; position: absolute; z-index: 4; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; width: 276px; padding: 8px;
  background: var(--panel); pointer-events: none; box-shadow: 0 10px 30px rgb(0 0 0 / .45); animation: cs-in .14s var(--e-out);
  clip-path: polygon(var(--k) 0, 100% 0, 100% calc(100% - var(--k)), calc(100% - var(--k)) 100%, 0 100%, 0 var(--k)); }
@keyframes cs-in { from { opacity: 0; transform: translateY(-4px); } }
.cs-o { --k: 6px; --fill: #1a2850; --lnc: var(--fill); position: relative; isolation: isolate; height: 42px; 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)); }
.cs-o::after { content: ""; position: absolute; inset: 1.5px; z-index: -1; background: var(--fill);
  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)); }
.cs-o b { font: 800 16px/1 var(--f-num); font-variant-numeric: tabular-nums; color: var(--ink); }
.cs-o span { font: 500 13px/1 var(--f-ui); color: var(--ink-2); }
.cs-o.r0 { --fill: #0b1430; } .cs-o.r0 b { color: var(--ink-3); }
.cs-o.r2 { --fill: #2c4180; }
.cs-o.r3 { --fill: #f3ead6; --lnc: var(--gold-line); } .cs-o.r3 b { color: #0c152b; } .cs-o.r3 span { color: #3a4566; }
.cs-o.r4 { --fill: #f2b94a; --lnc: #a8761f; } .cs-o.r4 b { color: var(--on-gold); } .cs-o.r4 span { color: #5a3d0a; }

@media (max-width: 899px) {
  .gm[data-game="cases"] .gm-play { min-height: 0; }
  .cs-stage { min-height: 340px; }
  .cs-count { top: 116px; }
  .cs-sel { grid-template-columns: 1fr 1fr; gap: 6px; }
  .cs-case { height: 46px; }
  .cs-case > i svg { width: 24px; height: 24px; }
  .cs-case > i span { flex-direction: row; align-items: baseline; gap: 8px; }
  .cs-case > i em { font-size: 17px; }
}