/* V67 — mobile-first layout correction and compact 4-column party box. */
*{box-sizing:border-box}

/* Fixed game toolbar: independent from header layout so it cannot disappear. */
#app>header .gameTools{
  position:fixed!important;
  z-index:520!important;
  top:max(8px,env(safe-area-inset-top))!important;
  right:max(8px,env(safe-area-inset-right))!important;
  display:flex!important;
  align-items:center!important;
  gap:6px!important;
  width:auto!important;
  height:auto!important;
  padding:0!important;
  margin:0!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
  background:transparent!important;
}
#app>header .gameTools .toolIconBtn{
  display:grid!important;
  place-items:center!important;
  width:38px!important;
  min-width:38px!important;
  height:38px!important;
  min-height:38px!important;
  padding:0!important;
  margin:0!important;
  border:1px solid rgba(255,246,218,.23)!important;
  border-radius:12px!important;
  background:rgba(17,39,43,.82)!important;
  color:#fff2d2!important;
  box-shadow:0 5px 16px rgba(4,15,18,.24)!important;
  backdrop-filter:blur(7px)!important;
  -webkit-backdrop-filter:blur(7px)!important;
  font-size:0!important;
  line-height:1!important;
  clip-path:none!important;
}
#app>header .gameTools .toolIconBtn:active{transform:translateY(1px) scale(.96)}
#quickFullscreenBtn::before{content:'⛶';font:900 22px/1 system-ui,sans-serif}
#quickFullscreenBtn[data-fullscreen="1"]::before{content:'↙';font-size:21px}
#settingsBtn::before{content:'⚙';font:900 20px/1 system-ui,sans-serif}
body:not(.inLobby) #inviteBtn{display:none!important}

/* Party box: 4 columns. 1–12 items use up to 3 rows; 13–16 use a fourth row. */
.partyOverlay{padding:3px!important;overflow:hidden!important}
.partyBoard{
  width:min(980px,calc(var(--visible-vw,100vw) - 6px))!important;
  height:min(690px,calc(var(--visible-vh,100dvh) - 6px))!important;
  max-height:calc(var(--visible-vh,100dvh) - 6px)!important;
  padding:7px!important;
  gap:5px!important;
  overflow:hidden!important;
  grid-template-rows:auto minmax(0,1fr) auto!important;
}
.partyCards{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  grid-auto-flow:row!important;
  grid-auto-rows:minmax(0,1fr)!important;
  gap:5px!important;
  min-height:0!important;
  overflow:hidden!important;
}
.partyPick{
  position:relative!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  grid-template-rows:minmax(0,1fr) auto!important;
  place-items:center!important;
  align-content:center!important;
  gap:1px!important;
  min-width:0!important;
  min-height:0!important;
  width:100%!important;
  height:100%!important;
  padding:3px 4px 4px!important;
  overflow:hidden!important;
  text-align:center!important;
  border-radius:10px!important;
}
.partyPick>span:not(.partyCat){display:block!important;width:100%!important;min-width:0!important;padding:0!important;overflow:hidden!important}
.partyPick img{
  width:min(68px,72%)!important;
  height:min(62px,68%)!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  align-self:end!important;
}
.partyPick strong{
  display:-webkit-box!important;
  width:100%!important;
  min-width:0!important;
  overflow:hidden!important;
  -webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;
  font-size:clamp(8px,1.3vw,11px)!important;
  line-height:1.05!important;
  white-space:normal!important;
  word-break:keep-all!important;
  text-overflow:ellipsis!important;
}
.partyPick small,.partyPick em,.partyPick .partyCat{display:none!important}
.partyPick i{position:absolute!important;right:2px!important;bottom:2px!important;max-width:72%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:7px!important}
.partyBoardHead h2{font-size:clamp(14px,2.5vw,20px)!important;margin:0!important}
.partyBoardHead p{font-size:9px!important;margin:1px 0!important}

