/* Pool: the table is a canvas; everything around it is plain DOM. Shares the felt-and-gold tokens of the rest of the app. */
.pb.app{max-width:1400px;height:100vh;height:100dvh;min-height:0;gap:6px;overflow:hidden}
.pb .brand{font-size:clamp(20px,6vw,28px)}
.pb-main{flex:1;min-height:0;width:100%;align-self:stretch;display:grid;gap:8px;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"hud" "stage" "ctl"}
.pb-hud{grid-area:hud;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pb-stage{grid-area:stage;position:relative;min-height:0;min-width:0;touch-action:none;-webkit-user-select:none;user-select:none}
.pb-stage canvas{position:absolute;inset:0;display:block;touch-action:none;cursor:crosshair}
.pb.mine .pb-stage canvas{cursor:crosshair}
.pb-ctl{grid-area:ctl;display:grid;grid-template-columns:62px minmax(0,1fr) auto;grid-template-rows:40px 40px;gap:6px 10px;align-items:center;padding:2px 2px 4px;
  grid-template-areas:"spin power power" "spin fine shoot"}
.pb-left,.pb-right{display:contents}
.pb-spinbox{grid-area:spin;align-self:center}
.pb-fine{grid-area:fine;justify-content:flex-start}
.pb-power{grid-area:power}
#pb-shoot{grid-area:shoot}

/* player strips */
.pbpl{padding:6px 10px 6px 7px;min-height:52px;min-width:0;gap:9px}
.pbpl .av{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;font-family:var(--display);font-size:16px;color:#fbf4e2;background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.4),transparent 55%),#0a5a39;box-shadow:0 0 0 2px rgba(255,255,255,.2),0 2px 4px rgba(0,0,0,.45)}
.pbpl.me .av{background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.55),transparent 55%),#c8141c}
.pbpl .av i{font-style:normal}
.pbpl .nm em{font-style:normal;font-size:10px;letter-spacing:.08em;background:rgba(255,255,255,.16);border-radius:6px;padding:1px 5px;margin-left:4px;vertical-align:1px}
.pbpl .tag{flex:none;font-size:11px;font-weight:700;letter-spacing:.04em;padding:3px 8px;border-radius:999px}
.mbs{display:flex;flex-wrap:wrap;gap:3px;margin-top:3px}
.mb{--bc:#888;position:relative;width:15px;height:15px;border-radius:50%;display:grid;place-items:center;font-style:normal;flex:none;
  background:radial-gradient(circle at 33% 28%,rgba(255,255,255,.8),rgba(255,255,255,0) 38%),var(--bc);box-shadow:inset -1px -2px 3px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.5)}
