/* Single authoritative landscape HUD and dialog layout. Loaded last. */
#gameScreen{grid-template-rows:clamp(45px,12%,72px) minmax(0,1fr);overflow:hidden}
#gameScreen .match-hud{
 display:grid;grid-template-columns:clamp(30px,4.5vw,46px) minmax(0,1fr) clamp(80px,12vw,145px) minmax(0,1fr);
 gap:clamp(5px,.8vw,12px);align-items:center;justify-content:stretch;min-width:0;width:100%;height:100%;max-width:1480px;padding:0 clamp(3px,.65vw,10px)
}
#gameScreen #pauseButton{grid-column:1;grid-row:1;justify-self:center;align-self:center;position:relative;z-index:1;
 width:clamp(30px,4.5vw,44px);height:clamp(30px,4.5vw,44px);font-size:clamp(17px,2.3vw,22px)}
#gameScreen #oneCard{grid-column:2;grid-row:1}
#gameScreen .match-center{grid-column:3;grid-row:1;min-width:0;overflow:hidden}
#gameScreen #twoCard{grid-column:4;grid-row:1}
#gameScreen .opponent-card{min-width:0;width:100%;display:flex;gap:clamp(8px,1.2vw,15px);align-items:center;overflow:visible}
#gameScreen .opponent-card.right{justify-content:flex-end}
#gameScreen .player-token{width:clamp(28px,6dvh,47px);height:clamp(28px,6dvh,47px);
 flex:0 0 auto;position:relative;z-index:1;font-size:clamp(14px,3.4dvh,23px)}
#gameScreen .player-info{flex:1 1 auto;min-width:0;width:0}
#gameScreen .player-info strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
 font-size:clamp(8px,1.18vw,13px);line-height:1.15;letter-spacing:.025em}
#gameScreen .player-info small{display:block;margin:2px 0 0;color:#c5dbe1a8;font-size:clamp(6px,.72vw,9px)}
#gameScreen .ball-slots{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));align-items:center;gap:clamp(1px,.34vw,5px);
 max-width:calc(7 * 19px + 6 * 5px);width:100%;margin-top:clamp(2px,.55dvh,5px);min-width:0}
#gameScreen .opponent-card.right .ball-slots{margin-left:auto}
#gameScreen .ball-slot{position:relative;display:grid;place-items:center;aspect-ratio:1;width:100%;min-width:0;max-width:19px;
 border-radius:50%;border:1px solid #e4e9e9c9;color:#15191d;font:900 clamp(5.5px,.78vw,9px)/1 Arial,system-ui,sans-serif;
 background:radial-gradient(circle at 28% 20%,#fff6dd,var(--slot-color) 48%,var(--slot-color) 65%,#24222a);
 box-shadow:inset -1px -1px 2px #12141c75,0 1px 2px #0009;font-style:normal;text-shadow:0 0 .8px #fff;letter-spacing:-.07em}
#gameScreen .ball-slot.striped{background:linear-gradient(#f7f5ed 0 26%,var(--slot-color) 27% 72%,#f7f5ed 73% 100%)}
#gameScreen .ball-slot::before{content:'';position:absolute;z-index:0;width:65%;height:65%;border-radius:50%;background:#faf8f3e8}
#gameScreen .ball-slot{isolation:isolate}
#gameScreen .ball-slot::before{z-index:0}
#gameScreen .ball-number{position:relative;z-index:1;font:inherit;color:#161b21}
#gameScreen .ball-slot.preview{opacity:.51;filter:saturate(.6)}
#gameScreen .ball-slot.pocketed{opacity:.22;filter:grayscale(1)}
#gameScreen .match-center small{font-size:clamp(6px,.72vw,10px);letter-spacing:.045em}
#gameScreen .match-center strong{display:block;line-height:1.1;font-size:clamp(9px,1.4vw,18px);
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#gameScreen .match-time{margin-top:2px}
#gameScreen .match-arena{grid-template-columns:clamp(38px,7.3vw,90px) minmax(0,1fr) clamp(38px,7.3vw,90px);
 gap:clamp(3px,.65vw,12px);min-width:0}
