/* Plinko: board and option styles, scoped to .pk*. Linked from quick.html after quick.css. */

/* Options: one drop button per risk (each in its table's colour) and the rows stepper, on one row that fits a 360px
   phone. The risk last pressed carries a cream ring: Space, the big button and auto play drop at it. */
.pk-opts{display:flex;gap:8px;min-width:0;align-items:center}
.pk-drops{flex:1 1 auto;min-width:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
@media (min-width:760px){.pk-drops{grid-template-columns:repeat(3,minmax(104px,auto))}}
.pk-drop{position:relative;min-height:44px;min-width:0;padding:2px 6px;border:0;border-radius:10px;background:var(--risk);color:var(--cream);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;box-shadow:inset 0 -3px 0 #0003,inset 0 1px 0 #ffffff26;transition:transform .12s var(--ease),filter .12s}
.pk-drop[data-risk=medium]{color:var(--ink)}
.pk-drop:hover:not(:disabled){filter:brightness(1.1)}
.pk-drop:active:not(:disabled){transform:translateY(1px) scale(.98)}
.pk-drop[data-current]{box-shadow:inset 0 -3px 0 #0003,0 0 0 2px var(--felt-deep),0 0 0 4px var(--cream)}
.pk-drop:disabled{opacity:.5;filter:saturate(.6)}
.pk-drop-name{font:600 15px/1.05 var(--ui);white-space:nowrap}
.pk-drop-word{font:500 11px/1 var(--ui);opacity:.85;white-space:nowrap}
@media (max-width:759px) and (max-height:700px){.pk-drop-word{display:none}}
.pk-rows{flex:none;display:grid;grid-template-columns:44px 58px 44px;gap:3px;align-items:center}
.pk-rows>button{height:44px;border:0;border-radius:10px;background:var(--felt-up);font:500 22px/1 var(--mono);color:var(--cream)}
.pk-rows>button:hover:not(:disabled){background:#316b53}
.pk-rows>button[aria-disabled]{opacity:.4;pointer-events:none}
.pk-rows>button:disabled{opacity:.45}
.pk-rows-value{display:flex;flex-direction:column;align-items:center;justify-content:center;height:44px;border-radius:10px;background:var(--felt-dark)}
.pk-rows-value strong{font:600 18px/1 var(--mono);font-variant-numeric:tabular-nums}
.pk-rows-value small{font:400 11px/1.1 var(--ui);color:var(--cream-2)}

/* Board: the peg pyramid fills the stage; the top corners (empty beside a pyramid) carry the tags */
.pk{position:relative;height:100%;display:grid}
.pk-stage{position:relative;min-height:0;min-width:0;overflow:hidden}
.pk-canvas{position:absolute;left:0;top:0;display:block}
.pk-corner{position:absolute;z-index:2;top:2px;display:flex;flex-direction:column;gap:6px;max-width:42%}
.pk-corner-left{left:0;align-items:flex-start}
.pk-corner-right{right:0;align-items:flex-end}
/* Recent drops: a short column under the fair line, in each risk's colours (hidden where the board is narrow). */
.pk-recent{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.pk-recent li{min-width:58px;padding:5px 9px;border-radius:999px;background:var(--bg);color:var(--ink);font:600 13px/1 var(--mono);font-variant-numeric:tabular-nums;text-align:center;box-shadow:inset 0 -2px 0 #0003}
.pk-recent li:first-child{animation:q-pill-in .3s var(--pop)}
.pk-recent li:nth-child(n+2){opacity:.82}
@container (max-width:700px){.pk-recent{display:none}}
@container (max-height:430px){.pk-recent li:nth-child(n+4){display:none}}
.pk-tag{margin:0;display:flex;flex-direction:column;gap:2px;padding:7px 12px;border-radius:12px;background:#10291e8c;line-height:1.1}
.pk-tag-label{font:400 12px var(--ui);color:var(--cream-2)}
.pk-top{font:600 19px var(--mono);font-variant-numeric:tabular-nums;color:#f0c46a}

/* Pay tables: placed by the script under the bottom row of pegs. Stacked: low, medium and high, one row each; the
   current risk's row at full strength. Collapsed (narrow boards): only the current risk's row. */
.pk-buckets{position:absolute;left:0;right:0;margin:0;padding:0;pointer-events:none}
.pk-row{position:absolute;left:0;right:0;height:var(--row-h);margin:0;padding:0;list-style:none;top:calc(var(--i)*(var(--row-h) + 3px));transition:opacity .2s}
.pk-buckets[data-stacked=true] .pk-row:not([data-current]){opacity:.62}
.pk-buckets[data-stacked=false] .pk-row{top:0}
.pk-buckets[data-stacked=false] .pk-row:not([data-current]){display:none}
.pk-buckets[data-stacked=true] .pk-bucket{border-radius:5px}
.pk-bucket{position:absolute;top:0;height:100%;display:grid;place-items:center;border-radius:7px;background:var(--bg);color:var(--ink);
  box-shadow:inset 0 -3px 0 #0003,0 2px 0 #0b1f1666;font:600 var(--fs,13px)/1 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em;transition:transform .18s var(--ease)}
.pk-bucket>span:first-child{white-space:nowrap}
.pk-buckets[data-narrow=true] .pk-bucket{letter-spacing:-.04em}
.pk-buckets[data-narrow=true] .pk-bucket>span:first-child{writing-mode:vertical-rl;transform:rotate(180deg)}
.pk-bucket[data-last]{box-shadow:inset 0 -3px 0 #0003,0 0 0 2px var(--cream),0 0 16px #f2ead966}
.pk-hit{animation:pk-hit calc(.42s*var(--pace,1)) var(--ease)}
@keyframes pk-hit{0%{transform:translateY(0)}30%{transform:translateY(7px) scale(1.04);filter:brightness(1.35)}100%{transform:none}}
@container (max-width:420px){.pk-tag{padding:5px 9px}.pk-top{font-size:16px}.pk-tag-label{font-size:11px}}
/* The short-landscape rail is about 290px wide: a slimmer stepper leaves the risk buttons room. */
@media (orientation:landscape) and (max-height:500px){.pk-drops{grid-template-columns:repeat(3,minmax(0,1fr))}.pk-drop-word{display:none}.pk-rows{grid-template-columns:44px 46px 44px}.pk-rows-value small{display:none}.pk-opts{gap:6px}}