/* Home: a stable two-column landscape layout for phones. */
@media (orientation:landscape) and (pointer:coarse){
  #join.homeScreen{padding:5px max(7px,env(safe-area-inset-right)) 5px max(7px,env(safe-area-inset-left))!important;overflow:hidden!important}
  #join .homeTop{position:fixed!important;z-index:40!important;left:max(8px,env(safe-area-inset-left))!important;right:max(8px,env(safe-area-inset-right))!important;top:max(5px,env(safe-area-inset-top))!important;height:32px!important;min-height:32px!important;padding:0!important;border:0!important}
  #join .homeHero{
    display:grid!important;
    grid-template-columns:minmax(210px,.82fr) minmax(310px,1.18fr)!important;
    grid-template-rows:minmax(0,1fr) auto!important;
    gap:7px!important;
    width:100%!important;
    height:calc(var(--visible-vh,100dvh) - 8px)!important;
    min-height:0!important;
    margin:0!important;
    padding:42px 0 3px!important;
    overflow:hidden!important;
    align-items:stretch!important;
  }
  #join .homeDiorama{display:none!important}
  #join .heroCopy{grid-column:1!important;grid-row:1!important;display:flex!important;flex-direction:column!important;justify-content:center!important;min-width:0!important;padding:0 2px!important}
  #join .homeIssue{display:none!important}
  #join .heroCopy h1{font-size:clamp(27px,8.5vh,44px)!important;line-height:.88!important;margin:0 0 8px!important;white-space:normal!important}
  #join .entryConsole{width:100%!important;max-width:none!important;min-width:0!important;padding:6px!important;margin:0!important;overflow:visible!important}
  #join .entryConsole .nameField{display:block!important;width:100%!important;min-width:0!important;padding:3px!important;margin:0!important;background:#233b40!important}
  #join .entryConsole .nameField span{display:none!important}
  #join .entryConsole .nameField input{display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;height:38px!important;padding:0 10px!important;font-size:16px!important;border-radius:2px!important}
  #join .entryConsole .primaryBig{width:100%!important;height:38px!important;min-height:38px!important;margin:5px 0 0!important;padding:5px 10px!important}
  #join .consoleFoot{display:none!important}
  #join .roomShelf{grid-column:2!important;grid-row:1/3!important;width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;margin:0!important;padding:7px!important;overflow:hidden!important}
  #join .roomShelf .publicRooms{max-height:calc(100% - 38px)!important;overflow:auto!important;padding-right:2px!important}
  #join .hallShelf{grid-column:1!important;grid-row:2!important;width:100%!important;min-width:0!important;max-height:74px!important;margin:0!important;padding:5px 7px!important;overflow:hidden!important}
  #join .hallShelf .shelfHead{min-height:18px!important}.hallShelf .shelfHead h2{font-size:11px!important;margin:0!important}
  #join .hallOfFame{display:flex!important;gap:4px!important;overflow:hidden!important;white-space:nowrap!important;font-size:8px!important}
  #join .hallOfFame>*{flex:0 1 auto!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important}

  /* Four-column party box remains readable on small landscape screens. */
  .partyBoard{width:calc(var(--visible-vw,100vw) - 4px)!important;height:calc(var(--visible-vh,100dvh) - 4px)!important;padding:4px!important;gap:3px!important}
  .partyCards{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:3px!important}
  .partyPick{padding:2px 3px 3px!important;border-radius:7px!important}
  .partyPick img{width:min(50px,67%)!important;height:min(45px,64%)!important}
  .partyPick strong{font-size:clamp(7px,1.55vh,9px)!important;line-height:1!important}
  .partyLive{display:none!important}
  .partyBoardHead h2{font-size:13px!important}.partyBoardHead p{display:none!important}

  #app>header .gameTools{top:max(4px,env(safe-area-inset-top))!important;right:max(5px,env(safe-area-inset-right))!important;gap:4px!important}
  #app>header .gameTools .toolIconBtn{width:34px!important;min-width:34px!important;height:34px!important;min-height:34px!important;border-radius:10px!important}
}

/* Portrait / narrow screens still avoid clipping before the rotate gate appears. */
@media (max-width:700px) and (orientation:portrait){
  #join .entryConsole .nameField{grid-template-columns:1fr!important}
  #join .entryConsole .nameField span{display:none!important}
  #join .entryConsole .nameField input{width:100%!important;min-width:0!important}
}