#gameScreen.power-right .shot-rail{grid-column:3}
#gameScreen.power-right .tools-rail{grid-column:1}
#gameScreen .shot-rail,#gameScreen .tools-rail{min-width:0;max-width:100%;overflow:visible}
@media(max-height:370px) and (orientation:landscape){
 #gameScreen .match-hud{grid-template-columns:30px minmax(0,1fr) 79px minmax(0,1fr);gap:5px}
 #gameScreen .player-token{width:27px;height:27px;font-size:14px}
 #gameScreen .ball-slots{gap:2px}
 #gameScreen .ball-slot{font-size:clamp(5.5px,1.2vw,7px)}
 #gameScreen .match-center strong{font-size:10px}
}
@media(orientation:portrait) and (max-width:820px){
 /* A paused landscape game remains landscape when a phone is physically portrait. */
 #app:has(#gameScreen:not([hidden])) #settingsSheet{
  inset:auto;left:0;top:0;width:100dvh;height:100vw;
  transform-origin:top left;transform:rotate(90deg) translateY(-100%);
  padding:5px max(8px,env(safe-area-inset-bottom)) 5px max(8px,env(safe-area-inset-top))}
}

/* Match completion and solo-practice HUD. Both fit without scrollbars. */
#gameScreen[data-practice="true"] #twoCard,
#gameScreen[data-practice="true"] #ballsOne{display:none!important}
#gameScreen[data-practice="true"] .match-center{grid-column:3 / 5;justify-self:center}
#gameScreen .match-time::before{content:"TIME ";font:700 clamp(6px,.69vw,9px)/1 system-ui;letter-spacing:.06em;color:#c8ddcf;vertical-align:middle}
#gameScreen .match-result{
 position:absolute;z-index:7;top:49%;left:50%;transform:translate(-50%,-50%);
 width:min(440px,77%);max-height:86%;overflow:hidden;
 display:flex;flex-direction:column;align-items:center;justify-content:center;
 gap:clamp(3px,1.4dvh,12px);padding:clamp(12px,3dvh,25px);
 border:1px solid #d6bb7a88;border-radius:13px;text-align:center;
 background:linear-gradient(150deg,#1a3541f5,#102017f8);box-shadow:0 16px 55px #000d;color:#f6eedb;
}
#gameScreen .match-result[hidden],#gameScreen .controls-hint[hidden]{display:none!important}
#gameScreen .match-result>small{font-size:clamp(7px,.85vw,10px);font-weight:850;letter-spacing:.18em;color:#d4bf8b}
#gameScreen .match-result>strong{font:700 clamp(19px,3.5dvh,35px)/1.05 Georgia,serif;letter-spacing:.025em;max-width:100%;overflow-wrap:anywhere}
#gameScreen .match-result>span{font:700 clamp(9px,1.3dvh,12px) system-ui;letter-spacing:.07em;color:#d2dcd7}
#gameScreen .match-result-actions{display:flex;justify-content:center;gap:clamp(5px,1vw,12px);width:100%}
#gameScreen .match-result-actions button{min-width:0;min-height:clamp(29px,7dvh,42px);padding:6px clamp(10px,1.7vw,20px);
 border-radius:7px;border:1px solid #c7aa7380;background:#172a31;color:#f3ebdc;
 font:850 clamp(8px,1.1vw,12px) system-ui;letter-spacing:.05em;white-space:nowrap}
#gameScreen .match-result-actions .primary{background:#eacb90;color:#172e36}
#gameScreen .controls-hint{
 position:absolute;top:2%;left:50%;transform:translateX(-50%);z-index:4;pointer-events:none;
 max-width:min(440px,78%);padding:5px 9px;border:1px solid #d8bd8b80;border-radius:7px;
 background:#0e2532ed;color:#f9edd1;font:800 clamp(7px,1vw,10px)/1.3 system-ui;
 letter-spacing:.045em;text-align:center;text-shadow:0 1px 2px #000;
}
@media(max-height:370px){
 #gameScreen .match-result{top:51%;padding:7px 12px;gap:3px}
 #gameScreen .match-result>strong{font-size:17px}
 #gameScreen .match-result-actions button{min-height:27px}
 #gameScreen .controls-hint{top:0;padding:3px 7px}
}

