/* V68 — bright toybox polish on top of V67. Functional UI stays compact. */
:root{
  --v68-ink:#2b4347;
  --v68-paper:#fff0c9;
  --v68-sun:#f3ca58;
  --v68-coral:#e87862;
  --v68-mint:#89b99b;
  --v68-sky:#8dc4c9;
  --v68-deep:#193a40;
}

/* GLOBAL TOOLS: outside #app/header so phase CSS can never hide them. */
.globalTools{
  position:fixed!important;
  z-index:12050!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:7px!important;
  pointer-events:auto!important;
  visibility:visible!important;
  opacity:1!important;
}
.globalTools .toolIconBtn{
  display:grid!important;
  place-items:center!important;
  width:40px!important;
  min-width:40px!important;
  height:40px!important;
  min-height:40px!important;
  padding:0!important;
  border:1px solid rgba(255,248,220,.55)!important;
  border-radius:13px!important;
  background:rgba(28,61,66,.76)!important;
  color:#fff6dc!important;
  box-shadow:0 4px 14px rgba(11,35,39,.22)!important;
  backdrop-filter:blur(8px)!important;
  -webkit-backdrop-filter:blur(8px)!important;
  clip-path:none!important;
  font-size:0!important;
}
.globalTools .toolIconBtn:active{transform:translateY(1px) scale(.94)!important}
#globalTools #quickFullscreenBtn::before{content:'⛶';font:900 23px/1 system-ui,sans-serif}
#globalTools #quickFullscreenBtn[data-fullscreen="1"]::before{content:'↙';font:900 22px/1 system-ui,sans-serif}
#globalTools #settingsBtn::before{content:'⚙';font:900 20px/1 system-ui,sans-serif}
/* Legacy header toolbar stays for ping/invite only. */
#app>header .gameTools .toolIconBtn{display:none!important}

