* { margin: 0; padding: 0; box-sizing: border-box; }

/* The page is iframed into a content column, not given a browser window, so
   every dimension is bounded by the box we are handed: fill it exactly and let
   the board scale, rather than overflowing an 858x704 iframe and being clipped. */
html { height: 100%; }

body {
  background-color: #0a0c12;
  background-image: radial-gradient(760px 420px at 50% -12%, rgba(246, 188, 47, 0.09), transparent 60%);
  color: #e8eaf0;
  font-family: 'Oxanium', ui-sans-serif, system-ui, sans-serif;
  height: 100%;
  overflow-x: hidden;
}

#app {
  max-width: 1180px;
  height: 100%;
  margin: 0 auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

/* --- Header --- */
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid #23262f;
}

.brand { display: flex; align-items: center; gap: 12px; }

.brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: linear-gradient(160deg, #2c3040, #14161d);
  border: 1px solid #3a3f4d;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

header h1 {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 3.5px;
  color: #f4f0e6;
}

#balance-display {
  background: linear-gradient(180deg, #191c24, #101219);
  border: 1px solid #2d3140;
  border-top-color: #3d4252;
  border-radius: 10px;
  padding: 7px 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}

#balance {
  font-family: 'JetBrains Mono', monospace;
  font-size: 20px;
  font-weight: 800;
  color: #f6bc2f;
}

/* The free-drop counter sits beside the balance and looks like it: the same
   plate, a green figure, and nothing at all when there are none left. */
#free-rounds {
  background: linear-gradient(180deg, #191c24, #101219);
  border: 1px solid #2d5140;
  border-top-color: #3d7252;
  border-radius: 10px;
  padding: 7px 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}

#free-rounds[hidden] {
  display: none;
}

#free-rounds-left {
  font-family: 'JetBrains Mono', monospace;
  font-size: 20px;
  font-weight: 800;
  color: #4ade80;
}

/* --- Main Layout: controls LEFT, board CENTER, recent drops RIGHT --- */
main {
  display: flex;
  gap: 16px;
  align-items: stretch;
  flex: 1;
  min-height: 0;
}

/* --- Controls Panel (LEFT) --- */
#controls {
  width: 236px;
  flex-shrink: 0;
  /* Taller than a short iframe: scroll the panel instead of the page, so the
     board never loses height to it. */
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: linear-gradient(180deg, #171a22, #0f1118);
  border: 1px solid #2d3140;
  border-top-color: #3d4252;
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  padding: 16px;
}

.controls-spacer { flex: 1 1 auto; min-height: 0; }

.label {
  font-size: 9px;
  text-transform: uppercase;
  color: #6e7484;
  letter-spacing: 1.8px;
  margin-bottom: 7px;
  display: block;
  font-weight: 700;
}

/* Recessed inputs — the panel is raised, everything you type into is sunk. */
.bet-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #0a0c12;
  border: 1px solid #2d3140;
  border-radius: 8px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.6);
  height: 46px;
  padding: 0 12px;
}

.bet-input-row input {
  flex: 1;
  width: 0;
  background: none;
  border: none;
  color: #f4f0e6;
  font-family: 'JetBrains Mono', monospace;
  font-size: 20px;
  font-weight: 800;
  outline: none;
}

.bet-currency {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #6e7484;
}

.quick-row { display: flex; gap: 5px; margin-top: 6px; }

