/* Match HUD refinements. Loaded last: shot clock, turn recap and banner, honest
   ball trays, mute control and aim readout. Pure presentation. */
:root{--hud-gold:#f1d9a1;--hud-ink:#fff6e0;--hud-warn:#ff9a72;--hud-you:#8fe3b6;--hud-rival:#9cc8ff}

/* --- layout: HUD / recap / arena ------------------------------------- */
#gameScreen.game-screen{grid-template-rows:clamp(46px,11%,72px) auto minmax(0,1fr)}
#gameScreen .match-hud{grid-row:1;grid-template-columns:auto minmax(0,1fr) clamp(138px,21vw,252px) minmax(0,1fr)}
#gameScreen .turn-recap{grid-row:2}
#gameScreen .match-arena{grid-row:3}
#gameScreen .hud-controls{grid-column:1;grid-row:1;display:flex;align-items:center;gap:clamp(4px,.7vw,8px)}
#gameScreen .hud-controls .hud-menu{position:static;grid-column:auto;grid-row:auto;
 width:clamp(30px,4.4vw,42px);height:clamp(30px,4.4vw,42px);padding:0;display:grid;place-items:center;
 transition:transform .12s ease,filter .12s ease,border-color .12s}
#gameScreen .hud-controls .hud-menu:hover{filter:brightness(1.12);border-color:#e7f3f8aa}
#gameScreen .hud-controls .hud-menu:active{transform:translateY(1px) scale(.97)}
#gameScreen .hud-controls .hud-menu:focus-visible,#gameScreen .aim-wheel-control>button:focus-visible,
#gameScreen .cueball-button:focus-visible{outline:2px solid var(--hud-gold);outline-offset:2px}
#gameScreen .hud-mute svg{width:62%;height:62%;fill:#c9f0dc;stroke:#c9f0dc;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#gameScreen .hud-mute .mute-waves{fill:none}
#gameScreen .hud-mute .mute-slash{fill:none;stroke:#ffb59b;display:none}
#gameScreen .hud-mute[data-muted="true"] .mute-waves{display:none}
#gameScreen .hud-mute[data-muted="true"] .mute-slash{display:block}
#gameScreen .hud-mute[data-muted="true"]{color:#ffb59b;border-color:#e9a28b88}
#gameScreen .hud-mute[data-muted="true"] .mute-body{fill:#e7ad98;stroke:#e7ad98}

/* --- centre column: turn label + the shot clock as the primary timer ---- */
#gameScreen .match-center{display:flex;align-items:center;justify-content:center;gap:clamp(6px,1vw,14px);overflow:visible}
#gameScreen .match-center .center-text{min-width:0;text-align:center}
#gameScreen .match-center .center-text strong{font-size:clamp(10px,1.45vw,18px)}
#gameScreen .match-time{font-size:clamp(7px,.78vw,9.5px);letter-spacing:.1em;color:#a9bfc8;margin-top:1px;opacity:.88}
#gameScreen .match-time::before{font-size:inherit;color:#8fa9b2}
#gameScreen .shot-clock{--clock-progress:100%;position:relative;flex:none;display:grid;place-items:center;
 min-width:clamp(40px,5.4vw,66px);height:clamp(30px,7.4dvh,50px);padding:0 clamp(5px,.8vw,10px);
 font:800 clamp(20px,5.3dvh,34px)/1 ui-monospace,SFMono-Regular,Consolas,monospace;font-variant-numeric:tabular-nums;
 color:var(--hud-ink);background:linear-gradient(#17304a,#0d1b2d);border:1.5px solid #cdb783;border-radius:10px;
 box-shadow:inset 0 1px #ffffff2e,0 4px 12px #0009;text-shadow:0 1px 3px #000a;overflow:hidden;
 transition:opacity .2s,border-color .2s,background .2s}
#gameScreen .shot-clock::after{content:'';position:absolute;left:0;bottom:0;height:3px;width:var(--clock-progress);
 background:linear-gradient(90deg,#9be6c1,#e9d28a);transition:width .25s linear}
#gameScreen .shot-clock[hidden]{display:none}
#gameScreen .shot-clock.is-idle{opacity:.5}
#gameScreen .shot-clock.clock-warning{color:#fff1e8;background:linear-gradient(#8d3a2c,#5a1f17);border-color:#ffb08c;
 animation:clock-pulse 1s ease-in-out infinite}
