/* Copyright (c) 2025-2026 Yoda Games. All rights reserved.
   Hi-Lo vanilla port styling. Layout mirrors the Flutter version
   (lib/hi_lo_game/screens/hi_lo_game_screen.dart):
   header → card → history row → HIGHER/LOWER buttons → bet steps →
   primary action button → SKIP. */

#hilo-game {
  --hilo-bg:        #0A1A29;
  --hilo-panel:     #11203A;
  --hilo-border:    rgba(255, 255, 255, 0.08);
  --hilo-text:      #E8EEF5;
  --hilo-muted:     rgba(255, 255, 255, 0.55);
  --hilo-gold:      #FFD700;
  --hilo-green:     #16C17D;
  --hilo-red:       #E74C3C;
  --hilo-blue:      #2E8BFF;

  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  /* Below 330px the game container keeps its 330px width and the page
     scrolls horizontally instead of cramming the layout further. */
  min-width: 330px;
  height: 100%;
  padding: 14px 16px 24px;
  box-sizing: border-box;
  color: var(--hilo-text);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  background: var(--hilo-bg);
  overflow-y: auto;
}

/* ── Header ─────────────────────────────────────────── */
.hilo-header {
  position: relative;
  width: 100%;
  max-width: 500px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 0 4px;
  margin-bottom: 14px;
}
/* Brand title — absolutely centred on the row, independent of CREDITS
   and sound which stay anchored to left/right edges via flex. This
   guarantees the title sits on the geometric centre of the row (=
   card centre), regardless of CREDITS' rendered width. */