.quick-row button {
  flex: 1;
  height: 28px;
  border-radius: 6px;
  background: linear-gradient(180deg, #22262f, #171a22);
  border: 1px solid #32374a;
  color: #9aa1b3;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.15s;
}

.quick-row button:hover { filter: brightness(1.25); }

.toggle-group { display: flex; gap: 5px; }

.toggle-group.rows {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
}

.toggle {
  background: linear-gradient(180deg, #22262f, #171a22);
  border: 1px solid #32374a;
  border-radius: 7px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: #9aa1b3;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  padding: 10px 4px;
  cursor: pointer;
  transition: filter 0.15s;
  text-align: center;
}

.toggle-group.rows .toggle {
  font-family: 'JetBrains Mono', monospace;
  padding: 8px 2px;
}

.toggle-group:not(.rows) .toggle { flex: 1; }

.toggle:hover { filter: brightness(1.25); }

.toggle.active {
  background: linear-gradient(180deg, #ffd05c, #d69f18);
  border-color: #ffdf8a;
  color: #17130a;
  box-shadow: 0 0 18px rgba(246, 188, 47, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

#btn-bet {
  background: linear-gradient(180deg, #00c79e, #00785f);
  border: 1px solid #00d9ac;
  border-radius: 10px;
  color: #03201a;
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 3.5px;
  padding: 16px;
  cursor: pointer;
  transition: filter 0.15s, box-shadow 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 5px 0 #004d3d, 0 10px 26px rgba(0, 166, 133, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* Red while a run is going: the same button, but it now ends the run. */
#btn-bet.stopping {
  background: linear-gradient(180deg, #ef4a1e, #a52c0c);
  border-color: #ff6a3d;
  color: #2a0c04;
  box-shadow: 0 5px 0 #6b1c07, 0 10px 26px rgba(222, 74, 30, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

#btn-bet.stopping svg { display: none; }

#btn-bet:hover { filter: brightness(1.08); }

#btn-bet:active {
  transform: translateY(3px);
  box-shadow: 0 2px 0 #004d3d, 0 4px 14px rgba(0, 166, 133, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

#btn-bet:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  filter: none;
  box-shadow: 0 5px 0 #004d3d;
}

#autobet-panel {
  border-top: 1px solid #23262f;
  padding-top: 13px;
}

.autobet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 9px;
}

.autobet-head .label { margin-bottom: 0; }

/* The auto-bet control is a switch, not a verb — it reads as on/off at a
   glance, which is what an unattended run needs. */
#btn-autobet {
  width: 36px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #22262f, #14161d);
  border: 1px solid #32374a;
  padding: 0 2px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

#btn-autobet .knob {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #6e7484;
  transition: transform 0.15s, background 0.15s, box-shadow 0.15s;
}

#btn-autobet.running {
  background: linear-gradient(180deg, #1e3a34, #0e211d);
  border-color: #2d5a4f;
  justify-content: flex-end;
}

#btn-autobet.running .knob {
  background: #00c79e;
  box-shadow: 0 0 8px rgba(0, 199, 158, 0.7);
}

.autobet-row { margin-bottom: 6px; }

.autobet-row label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  color: #6e7484;
}

.autobet-row input {
  width: 76px;
  background: #0a0c12;
  border: 1px solid #2d3140;
  border-radius: 7px;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5);
  color: #f4f0e6;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  padding: 7px;
  text-align: center;
  outline: none;
}

#top-payout {
  border-top: 1px solid #23262f;
  padding-top: 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 10px;
  font-weight: 600;
  color: #6e7484;
}

#top-payout-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 800;
  color: #f6bc2f;
}

/* --- Game Area (CENTER) --- */
#game-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

/* Milled chassis around a sunken well: the board reads as a machine part
   rather than a rectangle drawn on the page. */
#board-well {
  flex: 1 1 auto;
  min-height: 0;
  border-radius: 14px;
  padding: 10px;
  background: linear-gradient(180deg, #2a2e3a, #12141b);
  border: 1px solid #3a3f4d;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
}

#board-well::before {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 10px;
  background: #070910;
  box-shadow: inset 0 6px 22px rgba(0, 0, 0, 0.85), inset 0 0 0 1px #191c25;
  pointer-events: none;
}

#board-well > * { position: relative; }

/* The bitmap is fixed-size (rows decide it), so the element is scaled to fit
   whichever axis runs out first — width in a narrow column, height in a short
   one. game.js keeps the multiplier row the same rendered width. */
#plinko-canvas {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
}

/* --- Multiplier Slots (below board) --- */
#multipliers {
  display: flex;
  gap: 3px;
  justify-content: center;
  flex-wrap: nowrap;
  max-width: 100%;
  align-items: flex-end;
  flex-shrink: 0;
}

.mult-slot {
  padding: 6px 1px 5px;
  border-radius: 5px;
  border-bottom: 5px solid #000;
  /* Font size is set on the row by game.js, measured off the real slot width —
     a viewport clamp clipped "2.36" to "2.3" at 17 slots. */
  overflow: hidden;
  font-weight: 800;
  font-style: italic;
  font-family: 'JetBrains Mono', monospace;
  color: #0d0a04;
  text-align: center;
  /* Was min-width: 38px — 17 slots then measured ~930px and pushed the page
     past the iframe, where overflow-x: hidden clipped the right-hand ones.
     Shrinking with the board keeps every slot on screen. */
  flex: 1 1 0;
  min-width: 0;
  transition: transform 0.15s, margin-bottom 0.15s, box-shadow 0.15s;
  position: relative;
  line-height: 1;
}

.mult-value { display: block; }

.mult-times {
  display: block;
  font-size: 0.72em;
  opacity: 0.75;
  font-style: normal;
}

/* Heat by DISTANCE FROM CENTRE, not by payout size: the two edges of a plinko
   board are always the extremes, so the ramp draws the shape of the table and
   stays readable at every row count. game.js buckets the distance. */