/* A brief, nonblocking event cue; no permanent gameplay notifications. */
#gameScreen .table-toast[hidden]{display:none!important}
#gameScreen .table-toast{
 position:absolute;left:50%;top:clamp(38px,12%,62px);z-index:6;
 transform:translateX(-50%);max-width:min(92%,330px);
 border:1px solid #e2d19b91;border-radius:100px;
 background:#162e39ee;color:#fff6df;
 padding:clamp(4px,.8dvh,8px) clamp(12px,2vw,22px);
 font:850 clamp(9px,1.1vw,13px)/1.15 system-ui;
 letter-spacing:.07em;text-align:center;white-space:normal;
 box-shadow:0 7px 25px #0009;pointer-events:none;
 animation:table-toast-in .18s cubic-bezier(.2,.8,.2,1) both;
}
#gameScreen .table-toast[data-kind="foul"]{
 background:#473027ef;border-color:#e6a978;color:#ffe6c5;
}
@keyframes table-toast-in{
 from{opacity:0;transform:translate(-50%,-7px)}
 to{opacity:1;transform:translate(-50%,0)}
}
@media(prefers-reduced-motion:reduce){
 #gameScreen .table-toast{animation:none}
}

/* Prioritize an event briefly, then reveal the persistent placement guidance. */
#gameScreen .table-play-area:has(.table-toast:not([hidden])) .guide-badge{display:none!important}

/* Keep persistent guidance between the two left sights, not over a pocket.
   Short foul events sit below the top cushion and never share the same slot. */
#gameScreen .guide-badge.is-visible{
 left:30%;top:5px;transform:translateX(-50%);padding:4px 9px;
}
#gameScreen .table-toast{top:clamp(55px,20%,76px)}


/* One-handed full pull: reaching the final rail travel commits the shot.
   The highlight never occupies the table or changes the rail's hit target. */
#gameScreen .power-track.max-charged{border-color:#fae0a0;box-shadow:0 0 0 2px #edcc8752,inset 0 0 0 4px #121a29,0 4px 12px #0009}
#gameScreen .power-track.max-charged::after{
 content:'MAX';position:absolute;bottom:4px;left:0;right:0;z-index:1;
 font:900 clamp(7px,.83vw,10px)/1 system-ui;text-align:center;letter-spacing:.06em;
 color:#f9e8b9;pointer-events:none;text-shadow:0 1px #000;
}
/* During ball-in-hand, the aiming rail turns into two deliberate actions.
   No floating modal covers the cloth, pockets or the player's finger. */
