/* Logical scene geometry is shared with plinko-view.mjs for 8, 12 and 16 rows. */
.shell.plinko-route{padding-top:max(8px,var(--app-safe-top))}
.shell.plinko-route>main{padding:0 16px 8px;min-height:0;overflow-y:auto}
.hub-plinko .plinko-stage{flex:1 0 auto;min-height:auto;padding:8px 0}
.plinko-board{width:100%;max-width:none;aspect-ratio:368/360;position:relative;flex:none;isolation:isolate;border-radius:23px;overflow:hidden}
.plinko-scene{width:368px;height:360px;background:radial-gradient(ellipse at 50% 44%,#192b40b3,transparent 63%),linear-gradient(180deg,#0e1826,#111d2c);border-radius:23px;box-shadow:inset 0 0 0 1px #233449;transform-origin:top left}
.plinko-board-options{position:absolute;left:12px;right:12px;top:10px;display:flex;align-items:center;justify-content:space-between;font-size:9px;color:#7d91ac;z-index:3;pointer-events:none}
.plinko-peg{width:7px;height:7px;margin:-3.5px;background:radial-gradient(circle at 35% 25%,#f5f8fc,#ccd5e2 38%,#627d9b 82%);box-shadow:0 1px 3px #0008}
.plinko-peg.touched{background:#f5d798;box-shadow:0 0 10px #c4aaff}
.plinko-board .plinko-bucket{height:26px;padding:0 1px;border:1px solid #5a4280;border-radius:5px;font-size:9px;line-height:13px;font-weight:800;background:linear-gradient(#674098,#452964);color:#eadbfd;font-variant-numeric:tabular-nums;z-index:2;cursor:pointer;min-height:0;min-width:0}
.plinko-board[data-rows='16'] .plinko-bucket{font-size:8px}
.plinko-board .plinko-bucket.edge{background:linear-gradient(#e8b972,#b07939);border-color:#f7c984;color:#3b2916}
.plinko-board .plinko-bucket.near{background:linear-gradient(#a971d4,#79529e);border-color:#cc91ee}
.plinko-board .plinko-bucket.center{background:#2a4054;border-color:#3b5770;color:#b0c5d8}
.plinko-board .plinko-bucket.landed{box-shadow:0 0 14px #be8fff88;filter:brightness(1.35)}
.plinko-board .plinko-bucket:focus-visible{outline:2px solid #f6dfab;outline-offset:2px;z-index:6}
.plinko-effects{z-index:4;overflow:visible}
.plinko-ball{left:0;top:0;width:9px;height:9px;transform:translate(-50%,-50%);background:radial-gradient(circle at 34% 26%,#fffefa 0 12%,#f8d998 40%,#c79043);box-shadow:0 0 5px #fff5bd80;z-index:5}
.plinko-glow{position:absolute;left:0;top:0;width:42px;height:42px;border-radius:50%;background:radial-gradient(circle,#c793ff70,#9667d326 45%,transparent 72%);transform:translate(-50%,-50%);pointer-events:none;z-index:4}
.plinko-payout{bottom:auto;max-width:344px;z-index:7}
.plinko-replay-note{position:absolute;top:29px;left:50%;transform:translateX(-50%);padding:5px 9px;border:1px solid #71809655;border-radius:9px;background:#1a2b40;color:#b9cde6;font-size:9px;white-space:nowrap;z-index:8}
:where(html[data-motion="reduced"]) .plinko-glow{display:none}:where(html[data-motion="reduced"]) .plinko-peg{transition:none}