.arcade-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.arcade-head h2 { margin: 4px 0 0; font-size: 24px; font-style: italic;
  font-weight: 900; letter-spacing: -0.03em; }
.arcade-head p { margin: 0; font-size: 13px; color: var(--text-3); }

/* Arcade: neon-on-dark using Ball Knower's palette. */

.arcade-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.now-playing {
  font-size: 17px;
  font-weight: 800;
  font-style: italic;
  letter-spacing: -0.02em;
}

.game-lobby {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.game-tile {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 22px 22px 20px;
  min-height: 190px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card);
  font: inherit;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: transform 0.16s, border-color 0.16s, box-shadow 0.16s;
}
.game-tile:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 12px 34px rgb(0 0 0 / 0.32);
}
.game-tile .tile-art {
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 150px;
  opacity: 0.5;
  transition: transform 0.25s, opacity 0.25s;
}
.game-tile:hover .tile-art { transform: scale(1.08) rotate(-3deg); opacity: 0.75; }
.game-tile .tile-art svg { width: 100%; height: auto; display: block; }
.game-tile .tile-name {
  position: relative;
  font-size: 26px;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.03em;
}
.game-tile .tile-tag {
  position: relative;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--text-3);
}
.tile-limbo { background-image: radial-gradient(340px 150px at 100% 100%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%); color: var(--accent); }
.tile-keno  { background-image: radial-gradient(340px 150px at 100% 100%, color-mix(in srgb, var(--win) 20%, transparent), transparent 70%); color: var(--win); }
.tile-plinko{ background-image: radial-gradient(340px 150px at 100% 100%, color-mix(in srgb, #d4a017 22%, transparent), transparent 70%); color: #d4a017; }
.game-tile .tile-name, .game-tile .tile-tag { color: var(--text); }
.game-tile .tile-tag { color: var(--text-3); }

.arcade-tabs button[data-game] {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 10px;
  padding: 9px 20px;
  font: inherit;
  font-weight: 750;
  color: var(--text-2);
  cursor: pointer;
  transition: all 0.15s;
}
.arcade-tabs button[data-game]:hover { border-color: var(--border-strong); color: var(--text); }
.arcade-tabs button[data-game].on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 45%, transparent);
}
.arcade-tabs .spacer { margin-left: auto; }

.game-stage {
  background: var(--bg-accent);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-height: 340px;
  display: grid;
  place-items: center;
  padding: 20px;
  position: relative;
  overflow: hidden;
}

.game-controls {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-top: 12px;
}
.ctl { display: flex; flex-direction: column; gap: 5px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); }
.ctl input, .ctl select {
  font: inherit; font-size: 15px; font-weight: 700; color: var(--text);
  background: var(--card-2); border: 1px solid var(--border);
  border-radius: 9px; padding: 9px 12px; min-width: 130px;
}
.ctl-readout { font-size: 13px; color: var(--text-2); font-weight: 600; }
.ctl-readout strong { color: var(--text); font-size: 15px; }

/* ---- limbo ---- */
.limbo-stage { flex-direction: column; }

/* Settings that belong to the game itself sit on the stage, under the
   multiplier — the panel keeps the wager controls. */
.stage-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  max-width: 460px;
  margin-top: 22px;
}
.stage-fields .field { background: var(--card); }
@media (max-width: 620px) {
  .stage-fields { gap: 8px; margin-top: 16px; }
  .stage-fields .field { padding: 7px 9px; }
  .stage-fields .field > span { font-size: 9.5px; }
  .stage-fields .field input { font-size: 14px; padding: 7px 9px; }
}
.limbo-mult {
  font-size: clamp(52px, 11vw, 104px);
  font-weight: 900;
  font-style: italic;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: color 0.15s, text-shadow 0.15s, transform 0.15s;
}
.limbo-mult span { font-size: 0.45em; opacity: 0.6; margin-left: 2px; }
.limbo-mult.rolling { color: var(--text-2); }
.limbo-mult.win {
  color: var(--win);
  text-shadow: 0 0 40px color-mix(in srgb, var(--win) 60%, transparent);
  transform: scale(1.06);
}
.limbo-mult.lose { color: var(--loss); text-shadow: 0 0 30px color-mix(in srgb, var(--loss) 40%, transparent); }
.limbo-status { margin-top: 14px; font-size: 13.5px; font-weight: 650; color: var(--text-3); }

