/*
 * Spike's own surfaces: the plot with its tap columns, the zone chips, the
 * error line, the first-run art and the provably-fair panel. The page
 * layout is /core/layout.css; the shared pieces are /core/kit.css.
 */

/* Spike's silver: the brand word and the menu */
:root {
  --accent-color: var(--muted-foreground);
}

/* ---- the plot ---- */
.plot {
  margin-bottom: 14px;
  border-radius: 16px;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.06));
}
.plot.is-betting {
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.3);
}
.plot__canvas {
  pointer-events: none;
  position: absolute;
  inset: 0;
}
.plot__hits {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.zone-hit {
  cursor: default;
  touch-action: manipulation;
}
.zone-hit.is-held {
  visibility: hidden;
}
.zone-hit.is-live {
  cursor: pointer;
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.zone-hit.is-live:hover {
  background: rgb(255 255 255 / 0.06);
}
.zone-hit.is-live:active {
  background: rgb(255 255 255 / 0.1);
}

/* ---- the zone chips ---- */
.zone-chips {
  margin-bottom: 14px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}
.zone-chip-slot {
  position: relative;
}
.zone-chip {
  position: relative;
  display: flex;
  height: 58px;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 1px solid transparent;
  border-radius: var(--radius-xl);
  padding: 0 6px;
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: var(--secondary);
  color: #fff;
  cursor: default;
  touch-action: manipulation;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.zone-chip.is-live {
  cursor: pointer;
}
.zone-chip.is-live:enabled:hover {
  filter: brightness(1.15);
}
.zone-chip.is-live:enabled:active {
  scale: 0.95;
}
.zone-chip.is-plain:enabled:hover {
  background: rgb(255 255 255 / 0.08);
}
.zone-chip.is-held {
  pointer-events: none;
}
.zone-chip.o-50 {
  opacity: 0.5;
}
.zone-chip.o-70 {
  opacity: 0.7;
}
.zone-chip.o-100 {
  opacity: 1;
}
.zone-chip:disabled {
  opacity: 0.7;
}
/* money on the table: stroke only, the idle chips already share the fill */
.zone-chip.is-on {
  border: 2px solid rgb(255 255 255 / 0.8);
  background: transparent;
  opacity: 1;
}
.zone-chip.is-on.is-live:enabled:hover {
  background: rgb(255 255 255 / 0.08);
}
/* your winning stake: success lime, dark type */
.zone-chip.is-win {
  background: var(--success);
  color: var(--success-foreground);
  opacity: 1;
  box-shadow: 0 0 16px -2px rgb(214 255 77 / 0.55);
}
.zone-chip.is-lost {
  background: color-mix(in oklab, var(--destructive) 12%, transparent);
  color: #f59be4;
  opacity: 1;
}
.zone-chip__cue {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  opacity: 0.6;
}
.zone-chip__remove {
  position: absolute;
  top: -6px;
  right: -6px;
  z-index: 1;
  display: flex;
  width: 20px;
  height: 20px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: #2c3038;
  font-size: 10px;
  color: #b1b5c3;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.2);
}
.zone-chip__remove:hover {
  background: #4a5160;
  color: #fff;
}

.error-line {
  margin-top: 14px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 16px;
  color: var(--icon);
}

@media (max-width: 639.98px) {
  .plot {
    margin-bottom: 10px;
  }
  .error-line {
    margin-top: 10px;
    font-size: 11px;
  }
}

/* a phone on its side: five chips share a third of the width, so they give
   their padding to the amount and the odds step down to fit */
@media (orientation: landscape) and (max-height: 500px) {
  .zone-chip {
    padding: 0 2px;
  }
  .zone-chip .bet-x {
    font-size: 13px;
  }
}

/* ---- the first-run art: miniatures of the board ---- */
.art {
  margin-bottom: 10px;
  display: flex;
  height: 96px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: #141416;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08);
}
.art__columns {
  display: flex;
  height: 78%;
  width: 88%;
  align-items: stretch;
  gap: 1px;
}
.art__columns.is-bars {
  align-items: flex-end;
}
.art__col,
.art__bar {
  position: relative;
  flex: 1 1 0%;
  border-radius: var(--radius-sm);
  background: rgb(255 255 255 / 0.06);
}
.art__bar {
  overflow: hidden;
}
.art__col.is-picked {
  background: #3d424e;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.25);
}
.art__plus {
  position: absolute;
  top: -4px;
  right: -4px;
  display: flex;
  width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: var(--attention);
  font-size: 8px;
  font-weight: 800;
  color: var(--attention-foreground);
}
.art__lead {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to top, rgb(255 255 255 / 0.25), rgb(255 255 255 / 0.8), #fff);
}
.art__chips {
  display: flex;
  width: 90%;
  align-items: center;
  gap: 6px;
}
.art__chip {
  display: flex;
  height: 44px;
  flex: 1 1 0%;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-xl);
  background: var(--secondary);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  color: rgb(255 255 255 / 0.5);
}
.art__chip.is-won {
  flex-direction: column;
  line-height: 1.25;
  background: #fff;
  color: #000;
}
.art__chip.is-won > span {
  font-size: 8px;
  font-weight: 700;
  opacity: 0.6;
}

/* ---- the provably-fair panel ---- */
.fair {
  padding-bottom: 4px;
}
.fair__how {
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.625;
  color: #d7dae3;
}
.fair__scope {
  margin-bottom: 12px;
  font-size: 13px;
  line-height: 1.625;
  color: var(--icon);
}
.fair__wait {
  border-radius: var(--radius-xl);
  background: rgb(255 255 255 / 0.05);
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.625;
  color: var(--icon);
}
.fair-row {
  margin-bottom: 10px;
}
.fair-row__label {
  margin-bottom: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--icon);
}
.fair-row__value {
  user-select: all;
  -webkit-user-select: all;
  word-break: break-all;
  border: 1px solid color-mix(in oklab, var(--primary) 30%, transparent);
  border-radius: 10px;
  background: rgb(255 255 255 / 0.05);
  padding: 8px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--heading);
}
.fair__btn {
  margin-top: 4px;
  width: 100%;
  cursor: pointer;
  border-radius: var(--radius-xl);
  background: var(--primary);
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 700;
  color: var(--primary-foreground);
}
.fair__btn:disabled {
  opacity: 0.6;
}
.fair__verdict {
  margin-top: 12px;
  border: 1px solid;
  border-radius: var(--radius-xl);
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 13px;
}
.fair__verdict.is-big {
  text-align: center;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.6px;
}
.fair__verdict.is-ok {
  border-color: color-mix(in oklab, var(--success) 35%, transparent);
  background: color-mix(in oklab, var(--success) 12%, transparent);
  color: var(--success);
}
.fair__verdict.is-bad {
  border-color: color-mix(in oklab, var(--destructive) 35%, transparent);
  background: color-mix(in oklab, var(--destructive) 12%, transparent);
  color: var(--destructive);
}
.fair__note {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.625;
  color: var(--icon);
}

