/* Fit desktop play to the browser viewport without page scrolling. */
html{height:100%;overflow:hidden;overscroll-behavior:none}
body:not(.touch-game){height:var(--game-height,100dvh);min-height:0;overflow:hidden;overscroll-behavior:none}
body:not(.touch-game) .shell{display:grid;grid-template-rows:56px 68px minmax(0,1fr);width:100%;height:100%;min-height:0;padding:0 24px 10px;overflow:hidden}
body:not(.touch-game) .topbar{height:100%;min-height:0}
body:not(.touch-game) .intro{min-height:0;padding:8px 0 10px}
body:not(.touch-game) h1{font-size:32px}
body:not(.touch-game) .game-layout{display:grid;grid-template-columns:minmax(0,1fr) 235px;min-height:0;height:100%;gap:14px}
body:not(.touch-game) .play-area{min-height:0;gap:8px}
body:not(.touch-game) .players-strip{flex:none}
body:not(.touch-game) .player-card{padding:10px 12px}
body:not(.touch-game) .group-name{margin:6px 0}
body:not(.touch-game) .table-wrap{display:flex;align-items:center;justify-content:center;flex:1;min-height:0;min-width:0;width:100%;padding:0;overflow:hidden;box-shadow:none}
body:not(.touch-game) .table-wrap canvas{flex:none;max-width:100%;max-height:100%}
body:not(.touch-game) .snooker-target{flex:none;padding:7px 10px;margin:0;gap:8px}
body:not(.touch-game) .sidebar{display:flex;flex-direction:column;min-height:0;height:100%;gap:8px}
body:not(.touch-game) .control-card{flex:none;padding:10px 12px}
body:not(.touch-game) .cue-contact-control{margin-bottom:6px;gap:3px}
body:not(.touch-game) .cue-contact-control svg{width:90px;height:90px}
body:not(.touch-game) .cue-elevation-control{margin-bottom:6px}
body:not(.touch-game) .cue-elevation-control input{margin:7px 0 2px}
body:not(.touch-game) #power{margin:10px 0 3px}
body:not(.touch-game) .cue-rate-control{margin-top:8px;gap:6px}
body:not(.touch-game) .cue-rate-control select{padding:5px 6px;min-width:0}
body:not(.touch-game) .control-card .primary-button{padding:9px 10px;margin-top:10px}
body:not(.touch-game) .control-card .tutorial-link{margin-top:4px;padding:4px}
body:not(.touch-game) .event-log-card{display:flex;flex-direction:column;flex:1;min-height:0;padding:10px}
body:not(.touch-game) .event-log-title{flex:none;margin-bottom:6px}
body:not(.touch-game) #eventLog{flex:1;min-height:0;max-height:none;overscroll-behavior:contain}
body:not(.touch-game) .modal-box{max-height:calc(var(--game-height,100dvh) - 32px);overflow-y:auto;overscroll-behavior:contain}
.desktop-compact-options{display:none}
.compact-desktop .desktop-compact-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px;padding-top:14px;border-top:1px solid #45364e;text-align:left}
.compact-desktop .desktop-compact-options .cue-rate-control{display:flex;flex-direction:column;align-items:stretch;gap:6px;margin:0}
.compact-desktop .desktop-compact-options .cue-rate-control select{max-width:none;width:100%;min-height:36px}
@media(max-height:640px){
  body:not(.touch-game) .shell{grid-template-rows:48px 54px minmax(0,1fr);padding:0 16px 6px}
  body:not(.touch-game) h1{font-size:27px}
  body:not(.touch-game) .intro{padding:5px 0}
  body:not(.touch-game) .eyebrow{margin-bottom:3px}
  body:not(.touch-game) .player-card{padding:7px 10px}
  body:not(.touch-game) .group-name{font-size:12px;margin:4px 0}
  body:not(.touch-game) .cue-contact-control svg{width:76px;height:76px}
  body:not(.touch-game) .control-card{padding:8px 10px}
  body:not(.touch-game) .sidebar{gap:6px}
}
@media(max-height:440px){
  body:not(.touch-game) .shell{grid-template-rows:40px 38px minmax(0,1fr);padding-bottom:4px}
  body:not(.touch-game) .intro>div{display:flex;align-items:center;gap:14px}
  body:not(.touch-game) .eyebrow{margin:0}
  body:not(.touch-game) h1{font-size:24px}
  body:not(.touch-game) .play-area{gap:5px}
  body:not(.touch-game) .players-strip{gap:6px}
  body:not(.touch-game) .player-card{padding:4px 8px}
  body:not(.touch-game) .group-name{margin:2px 0}
  body:not(.touch-game) .cue-contact-control svg{width:52px;height:52px}
  body:not(.touch-game) .cue-contact-control{gap:1px;margin-bottom:3px}
  body:not(.touch-game) .cue-elevation-control{margin-bottom:3px}
  body:not(.touch-game) .cue-elevation-control input{margin:5px 0 1px}
  body:not(.touch-game) .control-card{padding:6px 10px}
  body:not(.touch-game) .control-card .primary-button{margin-top:5px;padding:6px 8px}
  body:not(.touch-game) .control-card .tutorial-link{margin-top:2px;padding:3px}
  body:not(.touch-game) .event-log-card{padding:6px 8px}
  body:not(.touch-game) .event-log-title{margin-bottom:3px}
}

body:not(.touch-game) .shell{grid-template-rows:56px 32px minmax(0,1fr)}
body:not(.touch-game) .intro{padding:3px 0}
body:not(.touch-game) .eyebrow{margin:0}
@media(max-height:640px){body:not(.touch-game) .shell{grid-template-rows:48px 28px minmax(0,1fr)}}
@media(max-height:440px){body:not(.touch-game) .shell{grid-template-rows:40px 26px minmax(0,1fr)}}

/* Game modes are chosen from the home screen. */
body:not(.touch-game) .shell{grid-template-rows:56px minmax(0,1fr)}
@media(max-height:640px){body:not(.touch-game) .shell{grid-template-rows:48px minmax(0,1fr)}}
@media(max-height:440px){body:not(.touch-game) .shell{grid-template-rows:40px minmax(0,1fr)}}