/* PLINKO rebuild (owned by js/plinko.js). All new rules use .pk- names; legacy #plinko-* rules overridden here. */
#v-plinko #plinko-stage.pk-stage{
  background:
    radial-gradient(ellipse 70% 55% at 50% 38%, #1a3a6e55, transparent 70%),
    radial-gradient(circle at 50% 0%, #17325e 0%, #0d1d3a 46%, #081228 100%);
  background-color:#081228}
#v-plinko #plinko-cv{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:manipulation}
/* faint donut-ring watermark in the lower corners: decorative only, never under the pegs */
.pk-stage:before,.pk-stage:after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;
  border:34px solid #ffffff05;pointer-events:none;z-index:0}
.pk-stage:before{left:-90px;bottom:-110px}
.pk-stage:after{right:-90px;bottom:-110px}

/* rows picker: 9 compact buttons */
.pk-rows{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:3px;padding:4px;background:var(--inset);border:1px solid var(--border);border-radius:var(--r-sm)}
.pk-rows button{height:36px;min-width:0;padding:0;border:0;border-radius:6px;background:none;color:var(--muted);font-size:14px;font-weight:700;cursor:pointer;transition:background .15s,color .15s}
.pk-rows button:hover:not(:disabled){color:var(--text);background:#ffffff08}
.pk-rows button.on{background:var(--control-hi);color:#fff;box-shadow:inset 0 1px 0 #ffffff14,inset 0 -2px 0 var(--accent)}
.pk-rows button:disabled{cursor:not-allowed;opacity:.6}
.pk-rows button.on:disabled{opacity:.85}
.pk-risk button.on:disabled{opacity:.85}

/* recent results: pocket-coloured chips stacked in the empty top-right corner of the pyramid */
.pk-recent{position:absolute;top:12px;right:12px;display:flex;flex-direction:column;gap:5px;z-index:4;pointer-events:none}
.pk-rc{min-width:54px;text-align:center;font-size:13px;font-weight:800;line-height:1;padding:7px 8px;border-radius:7px;
  box-shadow:inset 0 -3px 0 #00000033;animation:pkIn .28s cubic-bezier(.2,.9,.3,1.1)}
.pk-rc:nth-child(n+5){opacity:.75}
@keyframes pkIn{from{transform:translateY(-10px) scale(.85);opacity:0}to{transform:none;opacity:1}}

/* last result: slim one-line readout (multiplier chip + net) in the empty top-left corner; matches the recent-result chips */
#v-plinko .pk-stage .outcome{left:12px;top:12px;bottom:auto;transform:translateY(-6px);display:flex;flex-direction:row-reverse;align-items:center;gap:8px;
  padding:5px 12px 5px 5px;border-radius:9px;font-size:15px;font-weight:800;background:#0a1631d9;border:1px solid #ffffff1f;box-shadow:none;max-width:calc(50% - 40px)}
#v-plinko .pk-stage .outcome.on{transform:none}
#v-plinko .pk-stage .outcome .tag{display:none}
#v-plinko .pk-stage .outcome .det{font-size:12.5px;font-weight:800;color:#dce7fb;background:#ffffff14;border-radius:6px;padding:3px 7px;white-space:nowrap}
#v-plinko .pk-stage .outcome.win .det{background:#2fe08f24;color:#9dffcf}
#v-plinko .pk-stage .outcome.loss .det{background:#ff547024;color:#ffb3c0}
#v-plinko .pk-stage .outcome .amt{font-variant-numeric:tabular-nums}

/* pocket hover tip */
.pk-tip{position:absolute;z-index:6;display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:10px;background:#081228f2;
  border:1px solid var(--border);box-shadow:0 10px 24px -10px #000;font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap;pointer-events:none}
.pk-tip[hidden]{display:none}
.pk-tip b{color:var(--text);font-size:15px}
.pk-tip i{font-style:normal;color:var(--text)}

/* rules table in the dialog */
.pk-rules-tbl{font-size:12.5px}
.pk-rules-tbl td,.pk-rules-tbl th{text-align:left!important;vertical-align:top;white-space:normal}
.pk-rules-tbl td:first-child{font-weight:700}

@media (max-width:900px){
  /* the pyramid is about as tall as it is wide, for every row count: size the stage to the board, not a fixed 380px */
  #v-plinko .pk-stage{height:min(560px, calc((100vw - 34px) * 0.96 + 18px))}
  .pk-recent{top:8px;right:8px;gap:4px}
  .pk-rc{min-width:44px;font-size:12px;padding:6px 6px}
  .pk-rc:nth-child(n+5){display:none}
  #v-plinko .pk-stage .outcome{left:8px;top:8px;font-size:13.5px;padding:4px 10px 4px 4px;max-width:calc(50% - 24px)}
  #v-plinko .pk-stage .outcome .tag{font-size:10.5px;padding:3px 7px}
  #v-plinko .pk-stage .outcome .det{font-size:11.5px}
}