#gameScreen .shot-clock.clock-warning::after{background:#ffb08c}
@keyframes clock-pulse{50%{box-shadow:inset 0 1px #ffffff2e,0 0 16px #ff7a5aa6,0 4px 12px #0009}}
#gameScreen[data-practice="true"] .shot-clock,#gameScreen[data-timed="false"] .shot-clock{display:none}

/* --- persistent last-shot recap ---------------------------------------- */
#gameScreen .turn-recap{justify-self:center;max-width:min(94%,760px);margin:clamp(1px,.4dvh,4px) 0 clamp(1px,.4dvh,3px);
 padding:clamp(2px,.45dvh,5px) clamp(10px,1.6vw,18px);border-radius:99px;
 font:700 clamp(9px,1.25vw,13px)/1.25 system-ui,sans-serif;letter-spacing:.015em;color:#ecf2ee;
 background:linear-gradient(90deg,#10253a00,#10253ad9 12%,#10253ad9 88%,#10253a00);
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;z-index:3;
 text-shadow:0 1px 2px #000a;animation:recap-in .25s ease-out both}
#gameScreen .turn-recap[hidden]{display:none}
#gameScreen .turn-recap[data-tone="foul"]{color:#ffd9c2}
@keyframes recap-in{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:none}}

/* --- turn chip: a slim pill docked above the table. It never covers play. --- */
#gameScreen .turn-banner{position:absolute;z-index:9;left:50%;top:0;transform:translate(-50%,0);
 display:flex;flex-direction:row;align-items:center;gap:8px;pointer-events:none;white-space:nowrap;
 padding:3px 12px;border-radius:99px;max-width:92%;
 background:#0b1727d9;border:1px solid #cdb78388;box-shadow:0 4px 14px #0007}
#gameScreen .turn-banner[hidden]{display:none}
#gameScreen .turn-banner strong{font:800 clamp(10px,1.7dvh,13px)/1.1 system-ui,sans-serif;letter-spacing:.1em;color:var(--hud-ink)}
#gameScreen .turn-banner small{font:800 clamp(8px,1.3dvh,10px) system-ui;letter-spacing:.14em;color:var(--hud-gold);order:2}
#gameScreen .turn-banner[data-side="you"]{border-color:#7fdcae99}
#gameScreen .turn-banner[data-side="you"] small{color:var(--hud-you)}
#gameScreen .turn-banner[data-side="rival"]{border-color:#8eb9ec99}
#gameScreen .turn-banner[data-side="rival"] small{color:var(--hud-rival)}
#gameScreen .turn-banner[data-kind="foul"] small{color:var(--hud-warn)}
#gameScreen .turn-banner.is-in{animation:banner-life 1.9s cubic-bezier(.2,.8,.2,1) both}
@keyframes banner-life{
 0%{opacity:0;transform:translate(-50%,-8px)}
 12%{opacity:1;transform:translate(-50%,0)}
 82%{opacity:1;transform:translate(-50%,0)}
 100%{opacity:0;transform:translate(-50%,-4px)}
}
#gameScreen .table-toast[data-kind="hint"]{background:#10283eef;border-color:#b9d8ef99;color:#e8f4ff;max-width:min(94%,520px);letter-spacing:.05em}

/* --- ball trays: neutral open state, real groups, a home for the 8 ----- */
#gameScreen .ball-slots{grid-template-columns:repeat(7,minmax(0,1fr)) minmax(0,1fr);
 max-width:calc(8 * 23px + 6 * 5px + 9px);column-gap:clamp(1px,.34vw,5px)}
#gameScreen .ball-slot{max-width:23px;font-size:clamp(5.5px,.82vw,9px)}
#gameScreen .ball-slots .eight-slot{margin-left:clamp(3px,.6vw,9px)}
#gameScreen .ball-slot.ghost{background:transparent;border:1.5px dashed #9fb4c58f;box-shadow:none;opacity:1;filter:none}
#gameScreen .ball-slot.ghost::before{display:none}
#gameScreen .ball-slots[data-group="open"]{position:relative}
#gameScreen .ball-slot.assigned{opacity:1;filter:none}
#gameScreen .ball-slot.assigned.pocketed{opacity:.22;filter:grayscale(1)}
#gameScreen .ball-slot.just-assigned{animation:slot-flip .5s cubic-bezier(.2,.9,.25,1.2) both;animation-delay:calc(var(--slot-index,0) * 45ms)}
@keyframes slot-flip{from{opacity:0;transform:scale(.4) rotate(-90deg)}to{opacity:1;transform:none}}
#gameScreen .ball-slot.eight-slot{--slot-color:#191918;border-color:#8c98a6}
#gameScreen .ball-slot.eight-slot::before{background:#eef0ee}
#gameScreen .ball-slot.eight-slot[data-state="inactive"]{opacity:.34;filter:grayscale(.6)}
#gameScreen .ball-slot.eight-slot[data-state="active"]{opacity:1;filter:none;border:2px solid var(--hud-gold);
 box-shadow:0 0 0 2px #f1d9a14d,0 0 14px #f4d78d99;animation:eight-glow 1.2s ease-in-out infinite}
#gameScreen .ball-slot.eight-slot[data-state="pocketed"]{opacity:1;filter:none;border:2px solid #9be6c1;box-shadow:0 0 12px #9be6c199}
@keyframes eight-glow{50%{box-shadow:0 0 0 3px #f1d9a166,0 0 20px #ffe29fcc}}
#gameScreen .player-info small{letter-spacing:.06em}
#gameScreen .opponent-card.playing .player-info strong{color:#fffbe9}
#gameScreen .opponent-card:not(.playing) .player-info{opacity:.82}
#gameScreen .opponent-card .player-info{transition:opacity .25s}

/* --- fine aim: readable value, moving grooves ---------------------------- */
#gameScreen .aim-readout{display:block;font:800 clamp(8px,.95vw,11px)/1 ui-monospace,SFMono-Regular,Consolas,monospace;
 color:#f6e5b5;letter-spacing:.02em;min-height:1em;font-variant-numeric:tabular-nums;text-shadow:0 1px 3px #000}
#gameScreen .aim-wheel{background-position:0 var(--wheel-turn,0px)}
#gameScreen .aim-wheel-control>button{min-width:44px;min-height:32px;transition:transform .1s,filter .1s}
#gameScreen .aim-wheel-control>button:active:not(:disabled){transform:scale(.94);filter:brightness(1.2)}
#gameScreen .aim-wheel-control>button:disabled{opacity:.45}

/* Space-pull on the keyboard shares the rail's tension styling; make the
   readout unmistakable while charging. */
#gameScreen .shot-rail .power-track.charging ~ .power-readout{font-size:clamp(12px,1.5vw,16px)}

@media (max-height:440px){
 #gameScreen.game-screen{grid-template-rows:42px auto minmax(0,1fr)}
 #gameScreen .match-hud{grid-template-columns:auto minmax(0,1fr) clamp(118px,24vw,170px) minmax(0,1fr)}
 #gameScreen .hud-controls .hud-menu{width:30px;height:30px}
 #gameScreen .shot-clock{height:30px;min-width:38px;font-size:19px;border-radius:8px}
 #gameScreen .turn-recap{font-size:9px;padding:1px 10px;margin:0}
 #gameScreen .aim-readout{font-size:8px}
}
@media (max-height:350px){
 #gameScreen.game-screen{grid-template-rows:38px auto minmax(0,1fr)}
 #gameScreen .shot-clock{height:26px;min-width:34px;font-size:16px}
 #gameScreen .ball-slots .eight-slot{margin-left:2px}
}
@media (prefers-reduced-motion:reduce){
 #gameScreen .turn-banner.is-in,#gameScreen .turn-recap,#gameScreen .ball-slot.just-assigned,
 #gameScreen .ball-slot.eight-slot[data-state="active"],#gameScreen .shot-clock.clock-warning{animation:none}
 #gameScreen .shot-clock::after{transition:none}
}

/* The table is focusable for keyboard play; keep its focus mark quiet. */
#gameScreen #gameCanvas:focus{outline:none}
#gameScreen #gameCanvas:focus-visible{outline:none}

/* --- Potted balls roll out of their hole, along an arc, and into the owner's tray --- */
#gameScreen .flight-layer{position:absolute;inset:0;pointer-events:none;z-index:6;overflow:visible}
#gameScreen .flight-ball{position:absolute;left:0;top:0;border-width:1px;font-weight:800;
 box-shadow:0 6px 10px #0009,0 1px 2px #000b,inset -2px -3px 5px #0006;will-change:transform,opacity}
#gameScreen .ball-slot.slot-land{animation:slot-land .6s cubic-bezier(.2,.9,.25,1.3)}
@keyframes slot-land{0%{transform:scale(1)}28%{transform:scale(1.5);filter:brightness(1.6) drop-shadow(0 0 8px #f1d9a1)}100%{transform:scale(1)}}

/* --- the match room takes its colour from the hall --- */
#gameScreen.game-screen,#gameScreen.game-screen.entering::before{background:
 radial-gradient(ellipse 66% 62% at 48% 52%,var(--room-aura,#25456b) 0%,transparent 78%),
 radial-gradient(ellipse 130% 80% at 50% 118%,#00000066,transparent 70%),
 linear-gradient(180deg,var(--room-wall,#101a2a),#070b12 135%)}
#gameScreen.game-screen::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
 background:radial-gradient(ellipse 90% 80% at 50% 50%,transparent 55%,#00000066 100%)}

/* nine-ball trays: nine slots, no separate 8 */
#gameScreen .ball-slots[data-game="nine"]{grid-template-columns:repeat(9,minmax(0,1fr));max-width:calc(9 * 23px + 8 * 4px)}
#gameScreen .ball-slots[data-game="nine"][data-count="10"]{grid-template-columns:repeat(10,minmax(0,1fr));max-width:calc(10 * 21px + 9 * 3px)}

/* A contextual badge replaces the one-time controls hint while it is showing. */
#gameScreen .table-play-area:has(.guide-badge.is-visible) .controls-hint{display:none}

/* --- player tokens are circles; the ring around the active one is its shot clock --- */
#gameScreen .player-token{border-radius:50%;border-width:2px;
 box-shadow:0 3px 10px #0008,inset 0 -5px 8px #0004,inset 0 2px 3px #fff6}
#gameScreen .opponent-card.playing .player-token::after{inset:-6px;border-radius:50%;
 -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3.5px));
 mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3.5px))}
#gameScreen .opponent-card:not(.playing) .player-token{filter:saturate(.7) brightness(.82)}

/* watching an exhibition: the player's controls step back so the table is the show */
#gameScreen[data-exhibition="true"] .shot-rail,#gameScreen[data-exhibition="true"] .tools-rail{opacity:.2;pointer-events:none;filter:saturate(.5)}

/* the turn chip and the placement hint share the top edge; the hint waits its turn */
#gameScreen .table-play-area:has(.turn-banner:not([hidden])) .guide-badge{display:none!important}

/* last-shot replay button sits with pause and mute */
#gameScreen .hud-replay svg{width:62%;height:62%;fill:none;stroke:#c9f0dc;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#gameScreen .hud-replay[hidden]{display:none}
#gameScreen .hud-replay.on{box-shadow:0 0 0 2px #f1d9a1aa,0 3px 10px #0008}

/* official-rules controls: shot-mode chips and the referee's choice prompt */
#gameScreen .shot-modes{position:absolute;left:8px;bottom:8px;z-index:5;display:flex;gap:6px;pointer-events:none}
#gameScreen .mode-chip{pointer-events:auto;min-height:32px;padding:0 12px;border-radius:99px;border:1px solid #cdb78388;background:#0b1727d9;color:#f2e6c4;font:800 10px system-ui;letter-spacing:.1em;cursor:pointer}
#gameScreen .mode-chip kbd{margin-left:4px;opacity:.6;font:inherit}
#gameScreen .mode-chip[aria-pressed="true"]{background:linear-gradient(#f2dcab,#d6b36e);color:#1c2b23;border-color:#f3deb0}
#gameScreen .mode-chip[hidden]{display:none}
#gameScreen .choice-prompt{position:absolute;z-index:8;left:50%;top:18%;transform:translateX(-50%);width:min(88%,380px);padding:12px 16px;border-radius:14px;
 background:linear-gradient(160deg,#16314af5,#0b1727f7);border:1.5px solid #cdb783;box-shadow:0 14px 44px #000b;text-align:center}
#gameScreen .choice-prompt[hidden]{display:none}
#gameScreen .choice-prompt b{display:block;font:700 16px Georgia,serif;color:var(--hud-ink,#f2ede2)}
#gameScreen .choice-prompt p{margin:4px 0 10px;font:500 12px/1.4 system-ui;color:#c9d6dc}
#gameScreen .choice-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
#gameScreen .choice-actions button{min-height:36px;padding:0 14px;border-radius:99px;border:1px solid #ffffff2a;background:#ffffff10;color:#f2ede2;font:800 11px system-ui;letter-spacing:.06em;cursor:pointer}
#gameScreen .choice-actions button:first-child{background:linear-gradient(#f2dcab,#d6b36e);color:#1c2b23;border-color:#f3deb0}
@media (max-height:420px){#gameScreen .choice-prompt{top:8%;padding:8px 12px}#gameScreen .choice-prompt p{margin:2px 0 6px;font-size:11px}}

/* straight pool shows points instead of ball trays */
#gameScreen .ball-slots[data-game="straight"]{display:none}

/* --- one clock: the ring on the active token (calm green, amber at 10 s, red at 5 s); the number is for screen readers --- */
#gameScreen .shot-clock,#gameScreen .shot-clock[hidden]{position:absolute;width:1px;height:1px;min-width:0;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0;opacity:0;pointer-events:none;display:block}
#gameScreen .opponent-card[data-urgency="warn"].playing .player-token::after{background:conic-gradient(#f1c46a 0 var(--turn-progress,100%),#30415a var(--turn-progress,100%) 100%)}
#gameScreen .opponent-card[data-urgency="late"].playing .player-token::after{background:conic-gradient(#ff7a5a 0 var(--turn-progress,100%),#30415a var(--turn-progress,100%) 100%)}
#gameScreen .opponent-card[data-urgency="warn"].playing .player-token,#gameScreen .opponent-card[data-urgency="late"].playing .player-token{font-variant-numeric:tabular-nums}
#gameScreen .opponent-card[data-urgency="late"].playing .player-token{animation:clock-pulse 1s ease-in-out infinite}