body.pool{display:flex;flex-direction:column;background:var(--color-paper)}
.pool .hud{z-index:2}
.pool-controls #message{flex:1}
.pool-controls #pullValue{min-width:30px;text-align:right;color:var(--color-ink);font-weight:600}
.shot-row{display:flex;gap:10px;align-items:center}
.shot-row>.btn{min-width:78px;height:56px;font-size:13px}
.pull{height:56px;position:relative;flex:1;min-width:0;border-radius:var(--radius-lg);overflow:hidden;background:var(--color-line-soft);touch-action:none;cursor:ew-resize}
.pull-fill{position:absolute;inset:0 auto 0 0;width:0;background:var(--color-signal-soft);pointer-events:none}
.pull-copy{position:absolute;left:58px;top:21px;color:var(--color-muted);font-size:11px;pointer-events:none;white-space:nowrap}
#handle{position:absolute;left:5px;top:5px;height:46px;width:46px;border-radius:6px;border:0;background:var(--color-signal-soft);color:var(--color-signal-deep);font-size:26px;touch-action:none;cursor:ew-resize}
.pull.dragging .pull-copy{opacity:0}
.pull.disabled{opacity:.42;cursor:default}
.pool-rack{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.pool-rack p{display:flex;align-items:center;gap:3px;color:var(--color-soft);font-size:10px;font-weight:700}
.pool-rack p span{width:62px}
.pool-rack i{width:11px;height:11px;border-radius:50%;background:var(--c);box-shadow:inset 0 -1.5px 2px rgba(0,0,0,.3);transition:opacity var(--dur-state),transform var(--dur-enter) var(--ease-spring)}
.pool-rack i.stripe{background:linear-gradient(#f4f0e3 28%,var(--c) 28% 72%,#f4f0e3 72%)}
.pool-rack i.out{opacity:.2;transform:scale(.55)}
.pool-banner{position:absolute;top:10px;left:10px;right:60px;z-index:4;padding:10px 12px;border-radius:14px;background:var(--color-danger-soft,#fde3e1);color:var(--color-danger-ink,#a3241b);font-size:13px;font-weight:700;line-height:1.35;opacity:0;transform:translateY(-140%);pointer-events:none}
.pool-banner.go{animation:pool-banner 2.8s var(--ease-out) both}
@keyframes pool-banner{0%{opacity:0;transform:translateY(-140%)}12%,82%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-140%)}}
.pool-pop{position:absolute;left:50%;top:40%;z-index:4;padding:8px 16px 10px;border:3px solid var(--color-signal-deep);border-radius:14px;background:var(--color-surface);color:var(--color-signal-deep);font:800 20px/1 var(--font-arena);white-space:nowrap;opacity:0;translate:-50% 0;rotate:-4deg;pointer-events:none}
.pool-pop.go{animation:tw-stamp .9s var(--ease-out) both,pool-off .3s var(--ease-in) 1.6s forwards}
@keyframes pool-off{to{opacity:0;transform:translateY(-10px) scale(.9)}}
@media (prefers-reduced-motion:reduce){.pool-banner.go,.pool-pop.go{animation-duration:.01s,.3s}}
@media(max-height:560px) and (min-width:600px){
  .shot-row{gap:6px}
  .shot-row>.btn{min-width:62px}
  .pull-copy{left:54px}
}
@media(max-width:360px){
  .shot-row>.btn{min-width:68px;padding-inline:12px}
  .pull-copy{left:54px}
}
@media(max-height:650px) and (orientation:portrait){
  .shot-row>.btn,.pull{height:52px}
  #handle{height:44px;top:4px}
  .pull-copy{top:18px}
}