.mult-slot.heat-0 { background: #00a685; border-bottom-color: #00543f; }
.mult-slot.heat-1 { background: #63c47e; border-bottom-color: #2f6b41; }
.mult-slot.heat-2 { background: #c9c43a; border-bottom-color: #6f6b18; }
.mult-slot.heat-3 { background: #f6bc2f; border-bottom-color: #8c6a10; }
.mult-slot.heat-4 { background: #f6821f; border-bottom-color: #8c4708; }
.mult-slot.heat-5 { background: #ef4a1e; border-bottom-color: #8a2810; }
.mult-slot.heat-6 {
  background: #de1135;
  border-bottom-color: #7d0a1c;
  box-shadow: 0 0 20px rgba(222, 17, 53, 0.35);
}

/* Gold means "this is the one that just paid" — never a payout tier, or the
   win stops being legible against the table. */
.mult-slot.won {
  background: #ffd75c;
  border-bottom-color: #a97c0d;
  /* Lifted with a transform, never with margin or padding: growing the slot
     grew the row, which shrank the canvas above it, and the whole board
     visibly jumped inward the moment the ball landed. */
  transform: translateY(-10px) scale(1.06);
  box-shadow: 0 0 46px rgba(246, 188, 47, 0.95), 0 0 0 2px rgba(255, 255, 255, 0.55);
}

/* --- Recent drops (RIGHT) --- */
#side-rail {
  width: 118px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#recent-drops {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  overflow: hidden;
}

.recent-chip {
  height: 34px;
  flex-shrink: 0;
  border-radius: 7px;
  background: linear-gradient(180deg, #1a1d26, #0f1118);
  border: 1px solid #23262f;
  border-left: 3px solid #3a3f4d;
  display: flex;
  align-items: center;
  padding: 0 11px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 800;
  color: #9aa1b3;
}

.recent-chip.big {
  border-color: #4a3c14;
  border-left-color: #f6bc2f;
  color: #f6bc2f;
}

#session-card {
  border-radius: 9px;
  background: linear-gradient(180deg, #1a1d26, #0f1118);
  border: 1px solid #2d3140;
  border-top-color: #3d4252;
  padding: 11px;
  flex-shrink: 0;
}

#session-card .label { margin-bottom: 2px; font-size: 8px; }

#session-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 16px;
  font-weight: 800;
  color: #00c79e;
}

#session-value.down { color: #de1135; }

/* --- Utilities --- */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; }
input[type=number] { -moz-appearance: textfield; }

/* A short box — the site iframes this into a content column, not a window —
   buys height back from padding and type instead of hiding a control. */
@media (max-height: 760px) {
  header { padding-bottom: 8px; margin-bottom: 10px; }
  header h1 { font-size: 17px; letter-spacing: 3px; }
  .brand-mark { width: 28px; height: 28px; }
  #balance { font-size: 17px; }
  #balance-display { padding: 5px 12px; }
  #free-rounds { padding: 5px 12px; }
  #controls { gap: 9px; padding: 13px; }
  .label { margin-bottom: 4px; }
  .bet-input-row { height: 40px; }
  .bet-input-row input { font-size: 17px; }
  .quick-row button { height: 24px; }
  .toggle { padding: 7px 4px; }
  #btn-bet { padding: 12px; }
  .autobet-row input { padding: 5px; }
  .recent-chip { height: 28px; }
  #recent-drops { gap: 6px; }
}

/* Shorter still — a 16:9 box on a 1440px laptop is only ~480px tall. The site
   already shows the game name and the balance in its own header, so that is
   the row that goes; every control stays. */
@media (max-height: 560px) {
  header { display: none; }
  #controls { gap: 6px; padding: 11px; }
  .label { font-size: 8px; margin-bottom: 3px; }
  .bet-input-row { height: 34px; }
  .bet-input-row input { font-size: 15px; }
  .quick-row { margin-top: 4px; }
  .toggle { padding: 5px 3px; }
  #btn-bet { padding: 9px; font-size: 14px; }
  .autobet-row input { padding: 4px; }
  #board-well { padding: 7px; }
  #board-well::before { inset: 7px; }
}

/* Stacked only when side-by-side genuinely stops working: the content column
   of a 1280px laptop hands us ~700px, and stacking there wasted the whole
   width on a squashed board. */
@media (max-width: 640px) {
  main { flex-direction: column; }
  #controls { width: 100%; order: 2; overflow-y: visible; }
  #game-area { order: 1; }
  #side-rail { display: none; }
  /* Stacked, the page is taller than the box by design — scroll it, and stop
     capping the board at a height that is now a fraction of the column. */
  html, body, #app { height: auto; }
  body { min-height: 100%; }
  #plinko-canvas { max-height: none; }
  #board-well { flex: 0 0 auto; }
}

/* Provable fairness: the published server-seed hash for the active pair.
   Lives in the control panel, not the header — the header is hidden at the
   height the site's iframe gives us, and an invisible proof is no proof. */
.fairness {
  display: flex;
  gap: 6px;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font: 500 10px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #6b748d;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.fairness a {
  color: #4ade80;
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}
.fairness a:hover { filter: brightness(1.15); }

/* Play money. Same pill in every game; the launch URL decides it. */
.demo-badge {
  display: inline-block; margin-left: 6px; padding: 2px 6px; border-radius: 999px;
  background: #ffcc33; color: #1a1200; font: 800 9px/1.2 inherit; font-style: normal;
  letter-spacing: 0.12em; vertical-align: 1px;
}