.plinko-board{padding-bottom:0;background:radial-gradient(ellipse at 50% 70%,#324f361c,transparent 65%)}
.plinko-board canvas{position:absolute;inset:0;pointer-events:none}
.plinko-buckets{bottom:6px;height:28px;gap:0}
.plinko-bucket{border-radius:3px 3px 6px 6px;background:linear-gradient(180deg,#ffffff26,#ffffff00 30%),color-mix(in srgb,#e8b65c calc(var(--edge)*100%),#82b09a);border:1px solid #eaf7bf40;box-shadow:inset 0 1px #fff5,0 3px 0 #061d16,0 5px 9px #0003;letter-spacing:0;width:calc(100% - 2px);justify-self:center;display:flex;align-items:center;justify-content:center;font-family:Arial,sans-serif;font-weight:700;font-variant-numeric:tabular-nums;line-height:1;transition:filter .18s,box-shadow .18s}
.plinko-bucket:hover,.plinko-bucket.bucket-hit{transform:none}
.plinko-bucket.bucket-hit{box-shadow:inset 0 1px #fff8,0 2px 0 #766037,0 0 24px #eac97766}
.crossing-road{background:#26353c;box-shadow:inset 0 14px 25px #05152288,inset 0 -10px 20px #05152277}
.crossing-track{background:linear-gradient(0deg,#101e2780,transparent 50%,#101e2780),repeating-linear-gradient(83deg,#a2b1b105 0 1px,transparent 1px 4px),#304049;transition:none!important}
.crossing-start{background:repeating-linear-gradient(0deg,#40534a 0 14px,#4e6055 14px 15px);border-right:4px solid #d8c78e;box-shadow:inset -8px 0 15px #071b1a66}
.crossing-lane{background:linear-gradient(90deg,#00000008,transparent 25%,#c6d4d006 70%,#00000012);border-right:2px dashed #d4dbc254}
.crossing-lane>span{width:23px;height:23px;font-size:10px;background:#1a2c32cc;box-shadow:0 2px 5px #0003}
.crossing-lane.passed{background:#b9e2a50b}
.crossing-signal{position:absolute;width:7px;height:7px;left:8px;top:calc(var(--stop-y) - 1px);border-radius:50%;background:#d6e3a0;box-shadow:0 0 8px #ddf6b344;z-index:4;border:1px solid #0a1720}
.crossing-lane.traffic-held .crossing-signal{background:#ff7760;box-shadow:0 0 8px #ff5e4044}
.crossing-barrier{position:absolute;left:18px;right:13px;top:var(--stop-y);height:2px;background:repeating-linear-gradient(90deg,#e9c8a3 0 7px,#d36a4f 7px 14px);opacity:0;transition:opacity .24s;box-shadow:0 2px 3px #0006}
.traffic-held .crossing-barrier{opacity:.75}
.traffic-vehicle{position:absolute;left:0;top:0;z-index:5;will-change:transform;pointer-events:none}
.traffic-car-body{width:100%;height:100%;position:relative;filter:drop-shadow(3px 5px 3px #020d1788)}
.traffic-car-body img{display:block;width:100%;height:100%;object-fit:contain;user-select:none}
.traffic-brake{position:absolute;top:9%;width:9%;height:3%;border-radius:40%;background:#ff6045;opacity:.16;transition:opacity .2s;box-shadow:0 0 6px 2px #fb4520}
.traffic-brake.left{left:22%}.traffic-brake.right{right:22%}.traffic-vehicle.braking .traffic-brake{opacity:.85}
.crossing-chicken{width:0;height:0;left:0;top:0;margin:0;filter:none;opacity:1;will-change:transform;z-index:7;transition:none}
.crossing-chicken:before{display:none}
.chicken-body{position:absolute;top:0;left:0;background-image:url('/assets/crossing/motion/chicken-walk.webp');background-repeat:no-repeat;background-size:300% 200%;transform-origin:50% 93.36%;filter:drop-shadow(1px 2px 1px #14253466);will-change:transform,background-position}
.chicken-ground-shadow{position:absolute;left:0;top:0;border-radius:50%;background:#07121e;filter:blur(3px);pointer-events:none}
.crossing-effects{position:absolute;inset:0;pointer-events:none;z-index:9}
.crossing-feather{position:absolute;width:5px;height:12px;background:linear-gradient(90deg,#bcbfaf,#fff9e0);border-radius:80% 10% 80% 15%;animation:crossing-feather .78s cubic-bezier(.14,.64,.4,1) both;animation-delay:var(--delay)}
@keyframes crossing-feather{0%{transform:translate(0,0) rotate(0);opacity:0}8%{opacity:.95}100%{transform:translate(var(--fx),var(--fy)) rotate(var(--fr));opacity:0}}
.gentle-motion .crossing-feather{display:none}
@media(max-width:760px){.plinko-buckets{height:28px}.plinko-board{height:340px}.crossing-sky{background:linear-gradient(#172d3d,#254650)}.crossing-chicken{width:0;height:0}}
@media(prefers-reduced-motion:reduce){.crossing-feather{display:none}}

.plinko-bucket-value{display:block;white-space:nowrap;line-height:1;letter-spacing:0}

.plinko-buckets.compact-buckets{height:52px;display:block}
.compact-buckets .plinko-bucket{position:absolute;top:calc(var(--bucket-row)*24px);left:calc((var(--bucket-index) + .5)*100%/var(--buckets));width:calc(200%/var(--buckets) - 2px);height:22px;translate:-50% 0;border-radius:3px}
.compact-buckets .plinko-bucket:nth-child(even):before{content:'';position:absolute;bottom:100%;left:50%;width:1px;height:24px;background:#b1c7ad66;pointer-events:none}
.plinko-bucket:focus-visible{outline-width:1px;outline-offset:1px}
