/* Puck-only cabinet and viewport composition; shared fullscreen/audio stay intact. */
:root{--ink:#173a46;--paper:#f2e8d6;--lake:#096b76;--line:#c1ad89}
body{background:radial-gradient(ellipse at 75% 0,#fff9e6,transparent 60%),repeating-linear-gradient(100deg,#c6ab8112 0 1px,transparent 1px 7px),#e9ddc8}
.site-head{padding-block:12px}.brand{font-size:23px}.introduction{padding-top:24px}.introduction h1{font-family:Reading,Tahoma,sans-serif;font-size:clamp(62px,7vw,98px);font-weight:1000;letter-spacing:-.075em;line-height:.9}.introduction .eyebrow{color:#80432c}.introduction .lead{font:900 24px/1.25 Reading,Tahoma,sans-serif}
main{max-width:1400px;padding-top:12px;grid-template-columns:minmax(230px,.7fr) minmax(400px,1.3fr);gap:4%}
#cabinet{background:linear-gradient(125deg,#f9eed8,#d9c7a6);border:1px solid #aa9674;padding:12px;border-radius:20px;box-shadow:0 16px 32px #372d2c25,inset 0 1px #fff9e5}
#cabinet .toolbar{min-height:44px;gap:8px}.cabinet-name{color:#24505a;font-size:11px;letter-spacing:.13em;line-height:1.35}.cabinet-name small{font-size:7px;letter-spacing:.22em;display:block}.toolbar button{font-size:12px;white-space:nowrap}
#cabinet button,#cabinet select{border-radius:7px;border-color:#a89d83;background:linear-gradient(#fffaf0,#ebdfc9);color:#173a46;box-shadow:inset 0 1px #ffffffaa,0 2px 0 #9c89633b;min-height:44px;min-width:44px}
#cabinet button[aria-pressed=true],#cabinet #start{background:linear-gradient(#176775,#0c424f);color:#fff7e6;border-color:#073542;box-shadow:inset 0 1px #a7f3eb50,0 3px 0 #072d3c}
#cabinet .scoreboard{padding:9px 10px;margin:7px 0;gap:24px;border:1px solid #85918b;border-radius:9px;background:linear-gradient(120deg,#1a4653,#0e2b3b);color:#d3e7dd;box-shadow:inset 0 2px 6px #03162488,0 1px #fff9e5;min-height:68px}
#cabinet .scoreboard strong{font-family:Reading,Tahoma,sans-serif;font-size:38px;line-height:1;font-variant-numeric:tabular-nums;color:#63eadb;text-shadow:0 1px #040f20}
#cabinet .scoreboard>div:last-child strong{color:#ff9a71}#cabinet .scoreboard b{font:900 21px/1.15 Reading,Tahoma,sans-serif;color:#fff4d3;font-variant-numeric:tabular-nums}#cabinet .scoreboard small{color:#bfd8d2}
#cabinet .table-wrap{border-radius:16px;background:#113e4e;box-shadow:0 9px 16px #17212955,0 1px 0 #fff9e2;isolation:isolate}
#cabinet .overlay{background:#061e3233;padding:16px}#cabinet .overlay-card{background:linear-gradient(125deg,#fffae8f5,#e9d5acf5);border:1px solid #fce6b9;outline:1px solid #253e4c;outline-offset:3px;border-radius:10px;box-shadow:0 10px 30px #061a3166;padding:22px 18px}#cabinet .overlay h2{font:1000 29px/1.04 Reading,Tahoma,sans-serif;letter-spacing:-.04em}#cabinet .overlay .eyebrow{color:#755039;font-size:9px}
#cabinet .table-help{font-size:11px;margin:8px 0;line-height:1.35}#cabinet .status{margin:6px 0 0;font-size:11px}#cabinet .music-controls{margin:6px 0 0;padding:5px 0 0;gap:2px 12px;justify-content:center}#cabinet .music-note{display:none}#cabinet .music-controls label{min-height:44px}#cabinet .music-controls button{font-size:11px;padding-inline:10px}#cabinet .music-controls input[type=range]{width:80px;min-width:44px}#cabinet .options{padding:8px 0 4px}
body[data-match-active=true] .introduction>p:not(.eyebrow):not(.lead),body[data-match-active=true] .ticket{display:none}
#cabinet:is([data-phase=playing],[data-phase=serve],[data-phase=paused]) .options{display:none}
/* On portrait phones, the live table, score and all sound controls fit together. */
@media(max-width:760px) and (orientation:portrait){
  main{padding:0 8px 12px;display:block}.site-head{padding:6px 12px;gap:8px;min-height:52px}.brand{font-size:20px}.back{font-size:10px;max-width:100px;text-align:right}.brand span{font-size:7px}.introduction{padding:10px 8px}.introduction h1{font-size:43px;margin:0 0 6px}.introduction .lead{font-size:17px}.introduction .eyebrow{font-size:8px}.introduction>p:not(.eyebrow){font-size:12px}.instructions summary{padding:10px 0}.introduction .lead br{display:none}
  #cabinet{padding:8px;border-radius:13px}#cabinet .scoreboard{padding:4px 6px;min-height:60px;margin:5px 0;gap:14px}#cabinet .scoreboard strong{font-size:32px}#cabinet .scoreboard b{font-size:19px}#cabinet .scoreboard>div{min-width:56px}#cabinet .table-wrap{width:min(100%,360px)}#cabinet .toolbar button{font-size:11px;padding:5px 8px}.cabinet-name{font-size:9px}.cabinet-name small{font-size:6px}
  body[data-match-active=true] .introduction,body[data-match-active=true]>footer{display:none}
  body[data-match-active=true] #cabinet .table-wrap{width:auto;height:min(calc(100dvh - 285px),690px);max-width:100%;aspect-ratio:2/3;flex-shrink:0}
  #cabinet .music-controls{gap:0 10px}#cabinet .table-help{margin:6px 0 1px}#cabinet .status{font-size:10px;margin:2px 0 0}
}
/* Wide screens use a real control console beside the full, uncropped rink. */
@media(min-width:761px){
  body[data-match-active=true] main{display:block;max-width:1180px}body[data-match-active=true] .introduction,body[data-match-active=true]>footer{display:none}
  body[data-match-active=true] #cabinet{display:grid;grid-template-columns:minmax(0,1fr) minmax(230px, .7fr);grid-template-rows:auto auto 1fr auto auto;gap:10px 24px;max-width:980px;margin:auto;padding:18px}
  body[data-match-active=true] #cabinet .table-wrap{grid-column:1;grid-row:1/7;height:min(calc(100dvh - 134px),820px);width:auto;max-width:100%;margin:auto}
  body[data-match-active=true] #cabinet>.toolbar,body[data-match-active=true] #cabinet>.scoreboard,body[data-match-active=true] #cabinet>.table-help,body[data-match-active=true] #cabinet>#audio-slot,body[data-match-active=true] #cabinet>.status{grid-column:2}
  body[data-match-active=true] #cabinet>.toolbar{grid-row:1;flex-wrap:wrap}body[data-match-active=true] #cabinet>.scoreboard{grid-row:2;gap:8px}body[data-match-active=true] #cabinet>.table-help{grid-row:3;align-self:center;font-size:15px;max-width:280px;justify-self:center}body[data-match-active=true] #cabinet>#audio-slot{grid-row:4}body[data-match-active=true] #cabinet>.status{grid-row:5}
}
/* Own native/fullscreen-fallback layout overrides the baseline, never a shared route. */
#cabinet:is(:fullscreen,.fullscreen-fallback){padding:8px max(8px,env(safe-area-inset-right)) 6px max(8px,env(safe-area-inset-left));background:radial-gradient(ellipse at 50% 20%,#fff3d9,#cebd9d);border-radius:0}
#cabinet:is(:fullscreen,.fullscreen-fallback) .table-wrap{height:min(calc(100dvh - 226px),900px);width:auto;max-width:100%;margin:4px auto}
#cabinet:is(:fullscreen,.fullscreen-fallback) .scoreboard{width:min(100%,650px);margin:4px 0;padding:4px;min-height:58px}
#cabinet:is(:fullscreen,.fullscreen-fallback) .table-help{margin:3px 0}#cabinet:is(:fullscreen,.fullscreen-fallback) .status{margin:1px 0}#cabinet:is(:fullscreen,.fullscreen-fallback) .music-controls{padding:0;margin:0}
@media(orientation:landscape) and (max-height:850px){
  body .site-head{padding-block:3px}.introduction{display:none}main,body[data-match-active=true] main{display:block;padding:4px 10px 8px;max-width:1150px}body>footer{display:none}
  #cabinet,body[data-match-active=true] #cabinet,#cabinet:is(:fullscreen,.fullscreen-fallback){display:grid;grid-template-columns:auto minmax(220px,1fr);grid-template-rows:44px auto 1fr auto auto;gap:5px 20px;padding:8px 16px;width:100%;max-width:1020px;margin:auto}
  #cabinet .table-wrap,body[data-match-active=true] #cabinet .table-wrap{grid-column:1;grid-row:1/7;width:auto;height:calc(100dvh - 88px);max-height:740px;margin:0;max-width:100%}
  #cabinet:is(:fullscreen,.fullscreen-fallback){max-width:none;height:100dvh;overflow:auto;grid-template-columns:auto minmax(230px,1fr);padding:8px max(14px,env(safe-area-inset-right)) 8px max(14px,env(safe-area-inset-left))}
  #cabinet:is(:fullscreen,.fullscreen-fallback) .table-wrap{grid-column:1;grid-row:1/7;width:auto;height:calc(100dvh - 16px);max-height:900px;margin:0}
  #cabinet>.toolbar,body[data-match-active=true] #cabinet>.toolbar{grid-column:2;grid-row:1;flex-wrap:nowrap;max-width:none;width:100%}
  #cabinet>.scoreboard,body[data-match-active=true] #cabinet>.scoreboard{grid-column:2;grid-row:2;gap:20px;width:100%;padding:5px;margin:0;min-height:62px}
  #cabinet>.table-help,body[data-match-active=true] #cabinet>.table-help{grid-column:2;grid-row:3;align-self:center;justify-self:center;font-size:13px;margin:0;max-width:360px}
  #cabinet>.options{grid-column:2;grid-row:3;padding:0;font-size:10px;gap:5px}.options label{gap:2px}.options legend{margin-bottom:2px}
  #cabinet:not([data-phase=playing]):not([data-phase=serve]):not([data-phase=paused])>.table-help{display:none}
  #cabinet>#audio-slot,body[data-match-active=true] #cabinet>#audio-slot{grid-column:2;grid-row:4}#cabinet>.status,body[data-match-active=true] #cabinet>.status{grid-column:2;grid-row:5;margin:0}
  #cabinet .music-controls{gap:0 12px;justify-content:flex-start;padding:0;border:0;margin:0}#cabinet .overlay-card{padding:12px 10px}#cabinet .overlay h2{font-size:23px}#cabinet .overlay p:not(.eyebrow){font-size:12px}#cabinet .overlay .eyebrow{font-size:7px}#cabinet .overlay button{min-height:44px}
}
@media(max-width:350px) and (orientation:portrait){#cabinet .music-controls{gap:0 8px}#cabinet .music-controls label{font-size:10px}#cabinet .music-controls input[type=range]{width:66px}#cabinet .table-help{font-size:10px}#cabinet .overlay-card{padding:10px}#cabinet .overlay h2{font-size:21px}#cabinet .overlay p:not(.eyebrow){font-size:11px}}
@media(prefers-reduced-motion:reduce){#cabinet *,#cabinet *::before,#cabinet *::after{animation:none!important;transition:none!important}}
/* Width is the sole sizing authority so max-width never stretches the playfield. */
@media(orientation:portrait){
  body[data-match-active=true] #cabinet .table-wrap{width:min(100%,calc((100dvh - 310px)*2/3));height:auto;aspect-ratio:2/3}
  body #cabinet:is(:fullscreen,.fullscreen-fallback){display:flex;flex-direction:column;align-items:center;gap:0;max-width:none;height:100dvh;padding:6px 8px}
  body #cabinet:is(:fullscreen,.fullscreen-fallback) .table-wrap{width:min(100%,calc((100dvh - 236px)*2/3),600px);height:auto;aspect-ratio:2/3;margin:4px auto}
  body #cabinet:is(:fullscreen,.fullscreen-fallback) .table-help{font-size:11px;max-width:650px;margin:3px 0;flex-shrink:0}
  body #cabinet:is(:fullscreen,.fullscreen-fallback) .toolbar{width:100%;max-width:650px;flex-shrink:0}
  body #cabinet:is(:fullscreen,.fullscreen-fallback) .scoreboard{width:min(100%,650px);flex-shrink:0}
  body #cabinet:is(:fullscreen,.fullscreen-fallback) #audio-slot{flex-shrink:0}
  body #cabinet:is(:fullscreen,.fullscreen-fallback) .status{flex-shrink:0}
}
@media(min-width:761px) and (min-height:851px) and (orientation:landscape){
  body[data-match-active=true] #cabinet .table-wrap{width:min(100%,calc((100dvh - 134px)*2/3),547px);height:auto;aspect-ratio:2/3}
  body #cabinet:is(:fullscreen,.fullscreen-fallback){display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,.65fr);grid-template-rows:auto auto 1fr auto auto;gap:12px 24px;align-items:stretch}
  body #cabinet:is(:fullscreen,.fullscreen-fallback) .table-wrap{width:min(100%,calc((100dvh - 24px)*2/3),600px);height:auto;aspect-ratio:2/3}
}
@media(max-width:350px) and (orientation:portrait){body[data-match-active] #cabinet:is(:fullscreen,.fullscreen-fallback) .table-wrap{width:min(100%,calc((100dvh - 280px)*2/3));height:auto}}
@media(orientation:landscape) and (max-height:850px){body[data-match-active] #cabinet:is(:fullscreen,.fullscreen-fallback) .table-wrap{height:calc(100dvh - 16px);width:auto;aspect-ratio:2/3;max-height:900px}}