/* Plinko — Sandbox prototype. Board, chip, bins. Rarity/prize colours are
   kept neutral gold/teal so the placeholder bins read at a glance. */
.plk-wrap { text-align: center; margin-top: 18px; max-width: 860px; margin-inline: auto; }
.plk-badge, .scr-badge {
  font-size: 11px; font-weight: 800; letter-spacing: .04em;
  color: #f0a832; border: 1px solid #f0a832; border-radius: 999px;
  padding: 2px 8px; vertical-align: middle;
}
.plk-balance { margin: 2px 0 12px; font-size: 15px; }
.plk-board {
  max-width: 520px; margin: 0 auto;
  background: #14161c; border: 2px solid #2c2f3a; border-radius: 14px;
  padding: 8px 8px; overflow: hidden;
}
/* The field holds the peg lattice + chip, all absolutely positioned in the
   same coordinate system (left % = board centre + offset in bin widths). */
.plk-field { position: relative; height: 254px; }
.plk-chip {
  display: none; position: absolute; width: 22px; height: 22px; z-index: 3;
  transform: translate(-50%, -50%);
  border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffe9a8, #d4a017);
  border: 2px solid #8a6508; box-shadow: 0 2px 6px rgba(0,0,0,.5);
}
.plk-peg {
  position: absolute; width: 7px; height: 7px; border-radius: 50%;
  background: #4b5163; transform: translate(-50%, -50%);
  transition: background .12s, box-shadow .12s;
}
.plk-peg-hit { background: #ffdf5d; box-shadow: 0 0 8px 2px rgba(255,223,93,.65); }
.plk-bins { display: flex; gap: 4px; margin-top: 4px; }
.plk-bin {
  flex: 1; min-width: 0; min-height: 64px; display: flex; align-items: center; justify-content: center;
  background: #1d2027; border: 1px solid #2c2f3a; border-radius: 8px;
  font-size: 9.5px; font-weight: 700; line-height: 1.3; padding: 4px 2px;
  text-align: center; overflow-wrap: break-word; hyphens: none;
}
.plk-bin-token { color: #c8ccd4; }
.plk-bin-pack { color: #7ee787; border-color: #2ea043; }
.plk-bin-edge { color: #ffdf5d; border-color: #d4a017; background: #2b2111; }
.plk-bin-hit { outline: 2px solid #ffdf5d; filter: brightness(1.5); }
.plk-controls { margin: 14px 0 10px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.plk-controls .btn { font-size: 15px; padding: 10px 18px; }
.plk-result { min-height: 40px; margin-bottom: 6px; }
.plk-win {
  display: inline-block; font-weight: 800; font-size: 16px;
  color: #ffdf5d; background: #2b2111; border: 2px solid #d4a017;
  border-radius: 12px; padding: 9px 16px;
}
.plk-stats { margin-bottom: 10px; }
.plk-tuning { text-align: left; max-width: 520px; margin: 0 auto; }
.plk-tuning summary { cursor: pointer; font-weight: 600; margin-bottom: 6px; }
.plk-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 6px 0; }
.plk-table td, .plk-table th { padding: 4px 6px; border-top: 1px solid #2c2f3a; text-align: left; }
.plk-sim { margin-top: 8px; }
@media (max-width: 480px) {
  /* The bins must stay in ONE row, each centred under its drop column —
     the chip dives into the bin it won, so the row can never wrap.
     Instead the board breaks out into the panel padding for extra width
     and the labels go small and tight (Franklin, 2026-10-14). */
  .plk-board { margin: 0 -12px; padding: 6px 4px; }
  .plk-bins { gap: 2px; }
  .plk-bin { font-size: 7.2px; line-height: 1.3; letter-spacing: -0.02em; padding: 4px 0; min-height: 72px; }
  .plk-chip { width: 18px; height: 18px; }
}
@media (max-width: 340px) {
  .plk-bin { font-size: 6.8px; }
}

/* Back to Arcade row (2026-10-14) */