/* The stake on a chip is sized inline from app.js; its line box has to fit
   the chip whatever that size is, or the figure is cut across the middle. */
.bet-stake {
  display: block;
  /* Digits need more than their own point size, and the sizes here are
     fractional, so a box that only just fits rounds to one pixel short.
     1.35 clears the glyph and its rounding both. */
  line-height: 1.35;
}

/* ---- short frames: the zone chips are Spike's extra row ----
 *
 * Spike's controls are 166px against 88–94 for the other games, because the
 * zone chips take a row of their own (58px plus 14px under it) above the stake
 * rack. That extra row is why Spike was the worst game in every short frame
 * measured on 2026-10-10 -- 216px of scrolling at 320×402, where Bubbles had
 * 100 and Zones 134. The chips stay five across and keep their numbers;
 * they just stop spending a full-height row on them.
 */
@media (max-height: 760px) {
  .zone-chips {
    margin-bottom: 8px;
    gap: 4px;
  }
  .zone-chip {
    height: 46px;
    font-size: 15px;
  }
}
/* The chip carries the player's stake once it is placed ("1.00"), and the
   type has to come down with the chip or the figure is cut -- at 38px the
   17px default left "1.00" showing as "1" (46 findings in the verification
   run). It is money on screen, so it is the one thing here that may not be
   abbreviated. */
@media (max-height: 460px) {
  .zone-chips {
    margin-bottom: 4px;
  }
  .zone-chip {
    height: 38px;
    font-size: 13px;
  }
}

/* The letterbox band: Spike has two control rows where the others have one
   (zone chips above the stake rack), and a 176px band has room for one. The
   chips keep their row but shrink to a strip, and the stake rack beside them
   gives up its own chips row -- measured at 750×176, that is what brings the
   last 28px inside the frame. */
@media (orientation: landscape) and (max-height: 320px) {
  .zone-chips {
    margin-bottom: 2px;
    gap: 3px;
  }
  .zone-chip {
    height: 26px;
    font-size: 10px;
  }
  /* the stake's own quick-pick chips are the row that no longer fits: the
     stepper still sets any amount, so nothing becomes unreachable */
  .shell-controls .stake-chips {
    display: none;
  }
  /* a 26px chip holds one line: with a bet on it that line is the stake,
     which is the player's money and the thing they need to read */
  .zone-chip.has-stake .bet-x {
    display: none;
  }
}