/* PARTY BOX — bright hand-made toy pieces, still a strict V67 4-column grid. */
.partyOverlay{
  background:
    radial-gradient(circle at 14% 16%,rgba(255,255,225,.42) 0 7%,transparent 7.4%),
    radial-gradient(circle at 86% 78%,rgba(255,214,117,.28) 0 10%,transparent 10.4%),
    linear-gradient(150deg,rgba(61,119,122,.90),rgba(127,176,158,.92) 58%,rgba(218,191,119,.90))!important;
  backdrop-filter:blur(2px)!important;
  -webkit-backdrop-filter:blur(2px)!important;
}
.partyBoard{
  position:relative!important;
  background:linear-gradient(165deg,#fff2cc 0%,#f4deb0 100%)!important;
  border:0!important;
  border-radius:22px!important;
  clip-path:none!important;
  box-shadow:0 16px 42px rgba(25,55,57,.34),inset 0 0 0 2px rgba(104,79,50,.18)!important;
}
.partyBoard::before,.partyBoard::after{
  content:'';position:absolute;pointer-events:none;z-index:0;border-radius:50%;opacity:.42;
}
.partyBoard::before{width:88px;height:88px;left:-30px;top:-36px;background:#ef806b;transform:rotate(18deg)}
.partyBoard::after{width:72px;height:72px;right:-25px;bottom:-28px;background:#77ae98;transform:rotate(-12deg)}
.partyBoard>*{position:relative;z-index:1}
.partyBoardHead{display:flex!important;align-items:end!important;justify-content:space-between!important;gap:10px!important;padding:2px 5px 4px!important}
.partyBoardHead>span{display:none!important}
.partyBoardHead h2{color:var(--v68-ink)!important;font-weight:1000!important;letter-spacing:-.04em!important}
.partyBoardHead small{color:#6d5d46!important;font-weight:800!important}
.partyCards{align-content:stretch!important}
.partyPick{
  border:0!important;
  border-radius:15px!important;
  clip-path:none!important;
  background:#fff7df!important;
  color:var(--v68-ink)!important;
  box-shadow:0 4px 0 rgba(78,65,48,.13),inset 0 0 0 1px rgba(92,72,46,.12)!important;
  transition:transform .12s ease,filter .12s ease,box-shadow .12s ease!important;
  transform:rotate(var(--card-tilt,0deg));
}
.partyPick:nth-child(4n+1){--card-tilt:-.55deg;background:#fff2c8!important}
.partyPick:nth-child(4n+2){--card-tilt:.45deg;background:#eaf4d8!important}
.partyPick:nth-child(4n+3){--card-tilt:-.35deg;background:#fbe0d5!important}
.partyPick:nth-child(4n+4){--card-tilt:.6deg;background:#dceff1!important}
.partyPick:not(:disabled):hover,.partyPick:not(:disabled):focus-visible{
  transform:translateY(-3px) rotate(calc(var(--card-tilt,0deg) * -1)) scale(1.015)!important;
  filter:saturate(1.08)!important;
  box-shadow:0 7px 0 rgba(78,65,48,.14),0 11px 18px rgba(43,70,65,.14)!important;
}
.partyPick img{
  filter:drop-shadow(0 4px 2px rgba(54,45,39,.18)) saturate(1.12)!important;
  animation:v68PartyBob 1.8s ease-in-out infinite alternate!important;
  transform-origin:50% 85%!important;
}
.partyPick:nth-child(2n) img{animation-delay:-.55s!important}.partyPick:nth-child(3n) img{animation-delay:-1.1s!important}
.partyPick strong{color:#30494c!important;font-weight:1000!important;letter-spacing:-.04em!important}
.partyPick.taken{filter:grayscale(.2) brightness(.92)!important;opacity:.58!important}
.partyPick.mine,.partyPick.pending{background:#fff0a9!important;box-shadow:0 0 0 3px #e6aa40,0 6px 0 #8a672d2e!important}
.partyPick i{background:rgba(43,67,71,.82)!important;color:#fff5d7!important;border-radius:7px!important;padding:2px 4px!important}
.partyLive{border:0!important;background:rgba(255,250,231,.55)!important;border-radius:11px!important;color:#38565a!important}
@keyframes v68PartyBob{from{transform:translateY(1px) rotate(-1.2deg) scale(.98)}to{transform:translateY(-3px) rotate(1.2deg) scale(1.025)}}

/* LOBBY ROSTER — only a translucent status list, not a white side panel. */
body.inLobby #app #info{
  width:min(210px,21vw)!important;
  top:max(56px,env(safe-area-inset-top))!important;
  right:max(10px,env(safe-area-inset-right))!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  overflow:visible!important;
}
body.inLobby #players{display:grid!important;grid-template-columns:1fr!important;gap:3px!important}
body.inLobby #players .player{
  position:relative!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:6px!important;
  align-items:center!important;
  width:100%!important;
  min-height:27px!important;
  height:auto!important;
  margin:0!important;
  padding:4px 7px 4px 12px!important;
  border:0!important;
  border-radius:9px!important;
  background:rgba(23,58,63,.50)!important;
  color:#fff3d3!important;
  box-shadow:none!important;
  clip-path:none!important;
  transform:none!important;
  backdrop-filter:blur(4px)!important;
  -webkit-backdrop-filter:blur(4px)!important;
}
body.inLobby #players .player::before{
  content:'';position:absolute;left:4px;top:50%;width:5px;height:14px;border-radius:5px;transform:translateY(-50%);background:var(--player-color,#f1c35f);
}
body.inLobby #players .avatar{display:none!important}
body.inLobby #players .playerText{min-width:0!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:6px!important}
body.inLobby #players .playerText b{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:10px!important;color:#fff4d7!important;line-height:1!important}
body.inLobby #players .playerText small{display:block!important;flex:0 0 auto!important;font-size:8px!important;line-height:1!important;color:#cfe8d4!important;font-weight:900!important;white-space:nowrap!important}
body.inLobby #players .player>span{font-size:7px!important;line-height:1!important;padding:3px 4px!important;border-radius:6px!important;background:rgba(244,202,88,.88)!important;color:#31474a!important}
body.inLobby #players .rosterEmpty,.rosterEmpty{display:none!important}

/* Brighter clubhouse without turning it into a flat carnival UI. */
body.inLobby #app{
  background:linear-gradient(180deg,#65979a 0%,#8eb2a0 57%,#c6b37d 100%)!important;
}

@media (orientation:landscape) and (pointer:coarse){
  .globalTools{top:max(5px,env(safe-area-inset-top))!important;right:max(6px,env(safe-area-inset-right))!important;gap:5px!important}
  .globalTools .toolIconBtn{width:34px!important;min-width:34px!important;height:34px!important;min-height:34px!important;border-radius:10px!important}
  #globalTools #quickFullscreenBtn::before{font-size:20px!important}
  #globalTools #settingsBtn::before{font-size:18px!important}
  body.inLobby #app #info{top:max(45px,env(safe-area-inset-top))!important;right:max(6px,env(safe-area-inset-right))!important;width:min(165px,22vw)!important}
  body.inLobby #players{gap:2px!important}
  body.inLobby #players .player{min-height:23px!important;padding:3px 5px 3px 10px!important;border-radius:7px!important;background:rgba(20,53,58,.45)!important}
  body.inLobby #players .player::before{left:3px;width:4px;height:11px!important}
  body.inLobby #players .playerText b{font-size:8.5px!important}
  body.inLobby #players .playerText small{font-size:7px!important}
  body.inLobby #players .player>span{font-size:6px!important;padding:2px 3px!important}
  .partyBoard{border-radius:14px!important}
  .partyPick{border-radius:10px!important}
}
/* Keep the online pill clear of the universal top-right controls. */
#join .homeTopActions{margin-right:96px!important}
@media (orientation:landscape) and (pointer:coarse){#join .homeTopActions{margin-right:80px!important}}