.history { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.history .chip {
  font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums;
  border-radius: 99px; padding: 5px 12px;
  background: var(--card); border: 1px solid var(--border); color: var(--text-2);
}
.history .chip.win { color: var(--win-ink); border-color: color-mix(in srgb, var(--win) 45%, transparent);
  background: var(--win-soft); }
.history .chip.lose { color: var(--text-3); }

/* ---- keno ---- */
.keno-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 7px; width: 100%; }
.keno-cell {
  aspect-ratio: 1;
  display: grid; place-items: center;
  background: var(--card-2); border: 1px solid var(--border); border-radius: 12px;
  font-weight: 800; font-size: 18px; color: var(--text-2);
  cursor: pointer; user-select: none;
  transition: transform 0.12s, background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.keno-cell:hover { border-color: var(--border-strong); transform: translateY(-1px); }
.keno-cell.picked { background: var(--accent); border-color: var(--accent); color: #fff;
  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 45%, transparent); }
/* Drawn but not yours — clearly "came up, missed you". */
.keno-cell.drawn {
  background: var(--bg-accent);
  border-color: color-mix(in srgb, var(--loss) 40%, transparent);
  color: var(--loss-ink);
  opacity: 0.85;
}
.keno-cell.hit {
  background: var(--win); border-color: var(--win); color: #fff;
  box-shadow: 0 0 24px color-mix(in srgb, var(--win) 60%, transparent);
  animation: pop 0.32s ease;
}
@keyframes pop { 0% { transform: scale(0.7); } 60% { transform: scale(1.14); } 100% { transform: scale(1); } }

.paytable { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.paytable .pt {
  font-size: 12px; font-weight: 700; border-radius: 8px; padding: 6px 10px;
  background: var(--card); border: 1px solid var(--border); color: var(--text-3);
}
.paytable .pt.on { color: var(--win-ink); border-color: color-mix(in srgb, var(--win) 45%, transparent);
  background: var(--win-soft); }
.paytable .pt b { color: var(--text); }

/* ---- plinko ---- */
.plinko-stage { padding: 10px; }
#plinkoCanvas { width: 100%; max-width: 760px; height: auto; display: block; }

/* ---- fairness ---- */
.fair-rows { padding: 0 18px 18px; display: flex; flex-direction: column; gap: 10px; }
.fair-rows .fr { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.fair-rows .fr .k { font-size: 11px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-3); min-width: 130px; }
.fair-rows .fr code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px;
  background: var(--bg-accent); border: 1px solid var(--border); border-radius: 6px;
  padding: 5px 9px; word-break: break-all; flex: 1; min-width: 220px;
}
.fair-rows input {
  font: inherit; font-size: 13px; color: var(--text); background: var(--card-2);
  border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px;
}
.free-play-note {
  margin-top: 12px; text-align: center; font-size: 12px; color: var(--text-3);
}

@media (max-width: 620px) {
  .keno-grid { grid-template-columns: repeat(5, 1fr); }
  .game-controls { gap: 10px; }
  .ctl input, .ctl select { min-width: 100px; }
}

/* ---------------------------------------------- bet panel (shared layout) */

.bet-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--bg-accent);
  border-radius: 10px;
  padding: 10px 12px;
}
.field > span {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-3);
}
.field input, .field select {
  font: inherit; font-size: 17px; font-weight: 750;
  color: var(--text); background: var(--card);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 9px 11px; width: 100%;
}
.field input[readonly] { color: var(--text-2); }
.field .suffix {
  position: absolute; right: 22px; bottom: 20px;
  font-style: normal; font-weight: 750; color: var(--text-3); font-size: 15px;
}
.btn-row { display: flex; gap: 8px; }
.btn-row .btn { flex: 1; }

/* iOS zooms on a fast second tap unless the element opts out. */
.btn-bet, .stepper, .mode-tabs button, .keno-cell,
.arcade-tabs button, .game-tile, .side-panel .btn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
/* Inputs under 16px trigger iOS focus-zoom; keep them at 16 on phones. */
@media (max-width: 900px) {
  .side-panel .field input,
  .side-panel .field select,
  .stage-fields .field input { font-size: 16px; }
}

