/* Preserve the original game's title composition and square pixel language. */
body[data-scene="hub"] #title.screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:safe center;width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:calc(42px + env(safe-area-inset-top,0px)) 20px calc(160px + env(safe-area-inset-bottom,0px));gap:16px;border:0;border-radius:0;background:transparent;box-shadow:none;text-align:center;overflow:auto;pointer-events:none;z-index:10}
body[data-scene="hub"] #title.screen>*{flex:none;grid-area:auto;margin-inline:auto}
body[data-scene="hub"] #title.screen .title-brand{display:flex;flex-direction:column;align-items:center;gap:0;align-self:auto;grid-area:auto}
body[data-scene="hub"] #title.screen h1{font-size:clamp(28px,7vw,64px);line-height:1.15;letter-spacing:2px;color:#f5d36a;text-shadow:4px 4px 0 #a8326e,8px 8px 0 #1b1226;margin:0}
body[data-scene="hub"] #title.screen h1 br{display:initial}
#emeryCredit{display:block;width:304px;height:68px;max-width:none;margin:6px 0 0;image-rendering:pixelated;image-rendering:crisp-edges}
body[data-scene="hub"] #title.screen .sub{display:block;font-size:clamp(10px,2vw,15px);line-height:1.6;margin-top:2px;color:#ffd0e8;text-shadow:2px 2px 0 #1b1226}
body[data-scene="hub"] #title.screen .mbtns{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:14px;pointer-events:auto;max-width:760px}
body[data-scene="hub"] #title.screen .title-primary .btn{font-size:clamp(10px,1.65vw,16px);line-height:1.5;min-height:44px;margin:6px 0 0;padding:14px 22px;border-radius:0}
body[data-scene="hub"] #title.screen .title-secondary{gap:20px}
body[data-scene="hub"] #title.screen .title-secondary .btn{font-size:9px;line-height:1.5;min-height:36px;margin:0;padding:8px 10px;border:2px solid #c8b8f0;border-radius:0;background:rgba(27,18,48,.7);color:#e9dcff;box-shadow:0 3px 0 #1b1226}
body[data-scene="hub"] #title.screen .hint{font-size:clamp(8px,1.2vw,11px);line-height:1.9;max-width:640px;text-align:center;color:#e5d2fa;text-shadow:2px 2px 0 #1b1226}
body[data-scene="hub"] #title.screen #mpNote{color:#aaf5ef}
body[data-scene="hub"] #title.screen #ctrlHint{font-size:9px;max-width:600px}
body[data-scene="hub"] #lobby.screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:safe center;width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:calc(54px + env(safe-area-inset-top,0px)) 20px calc(118px + env(safe-area-inset-bottom,0px));overflow:auto;background:transparent;pointer-events:none;z-index:10}
body[data-scene="hub"] #lobby.screen>.panel{width:100%;max-width:560px;margin:0;padding:20px 22px;border:4px solid #1b1226;border-radius:0;background:rgba(27,18,48,.9);box-shadow:inset 0 0 0 3px #6a4aa0,0 8px 0 rgba(0,0,0,.4);pointer-events:auto}
body[data-scene="hub"] #lobby.screen h2{font-size:clamp(12px,2vw,16px);line-height:1.7;margin:0 0 12px}
body[data-scene="hub"] #lobby.screen .code{font-size:clamp(26px,6vw,40px);letter-spacing:6px;line-height:1.4;margin:8px 0;color:#f5d36a;text-shadow:3px 3px 0 #a8326e}
body[data-scene="hub"] #lobby.screen .hint{font-size:9px;line-height:1.8}
body[data-scene="hub"] #lobby.screen .plist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:14px auto}
body[data-scene="hub"] #lobby.screen .pitem{font-size:8px;line-height:1.7;border:2px solid #4a3a7a;padding:8px;overflow-wrap:anywhere;background:#2a1c4a}
body[data-scene="hub"] #lobby.screen .btn{min-height:42px;font-size:10px;line-height:1.5;padding:10px 12px;border-radius:0}
body[data-scene="hub"] #mute{border-radius:0}
@media(max-width:599px){
  body[data-scene="hub"] #title.screen{gap:12px;padding:calc(42px + env(safe-area-inset-top,0px)) 18px calc(144px + env(safe-area-inset-bottom,0px))}
  #emeryCredit{width:152px;height:34px;margin-top:8px}
  body[data-scene="hub"] #title.screen h1{font-size:clamp(28px,8vw,42px)}
  body[data-scene="hub"] #title.screen .title-primary{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;width:100%;max-width:320px}
  body[data-scene="hub"] #title.screen .title-primary #playBtn{grid-column:1/-1;justify-self:center;min-width:204px}
  body[data-scene="hub"] #title.screen .title-primary .btn{font-size:10px;padding:11px 10px;margin:0}
  body[data-scene="hub"] #title.screen .title-secondary{gap:16px}
  body[data-scene="hub"] #title.screen .title-secondary .btn{font-size:8px}
  body[data-scene="hub"] #title.screen .hint{font-size:8px;max-width:340px}
  body[data-scene="hub"] #title.screen #ctrlHint{font-size:8px}
  body[data-scene="hub"] #lobby.screen{padding-inline:16px;padding-bottom:calc(144px + env(safe-area-inset-bottom,0px))}
  body[data-scene="hub"] #lobby.screen>.panel{padding:16px 12px}
}
@media(max-height:620px){
  body[data-scene="hub"] #title.screen{gap:8px;padding-top:36px;padding-bottom:72px}
  body[data-scene="hub"] #title.screen h1{font-size:32px}
  #emeryCredit{width:152px;height:34px;margin-top:3px}
  body[data-scene="hub"] #title.screen .sub{font-size:9px}
  body[data-scene="hub"] #title.screen .title-primary .btn{font-size:10px;padding:9px 12px;min-height:40px}
  body[data-scene="hub"] #title.screen .hint,body[data-scene="hub"] #title.screen #ctrlHint{font-size:8px;line-height:1.6}
  body[data-scene="hub"] #lobby.screen{padding-top:40px;padding-bottom:80px}
  body[data-scene="hub"] #lobby.screen>.panel{padding:14px}
  body[data-scene="hub"] #lobby.screen .plist{margin:8px 0;gap:6px}
}
@media(max-height:440px) and (min-width:600px){
  body[data-scene="hub"] #title.screen{gap:6px;padding-top:14px;padding-bottom:100px}
  body[data-scene="hub"] #title.screen h1{font-size:26px;line-height:1.08;text-shadow:3px 3px 0 #a8326e,5px 5px 0 #1b1226}
  #emeryCredit{height:34px;width:152px;margin-top:0}
  body[data-scene="hub"] #title.screen .sub{font-size:8px;line-height:1.3}
  body[data-scene="hub"] #title.screen .title-primary .btn{min-height:44px;font-size:9px;padding:6px 12px}
  body[data-scene="hub"] #title.screen .title-secondary .btn{min-height:36px;font-size:8px;padding:5px 9px}
  body[data-scene="hub"] #title.screen .hint,body[data-scene="hub"] #title.screen #ctrlHint{font-size:7px;line-height:1.5;max-width:580px}
  body[data-scene="hub"] #lobby.screen{padding-top:14px;padding-bottom:96px}
  body[data-scene="hub"] #lobby.screen>.panel{display:grid;grid-template-columns:1fr 1fr;gap:3px 14px;padding:12px 16px;max-width:560px}
  body[data-scene="hub"] #lobby.screen h2{grid-column:1/-1;margin:0 0 4px;font-size:11px}
  body[data-scene="hub"] #lobby.screen>.panel>.hint:nth-child(2){grid-column:1;grid-row:2}
  body[data-scene="hub"] #lobby.screen .code{grid-column:1;grid-row:3;margin:0;font-size:26px;letter-spacing:3px}
  body[data-scene="hub"] #lobby.screen #lobbyInfo{grid-column:1;grid-row:4;font-size:8px;line-height:1.5}
  body[data-scene="hub"] #lobby.screen #lobbyDiag{grid-column:1;grid-row:5;font-size:8px}
  body[data-scene="hub"] #lobby.screen .plist{grid-column:2;grid-row:2/6;margin:0;gap:4px;align-self:center}
  body[data-scene="hub"] #lobby.screen .pitem{font-size:7px;line-height:1.5;padding:4px;border-width:1px}
  body[data-scene="hub"] #lobby.screen .mbtns{grid-column:1/-1;margin-top:4px;gap:12px}
  body[data-scene="hub"] #lobby.screen .btn{font-size:9px;min-height:40px;padding:6px 10px}
}