/* KENO DUO - LIQD-style layout: dark control rail on the left, glowing
   40-tile stage on the right, status pill under the board. The shell keeps
   its own panel (stake, PLAY, Auto) beside/under the zone. */
body { margin: 0; background: #05070c; }
.keno { display: flex; flex-direction: row; align-items: flex-start; gap: 22px; width: 100%; padding: 18px; box-sizing: border-box; font-family: 'Figtree', system-ui, sans-serif; color: #e8ecf4; background: radial-gradient(120% 90% at 70% 110%, rgba(37, 99, 235, .14), transparent 60%), #05070c; }

/* ---- left rail ---- */
.rail { width: 292px; flex: none; display: flex; flex-direction: column; gap: 14px; background: #0d1119; border: 1px solid #1a2130; border-radius: 16px; padding: 16px 14px; box-sizing: border-box; }
.cards { display: flex; flex-direction: column; gap: 8px; }
.setbtn { display: flex; align-items: center; gap: 9px; width: 100%; height: 46px; padding: 0 14px; border: 2px solid #232b3d; border-radius: 12px; background: #121725; color: #e8ecf4; font: 700 15px/1 'Figtree', system-ui, sans-serif; cursor: pointer; box-sizing: border-box; }
.setbtn .dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.setbtn .setcount { margin-left: auto; color: #8f96a8; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.setbtn .chev { color: #5b6480; font-size: 15px; }
.addbtn { width: 100%; height: 46px; border: 2px dashed rgba(143, 150, 168, .5); border-radius: 12px; background: transparent; color: #8f96a8; font: 700 14px/1 'Figtree', system-ui, sans-serif; cursor: pointer; box-sizing: border-box; }
.addbtn:hover, .setbtn:hover { color: #fff; }
.picker { display: flex; flex-direction: column; gap: 9px; }
.pickerhead { display: flex; justify-content: space-between; align-items: baseline; color: #8f96a8; font: 600 13px/1 'Figtree', system-ui, sans-serif; }
.plinks { display: flex; gap: 12px; }
.plinks button { border: 0; background: none; padding: 0; color: #8f96a8; font: 600 12px/1 'Figtree', system-ui, sans-serif; cursor: pointer; }
.plinks button:hover { color: #fff; }
.pickerrow { display: flex; align-items: center; gap: 12px; }
#pickCount { font: 800 17px/1 'Red Hat Display', system-ui, sans-serif; min-width: 18px; text-align: center; font-variant-numeric: tabular-nums; }
#pickRange { flex: 1; height: 6px; cursor: pointer; }
#pickApply { height: 34px; padding: 0 16px; border: 0; border-radius: 9px; background: #1c2436; color: #c7cede; font: 700 13px/1 'Figtree', system-ui, sans-serif; cursor: pointer; }
#pickApply:hover { color: #fff; background: #26314a; }
.riskrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.risklabel { color: #8f96a8; font: 600 13px/1 'Figtree', system-ui, sans-serif; }
.riskseg { display: flex; gap: 2px; background: #0a0e16; border: 1px solid #1a2130; border-radius: 999px; padding: 3px; }
.riskseg button { border: 0; background: transparent; color: #8f96a8; padding: 7px 12px; border-radius: 999px; font: 700 13px/1 'Figtree', system-ui, sans-serif; cursor: pointer; }
.riskseg button:hover { color: #fff; }
.riskseg button.on { background: #2f7bff; color: #fff; }
.riskseg.off { opacity: .4; }
.riskseg.off button { cursor: default; }
.swrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.swlabel { color: #8f96a8; font: 600 13px/1 'Figtree', system-ui, sans-serif; }
.swatches { display: flex; gap: 6px; align-items: center; }
.swatches .sw { width: 19px; height: 19px; padding: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .22); cursor: pointer; }
.swatches .sw.on { border-color: #f9f9fb; transform: scale(1.15); }
.linkbtn { align-self: flex-start; border: 0; background: none; padding: 0; color: #8f96a8; font: 600 12px/1 'Figtree', system-ui, sans-serif; text-decoration: underline; cursor: pointer; }

/* ---- stage ---- */
.stage { flex: 1; min-width: 0; container-type: inline-size; display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: 4px; }
.board { --g: clamp(6px, 1.1cqi, 12px); --c: min(104px, (100cqi - 7 * var(--g)) / 8, 13vh); display: grid; grid-template-columns: repeat(8, var(--c)); gap: var(--g); }
.board button { height: var(--c); border: 1px solid #1d2742; border-radius: calc(var(--c) * .2); background: linear-gradient(180deg, #141d36, #0c1425); box-shadow: inset 0 1px 0 rgba(148, 178, 255, .14), inset 0 -8px 14px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .4); color: #f2f5fb; font: 800 calc(var(--c) * .34)/1 'Red Hat Display', system-ui, sans-serif; cursor: pointer; transition: background 120ms, box-shadow 120ms, transform 80ms; }
.board button:hover { border-color: #2c3a5f; }
.board button:active { transform: scale(.96); }
.board button.drawn { background: linear-gradient(180deg, #2a3446, #1b2334); color: #f9f9fb; }
.board button.hit { box-shadow: inset 0 0 0 3px #fddc73, 0 0 14px rgba(253, 220, 115, .8); color: #08141a; }
.board button:disabled { cursor: default; }
.status { padding: 11px 24px; border-radius: 999px; background: #12161f; border: 1px solid #232a38; color: #e8ecf4; font: 600 15px/1 'Figtree', system-ui, sans-serif; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.pays { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; max-width: 100%; }
.payrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 100%; }
.pays span { padding: 5px 9px; border-radius: 6px; background: #0d1420; color: #c7cede; font: 600 13px/16px 'Red Hat Display', system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.pays span.zero { opacity: .38; }
.pays span.on { background: #7d5410; color: #fddc73; }
.pays span.tag { color: #08141a; font-weight: 800; }

/* Shell panel tinted to match (stake + PLAY live there). */
hb-game::part(panel) { background: #0d1119; }

/* Desktop: fill the stage the shell hands us - the zone stretches to the
   full frame height, the rail runs the full height with it, and the
   board block centres in what is left, so there are no dead bands of
   empty stage above and below the game. */
@media (min-width: 700px) {
  .keno { min-height: 100%; align-items: stretch; }
  .stage { justify-content: center; }
}

/* Phone (the shell stacks the panel under the zone below 700px): compact
   everything so the zone fits the short frame. */
@media (max-width: 699px) {
  hb-game::part(zone) { min-height: 0; }
  hb-game::part(panel) { gap: 6px; padding: 8px 10px; }
  .keno { flex-direction: column; gap: 6px; padding: 6px 10px; }
  .rail { width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 8px; border-radius: 12px; }
  .cards { flex-direction: row; gap: 6px; flex: 1; }
  .setbtn { width: auto; flex: 1; height: 30px; padding: 0 8px; font-size: 12px; gap: 5px; border-radius: 9px; }
  .setbtn .dot { width: 9px; height: 9px; }
  .setbtn .setcount { font-size: 11px; }
  .setbtn .chev { display: none; }
  .addbtn { width: auto; flex: 1; height: 30px; font-size: 11px; white-space: nowrap; border-radius: 9px; }
  .picker { flex: 1 1 150px; gap: 4px; }
  .pickerhead { font-size: 11px; }
  .plinks button { font-size: 11px; }
  .pickerrow { gap: 7px; }
  #pickCount { font-size: 14px; min-width: 14px; }
  #pickApply { height: 24px; padding: 0 9px; font-size: 12px; }
  .riskrow { gap: 5px; }
  .risklabel { font-size: 11px; }
  .riskseg { padding: 2px; }
  .riskseg button { padding: 5px 8px; font-size: 11px; }
  .swrow { gap: 5px; }
  .swlabel { display: none; }
  .swatches { gap: 3px; }
  .swatches .sw { width: 13px; height: 13px; }
  .linkbtn { font-size: 11px; }
  .stage { gap: 6px; padding-top: 0; width: 100%; }
  .board { --c: min(17px, (100cqi - 20px - 7 * 5px) / 8); gap: 5px; }
  .board button { border-radius: 6px; }
  .status { padding: 6px 14px; font-size: 12px; }
  .pays { display: none; }
  /* The shell panel grows a bet picker once a mode has several bets - on
     phones it covers Risk itself, so the zone's Risk row stands down. */
  .riskrow { display: none; }
}

/* Short frame (364x440): squeeze the zone to the essentials - bet cards
   and board only - so zone + the shell's taller panel (it grows a mode
   picker and a bet picker) fit together. The status pill stands down
   here; the panel reports the round. */
@media (max-width: 699px) and (max-height: 500px) {
  hb-game::part(panel) { gap: 2px; padding: 4px 8px; font-size: 12px; }
  .keno { gap: 2px; padding: 2px 6px; }
  .rail { gap: 2px; padding: 2px 6px; }
  .setbtn, .addbtn { height: 22px; }
  .picker, .swrow, .linkbtn, .status { display: none; }
  .stage { gap: 2px; }
  .board { --c: min(9px, (100cqi - 12px - 7 * 2px) / 8); gap: 2px; }
}
[hidden] { display: none !important; }