/* Pool: the HUD over the table (js/pool-ui.js) and what the golf HUD hides while a pool round is on. */
body.mode-pool {
  --slab: rgba(20, 14, 10, 0.9); --slab2: rgba(34, 24, 17, 0.95); --acc: #e2b45a; --acc-ink: #1c1505; --cut: 0px; --rad: 6px;
}
#pool-input { position: fixed; inset: 0; z-index: 2; touch-action: none; display: none; cursor: crosshair; }
body.pool-on #pool-input { display: block; }
/* the golf HUD keeps only its action rail (chat, sound, help, leave) */
body.pool-on #hud > :not(#actions):not(#help) { display: none !important; }
body.pool-on #btn-view, body.pool-on #btn-free, body.pool-on #btn-photo, body.pool-on #btn-card, body.pool-on #btn-pickup, body.pool-on #btn-settings { display: none !important; }
body.pool-on #minimap, body.pool-on #wheel { display: none !important; }
/* toasts drop below the scoreboard and the status line */
body.pool-on #toasts { top: calc(var(--gut) + var(--sa-t) + 136px); bottom: auto; }

#pool-hud { position: fixed; inset: 0; z-index: 3; pointer-events: none; color: var(--hud-ink); font-family: var(--f-cond); -webkit-user-select: none; user-select: none; }
#pool-hud button, #pool-hud .ph-power, #pool-hud .ph-face, #pool-hud .ph-final { pointer-events: auto; }

