/* Emoji Plinko — ball picker, board, live curve, desktop panel, and stats
   extras. Shared page, button, and stats styles live in /assets/site.css. The
   pink stays pink in dark mode. White on this pink is only readable large or
   bold, so small text sits on the board or on white cards, or uses dark ink. */

body.game-plinko {
  --game-bg: #EC4F8F;
  --game-deep: #A8285F;
  --game-accent: #A61E5A;          /* big numbers and links on white cards */
  --game-ink: #FFFFFF;
  --game-ink-rgb: 255, 255, 255;
  --game-on-white: #7A1F4B;
  --game-focus: #4A0A26;
  --card-text: #3D0A22;
  --card-muted: #7B5566;
  --card-line: #F9E1EC;
  --berry: #7A1F4B;
  --berry-deep: #5C1236;
  --bar: #FFB3D1;
  --gold: #FFD23F;
  --ink-dark: #4A0A26;             /* small text straight on the pink */
  /* Board width: fits the screen width and, with the picker and buttons,
     the screen height. */
  --pk-w: clamp(260px, min(calc(100vw - 32px), 440px, calc((100dvh - 300px) / 1.14)), 440px);
}

@media (min-width: 900px) {
  body.game-plinko { --pk-w: clamp(380px, calc((100dvh - 290px) / 1.14), 640px); }
}

body.game-plinko .site-footer { color: var(--ink-dark); }

/* ── Layout ────────────────────────────────────────────── */

.pk-layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.pk-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 4px 16px 0;
}

/* Phones and tablets: no side panel (the live curve is in the slots). */
.pk-side { display: none; }

@media (min-width: 900px) {
  .pk-layout {
    display: grid;
    grid-template-columns: minmax(0, 640px) 340px;
    justify-content: center;
    align-items: start;
    column-gap: 40px;
    max-width: calc(var(--ws-container) + 2 * var(--ws-gutter));
    margin: 0 auto;
    padding: 0 var(--ws-gutter);
  }
  .pk-main { padding: 4px 0 0; }
  .pk-side { display: flex; flex-direction: column; gap: 16px; padding-top: 8px; }
  .pk-stats-link { display: none; }
  .pk-side-link { font-weight: 700; font-size: 16px; }
}

/* ── Ball picker ───────────────────────────────────────── */

.pk-picker {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 0 0 10px;
  padding: 0;
  border: 0;
}

.pk-pick {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 120ms ease, transform 120ms ease;
}

