/* Higher or Lower: the pile of cards, what a wrong guess costs, and the two big buttons. */
.hl-table { display: flex; align-items: center; gap: 18px; }
.hl-pile { position: relative; flex: none; width: min(42vw, 178px); aspect-ratio: 5 / 7; }
.hl-pile .pc { position: absolute; inset: 0; width: 100%; }
.hl-pile .pc:nth-last-child(2) { transform: rotate(-4deg); }
.hl-pile .pc:nth-last-child(3) { transform: rotate(5deg); }
.hl-pile .pc.dealt { animation: hl-deal .38s var(--ease); }
@keyframes hl-deal { from { opacity: 0; transform: translate(46%, -18%) rotate(14deg); } }

.hl-side { flex: 1; min-width: 0; display: grid; gap: 10px; margin: 0; }
.hl-stat { padding: 12px 14px 14px; background: var(--panel); border-radius: 18px; box-shadow: var(--shade); }
.hl-stat dt { font: 700 12px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.hl-stat dd { margin: 8px 0 0; display: flex; align-items: baseline; gap: 6px; }
.hl-stat dd b { font: 800 34px/1 var(--logo); color: var(--gold); font-variant-numeric: tabular-nums; }
.hl-stat dd small { font: 600 16px/1 var(--body); color: var(--muted); }
.hl-pips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 10px; }
.hl-pips i { height: 6px; background: var(--well); border-radius: 3px; transition: background .3s; }
.hl-pips i.on { background: var(--gold); }

.hl-result { min-height: 58px; margin: 0; padding: 12px 16px; display: grid; place-items: center; border-radius: 16px; font-size: 20px; font-weight: 700; line-height: 1.2; text-align: center; text-wrap: balance; }
.hl-result.right { color: var(--cyan); background: rgba(56, 225, 212, .12); animation: pop-in .35s var(--spring); }
.hl-result.wrong { color: #2a1600; background: linear-gradient(180deg, var(--gold), var(--gold-2)); box-shadow: 0 4px 0 var(--gold-edge); animation: pop-in .35s var(--spring); }

.hl-guess { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hl-guess button { --drop: 7px; min-height: 98px; flex-direction: column; gap: 4px; border-radius: 22px; font-size: clamp(17px, 5vw, 20px); }
.hl-guess .icon { width: 36px; height: 36px; stroke-width: 3.2; }
.hl-guess button:disabled { --face: #2e2769; --face-2: #2a2362; --edge: #1b1647; --on: #857eb4; filter: none; transform: none; cursor: default; }
@media (prefers-reduced-motion: reduce) { .hl-pile .pc.dealt, .hl-result { animation: none; } }