/* Cohesive landscape match, reliable desktop lobby and reduced clubhouse chrome. */
/* A shot should visibly load like a compressed spring, not just move a label. */
.shot-rail .power-track::before{content:'';position:absolute;z-index:2;inset:3px;border-radius:9px;
 pointer-events:none;transform-origin:top center;transform:scaleY(var(--tension,0));
 opacity:var(--tension,0);background:linear-gradient(#fff4c047,#ffba5760 66%,#ff934633);
 box-shadow:inset 0 0 15px #ffe3a66b;will-change:transform,opacity}
.shot-rail .power-track.charging .pull-handle{
 box-shadow:inset 0 1px 4px #fff9,0 0 var(--glow,4px) #f5c979ad,0 4px 10px #000b}
.shot-rail .power-track.armed .pull-handle{border-color:#fff6d7;
 box-shadow:inset 0 1px 5px #fff,0 0 var(--glow,17px) #ffd983ba,0 4px 10px #000b}
.shot-rail .power-track.charging + .power-readout{color:#fff5d7;
 text-shadow:0 0 12px #ffc274b8}

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.game-screen{grid-template-rows:clamp(48px,10dvh,76px) minmax(0,1fr);min-width:0;min-height:0}
.match-hud{grid-template-columns:clamp(30px,4vw,42px) minmax(0,1fr) minmax(100px,154px) minmax(0,1fr);max-width:1560px;gap:clamp(4px,.8vw,12px)}
.match-time{display:block;font:700 clamp(9px,1vw,12px)/1.3 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.12em;color:#cbdbe0;margin-top:3px;font-variant-numeric:tabular-nums}
.opponent-card .player-token{position:relative;isolation:isolate}
.opponent-card.playing .player-token{outline:0}
.opponent-card.playing .player-token::after{content:'';position:absolute;inset:-6px;border-radius:17px;
 background:conic-gradient(#9be6c1 0 var(--turn-progress,100%),#30415a var(--turn-progress,100%) 100%);
 -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3px));
 mask:radial-gradient(farthest-side,transparent calc(100% - 3.5px),#000 calc(100% - 3px));pointer-events:none}
#gameScreen .match-arena{min-height:0;min-width:0}
#gameScreen .table-play-area{overflow:visible;isolation:isolate}
#gameScreen .tools-rail{justify-content:space-evenly}
.return-ball{position:relative;z-index:3;flex:none;display:grid;place-items:center;
 width:clamp(7px,.72vw,11px);height:clamp(7px,.72vw,11px);border:1px solid #fff9;
 border-radius:50%;font:700 6px/1 Arial,sans-serif;color:#15171c;font-variant-numeric:tabular-nums;
 background:radial-gradient(circle at 24% 22%,#fff5e2,var(--ball-color) 35%,var(--ball-color) 63%,#151b28);
 box-shadow:0 1px 2px #000b;will-change:transform;transform:translateZ(0)}
.return-ball.striped{background:linear-gradient(#f6f2ea 24%,var(--ball-color) 25% 73%,#f6f2ea 74%)}
#gameScreen.leaving{background:transparent;pointer-events:none}
#gameScreen.leaving .match-hud,#gameScreen.leaving .shot-rail,#gameScreen.leaving .tools-rail{opacity:0;transition:opacity .3s ease}
#gameScreen.leaving .table-play-area{visibility:hidden}
#app.leaving-match .room{filter:brightness(.8);transition:filter 1s ease}
#app.leaving-match .masthead,#app.leaving-match .room-details,
#app.leaving-match .lobby-panel{animation:clubhouse-return .8s .25s both}
@keyframes clubhouse-return{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* Explicit desktop composition keeps the lobby present, legible and reachable. */
@media(min-width:900px) and (min-height:650px){
 #app:not(.entering-match):not(.leaving-match) .lobby-panel{
  display:block;visibility:visible;left:auto;right:clamp(22px,3.4vw,64px);bottom:clamp(22px,4dvh,50px);
  width:clamp(335px,30vw,435px);max-height:58dvh;overflow:auto;
  padding:12px 21px 18px;background:linear-gradient(155deg,#101a14ed,#050b09f6);
  border:1px solid #d1b8884a;border-radius:14px;box-shadow:0 22px 75px #0009, inset 0 1px #fff1d213;
  backdrop-filter:blur(15px)}
 .lobby-inner{max-width:none}
 .lobby-panel .modes{gap:16px;padding:9px 0 13px;justify-content:space-between}
 .lobby-panel .modes button{font-size:9px;letter-spacing:.055em}
 .lobby-panel .actions button{height:56px}
 .ambient{left:41%;width:63%;top:18%;height:45%;max-width:900px}
 .room-details{left:5%;top:37%}
 .room-switch{left:calc(100% + 8px)}
}
/* Mobile stays in a true landscape HUD, including devices held in portrait.
   The screen is rotated visually, not blocked behind an orientation prompt. */
@media (orientation:portrait) and (max-width:820px){
 #gameScreen{inset:auto;left:0;top:0;width:100dvh;height:100vw;
  transform-origin:top left;transform:rotate(90deg) translateY(-100%);
  padding:4px max(8px,env(safe-area-inset-bottom)) 4px max(8px,env(safe-area-inset-top))}
 #gameScreen .match-hud{grid-template-columns:30px minmax(0,1fr) minmax(95px,130px) minmax(0,1fr)}
 #gameScreen .table-play-area{max-height:none}
}
/* Short landscape lobby cannot intercept room switching on the left. */
@media (max-height:480px) and (orientation:landscape){
 .lobby-panel{pointer-events:none}
 .lobby-inner{pointer-events:auto;margin-left:auto;margin-right:0;width:min(68%,490px)}
 .room-details{z-index:7}
 .room-switch{z-index:8}
}
@media (max-height:440px) and (orientation:landscape){
 #gameScreen{grid-template-rows:43px minmax(0,1fr)}
 #gameScreen .match-hud{grid-template-columns:29px minmax(0,1fr) 94px minmax(0,1fr)}
 .return-ball{width:8px;height:8px}
}
@media (prefers-reduced-motion:reduce){
 #app.leaving-match .masthead,#app.leaving-match .room-details,#app.leaving-match .lobby-panel{animation:none}
 #gameScreen.leaving .match-hud,#gameScreen.leaving .shot-rail,#gameScreen.leaving .tools-rail{transition:none}
}
/* Readable clubhouse composition without overlapping the featured table. */
@media(min-width:900px) and (min-height:650px){
 #app:not(.entering-match):not(.leaving-match) .ambient{left:54%;width:57%;top:15%;height:43%;max-width:900px}
 #app:not(.entering-match):not(.leaving-match) .room-details{top:28%;left:clamp(24px,3.5vw,58px);width:min(19vw,230px)}
 #app .room-details h1{font-size:clamp(30px,3.2vw,43px);line-height:1.04;overflow-wrap:break-word}
 #app .room-switch{left:auto;position:relative;top:auto;margin-top:9px;flex-direction:row}
 #app .room-switch span{writing-mode:horizontal-tb}
}
@media(max-height:480px) and (orientation:landscape){
 #app:not(.entering-match):not(.leaving-match) .room-details{left:2.8%;top:26%;width:clamp(110px,22vw,195px)}
 #app .room-details h1{white-space:normal;overflow-wrap:normal;max-width:100%;font-size:clamp(16px,2.75vw,25px);line-height:1.05;margin:4px 0}
 #roomEyebrow{font-size:0;letter-spacing:0;line-height:1}
 #roomEyebrow:before{content:attr(data-short);font-size:8px;letter-spacing:.10em}
 #app .room-switch{position:relative;top:auto;left:auto;right:auto;margin-top:6px;flex-direction:row;gap:6px;justify-content:flex-start}
 #app .room-switch button{width:28px;height:28px}
 #app .room-switch span{writing-mode:horizontal-tb}
}
@media(max-height:350px) and (orientation:landscape){
 #gameScreen .match-hud{gap:6px;grid-template-columns:29px minmax(0,1fr) 88px minmax(0,1fr)}
 #gameScreen .player-info strong{font-size:9px;letter-spacing:0}
 #gameScreen .player-token{width:27px;height:27px;font-size:15px}
 #gameScreen .ball-slot{width:8px}
 #gameScreen .ball-slots{gap:2px;margin-top:2px}
 #gameScreen .match-time{font-size:9px}
}
#app .room-switch{pointer-events:auto}
#app .lobby-inner button:not(:disabled),#app .hud-menu{touch-action:manipulation}
#app .power-track{min-width:40px}

/* Larger usable mobile hit targets without creating a scrolling HUD. */
@media(max-height:480px) and (orientation:landscape){
 #app .modes{padding:3px 0}
 #app .modes button{min-height:34px;display:flex;align-items:center;padding:2px 0 7px}
 #app .actions button{height:44px}
}
@media(max-width:820px) and (orientation:portrait){
 #app:not(.entering-match):not(.leaving-match) .room-details{right:22px}
 #app .room-switch{left:auto;right:6px;top:-16px;gap:7px}
 #app .room-switch button{width:44px;height:44px}
 #app .header-right .round{width:44px;height:44px}
}
/* Release notices appear only if an updated worker becomes available midmatch. */
.update-notice[hidden]{display:none!important}
.update-notice{position:absolute;top:max(8px,env(safe-area-inset-top));left:50%;z-index:60;transform:translateX(-50%);
 display:flex;align-items:center;gap:12px;padding:9px 12px;background:#111e2fe8;border:1px solid #d7c09075;
 border-radius:10px;box-shadow:0 6px 20px #0008;color:#f2e7d5;font-size:11px}
.update-notice button{border:1px solid #d6bd88;background:#ddc18d;color:#13283b;border-radius:5px;padding:6px 9px;font-size:10px;font-weight:800}

/* Keep room-specific framed art away from the foreground heading. */
@media(min-width:900px) and (min-height:650px){#app .frames{top:15%}}
@media(max-height:480px) and (orientation:landscape){#app .frames{display:none}}

/* Recoverability: contextual instructions only when controls cannot fire. */
#gameScreen .guide-badge.is-visible{display:block;position:absolute;top:6px;left:50%;z-index:5;
 padding:7px 12px;border:1px solid #ffe4a481;border-radius:99px;
 background:#10253ae8;color:#fff2d5;text-align:center;
 font:800 clamp(8px,.8vw,10px)/1.2 system-ui;letter-spacing:.06em;
 max-width:90%;white-space:normal;pointer-events:none}

/* Room mastery reads permanent authentic records, never disables room choices. */
#app .room-mastery[hidden]{display:none!important}
#app .room-mastery{display:flex;flex-direction:column;gap:3px;max-width:min(240px,100%);
 margin:8px 0 0;padding:6px 9px;border-left:2px solid #dcbd7d;
 background:linear-gradient(90deg,#2e402bc4,#12231922);
 font:800 clamp(8px,.85vw,10px)/1.2 system-ui;letter-spacing:.09em;color:#f2dbab;
 text-shadow:0 1px 2px #000c}
#app .room-mastery span{display:flex;justify-content:space-between;gap:10px;white-space:nowrap}
#app .room-mastery b{color:#f9ecd0}
#app .room-mastery small{font:700 clamp(7px,.7vw,9px)/1.2 system-ui;
 color:#e4dec8;letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#app .room-mastery[data-mastered="true"]{border-color:#80d9ae;color:#adf2d0}
@media(max-height:480px){
 #app .room-mastery{max-width:100%;margin-top:4px;padding:4px 6px;gap:0}
 #app .room-mastery small{font-size:7px}
}
@media(max-height:350px){
 #app .room-details:has(.room-mastery:not([hidden])) #roomDescription{display:none}
 #app .room-mastery{font-size:7px}
 #app .room-mastery small{display:none}
}