/* ---- scoreboard */
.ph-top { position: absolute; top: calc(var(--gut) + var(--sa-t)); left: 50%; transform: translateX(-50%); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  width: min(760px, calc(100vw - 2 * var(--gut) - var(--sa-l) - var(--sa-r))); gap: 4px; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .45)); }
#pool-hud.solo .ph-top { grid-template-columns: minmax(0, 1fr) auto; width: min(460px, calc(100vw - 2 * var(--gut))); }
.ph-side { background: var(--slab); border-radius: var(--rad); padding: 8px 12px 9px; min-width: 0; border-top: 3px solid transparent; transition: border-color .2s, background .2s; }
.ph-side[data-s="1"] { text-align: right; }
.ph-side.on { border-top-color: var(--acc); background: var(--slab2); }
.ph-names { display: flex; flex-wrap: wrap; gap: 2px 10px; font: 600 16px/1.15 var(--f-cond); letter-spacing: .03em; }
.ph-side[data-s="1"] .ph-names { justify-content: flex-end; }
.ph-p { display: inline-flex; align-items: center; gap: 6px; min-width: 0; opacity: .72; white-space: nowrap; }
.ph-p.up { opacity: 1; color: var(--acc); }
.ph-p.gone { opacity: .35; text-decoration: line-through; }
.ph-p em { font: 600 10px/1 var(--f-cond); letter-spacing: .14em; text-transform: uppercase; color: var(--hud-mute); font-style: normal; }
.ph-c { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: inset 0 -2px 2px rgba(0, 0, 0, .35); }
.ph-grp { display: flex; align-items: center; gap: 8px; margin-top: 3px; font: 600 11px/1 var(--f-cond); letter-spacing: .16em; text-transform: uppercase; color: var(--hud-mute); }
.ph-side[data-s="1"] .ph-grp { justify-content: flex-end; }
.ph-pips { display: inline-flex; gap: 3px; }
.ph-pips i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--hud-mute); }
.ph-pips i.on { background: var(--acc); border-color: var(--acc); }
.ph-balls { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 6px; min-height: 18px; }
.ph-side[data-s="1"] .ph-balls { justify-content: flex-end; }
.pb { position: relative; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; flex: none; box-shadow: inset -2px -3px 4px rgba(0, 0, 0, .35), inset 2px 2px 3px rgba(255, 255, 255, .25); font-style: normal; }
.pb b { display: grid; place-items: center; width: 10px; height: 10px; border-radius: 50%; background: #f8f5ec; color: #16120e; font: 700 8px/1 var(--f-cond); }
.pb.next { outline: 2px solid var(--acc); outline-offset: 1px; }
.ph-mid { background: var(--slab); border-radius: var(--rad); padding: 6px 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.ph-mid b { font: 600 30px/1 var(--f-display); font-variant-numeric: tabular-nums; }
.ph-mid b i { font-style: normal; opacity: .4; margin: 0 4px; }
.ph-mid small { font: 600 10px/1.2 var(--f-cond); letter-spacing: .16em; text-transform: uppercase; color: var(--hud-mute); margin-top: 3px; white-space: nowrap; }
#pool-hud.solo .ph-mid { order: -1; }
#pool-hud.solo .ph-mid b { font-size: 20px; }

/* ---- status, call-outs, the between-racks banner */
.ph-status { position: absolute; top: calc(var(--gut) + var(--sa-t) + 92px); left: 50%; transform: translateX(-50%); background: var(--slab); border-radius: 999px; padding: 7px 16px;
  font: 600 14px/1 var(--f-cond); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; max-width: calc(100vw - 24px); overflow: hidden; text-overflow: ellipsis; }
.ph-status.mine { background: var(--acc); color: var(--acc-ink); }
.ph-status b { font-weight: 700; }
.ph-call { position: absolute; top: 30%; left: 50%; transform: translate(-50%, 10px) scale(.96); opacity: 0; transition: opacity .25s, transform .35s var(--ease-back);
  background: var(--slab2); border-radius: var(--rad); padding: 12px 22px; font: 600 italic 24px/1.15 var(--f-display); text-align: center; max-width: min(90vw, 520px); }
.ph-call.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.ph-call.bad { border-bottom: 3px solid var(--tvred); }
.ph-call.big { font-size: 32px; border-bottom: 3px solid var(--acc); }
.ph-call.ok { border-bottom: 3px solid #6fcf8f; }
.ph-banner { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); background: var(--slab2); border-radius: var(--rad); padding: 16px 28px; text-align: center; animation: fade .3s ease both; }
.ph-banner b { display: block; font: 600 italic 30px/1.1 var(--f-display); }
.ph-banner small { display: block; margin-top: 6px; font: 600 12px/1 var(--f-cond); letter-spacing: .16em; text-transform: uppercase; color: var(--hud-mute); }

/* ---- controls (only while it's my shot) */
.ph-power, .ph-spin, .ph-tools { display: none; }
#pool-hud.my-turn .ph-power, #pool-hud.my-turn .ph-spin, #pool-hud.my-turn .ph-tools { display: flex; }
#pool-hud .ph-tools { display: flex; }
#pool-hud:not(.my-turn) .ph-nudge { display: none; }
.ph-power { position: absolute; right: calc(var(--gut) + var(--sa-r)); bottom: calc(var(--gut) + var(--sa-b) + 34px); width: 64px; height: min(300px, 42vh); flex-direction: column; align-items: center; touch-action: none; cursor: ns-resize; }
.ph-track { position: relative; width: 22px; flex: 1; background: var(--slab); border-radius: 12px; overflow: visible; box-shadow: inset 0 0 0 1px var(--slab-line); }
.ph-fill { position: absolute; top: 0; left: 0; right: 0; height: 0; border-radius: 12px; background: linear-gradient(#6fcf8f, #e2b45a 60%, #d33a2c); }
.ph-knob { position: absolute; top: -16px; left: 50%; margin-left: -28px; width: 56px; height: 32px; border-radius: 16px; background: var(--acc); color: var(--acc-ink); display: grid; place-items: center;
  font: 700 12px/1 var(--f-cond); letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 4px 10px rgba(0, 0, 0, .4); }
.ph-power .ph-knob { transform: translateY(0); }
.ph-pct { position: absolute; bottom: -24px; font: 600 16px/1 var(--f-cond); }
.ph-spin { position: absolute; right: calc(var(--gut) + var(--sa-r) + 82px); bottom: calc(var(--gut) + var(--sa-b) + 30px); flex-direction: column; align-items: center; gap: 6px; }
.ph-face { position: relative; width: 92px; height: 92px; border-radius: 50%; touch-action: none; cursor: crosshair;
  background: radial-gradient(circle at 38% 32%, #ffffff, #eee9dc 55%, #a9a594); box-shadow: 0 0 0 3px var(--slab), 0 8px 18px rgba(0, 0, 0, .45); }
.ph-face::before, .ph-face::after { content: ''; position: absolute; background: rgba(0, 0, 0, .12); }
.ph-face::before { left: 50%; top: 12%; bottom: 12%; width: 1px; }
.ph-face::after { top: 50%; left: 12%; right: 12%; height: 1px; }
.ph-dot { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #3d6fc4; box-shadow: 0 0 0 2px #fff; transition: transform .08s; }
.ph-spin-l { font: 600 11px/1 var(--f-cond); letter-spacing: .16em; text-transform: uppercase; color: var(--hud-mute); }
.ph-tools { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--gut) + var(--sa-b)); gap: 4px; background: var(--slab); border-radius: var(--rad); padding: 4px; }
.ph-tools button { min-width: 44px; min-height: 40px; padding: 0 12px; border-radius: calc(var(--rad) - 2px); font: 600 14px/1 var(--f-cond); letter-spacing: .1em; text-transform: uppercase; }
.ph-tools button:hover, .ph-tools button:active { background: rgba(255, 255, 255, .1); }
.ph-nudge { font-size: 26px !important; }
body:not(.touch) .ph-nudge { display: none !important; }

/* ---- the end of the match */
.ph-final { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(6, 4, 3, .55); padding: 16px; z-index: 2; animation: fade .3s ease both; }
.pf-card { background: var(--paper) var(--grain); color: var(--ink); border-radius: 4px; padding: 22px 26px 20px; width: min(440px, 100%); text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, .55); }
.pf-card h2 { font-size: 34px; margin: 8px 0 14px; }
.pf-score { display: grid; gap: 6px; }
.pf-side { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border: 1px solid var(--rule); border-radius: 3px; }
.pf-side.won { border-color: var(--brass); background: rgba(196, 154, 60, .12); }
.pf-side b { font: 600 28px/1 var(--f-display); }
.pf-names { display: flex; flex-wrap: wrap; gap: 4px 12px; font: 600 17px/1.2 var(--f-cond); letter-spacing: .03em; text-align: left; }
.pf-names span { display: inline-flex; align-items: center; gap: 6px; }
.pf-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }

/* ---- phones */
@media (max-width: 760px) {
  .ph-top { gap: 3px; }
  .ph-side { padding: 6px 8px 7px; }
  .ph-names { font-size: 14px; gap: 1px 8px; }
  .ph-balls { gap: 2px; margin-top: 4px; }
  .pb { width: 14px; height: 14px; }
  .pb b { width: 8px; height: 8px; font-size: 6px; }
  .ph-mid { padding: 4px 8px; }
  .ph-mid b { font-size: 22px; }
  .ph-mid small { font-size: 9px; letter-spacing: .1em; }
  .ph-status { top: calc(var(--gut) + var(--sa-t) + 76px); font-size: 12px; padding: 6px 12px; }
  .ph-call { font-size: 19px; top: 34%; }
  .ph-call.big { font-size: 24px; }
  /* one column on the right: spin above the power bar, clear of the view switch */
  .ph-face { width: 70px; height: 70px; }
  .ph-power { width: 58px; height: min(220px, 30vh); }
  .ph-spin { right: calc(var(--gut) + var(--sa-r) - 4px); bottom: calc(var(--gut) + var(--sa-b) + 34px + min(220px, 30vh) + 30px); }
  .ph-tools { bottom: calc(var(--gut) + var(--sa-b) + 4px); }
}
@media (max-height: 520px) and (min-width: 521px) {
  .ph-status { top: auto; bottom: calc(var(--gut) + var(--sa-b) + 54px); }
  .ph-power { height: 52vh; }
}
/* a TV shows the table and the board, bigger */
body.tv #pool-hud .ph-top { width: min(1100px, 92vw); }
body.tv #pool-hud .ph-names { font-size: 24px; }
body.tv #pool-hud .pb { width: 26px; height: 26px; }
body.tv #pool-hud .pb b { width: 14px; height: 14px; font-size: 10px; }
body.tv #pool-hud .ph-mid b { font-size: 44px; }
body.tv #pool-hud .ph-status { top: calc(var(--gut) + 130px); font-size: 20px; }
body.tv.pool-on #tv > :not(#tv-lobby) { display: none !important; }