.hilo-header .hilo-title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: 3px;
  text-transform: uppercase;
  line-height: 1;
  background: linear-gradient(135deg, #FFE066 0%, #FFD700 40%, #FFAA00 70%, #FFD700 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 10px rgba(255, 200, 60, 0.35));
  user-select: none;
  white-space: nowrap;
  pointer-events: none;
}
@media (max-width: 480px) {
  .hilo-header .hilo-title { font-size: 16px; letter-spacing: 2px; }
}
/* Credits readout — single-row pill: gold "$" + monospaced amount. */
.hilo-credits {
  height: 45px;
  min-width: 90px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  line-height: 1;
  gap: 4px;
  padding: 0 12px;
  box-sizing: border-box;
}
.hilo-credits .currency {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #ffd54a;
  text-shadow: 0 0 8px rgba(255,213,74,.25);
  line-height: 1;
}
.hilo-credits strong {
  font-family: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 16px;
  font-weight: 700;
  color: #ffd54a;
  text-shadow: 0 0 12px rgba(255,213,74,.25);
  letter-spacing: .3px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
/* Sound button — borderless 45×45 to match the credits readout height. */
.hilo-sound-fab {
  width: 45px; height: 45px;
  flex: 0 0 auto;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 140ms ease, transform 100ms ease;
  -webkit-tap-highlight-color: transparent;
}
.hilo-sound-fab svg {
  width: 28px; height: 28px;
  fill: rgba(255,255,255,.85);
  transition: fill 140ms ease;
}
.hilo-sound-fab:hover { background: rgba(255,255,255,.06); }
.hilo-sound-fab:hover svg { fill: var(--hilo-gold); }
.hilo-sound-fab:active { transform: scale(0.94); }

/* ── Card ───────────────────────────────────────────── */
/* Mirrors Flutter lib/hi_lo_game/widgets/card.dart:
   SlideTransition from (1.5, -1.0) + FadeTransition 0→1, 350ms easeOutCubic.
   Size mirrors HiloConstants.cardWidth (130) × cardWidth*1.2 (156). */
/* Card sized to standard 5:7 (1:1.4) playing-card aspect ratio */
.hilo-card-wrap {
  width: 160px;
  aspect-ratio: 5 / 7;
  margin: 6px auto 14px;
}
/* Direct port of videopoker-web .card. Container queries + cqi sizing
   keep every glyph in proportion to the card regardless of its size. */
.hilo-card {
  container-type: size;
  position: relative;
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 6px;
  box-sizing: border-box;
  box-shadow: 0 12px 24px rgba(0,0,0,0.35);
}
.hilo-card.is-placeholder {
  background: #2A3752;
  color: rgba(255,255,255,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  border-color: rgba(255,255,255,0.06);
}
.hilo-card.is-placeholder .hilo-card-corner,
.hilo-card.is-placeholder .hilo-card-suit { display: none; }
.hilo-card.is-placeholder::before {
  content: '?';
  font-family: 'Fredoka One', cursive;
  font-size: 56cqi;
}
/* Direct port of videopoker-web .cc / .cm
   (videopoker-web/games/bonus-poker/index.html lines 82-105). */
.hilo-card-corner {
  font-family: 'Fredoka One', cursive;
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hilo-card-corner.top { top: 2%; left: 8%; width: 25cqi; }
.hilo-card-corner .hilo-card-rank {
  font-size: 40cqi;
  line-height: 0.9;
  margin-bottom: 1cqi;
}
.hilo-card-corner .hilo-card-suit-sm {
  font-size: 28cqi;
  line-height: 1;
  font-variant-emoji: text;
  font-family: sans-serif;
}
.hilo-card-suit {
  position: absolute;
  bottom: 2%;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Fredoka One', cursive;
  font-size: 75cqi;
  line-height: 1;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.15));
  display: flex;
  justify-content: center;
  align-items: center;
  font-variant-emoji: text;
  font-family: sans-serif;
  pointer-events: none;
}
.hilo-card.is-red   { color: #FF0000; }
.hilo-card.is-black { color: #000000; }

/* Deal animation: slide from (1.5x, -1.0y) → (0,0) + fade 0→1, 350ms easeOutCubic */
@keyframes hilo-deal {
  from {
    transform: translate(150%, -100%);
    opacity: 0;
  }
  to {
    transform: translate(0, 0);
    opacity: 1;
  }
}
.hilo-card.dealing {
  animation: hilo-deal 350ms cubic-bezier(0.33, 1, 0.68, 1) both;
}

/* ── History row ────────────────────────────────────── */
/* History row — mirrors result_history_row.dart (cardW=50, gap=8) and
   card_history.dart (50×60, 12px radius, font 14). */
.hilo-history {
  width: 100%;
  max-width: 500px;
  height: 102px;
  display: flex;
  align-items: center;
  gap: 8px; /* matches result_history_row.dart: const double gap = 8 */
  overflow-x: auto;
  padding: 6px 2px;
  margin-bottom: 10px;
  scrollbar-width: none;
}
.hilo-history::-webkit-scrollbar { display: none; }
.hilo-history-item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px; /* matches SizedBox(height: 4) in result_history_row.dart */
}
.hilo-history-card {
  /* Real-card 5:7 ratio. Mini version of videopoker layout. */
  container-type: size;
  position: relative;
  width: 50px;
  height: 70px;
  border-radius: 4px;
  background: #fff;
  color: #000;
  border: 1px solid rgba(0,0,0,0.08);
  box-sizing: border-box;
  box-shadow: 0 8px 8px rgba(0,0,0,0.35);
  font-family: 'Fredoka One', cursive;
}
/* Mini videopoker card — same proportions as the big card. */
.hilo-history-card .corner {
  font-family: 'Fredoka One', cursive;
  position: absolute;
  top: 2%;
  left: 8%;
  width: 25cqi;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hilo-history-card .corner .r { font-size: 40cqi; line-height: 0.9; margin-bottom: 1cqi; }
.hilo-history-card .corner .s {
  font-size: 28cqi;
  line-height: 1;
  font-variant-emoji: text;
  font-family: sans-serif;
}
.hilo-history-card .center {
  position: absolute;
  bottom: 2%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 75cqi;
  line-height: 1;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.15));
  font-variant-emoji: text;
  font-family: sans-serif;
}
.hilo-history-card.is-red   { color: #FF0000; }
.hilo-history-card.is-black { color: #000000; }
.hilo-history-tag {
  /* result_history_row.dart: GoogleFonts.robotoMono fontSize 12, white70 / red */
  font-family: 'Roboto Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  padding: 0;
  background: transparent;
  border-radius: 0;
  white-space: nowrap;
}
/* Flutter parity: only "YOU LOSE" is red; all other tags use white70.
   See result_history_row.dart: color: text == youLose ? Colors.red : Colors.white70 */
.hilo-history-tag.win,
.hilo-history-tag.skip,
.hilo-history-tag.start { color: rgba(255,255,255,0.7); }
.hilo-history-tag.lose  { color: var(--hilo-red); }

.hilo-hint {
  width: 100%;
  max-width: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--hilo-muted);
  text-align: center;
  line-height: 1.55;
  padding: 6px 16px;
  min-height: 36px;
  box-sizing: border-box;
}
/* In-round CTA — stands out as "MAKE YOUR CHOICE" prompt. */
.hilo-hint.is-cta {
  font-family: 'Orbitron', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: var(--hilo-gold);
}
/* Idle hint area: when history is empty, occupy the full 92px slot so the
   layout matches the in-round look. */
.hilo-history[hidden] + .hilo-hint:not(.is-cta) { min-height: 96px; }
/* `display: flex` overrides the default [hidden] { display: none }, so we
   re-state the hidden rule explicitly for both row containers. */
.hilo-hint[hidden],
.hilo-history[hidden] { display: none; }

/* ── Probability buttons (Flutter probability_button.dart parity) ─────
   Layout: 88px tall, 16px radius, 4 rows: arrow+= / LABEL / OR EQUAL / pct
   Colors: HIGHER green, LOWER red, idle deep #2A3752. */
.hilo-prob-row {
  width: 100%;
  max-width: 500px;
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}
.hilo-prob-btn {
  flex: 1;
  height: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  background: #2A3752; /* idle/disabled — matches Flutter Color(0xFF2A3752) */
  border: 0;
  border-radius: 16px;
  color: #BFC6D2;      /* idle text — matches Flutter textColor 0xFFBFC6D2 */
  font-family: 'Poppins', system-ui, sans-serif;
  cursor: not-allowed;
  transition: background .15s, color .15s, transform .12s;
}
.hilo-prob-btn.is-active.higher { background: #16C17D; color: #fff; cursor: pointer; }
.hilo-prob-btn.is-active.lower  { background: #E74C3C; color: #fff; cursor: pointer; }
.hilo-prob-btn:active:not(:disabled) { transform: scale(0.98); }
.hilo-prob-btn:disabled { cursor: not-allowed; }

.hilo-prob-btn .row1 {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}
.hilo-prob-btn .row1 .arrow,
.hilo-prob-btn .row1 .eq {
  display: inline-block;
  line-height: 1;
}
.hilo-prob-btn .row2 {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.5px;
  line-height: 1;
}
.hilo-prob-btn .row3 {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.5px;
  line-height: 1;
}
.hilo-prob-btn .pct {
  font-family: 'Roboto Mono', ui-monospace, monospace;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: #BFC6D2; /* idle: muted */
}
.hilo-prob-btn.is-active .pct { color: #FFEB3B; } /* matches Flutter Colors.yellow when active */

/* ── Bet stepper (Tower / Mines / Balloon-Pop parity) ─ */
.hilo-bet {
  width: 100%;
  max-width: 500px;
  height: 45px;
  background: linear-gradient(180deg, #1d1d2e 0%, #15151f 100%);
  border-radius: 12px;
  padding: 0 6px;
  display: grid;
  grid-template-columns: 22px 1fr 22px;
  align-items: center;
  gap: 4px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 -1px 0 rgba(0,0,0,.4),
    0 1px 0 rgba(255,255,255,.03);
  margin-bottom: 12px;
  box-sizing: border-box;
}
.hilo-bet .step {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  padding: 0;
  line-height: 0;
  border: 0;
  cursor: pointer;
  transition: transform 100ms ease, filter 120ms ease;
  -webkit-tap-highlight-color: transparent;
}
.hilo-bet .step svg {
  width: 16px; height: 16px;
  fill: #1a1a1a;
  display: block;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.18));
}
.hilo-bet .step.dec {
  background: radial-gradient(circle at 30% 30%, #ff6b6b, #c93a3a);
  box-shadow: 0 2px 6px rgba(201,58,58,.45), inset 0 1px 0 rgba(255,255,255,.35);
}
.hilo-bet .step.inc {
  background: radial-gradient(circle at 30% 30%, #56dd76, #2fa84a);
  box-shadow: 0 2px 6px rgba(47,168,74,.45), inset 0 1px 0 rgba(255,255,255,.35);
}
.hilo-bet .step:not(:disabled):hover  { filter: brightness(1.1); transform: translateY(-1px); }
.hilo-bet .step:not(:disabled):active { transform: translateY(1px); filter: brightness(.92); }
/* Disabled: keep full color (per design); just block pointer interaction. */
.hilo-bet .step.dec:disabled {
  background: radial-gradient(circle at 30% 30%, #ff6b6b, #c93a3a) !important;
  box-shadow: 0 2px 6px rgba(201,58,58,.45), inset 0 1px 0 rgba(255,255,255,.35) !important;
  opacity: 1 !important;
  filter: none !important;
  cursor: not-allowed;
}
.hilo-bet .step.inc:disabled {
  background: radial-gradient(circle at 30% 30%, #56dd76, #2fa84a) !important;
  box-shadow: 0 2px 6px rgba(47,168,74,.45), inset 0 1px 0 rgba(255,255,255,.35) !important;
  opacity: 1 !important;
  filter: none !important;
  cursor: not-allowed;
}
.hilo-bet .step:disabled svg { fill: #1a1a1a !important; opacity: 1 !important; }
.hilo-bet .readout {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  gap: 2px;
  min-width: 0;
  padding: 0 4px;
}
.hilo-bet .readout .label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 8px;
  color: #6e6e88;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  font-weight: 600;
}
.hilo-bet .readout .value {
  font-family: 'Roboto Mono', ui-monospace, monospace;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .3px;
  font-variant-numeric: tabular-nums;
}

/* ── Action button ──────────────────────────────────── */
.hilo-action-btn {
  width: 100%;
  max-width: 500px;
  height: 45px; /* matches .hilo-bet stepper height for visual rhythm */
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  color: #1A1A2E;
  border: none;
  border-radius: 12px;
  font-family: 'Orbitron', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 2px;
  cursor: pointer;
  transition: transform .12s, box-shadow .15s, filter .15s;
  box-shadow: 0 6px 18px rgba(255,165,0,0.32);
  margin-bottom: 10px;
}
.hilo-action-btn:hover:not(:disabled) { filter: brightness(1.05); }
.hilo-action-btn:active:not(:disabled) { transform: scale(0.985); }
.hilo-action-btn:disabled { filter: grayscale(0.4) brightness(0.85); cursor: not-allowed; }
.hilo-action-btn[data-state="cashout"] {
  background: linear-gradient(135deg, #1FE08A 0%, #16C17D 100%);
  color: #07221A;
  box-shadow: 0 6px 18px rgba(22,193,125,0.32);
}
.hilo-action-btn[data-state="choose"] {
  background: rgba(255,255,255,0.08);
  color: var(--hilo-muted);
  box-shadow: none;
  cursor: default;
}

/* ── Skip button ────────────────────────────────────── */
.hilo-skip-btn {
  width: 100%;
  max-width: 500px;
  height: 42px;
  background: transparent;
  border: 1.4px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  color: var(--hilo-muted);
  font-family: 'Orbitron', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.hilo-skip-btn:hover:not(:disabled) {
  color: var(--hilo-text);
  border-color: rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.04);
}
.hilo-skip-btn[hidden] { display: none; }

/* ── Win toast ──────────────────────────────────────── */
.hilo-toast {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 140px;
  background: rgba(0,0,0,0.05);
  z-index: 30;
  pointer-events: none;
}
@media (max-width: 480px) {
  .hilo-toast { padding-top: 120px; }
}
@media (max-width: 380px) {
  .hilo-toast { padding-top: 105px; }
}
.hilo-toast[hidden] { display: none; }
.hilo-toast .panel {
  background: linear-gradient(135deg, rgba(28,44,84,0.65) 0%, rgba(14,26,54,0.65) 100%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255,215,0,0.45);
  border-radius: 16px;
  padding: 28px 36px;
  text-align: center;
  box-shadow: 0 16px 40px rgba(0,0,0,0.5);
}
.hilo-toast .panel .title {
  font-family: 'Orbitron', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--hilo-gold);
  text-shadow: 0 0 12px rgba(255, 215, 0, 0.5);
  margin-bottom: 10px;
}
.hilo-toast .panel .amount {
  font-family: 'Orbitron', system-ui, sans-serif;
  font-size: 36px;
  font-weight: 800;
  background: linear-gradient(135deg, #FFD700, #FFA500);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.hilo-toast .panel .hint {
  margin-top: 14px;
  font-size: 11px;
  color: var(--hilo-muted);
  letter-spacing: 2px;
}

/* ── Insufficient balance modal (Tower parity) ─────────────────────── */
.hilo-modal-mask {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  font-family: 'Inter', system-ui, sans-serif;
}
.hilo-ib-dialog {
  width: 100%;
  max-width: 320px;
  background: #2C2C34;
  border-radius: 20px;
  padding: 24px 22px 20px;
  color: #fff;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.hilo-ib-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 14px;
}
.hilo-ib-msg {
  font-size: 16px;
  color: rgba(255,255,255,.7);
  line-height: 1.45;
  margin-bottom: 22px;
}
.hilo-ib-btn {
  background: #607D8B;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 28px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}
.hilo-ib-btn:hover { filter: brightness(1.08); }

/* ── Sound settings dialog (Tower parity) ────────────────────────────── */
.hilo-ss-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
  animation: hilo-ss-mask-in 180ms ease;
  font-family: 'Inter', system-ui, sans-serif;
}
@keyframes hilo-ss-mask-in { from { opacity: 0; } to { opacity: 1; } }
.hilo-ss-dialog {
  width: 340px;
  max-width: 100%;
  background: #1A2332;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  overflow: hidden;
  color: #fff;
  font-family: 'Inter', system-ui, sans-serif;
  animation: hilo-ss-dialog-in 220ms cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
@keyframes hilo-ss-dialog-in {
  from { opacity: 0; transform: scale(0.94) translateY(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.hilo-ss-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.hilo-ss-title {
  color: rgba(255, 255, 255, 0.75);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
}
.hilo-ss-close {
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.4);
  cursor: pointer;
  padding: 4px;
  display: inline-flex;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.hilo-ss-close:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }

.hilo-ss-row {
  display: flex;
  align-items: center;
  padding: 14px 20px;
  gap: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.hilo-ss-row:last-child { border-bottom: none; }
.hilo-ss-label {
  flex: 0 0 40%;
  color: rgba(255, 255, 255, 0.6);
  font-size: 15px;
  font-weight: 400;
  min-width: 0;
}

/* Switch */
.hilo-ss-switch {
  position: relative;
  display: inline-block;
  margin-left: auto;
  cursor: pointer;
}
.hilo-ss-switch input {
  appearance: none;
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0; height: 0;
}
.hilo-ss-switch-track {
  display: inline-block;
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.12);
  transition: background 0.2s;
}
.hilo-ss-switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  transition: transform 0.2s, background 0.2s;
}
.hilo-ss-switch input:checked + .hilo-ss-switch-track {
  background: rgba(74, 158, 255, 0.4);
}
.hilo-ss-switch input:checked + .hilo-ss-switch-track .hilo-ss-switch-thumb {
  transform: translateX(20px);
  background: #4A9EFF;
}

/* Volume sliders */
input.hilo-ss-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right,
    #4A9EFF 0%, #4A9EFF var(--fill, 100%),
    rgba(255, 255, 255, 0.12) var(--fill, 100%), rgba(255, 255, 255, 0.12) 100%);
  outline: none;
  cursor: pointer;
}
input.hilo-ss-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
input.hilo-ss-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  border: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

/* ── Mobile tightening ──────────────────────────────── */
/* Stops shrinking below the 330px floor — at that point #hilo-game's
   min-width: 330px takes over and the page scrolls horizontally.
   cqi font sizing keeps every glyph (rank, suit, center) auto-scaled. */
@media (max-width: 500px) {
  .hilo-card-wrap { width: 96px; } /* aspect-ratio keeps 5:7 → ~134px tall */
  .hilo-history-card { width: 38px; height: 53px; }
  .hilo-history { height: 80px; }
  .hilo-history[hidden] + .hilo-hint:not(.is-cta) { min-height: 76px; }
}
@media (max-width: 380px) {
  .hilo-card-wrap { width: 84px; } /* small phones → ~118px tall */
  .hilo-history-card { width: 34px; height: 48px; }
  .hilo-prob-btn { height: 80px; }
  .hilo-prob-btn .row2,
  .hilo-prob-btn .row3 { font-size: 12px; }
  .hilo-action-btn { height: 45px; font-size: 14px; }
}