.pk-pick input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.pk-pick .emoji { font-size: 28px; line-height: 1; pointer-events: none; }
.pk-pick:has(input:checked) { background: rgba(255, 255, 255, 0.34); box-shadow: 0 0 0 3px #FFFFFF; }
.pk-pick:has(input:focus-visible) { outline: 3px solid var(--game-focus); outline-offset: 3px; }

@media (min-width: 900px) {
  .pk-pick { width: 52px; height: 52px; }
  .pk-pick .emoji { font-size: 32px; }
}

/* ── Board ─────────────────────────────────────────────── */

.pk-board {
  width: min(var(--pk-w), 100%);
  padding: 2.5% 2.5% 2%;
  border-radius: 22px;
  background: radial-gradient(120% 80% at 50% 0%, #93305F 0%, var(--berry) 55%, var(--berry-deep) 100%);
  box-shadow: inset 0 0 28px rgba(255, 179, 209, 0.22), inset 0 0 0 2px rgba(255, 255, 255, 0.08), 0 12px 30px rgba(92, 18, 54, 0.35);
}

.pk-stage { position: relative; }
.pk-svg { display: block; width: 100%; height: auto; overflow: visible; }

.pk-balls {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  border-radius: 12px;
}

.pk-peg { transition: filter 250ms ease; }
.pk-peg.is-hit { filter: drop-shadow(0 0 1.2px #FFFFFF) drop-shadow(0 0 2.2px #FFB3D1); transition: none; }

.pk-divider { stroke: rgba(255, 255, 255, 0.75); stroke-width: 0.45; stroke-linecap: round; }
.pk-divider.is-wall { stroke: rgba(255, 255, 255, 0.35); }
.pk-floor { stroke: rgba(255, 255, 255, 0.55); stroke-width: 0.6; stroke-linecap: round; }

.pk-bar {
  fill: var(--bar);
  opacity: 0.88;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scaleY(0);
  transition: transform 420ms cubic-bezier(0.2, 0.8, 0.3, 1);
}

.pk-expected { fill: none; stroke: rgba(255, 255, 255, 0.5); stroke-width: 0.5; stroke-dasharray: 1.4 1; }

.pk-slot-glow { fill: #FFFFFF; opacity: 0; transition: opacity 500ms ease; }
.pk-slot-glow.is-lit { opacity: 0.28; transition: none; }
.pk-slot-glow.is-gold { fill: var(--gold); animation: pk-gold 1.5s ease both; }

@keyframes pk-gold {
  0%, 20%, 40% { opacity: 0.85; }
  10%, 30%     { opacity: 0.35; }
  100%         { opacity: 0; }
}

.pk-label {
  fill: #FFFFFF;
  font: 700 3.1px var(--ws-font);
  text-anchor: middle;
  dominant-baseline: middle;
  font-variant-numeric: tabular-nums;
}

.pk-caption {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

/* Balls: placed by transform from the stage's top-left corner. --u is one
   board unit in pixels (set by plinko.js); a ball is 7 units across. */
.pk-ball-wrap { position: absolute; left: 0; top: 0; }

.pk-ball {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--ws-emoji-font);
  font-size: calc(var(--u, 4px) * 6.6);
  line-height: 1;
  will-change: transform;
}

.pk-ghost { filter: blur(0.5px); }

.pk-ball-wrap.is-waiting .pk-ball:not(.pk-ghost) { animation: pk-wobble 420ms ease-in-out infinite alternate; }

@keyframes pk-wobble {
  from { rotate: -14deg; }
  to   { rotate: 14deg; }
}

.pk-burst {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--ws-emoji-font);
  font-size: calc(var(--u, 4px) * 5);
  line-height: 1;
}

.pk-spark {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--u, 4px) * 1.4);
  height: calc(var(--u, 4px) * 1.4);
  margin: calc(var(--u, 4px) * -0.7) 0 0 calc(var(--u, 4px) * -0.7);
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 0 6px var(--gold);
}

/* ── Buttons and result ────────────────────────────────── */

.pk-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 16px;
}

.pk-drop { min-width: 170px; padding: 16px 36px; }

.pk-drop10 {
  padding: 13px 20px;
  border: 3px solid #FFFFFF;
  border-radius: 999px;
  background: transparent;
  color: #FFFFFF;
  font: 800 19px/1 var(--ws-font);
  cursor: pointer;
  transition: opacity 150ms ease, background 120ms ease;
  -webkit-tap-highlight-color: transparent;
}

.pk-drop10:active:not(:disabled) { background: rgba(255, 255, 255, 0.18); }
.pk-drop10:disabled { opacity: 0.6; cursor: default; }
.pk-drop .kbd { border-color: var(--berry); }

@media (min-width: 900px) {
  .pk-drop { min-width: 210px; padding: 18px 44px; font-size: 28px; }
  .pk-drop10 { padding: 15px 24px; font-size: 21px; }
}

.pk-result {
  min-height: 1.3em;
  margin: 12px 16px 0;
  font-size: clamp(22px, 6vw, 28px);
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
}

.pk-result.is-edge { font-weight: 900; text-shadow: 0 0 10px rgba(255, 210, 63, 0.95), 0 2px 0 var(--berry); }
.pk-result.is-nice { text-shadow: 0 1px 0 var(--berry); }
.pk-message { margin-top: 8px; font-weight: 700; }
body.game-plinko .play-link { font-weight: 700; }

/* ── Desktop panel ─────────────────────────────────────── */

.pk-side .card h2 { margin-bottom: 8px; }
.pk-totals .big-number { font-size: 52px; }

.pk-recent {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pk-recent li {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 5px 0 4px;
  border-radius: 10px;
  background: #FDF1F6;
}

.pk-recent .emoji { font-size: 24px; line-height: 1.1; }
.pk-recent b { font-size: 14px; font-variant-numeric: tabular-nums; }
.pk-recent li.is-edge { background: #FFF3C4; box-shadow: inset 0 0 0 2px var(--gold); }
.pk-recent .pk-none { grid-column: 1 / -1; background: none; color: var(--card-muted); align-items: flex-start; }

/* ── Stats page extras ─────────────────────────────────── */

.pk-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 900px) { .pk-split { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: center; } }

.pk-strip { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }

.pk-strip li {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 9px 4px 6px;
  border-radius: 999px;
  background: #FDF1F6;
  font-variant-numeric: tabular-nums;
}

.pk-strip .emoji { font-size: 22px; line-height: 1; }
.pk-strip b { font-size: 15px; }
.pk-strip li.is-edge { background: #FFF3C4; box-shadow: inset 0 0 0 2px var(--gold); }

.pk-lr { display: flex; height: 18px; margin: 12px 0 8px; overflow: hidden; border-radius: 999px; background: #F3E4EB; }
.pk-lr span { display: block; height: 100%; }
.pk-lr .pk-lr-left { background: var(--berry); }
.pk-lr .pk-lr-right { background: var(--game-bg); }
.pk-lr-legend { display: flex; justify-content: space-between; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pk-lr-legend small { display: block; color: var(--card-muted); font-size: 12px; font-weight: 600; }
.pk-lr-legend > :last-child { text-align: right; }

.pk-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pk-modes div { padding: 10px 12px; border-radius: 12px; background: #FDF1F6; }
.pk-modes b { display: block; color: var(--game-accent); font-size: 30px; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pk-modes span { color: var(--card-muted); font-size: 13px; font-weight: 600; }

@media (hover: hover) and (pointer: fine) {
  .pk-pick:hover { background: rgba(255, 255, 255, 0.3); transform: translateY(-2px); }
  .pk-drop10:hover:not(:disabled) { background: rgba(255, 255, 255, 0.14); }
  .pk-side-link:hover { color: var(--game-ink); }
}

@media (prefers-reduced-motion: reduce) {
  .pk-bar, .pk-slot-glow, .pk-pick { transition: none; }
  .pk-slot-glow.is-gold { animation: none; opacity: 0.8; }
  .pk-ball-wrap.is-waiting .pk-ball { animation: none; }
}