#gameScreen #placementTools[hidden],#gameScreen #spinButton[hidden],
#gameScreen .aim-wheel-control[hidden]{display:none!important}
#gameScreen .placement-tools{
 width:100%;min-width:0;max-width:96px;min-height:0;
 display:flex;flex-direction:column;align-items:stretch;justify-content:center;
 gap:clamp(4px,1.15dvh,8px);padding:2px 0;
 color:#e9efeb;text-align:center;
}
#gameScreen .placement-tools-title{
 font:900 clamp(7px,.87vw,11px)/1.15 system-ui;letter-spacing:.055em;
 color:#e9d39e;overflow-wrap:anywhere;
}
#gameScreen .placement-tools button{
 display:flex;align-items:center;justify-content:center;gap:2px;
 width:100%;min-width:0;min-height:clamp(31px,8dvh,44px);
 padding:4px 2px;border:1px solid #dbc3919c;border-radius:8px;
 font:900 clamp(8px,1vw,12px)/1.1 system-ui;letter-spacing:.02em;
 touch-action:manipulation;
}
#gameScreen .placement-tools button span{font-size:clamp(12px,1.6vw,18px)}
#gameScreen .placement-confirm{background:#edcb87;color:#16342f;box-shadow:0 2px 11px #0006}
#gameScreen .placement-confirm:disabled{opacity:.35;cursor:not-allowed}
#gameScreen .placement-reset{background:#173344;color:#e8e2cf}
#gameScreen .placement-status{
 font:700 clamp(6px,.85vw,9px)/1.2 system-ui;letter-spacing:.04em;
 color:#bec9cd;white-space:normal;overflow-wrap:anywhere;
}
#gameScreen[data-placing="true"] .shot-rail{opacity:.26;pointer-events:none}
#gameScreen[data-placing="true"] .guide-badge.is-visible{
 left:30%;top:5px;transform:translateX(-50%);
 max-width:65%;padding:4px 8px;letter-spacing:.035em;
}
@media(max-height:370px){
 #gameScreen .placement-tools{gap:3px}
 #gameScreen .placement-tools button{min-height:30px;padding:3px 1px}
 #gameScreen .placement-tools-title{font-size:7px}
 #gameScreen .placement-status{font-size:6px}
}
@media(prefers-reduced-motion:reduce){#gameScreen .power-track{transition:none}}

@media(max-width:650px){
 #gameScreen .placement-tools .place-label{display:none}
 #gameScreen .placement-tools button span[aria-hidden]{font-size:20px}
}

#gameScreen #gameCanvas:focus-visible{outline:none}

/* P3: authentic physical-event receipt and legal-eight warm light, no scrolling. */
#gameScreen .match-result .result-last-shot[hidden]{display:none!important}
#gameScreen .match-result .result-last-shot{display:flex;align-items:center;justify-content:center;gap:8px;
 max-width:100%;padding:clamp(4px,1dvh,8px) 9px;border:1px solid #e8c78952;
 border-radius:99px;background:#ffe5aa0e;color:#f9dfad;
 font:800 clamp(8px,1dvh,11px)/1.2 system-ui;letter-spacing:.07em}
#gameScreen .result-eight{flex:none;display:grid;place-items:center;width:clamp(16px,3.1dvh,22px);
 aspect-ratio:1;border:1px solid #fbf3e3;border-radius:50%;background:radial-gradient(circle at 30% 20%,#53545a,#121419 75%);
 color:#fffef7;font:800 clamp(10px,1.8dvh,13px)/1 system-ui;box-shadow:0 2px 5px #0008}
#gameScreen .match-result[data-finish="clean"]{border-color:#efce86b3;
 box-shadow:0 17px 58px #000d,inset 0 1px #fff7cd36}
#gameScreen .match-result[data-finish="foul"]{border-color:#d0ad927c}
#gameScreen #tableArea[data-finish-spot="yes"]:has(.match-result:not([hidden]))::after{
 content:"";position:absolute;z-index:3;pointer-events:none;left:var(--finish-x,50%);top:var(--finish-y,50%);
 width:clamp(25px,7vw,65px);aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);
 background:radial-gradient(circle,#fff1c260 0%,#f4d48d22 36%,transparent 70%);
 animation:finish-glow .72s ease-out both}
@keyframes finish-glow{from{opacity:0;scale:.6}45%{opacity:1}to{opacity:.52;scale:1}}
@keyframes finish-card-arrive{from{opacity:0;transform:translate(-50%,-47%) scale(.975)}
 to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
#gameScreen .match-result:not([hidden]){animation:finish-card-arrive .3s ease-out both}
@media(max-height:370px){
 #gameScreen .match-result .result-last-shot{padding:2px 7px;font-size:8px}
 #gameScreen .result-eight{width:15px;font-size:9px}
 #gameScreen .match-result{gap:2px}
 #gameScreen .match-result-actions button{padding:5px clamp(7px,1vw,12px)}
}
@media(prefers-reduced-motion:reduce){
 #gameScreen .match-result:not([hidden]),#gameScreen #tableArea[data-finish-spot="yes"]::after{animation:none}
}