.mb.st{background:radial-gradient(circle at 33% 28%,rgba(255,255,255,.85),rgba(255,255,255,0) 38%),linear-gradient(180deg,#f7f5ec 0 24%,var(--bc) 24% 76%,#f7f5ec 76%)}
.mb span{font:800 7px/1 var(--body);color:#111;background:#fbfaf5;border-radius:50%;width:8px;height:8px;display:grid;place-items:center}
.mb.out{opacity:.22;filter:grayscale(.6)}

/* the stage overlays */
.pb-hint{position:absolute;left:50%;bottom:calc(var(--hb,2%));transform:translateX(-50%);width:max-content;max-width:94%;opacity:0;pointer-events:none;transition:opacity .25s;z-index:4}
.pb-hint.show{opacity:1}
.pb .toast{position:absolute;left:50%;top:10%;z-index:6;opacity:0;width:max-content;max-width:94%;padding:0;background:none;border:0;box-shadow:none;font-size:15px}
.pb .toast.pbt{animation:pbtoast 2.2s ease both}
@keyframes pbtoast{0%{opacity:0;transform:translate(-50%,-16px) scale(.92)}10%,80%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-6px)}}

/* status cards: the Whot plate, smaller. A yellow body stripe on top, a name tag, a picture, and two lines of lettering. */
.pbcard{--ac:var(--danfo);position:relative;display:flex;align-items:center;gap:.7em;padding:.95em 1.1em .62em .7em;font-size:clamp(11px,3.2vw,15px);border-radius:.6em;
  background:linear-gradient(180deg,var(--plate-2),var(--plate) 60%);
  box-shadow:0 0 0 .13em var(--ac),0 0 0 .24em #0b0b0b,0 .6em 1.2em rgba(0,0,0,.55);animation:pcin .35s cubic-bezier(.2,.8,.3,1.2) both}
.pbcard::before{content:'';position:absolute;left:0;right:0;top:0;height:.42em;border-radius:.6em .6em 0 0;
  background:linear-gradient(180deg,var(--ac) 0 28%,#0b0b0b 28% 40%,var(--ac) 40% 62%,#0b0b0b 62% 74%,var(--ac) 74%)}
.pc-tag{position:absolute;top:-.62em;right:.8em;z-index:2;padding:.14em .55em;border-radius:.35em;background:#fbf4e2;color:#16130c;font:800 .72em/1.1 var(--body);letter-spacing:.1em;white-space:nowrap;box-shadow:0 .1em .25em rgba(0,0,0,.45)}
.pc-ic{flex:none;width:2.7em;height:2.7em;display:grid;place-items:center;position:relative}
.pc-ic svg,.pc-ic img{width:100%;height:100%;display:block;object-fit:contain;filter:drop-shadow(0 .12em .18em rgba(0,0,0,.55))}
.pc-tx{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.pc-tx b{font:400 1.45em/1 'Titan One','Bungee',Impact,sans-serif;color:var(--ac);letter-spacing:.02em;white-space:nowrap;text-shadow:0 .06em 0 #8a5a00,0 .1em .2em rgba(0,0,0,.6);-webkit-text-stroke:.012em #2a1d00}
.pc-tx small{margin-top:.3em;font:700 .74em/1.25 var(--body);letter-spacing:.12em;color:#fff;max-width:19em}
.pc-tx small b{display:inline;font:700 1em var(--body);color:var(--danfo-hi);text-shadow:none;-webkit-text-stroke:0;letter-spacing:inherit}
.pc-num{font:400 2.1em/1 'Titan One',Impact,sans-serif;color:var(--ac);text-shadow:.04em .05em 0 #8a5a00,.07em .09em 0 #0b0b0b;-webkit-text-stroke:.015em #2a1d00}
.pc-dots{display:inline-flex;gap:.12em;margin-left:.22em;vertical-align:.05em}
.pc-dots i{width:.2em;height:.2em;border-radius:50%;background:var(--ac);animation:pcdot 1.2s infinite both}
.pc-dots i:nth-child(2){animation-delay:.18s}.pc-dots i:nth-child(3){animation-delay:.36s}
.k-wait{--ac:#8fd0ff}.k-wait .pc-tx b{text-shadow:0 .06em 0 #1d4a73,0 .1em .2em rgba(0,0,0,.6);-webkit-text-stroke-color:#0d2338}
.k-bad{--ac:#ff6a4d}.k-bad .pc-tx b{text-shadow:0 .06em 0 #6a1608,0 .1em .2em rgba(0,0,0,.6);-webkit-text-stroke-color:#2a0a04}
.k-good{--ac:#59e08f}.k-good .pc-tx b{text-shadow:0 .06em 0 #0b5a31,0 .1em .2em rgba(0,0,0,.6);-webkit-text-stroke-color:#052a16}
.k-warn{--ac:#ff6a4d}.k-warn .pc-num{animation:pcpulse 1s infinite}
.k-info .pc-tx b{font-size:1.2em}
@keyframes pcin{from{opacity:0;transform:translateY(8px) scale(.94)}to{opacity:1;transform:none}}
@keyframes pcdot{0%,70%,100%{opacity:.25;transform:translateY(0)}35%{opacity:1;transform:translateY(-.14em)}}
@keyframes pcpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
@media (prefers-reduced-motion:reduce){.pbcard,.pc-dots i,.k-warn .pc-num{animation:none!important}.pc-dots i{opacity:1}}
@media (orientation:landscape) and (max-height:520px){.pbcard{font-size:11px}.pc-tx small{display:none}}
.pb-fine .pb-snd{position:relative;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.08);color:var(--text);font-size:0;cursor:pointer;padding:0;display:grid;place-items:center}
.pb-snd::before{content:'';width:20px;height:20px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 4V5L7 9H3zm13.5 3A4.5 4.5 0 0 0 14 8v8a4.5 4.5 0 0 0 2.5-4zM14 3.2v2.1a7 7 0 0 1 0 13.4v2.1a9 9 0 0 0 0-17.6z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 4V5L7 9H3zm13.5 3A4.5 4.5 0 0 0 14 8v8a4.5 4.5 0 0 0 2.5-4zM14 3.2v2.1a7 7 0 0 1 0 13.4v2.1a9 9 0 0 0 0-17.6z'/%3E%3C/svg%3E") center/contain no-repeat}
.pb-snd.off{opacity:.55}.pb-snd.off::after{content:'';position:absolute;width:26px;height:3px;background:#ff8a6a;border-radius:2px;transform:rotate(-45deg)}

/* spin picker, fine aim */
.pb-spinbox{display:flex;flex-direction:column;align-items:center;gap:2px}
.pb-spin{width:62px;height:62px;border-radius:50%;touch-action:none;cursor:pointer;box-shadow:0 3px 8px rgba(0,0,0,.45)}
.pb-spin canvas{width:100%;height:100%;display:block}
.pb-lab{font-size:10px;letter-spacing:.14em;color:var(--mute);font-weight:700}
.pb-fine{display:flex;gap:6px}
.pb-fine button{width:56px;height:40px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.08);color:var(--text);font-size:18px;cursor:pointer;padding:0;touch-action:none}
.pb-fine button:active{background:rgba(244,197,66,.25)}

/* the power bar: horizontal under the table, vertical beside it */
.pb-power{--p:0;position:relative;height:40px;border-radius:20px;touch-action:none;cursor:ns-resize;
  background:linear-gradient(90deg,#2fbf71,#e9d34a 55%,#e8452f);box-shadow:inset 0 2px 6px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.18)}
.pw-cover{position:absolute;inset:3px;border-radius:17px;background:rgba(4,24,14,.78);clip-path:inset(0 0 0 calc(var(--p)*100%))}
.pw-thumb{position:absolute;top:3px;bottom:3px;width:40px;left:calc(3px + var(--p)*(100% - 46px));border-radius:17px;
  background:radial-gradient(circle at 35% 28%,#fffdf2,#f1e3b3 60%,#bda75e);box-shadow:0 2px 6px rgba(0,0,0,.55)}
.pw-thumb::after{content:'';position:absolute;inset:14px 12px;border-top:3px solid rgba(60,40,0,.4);border-bottom:3px solid rgba(60,40,0,.4)}
.pw-val{position:absolute;left:14px;top:50%;transform:translateY(-50%);font:700 12px var(--body);color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7);pointer-events:none}
.pw-lab{position:absolute;right:16px;top:50%;transform:translateY(-50%);font:700 10px var(--body);letter-spacing:.16em;color:rgba(255,255,255,.75);pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.6)}
#pb-shoot{min-width:96px;height:40px;padding:0 14px}
.pb:not(.mine) .pb-ctl{opacity:.45;pointer-events:none}
.pb-ctl{transition:opacity .25s}

/* wide screens: spin and fine aim on the left, power on the right, all beside the table */
@media (orientation:landscape) and (min-width:640px){
  .pb-main{grid-template-columns:96px minmax(0,1fr) 96px;grid-template-rows:auto minmax(0,1fr);grid-template-areas:"hud hud hud" "left stage right"}
  .pb-ctl{display:contents}
  .pb-left{display:flex;grid-area:left;flex-direction:column;align-items:center;justify-content:center;gap:14px}
  .pb-right{display:flex;grid-area:right;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:0}
  .pb-spinbox,.pb-fine,.pb-power,#pb-shoot{grid-area:auto}
  .pb:not(.mine) .pb-left,.pb:not(.mine) .pb-right{opacity:.45;pointer-events:none}
  .pb-left,.pb-right{transition:opacity .25s}
  .pb-fine{flex-direction:column}
  .pb-power{flex:0 1 auto;width:46px;height:min(100%,380px);min-height:90px;cursor:ns-resize;background:linear-gradient(180deg,#2fbf71,#e9d34a 55%,#e8452f)}
  .pw-cover{clip-path:inset(calc(var(--p)*100%) 0 0 0)}
  .pw-thumb{left:3px;right:3px;width:auto;height:40px;top:calc(3px + var(--p)*(100% - 46px));bottom:auto}
  .pw-thumb::after{inset:12px 14px}
  .pw-val{left:50%;top:auto;bottom:6px;transform:translateX(-50%)}
  .pw-lab{display:none}
  .pb-spin{width:70px;height:70px}
  #pb-shoot{min-width:0;width:84px}
}
/* landscape phones: squeeze the strips so the table keeps as much height as possible */
@media (orientation:landscape) and (max-height:520px){
  .pb.app{display:flex;flex-direction:column;max-width:1400px;padding-top:max(4px,var(--safe-t));gap:3px}
  .pb .top{flex-wrap:wrap}
  .pb .top .brand,.pb .top .tally{display:none}.pb .top .tools{margin-left:auto}
  .pb .top .btn{min-height:36px;padding:6px 11px}
  .pb-main{grid-template-columns:88px minmax(0,1fr) 88px;gap:4px 6px}
  .pbpl{min-height:40px;padding:3px 9px 3px 5px}.pbpl .av{width:26px;height:26px;font-size:13px}
  .pbpl .nm b{font-size:13px}.pbpl .nm small{font-size:11px}.mb{width:12px;height:12px}.mb span{display:none}.mbs{margin-top:1px}
  .pb-spin{width:56px;height:56px}.pb-fine button{width:38px;height:38px}
  .pb-left{gap:6px}
}
@media (max-width:519px){.pb .top .tally{order:3;flex-basis:100%;margin:0}.pb .top .brand{display:none}.pb .top .tools{margin-left:auto}}
@media (orientation:portrait) and (max-width:519px){.pbpl .nm small{font-size:11px}.pbpl .tag{display:none}.mb{width:13px;height:13px}}
#pb-games{padding-inline:10px;white-space:nowrap}
.pb .top .tally{flex:1 1 120px;min-width:0;text-align:right}

/* picker, end sheet, dashboard */
.rs-ball{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;font:800 15px var(--body);color:#111;
  background:radial-gradient(circle at 36% 30%,#fff 0 9%,transparent 10%),radial-gradient(circle at 50% 50%,#fbfaf5 0 34%,#151515 36%);box-shadow:0 3px 5px rgba(0,0,0,.5)}
.hero .eightimg{width:min(150px,22vh);height:auto;aspect-ratio:1;display:block;filter:drop-shadow(0 8px 10px rgba(0,0,0,.55));animation:avatarin .6s .1s ease-out both}

/* call-outs reuse the Whot plate; these tweaks fit the sub line and the ball pictures */
.pbco .co-icon img{width:100%;height:100%;display:block;object-fit:contain;filter:drop-shadow(0 .15em .2em rgba(0,0,0,.6))}
.pbco .co-sub{white-space:normal;max-width:14em;line-height:1.3}
.pbco .co-title{font-size:2em}