/* The Play content only; navigation, docks, artwork and runtime screens stay shared. */
body.approved-site #hubPlay{
  display:grid!important;grid-template-rows:minmax(120px,1fr) auto auto!important;
  gap:24px!important;padding:36px 3vw 28px!important;box-sizing:border-box!important;
}
body.approved-site #hubPlay[hidden]{display:none!important}
body.approved-site #hubPlay .play-title{
  position:static!important;order:0!important;align-self:center!important;
  padding:0!important;margin:0!important;background:none!important;max-width:760px;
}
body.approved-site #hubPlay .play-title h2{font-size:clamp(28px,3vw,52px)!important;margin:14px 0 12px!important}
body.approved-site #hubPlay .play-title p{font-size:clamp(14px,1.2vw,19px)!important;margin:0!important;line-height:1.5}
body.approved-site #hubPlay .mode-list{
  display:flex!important;align-items:flex-end!important;gap:18px!important;
  width:100%!important;max-width:2200px!important;max-height:none!important;
  height:clamp(240px,35dvh,390px)!important;min-height:0!important;flex:none!important;
  margin:0 auto!important;
}
body.approved-site #hubPlay .mode:is(.m1,.m2,.m3,.m4){
  display:flex!important;flex-direction:column!important;flex:1 1 0!important;
  height:calc(100% - 40px)!important;min-height:0!important;min-width:0!important;
  padding:0!important;background-image:none!important;background:var(--hub-surface)!important;
  border:1px solid var(--hub-line)!important;border-radius:14px!important;
  overflow:hidden!important;isolation:isolate!important;text-align:left!important;
  transform:none!important;box-shadow:0 8px 22px #0003!important;
  transition:border-color .2s ease,box-shadow .2s ease,filter .2s ease!important;
}
body.approved-site #hubPlay .mode:before,body.approved-site #hubPlay .mode:after{display:none!important}
body.approved-site #hubPlay .mode-art{width:100%;min-height:0;flex:1;object-fit:cover;object-position:75% center;display:block}
body.approved-site #hubPlay .mode-info{
  position:relative;display:block;flex:0 0 auto;padding:18px 62px 20px 20px;
  min-height:128px;height:128px;box-sizing:border-box;background:var(--hub-surface);width:100%;
}
body.approved-site #hubPlay .mode .mode-kind{color:var(--hub-bronze)!important;font-size:10px!important;letter-spacing:1.7px!important;margin:0 0 9px!important;line-height:1.4}
body.approved-site #hubPlay .mode strong{color:var(--hub-text)!important;font-size:clamp(15px,1vw,20px)!important;line-height:1.15!important;max-width:none!important;letter-spacing:-.4px!important}
body.approved-site #hubPlay .mode small{color:var(--hub-muted)!important;font-size:13px!important;margin-top:8px!important;line-height:1.4}
body.approved-site #hubPlay .mode em{top:50%!important;right:16px!important;transform:translateY(-50%);width:38px!important;height:38px!important;color:var(--hub-bronze)!important;background:transparent!important;border-color:var(--hub-line)!important;font-size:28px!important}
body.approved-site #hubPlay .mode-list .mode:hover,
body.approved-site #hubPlay .mode-list .mode:focus-visible{
  flex-grow:1!important;height:calc(100% - 40px)!important;border:1px solid var(--hub-bronze)!important;
  box-shadow:inset 0 0 0 1px var(--hub-bronze),0 10px 28px #0004!important;
}
body.approved-site #hubPlay .mode:is(:hover,:focus-visible) strong{font-size:clamp(15px,1vw,20px)!important}
body.approved-site #hubPlay .lobby-bar{
  width:min(840px,100%)!important;justify-self:center!important;
  margin:0!important;gap:24px!important;min-height:76px!important;
}
body.approved-site #hubPlay .lobby-bar>button,
body.approved-site #hubPlay .lobby-bar>button[data-modal="Create Lobby"]{
  background:var(--hub-surface)!important;color:var(--hub-text)!important;
  min-height:76px!important;border-radius:12px!important;padding:14px 20px!important;
}
body.approved-site #hubPlay .lobby-bar>button[data-modal="Create Lobby"] :is(b,strong,small,em){color:var(--hub-text)!important}
body.approved-site #hubPlay .lobby-bar>button b{background:transparent!important;border-color:var(--hub-line)!important;color:var(--hub-bronze)!important}
body.approved-site #hubPlay .lobby-bar>button small{color:var(--hub-muted)!important}
body.approved-site #hubPlay .lobby-bar>button em{color:var(--hub-bronze)!important}
@media(min-width:651px) and (max-height:850px){
  body.approved-site #hubPlay{padding:18px 3vw 18px!important;gap:16px!important;grid-template-rows:minmax(90px,1fr) auto auto!important}
  body.approved-site #hubPlay .mode-list{height:clamp(230px,34dvh,280px)!important;gap:12px!important}
  body.approved-site #hubPlay .mode-info{padding:14px 48px 14px 14px;min-height:112px;height:112px}
  body.approved-site #hubPlay .mode em{right:10px!important;width:30px!important;height:30px!important}
}
@media(max-width:1000px){
  body.approved-site #hubPlay .mode-list{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));height:auto!important;gap:12px!important}
  body.approved-site #hubPlay .mode:is(.m1,.m2,.m3,.m4){height:210px!important}
  body.approved-site #hubPlay .mode-list:not(:has(.mode:hover,.mode:focus-visible)) .m4,
  body.approved-site #hubPlay .mode-list .mode:is(:hover,:focus-visible){height:210px!important;flex-grow:1!important}
  body.approved-site #hubPlay .mode-art{height:100px;flex:1}
  body.approved-site #hubPlay .mode strong,body.approved-site #hubPlay .mode:is(:hover,:focus-visible) strong,body.approved-site #hubPlay .mode-list .m4 strong{font-size:18px!important}
  body.approved-site #hubPlay .mode-info{min-height:102px;height:102px;padding:12px 48px 12px 14px}
  body.approved-site #hubPlay{height:auto!important;min-height:calc(100dvh - 168px)!important;padding:22px 3vw 100px!important;grid-template-rows:auto auto auto!important}
  body.approved-site #hubPlay .play-title{margin-bottom:6px!important}
}
@media(max-width:650px){
  body.approved-site #hubPlay .mode-list{grid-template-columns:1fr!important}
  body.approved-site #hubPlay .mode:is(.m1,.m2,.m3,.m4){height:235px!important}
  body.approved-site #hubPlay .mode-list:not(:has(.mode:hover,.mode:focus-visible)) .m4,
  body.approved-site #hubPlay .mode-list .mode:is(:hover,:focus-visible){height:235px!important}
  body.approved-site #hubPlay .lobby-bar{grid-template-columns:1fr!important;gap:12px!important}
}
@media(prefers-reduced-motion:reduce){body.approved-site #hubPlay .mode{transition:none!important}}