.btn-bet {
  width: 100%;
  font: inherit;
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: 10px;
  padding: 15px;
  cursor: pointer;
  transition: filter 0.15s, transform 0.1s;
}
.btn-bet:hover:not(:disabled) { filter: brightness(1.08); }
.btn-bet:active:not(:disabled) { transform: translateY(1px); }
.btn-bet:disabled { opacity: 0.55; cursor: default; }

/* history chips above the multiplier */
.history.top { position: absolute; top: 16px; left: 0; right: 0;
  justify-content: center; margin: 0; padding: 0 16px; }

/* ---- keno layout: grid, paytable strip, hit row, result overlay ---- */
.keno-stage {
  display: block;          /* not a centering grid — the wrap must be width-bound */
  padding: 22px 16px;
}
.keno-wrap { position: relative; width: 100%; max-width: 660px; margin: 0 auto; }
/* Payouts live in their own recessed panel so the board reads as the board. */
.keno-paybox {
  margin-top: 16px;
  padding: 12px 12px 10px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.paybox-label {
  display: block;
  text-align: center;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
  margin-bottom: 8px;
}

.keno-pays {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;      /* centred under the board, not stretched */
  gap: 5px;
}
.keno-pays .kp {
  /* Cells grow to share the row evenly, so the strip fills the board width
     at any pick count: 1 pick = 2 fat cells, 10 picks = 11 slim ones. */
  flex: 1 1 0;
  min-width: 52px;
  max-width: 96px;
  text-align: center; font-size: 12px; font-weight: 750;
  background: var(--card-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 4px; color: var(--text-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.keno-pays .kp i { display: none; }
.keno-pays .kp.on {
  background: var(--win-soft); border-color: color-mix(in srgb, var(--win) 55%, transparent);
  color: var(--win-ink);
}
.keno-hits {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  margin-top: 5px;
}
.keno-hits .kh { flex: 1 1 0; min-width: 52px; max-width: 96px; }
.keno-hits .kh {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  font-size: 10.5px; font-weight: 700; color: var(--text-3);
  background: var(--bg-accent); border-radius: 6px; padding: 4px 2px;
}
.keno-hits .kh i {
  width: 7px; height: 7px; border-radius: 2px; background: var(--border-strong);
  display: inline-block; font-style: normal;
}
.keno-hits .kh.on { color: var(--text); background: var(--card-2); }
.keno-hits .kh.on i { background: var(--win); }

.keno-overlay {
  position: absolute; inset: 0; margin: auto;
  width: 240px; height: 150px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: var(--card);
  border: 3px solid var(--win);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgb(0 0 0 / 0.45);
  animation: pop 0.3s ease;
  z-index: 5;
}
.keno-overlay.miss { border-color: var(--border-strong); }
.ko-mult { font-size: 34px; font-weight: 900; letter-spacing: -0.03em; color: var(--win); }
.keno-overlay.miss .ko-mult { color: var(--text-2); }
.ko-rule { width: 54px; height: 2px; background: var(--border-strong); border-radius: 2px; }
.ko-sub { font-size: 14px; font-weight: 700; color: var(--text-2); }

@media (max-width: 620px) {
  .field-pair { grid-template-columns: 1fr; }
  .keno-overlay { width: 190px; height: 124px; }
  .ko-mult { font-size: 27px; }

  /* ---- Keno on a phone ---- */
  .keno-stage { padding: 12px 10px; min-height: 0; }
  .keno-grid { grid-template-columns: repeat(8, 1fr); gap: 5px; }
  .keno-cell { border-radius: 9px; font-size: 14px; }

  /* One scrollable strip instead of two crushed rows: each cell carries its
     own hit label, and the separate indicator row goes away. */
  .keno-hits {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    margin-top: 4px;
  }
  .keno-hits .kh {
    flex: 0 0 calc((100% - (var(--pt-cols, 6) - 1) * 4px) / var(--pt-cols, 6));
    min-width: 0;
    max-width: none;
    font-size: 9.5px;
    padding: 3px 2px;
  }
  .keno-pays .kp i { display: none; }   /* the row below labels them now */
  .keno-pays {
    display: flex !important;
    justify-content: center;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
    margin-top: 14px;
  }
  .keno-pays::-webkit-scrollbar { display: none; }
  .keno-pays .kp {
    flex: 0 0 auto;
    min-width: 68px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 7px 10px;
    font-size: 13px;
  }
  .keno-pays .kp i {
    display: block;
    font-style: normal;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-3);
  }
  .keno-pays .kp.on i { color: var(--win-ink); }
}

/* ------------------------------------------------- sidebar game layout */

.game-layout {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}
.side-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.side-panel .field { background: var(--bg-accent); }
.side-panel .btn-bet { margin-top: auto; }

.mode-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  background: var(--bg-accent);
  border-radius: 99px;
  padding: 3px;
}
.mode-tabs button {
  border: 0;
  background: none;
  border-radius: 99px;
  padding: 9px 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  color: var(--text-3);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.mode-tabs button.on { background: var(--card-2); color: var(--text); }

.field-row { display: flex; align-items: stretch; gap: 0; }
.field-row input { border-radius: 8px 0 0 8px; }
.field-row .unit {
  display: grid; place-items: center;
  padding: 0 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 0;
  border-radius: 0 8px 8px 0;
  font-weight: 750;
  color: var(--text-3);
}
.stepper {
  font: inherit;
  font-weight: 750;
  font-size: 13px;
  color: var(--text-2);
  background: var(--card-2);
  border: 1px solid var(--border);
  border-left: 0;
  padding: 0 13px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.stepper:last-of-type { border-radius: 0 8px 8px 0; }
.stepper:hover { background: var(--border); color: var(--text); }

.game-layout .game-stage { margin: 0; min-height: 420px; }
.plinko-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }

@media (max-width: 900px) {
  .game-layout { grid-template-columns: 1fr; }
  .side-panel { order: 2; }
  .game-layout .game-stage { order: 1; min-height: 0; }
  .side-panel .btn-bet { margin-top: 4px; }
}

/* --------------------------------------------- phones: game screen only */

@media (max-width: 900px) {
  /* Inside a game the title block is dead weight — the bar already names it. */
  #tab-games.in-game .arcade-head { display: none; }
  #tab-games.in-game .arcade-tabs { margin-bottom: 8px; }
  #tab-games.in-game .free-play-note { margin-bottom: 16px; }

  .game-layout { gap: 8px; }
  .game-layout .game-stage { padding: 12px 10px; min-height: 0; }

  /* Controls go two-up so every option and the Bet button share one screen
     with the board, instead of a tall stack that pushes Bet off the bottom. */
  .side-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    padding: 10px;
    padding-bottom: 8px;
  }
  .side-panel .mode-tabs,
  .side-panel .field.wide,
  .side-panel .btn-row,
  .side-panel .btn-bet { grid-column: 1 / -1; }   /* Bet was stuck in one cell */

  /* Action sits right under the tabs, not buried below every field. */
  .side-panel .mode-tabs { order: -2; }
  .side-panel .btn-bet { order: -1; margin-top: 0; }
  .side-panel .field { padding: 6px 9px; gap: 2px; }
  .side-panel .field > span { font-size: 9.5px; letter-spacing: 0.05em; }
  .side-panel .field input,
  .side-panel .field select { font-size: 14px; padding: 7px 9px; }
  .side-panel .btn-row .btn { padding: 8px; font-size: 12.5px; }
  .mode-tabs button { padding: 7px; font-size: 12px; }
  .stepper { padding: 0 11px; font-size: 12px; }

  /* Compact game chrome so the board starts higher up the page. */
  #tab-games.in-game .arcade-tabs { gap: 5px; margin-bottom: 6px; }
  #tab-games.in-game .arcade-tabs .btn { padding: 6px 11px; font-size: 12px; }
  #tab-games.in-game .now-playing { font-size: 15px; }



  /* Room to spare at the bottom, so let the board breathe. */
  .keno-grid { gap: 6px; }
  .keno-cell { font-size: 16px; border-radius: 10px; }
  .keno-paybox { margin-top: 12px; padding: 10px 10px 8px; }
  .keno-pays .kp {
    /* Fixed share of the row from --pt-cols, so wraps come out even. */
    flex: 0 0 calc((100% - (var(--pt-cols, 6) - 1) * 6px) / var(--pt-cols, 6));
    min-width: 0;
    max-width: none;
    padding: 7px 4px;
    font-size: 12px;
  }

  /* Sits in the panel, in normal flow — no floating overlay. */
  #tab-games.in-game .btn-bet { padding: 17px; font-size: 18px; }
}