/* Bokalo slydimas. The track maps 0..125 % onto its width: the wood ends at 100 % (the edge), the dark pit is where mugs fall. */
.slide-panel{--wood-a:#6b4423;--wood-b:#8a5a2e;--brass:#e6b95c;--lane-h:clamp(30px,calc((100dvh - 330px) / var(--lanes)),52px);display:grid;gap:10px;background:radial-gradient(ellipse at 50% 0,#2d1b0e,#150e08 70%)}
.slide-head{display:flex;justify-content:space-between;align-items:center;gap:14px}
.slide-head h1{margin:2px 0 0;font:700 clamp(26px,5vw,40px)/1.05 Georgia,"Times New Roman",serif}
.slide-head h1 em{color:var(--brass);font-style:italic}
.slide-clock{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;border:2px solid #b7894a;background:#1b110a;color:#ffe9bd;font:800 22px/1 Georgia,serif;font-variant-numeric:tabular-nums}
.slide-clock.urgent{border-color:#ff7b5e;color:#ffb199;animation:slide-urgent .5s ease-in-out infinite alternate}
.slide-bar{padding:10px 12px 6px;border:1px solid #7a5530;border-radius:16px;background:linear-gradient(#1c1209,#120b06);box-shadow:inset 0 0 40px #000a,0 10px 30px #0007}
.slide-lanes{display:grid;gap:4px}
.slide-lane{display:grid;grid-template-columns:minmax(78px,22%) minmax(0,1fr) 68px;align-items:center;gap:8px;height:var(--lane-h);padding:0 4px;border-radius:10px;border:1px solid transparent;transition:background .25s,border-color .25s}
.slide-lane.is-me{background:#ffffff08}
.slide-who{display:flex;align-items:center;gap:6px;min-width:0}
.slide-who img,.slide-who span{flex:0 0 auto;width:calc(var(--lane-h) * .8);height:calc(var(--lane-h) * .8);border-radius:50%;object-fit:cover;border:1px solid #c79f54aa;background:#2b1b0e}
.slide-who b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:#f1dcb4}
.slide-who em{color:var(--brass);font-style:normal;font-size:10px}
.slide-track{position:relative;height:72%;overflow:hidden;border-radius:7px;background:
  linear-gradient(90deg,transparent 0 79.6%,#e6b95c 79.6% 80.4%,transparent 80.4%),
  linear-gradient(90deg,transparent 0 80.4%,#050302 80.4%,#120b06 100%),
  repeating-linear-gradient(180deg,#00000022 0 1px,transparent 1px 100%),
  linear-gradient(90deg,var(--wood-a),var(--wood-b) 40%,var(--wood-a));box-shadow:inset 0 2px 5px #0008,inset 0 -2px 4px #fff2}
.slide-track::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  repeating-linear-gradient(90deg,#fff1 0 1px,transparent 1px 16%),
  linear-gradient(90deg,transparent 62%,#c4463a2a 78%,#c4463a55 80%,transparent 80.4%)}
.slide-start{position:absolute;left:2%;top:10%;bottom:10%;width:2px;border-radius:2px;background:#ffe2a366}
.slide-lip{position:absolute;left:79.6%;top:0;bottom:0;width:.8%;background:linear-gradient(90deg,#f6dc95,#b88a39);box-shadow:0 0 8px #e6b95c99}
.slide-mug{--pos:0;--over:0;position:absolute;left:calc(var(--pos) * .8%);top:50%;height:86%;aspect-ratio:.9;transform:translate(-50%,calc(-50% + var(--over) * var(--over) * .35px)) rotate(calc(var(--over) * 5deg));transition:filter .2s}
.slide-mug u{position:absolute;inset:0 14% 0 0;border-radius:3px 3px 9px 9px;background:linear-gradient(90deg,#f7cf6b,#e0932b 45%,#b4670f);border:2px solid #fff1cdaa;box-shadow:0 3px 6px #000a,inset 0 0 6px #fff6}
.slide-mug u::before{content:"";position:absolute;left:-2px;right:-2px;top:-30%;height:42%;border-radius:8px 8px 4px 4px;background:#fff6dc;box-shadow:0 -2px 0 #fff}
.slide-mug::after{content:"";position:absolute;right:-1px;top:24%;width:30%;height:48%;border:2px solid #fff1cdaa;border-left:0;border-radius:0 8px 8px 0}
.slide-mug::before{content:"";position:absolute;right:92%;top:30%;width:0;height:40%;background:linear-gradient(270deg,#ffe6a888,transparent);border-radius:99px;transition:width .15s}
.slide-lane[data-mode=sliding] .slide-mug::before,.slide-lane[data-mode=falling] .slide-mug::before{width:calc(var(--lane-h) * 1.6)}
.slide-lane[data-mode=falling] .slide-mug{filter:drop-shadow(0 0 6px #ff9a5b)}
.slide-lane[data-mode=charging] .slide-mug{animation:slide-wobble .16s linear infinite alternate}
.slide-lane[data-mode=stopped] .slide-mug{animation:slide-thud .45s ease-out}
.slide-lane[data-mode=fell]{background:#8c2b2038;border-color:#d8493a55}
.slide-lane[data-mode=fell] .slide-mug{visibility:hidden}
.slide-lane.is-close .slide-track{box-shadow:inset 0 2px 5px #0008,0 0 0 2px #f6dc95,0 0 14px #e6b95caa}
.slide-lane.is-leading{background:#e6b95c1f;border-color:#e6b95c88}
.slide-lane.is-leading .slide-who b::after{content:" ★";color:var(--brass)}
.slide-value{font:800 13px/1 ui-monospace,monospace;color:#e9d3a8;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.slide-lane[data-mode=fell] .slide-value,.slide-lane[data-mode=falling] .slide-value{color:#ff8e7c}
.slide-lane[data-mode=fell] .slide-value{animation:slide-pop .4s cubic-bezier(.2,1.5,.4,1)}
.slide-ruler{display:grid;grid-template-columns:minmax(78px,22%) minmax(0,1fr) 68px;gap:8px;margin-top:3px;padding:0 4px}
.slide-scale{position:relative;height:14px}
.slide-scale span{position:absolute;top:0;transform:translateX(-50%);font:10px/1 system-ui;color:#a58a63;font-variant-numeric:tabular-nums}
.slide-scale .edge{color:var(--brass);letter-spacing:.14em;font-weight:700}
.slide-controls{display:grid;gap:8px}
.slide-meter{position:relative;height:30px;border-radius:99px;border:1px solid #7a5530;background:#0c0805;overflow:hidden}
.slide-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#3fa65c,#e3c23a 62%,#f0a23a 80%);opacity:.9}
.slide-danger{position:absolute;right:0;top:0;bottom:0;width:calc(100% - var(--fall));display:grid;place-items:center;background:repeating-linear-gradient(135deg,#d8493a88 0 6px,#d8493a44 6px 12px)}
.slide-danger small{font:700 9px/1 system-ui;letter-spacing:.12em;text-transform:uppercase;color:#ffd7cf}
.slide-marker{position:absolute;top:-2px;bottom:-2px;left:0;width:4px;border-radius:2px;background:#fff;transform:translateX(-50%);box-shadow:0 0 10px #fff9}
.slide-meter.is-charging{border-color:var(--brass);box-shadow:0 0 14px #e6b95c66}
.slide-meter.is-danger .slide-marker{background:#ffb3a5;box-shadow:0 0 12px #ff6a55}
.slide-meter.is-thrown{opacity:.75}
.slide-throw{min-height:64px;padding:8px 14px;border:0;border-radius:16px;display:grid;gap:2px;place-items:center;cursor:pointer;touch-action:none;user-select:none;color:#2a1403;background:linear-gradient(#ffd77a,#ee9d2f);box-shadow:0 6px 0 #9a5d12,0 12px 24px #0008;transition:transform .08s,box-shadow .08s}
.slide-throw strong{font:900 22px/1 Georgia,serif;letter-spacing:.06em}
.slide-throw small{font:600 12px/1.2 system-ui;color:#5b3a12}
.slide-throw.is-held{transform:translateY(4px);box-shadow:0 2px 0 #9a5d12,0 0 26px #ffcf6acc}
.slide-throw.is-done,.slide-throw[aria-disabled=true]{filter:grayscale(.6) brightness(.7);cursor:default;box-shadow:0 3px 0 #5b3a12}
.slide-throw:focus-visible{outline:3px solid #fff;outline-offset:3px}
.slide-feedback{margin:0;min-height:2.4em;color:#cdb68d;font-size:13px;line-height:1.35;text-align:center}
@keyframes slide-wobble{from{transform:translate(-50%,calc(-50% - 1px)) rotate(-4deg)}to{transform:translate(-50%,calc(-50% + 1px)) rotate(4deg)}}
@keyframes slide-thud{0%{transform:translate(-50%,-50%) scale(1.25,.8)}50%{transform:translate(-50%,-62%) scale(.95,1.1)}100%{transform:translate(-50%,-50%)}}
@keyframes slide-pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
@keyframes slide-urgent{to{transform:scale(1.08);box-shadow:0 0 16px #ff7b5e88}}
@media(max-width:560px){.slide-lane,.slide-ruler{grid-template-columns:minmax(64px,24%) minmax(0,1fr) 60px}.slide-who b{font-size:11px}}
@media(prefers-reduced-motion:reduce){.slide-lane[data-mode=charging] .slide-mug,.slide-lane[data-mode=stopped] .slide-mug,.slide-clock.urgent,.slide-lane[data-mode=fell] .slide-value{animation:none}.slide-mug::before{display:none}.slide-throw{transition:none}}
.slide-lane[data-mode=fell] .slide-track::after{content:"CHLIAP!";position:absolute;right:4%;top:50%;transform:translateY(-50%) rotate(-6deg);white-space:nowrap;max-width:19%;overflow:hidden;color:#ff9a7b;font:900 clamp(7px,calc(var(--lane-h) * .28),12px)/1 Georgia,serif;letter-spacing:.02em;text-shadow:0 0 8px #ff5a3c;animation:slide-pop .45s cubic-bezier(.2,1.6,.4,1)}

.slide-score{display:grid;justify-items:end;gap:3px}
.slide-pips{display:flex;gap:3px}
.slide-pips i{width:8px;height:8px;border-radius:50%;background:#ffffff1f;border:1px solid #ffffff2e;box-sizing:border-box;transition:background .2s,transform .2s}
.slide-pips i.live{background:#f6dc95aa;animation:slide-urgent .5s ease-in-out infinite alternate}
.slide-pips i.ok{background:#9ad08a;border-color:#9ad08a}
.slide-pips i.fell{background:#e8604c;border-color:#e8604c}
@media(prefers-reduced-motion:reduce){.slide-pips i.live{animation:none}}
