/* Shared layout for narrow covers, Flip portrait/landscape and safe display edges.
   CSS only: changing the viewport keeps the current room, game and audio alive. */
html{min-width:0}
body{min-width:0;min-height:100svh;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
main,header,section,aside,form,fieldset,nav{min-width:0}
input,select,textarea{max-width:100%;min-width:0}
button,a,summary{overflow-wrap:anywhere}
dialog{max-height:calc(100dvh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));overflow:auto}
.club-page #room-app-window{inset:max(0px,env(safe-area-inset-top)) max(0px,env(safe-area-inset-right)) max(0px,env(safe-area-inset-bottom)) max(0px,env(safe-area-inset-left));width:min(1280px,calc(100% - 24px));height:calc(100dvh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
.club-page #room-app-window[open]{overflow:hidden}
.club-page.club-fullscreen #room-app-window{width:100%;height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
.club-page .app-window-bar strong{min-width:0;overflow-wrap:anywhere}
.club-page #banner{top:max(18px,env(safe-area-inset-top))}
.club-page #music-track{max-width:100%}
.club-page .sound-controls label{flex-wrap:wrap}
.scores-page td:nth-child(2){overflow-wrap:anywhere;word-break:break-word}
@media(max-width:600px){
  input,select,textarea{font-size:16px}
  .club-page .club-heading{gap:8px;align-items:flex-start}
  .club-page .club-heading h1{font-size:clamp(18px,5.5vw,24px)}
  .club-page .club-heading .eyebrow{font-size:9px;letter-spacing:.1em}
  .club-page .club-top-actions{padding-top:4px}
  .club-page #room-app-window{width:100%;height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
  .club-page .app-window-bar{gap:8px}
  .club-page .app-window-bar button{white-space:normal;max-width:58%;min-height:44px}
  .club-page .mobile-room-actions button{min-height:40px}
  .club-page .entry fieldset{padding:10px;gap:9px;grid-template-columns:repeat(2,minmax(0,1fr))}
  .club-page #bar-chat .chatbox{flex-wrap:wrap}
  .club-page #bar-chat .chatbox input{flex-basis:100%;width:100%}
  .club-page #bar-chat .chatbox button{width:100%;min-height:44px}
  .club-page #bar-chat .chatlog{height:140px}
  .darts-page:has(#game:not([hidden])) #darts-install{display:none}
  .tools-page .fields{gap:10px}
}
@media(max-width:360px){
  .club-page .entry{padding:16px}
  .club-page .preview canvas{width:100px;height:110px}
  .club-page .entry h1{font-size:29px}
  .club-page .mobile-room-actions{right:5px;bottom:5px;gap:4px}
  .club-page .mobile-room-actions button{font-size:10px;padding:5px 6px;min-height:38px}
  .club-page #room-objects button{max-width:140px;white-space:normal}
  .club-page .bar-seat-actions button{min-width:110px}
  .darts-page .panel{padding:12px}
  .darts-page .fields{grid-template-columns:1fr}
  .darts-page .scores{grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}
  .darts-page .player{padding:10px}
  .darts-page .actions{gap:6px}
  .darts-page #multipliers button{flex:1;padding:8px 4px}
  .arcade-page .controls{gap:5px;flex-wrap:wrap}
  .arcade-page .controls button{min-width:58px;padding:10px}
  .arcade-page .controls [data-key=action]{min-width:95px}
  .scores-page .list-heading{flex-wrap:wrap}
  .tools-page .fields{grid-template-columns:1fr}
  .chess-page aside{grid-template-columns:1fr}
}
/* A Flip rotated sideways has plenty of width but very little height. */
@media(min-width:650px) and (max-width:1100px) and (max-height:550px){
  .club-page:has(#club:not([hidden]))>header{display:none}
  .club-page main{padding:0 8px 12px}
  .club-page .club-heading{align-items:center;margin:4px 0}
  .club-page .club-heading .eyebrow,.club-page #room-tip{display:none}
  .club-page .club-heading h1{font-size:19px;margin:4px 0}
  .club-page .club-layout{grid-template-columns:minmax(0,1fr) minmax(200px,26%);gap:10px}
  .club-page .room-stage{max-width:calc(153.4svh - 90px);margin:auto}
  .club-page #bar-chat{position:static;margin:0;padding:10px}
  .club-page #bar-chat h2{font-size:15px}
  .club-page #bar-chat .tip{font-size:10px;margin:4px 0}
  .club-page #bar-chat .chatlog{height:clamp(70px,calc(100svh - 235px),240px)}
  .club-page #bar-chat .chatbox{flex-wrap:wrap}
  .club-page #bar-chat .chatbox input{width:100%;flex-basis:100%;font-size:16px}
  .club-page #bar-chat .chatbox button{width:100%;min-height:40px;padding:7px}
  .club-page .entry{padding:18px;margin:6px auto;grid-template-columns:1.3fr .7fr;gap:16px}
  .club-page .preview{grid-row:auto}
  .club-page .preview canvas{height:210px;width:auto;max-width:100%}
  .club-page .entry h1{font-size:29px;margin:6px 0}
  .club-page .entry>div>p:not(.eyebrow){font-size:12px;margin:6px 0}
  .club-page .entry form{gap:9px}
  .club-page #room-app-window{width:100%;height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
  .club-page .app-window-bar{padding:6px 10px}
  .club-page .app-window-bar button{min-height:40px;padding:7px 10px}
  .club-page #room-app-window #gamebox{padding:8px}
  .club-page #room-app-window #gamebox p{margin:4px;font-size:11px}
  .club-page #room-app-window #gamebox canvas{max-height:45dvh}
  .darts-page:has(#game:not([hidden])) header,.darts-page:has(#game:not([hidden])) main>h1,.darts-page:has(#game:not([hidden])) main>p:first-of-type,.darts-page:has(#game:not([hidden])) #darts-install{display:none}
  .darts-page:has(#game:not([hidden])) main{padding:10px}
  .darts-page #game{display:grid;grid-template-columns:minmax(170px,.8fr) minmax(0,1.4fr);gap:10px 14px;align-items:start}
  .darts-page #game>*{grid-column:1;margin:0}
  .darts-page #game>div.panel{grid-column:2;grid-row:1/span 7;position:static;max-height:none;margin:0;padding:12px}
  .darts-page .scores{grid-template-columns:repeat(auto-fit,minmax(105px,1fr));gap:6px}
  .darts-page .player{padding:10px}
  .darts-page .points{font-size:2.6rem}
  .darts-page #turn{font-size:17px;margin:0}
  .darts-page #message{min-height:0;margin:6px 0;font-size:12px}
  .darts-page .board{grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
  .darts-page .board button{min-height:42px;padding:8px 2px;font-size:16px}
  .darts-page #multipliers button{min-height:42px;padding:8px 12px}
  .darts-page #throw-slots{margin:6px 0}
  .darts-page #throw-slots span{padding:5px}
  .darts-page #dart-input .quick{margin-top:7px}
  .darts-page #dart-input .quick button,.darts-page #dart-input .actions:last-child button{min-height:42px;padding:8px;font-size:12px}
  .darts-page #dart-summary{font-size:12px;margin:6px 0}
  .darts-page #total-entry{margin-top:12px}
  .darts-page #game>details.panel{padding:12px}
  .arcade-page #screen{max-width:calc(166.67svh - 150px)}
  .chess-page .layout{grid-template-columns:minmax(0,1fr) minmax(190px,.7fr);gap:12px}
  .chess-page .table{max-width:calc(100svh - 100px)}
  .chess-page .title{margin:10px 0}
  .chess-page h1{font-size:24px}
  .chess-page aside{display:block}
  .chess-page .card{margin-bottom:8px}
  .chess-page .square{font-size:clamp(20px,6svh,32px)}
}
@media(max-width:950px) and (max-height:550px){
  .club-page #joystick{display:block}
  .club-page .room-controls{display:none}
  .club-page .mobile-room-actions{display:flex;flex-direction:column;position:absolute;right:9px;bottom:9px;z-index:6;gap:5px;pointer-events:none}
  .club-page .mobile-room-actions button{pointer-events:auto;touch-action:none;min-height:40px;padding:6px 9px;font-size:11px;background:#5c405bb3;border:1px solid #d9b48699;color:#fff0cd}
  .strike-page main{padding:8px}
  .strike-page .intro,.strike-page .bottom,.strike-page footer,.strike-page header{display:none}
  .strike-page .arena{height:calc(100dvh - 16px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));aspect-ratio:auto;min-height:0;max-height:none}
  .strike-page #touch-controls{display:block;top:44px}
  .strike-page #fire{bottom:12px}
  .strike-page #reload{bottom:100px}
  .strike-page .gate{overflow:auto;padding:12px}
  .strike-page .gate>div{padding:12px}
  .strike-page .gate h2{font-size:22px;margin:5px}
  .strike-page .gate p{margin:6px;font-size:11px}
}
/* Progressive enhancement for browsers reporting an actual hardware divider.
   Keep the club canvas and its touch targets wholly inside one segment. */
@media(horizontal-viewport-segments:2){
  .club-page .room-stage{max-width:calc(env(viewport-segment-width 0 0) - 32px);margin-inline:auto}
  .club-page .club-layout{grid-template-columns:1fr}
  .club-page .club-play{width:env(viewport-segment-width 0 0);max-width:100%}
}
@media(vertical-viewport-segments:2){
  .club-page .room-stage{max-width:calc(env(viewport-segment-height 0 0) * 1.534 - 110px);margin-inline:auto}
}