.brand-public-logo{display:flex!important;align-items:center;gap:8px;max-width:min(480px,60vw);text-decoration:none}.brand-public-logo img{max-width:250px;width:auto;height:48px;object-fit:contain}.brand-public-logo img+img{max-width:130px}.brand-public-logo[data-style=small] img+img{max-width:60px}.brand-public-logo[data-style=equal] img{max-width:150px}.brand-public-logo[data-style=large] img:first-child{max-width:90px}.brand-public-logo[data-style=large] img+img{max-width:200px}#brandSecondary{display:block;padding:12px;text-align:center}#brandSecondary img{height:44px;max-width:80vw;object-fit:contain}#brandRestricted{position:fixed;inset:0;z-index:2000;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#111;padding:30px;text-align:center}#brandRestricted p{white-space:pre-wrap;max-width:700px;line-height:1.8;color:#222}#brandPublicLoading{display:flex;align-items:center;justify-content:center;padding:30px}#brandPublicLoading img{max-width:170px;max-height:170px}.brand-spinner{display:block;width:32px;height:32px;border:3px solid #d8e9ff;border-top-color:#3399ff;border-radius:50%;animation:brand-spin .8s linear infinite}.brand-progress{display:block;width:160px;height:5px;border-radius:8px;background:linear-gradient(90deg,#daeaff,#3399ff,#daeaff);background-size:200%;animation:brand-progress 1s linear infinite}.brand-loading-type{font-size:26px;color:#3399ff}.brand-pulse{animation:brand-pulse 1.4s ease-in-out infinite}@keyframes brand-spin{to{transform:rotate(360deg)}}@keyframes brand-progress{to{background-position:200%}}@keyframes brand-pulse{50%{transform:scale(.92);opacity:.6}}@media(max-width:600px){.brand-public-logo img{height:30px;max-width:140px}.brand-public-logo img+img{max-width:70px}.brand-public-logo[data-style=equal] img{max-width:90px}}@media(prefers-reduced-motion:reduce){.brand-spinner,.brand-progress,.brand-pulse{animation:none}}

#brandPublicLoading{flex-direction:column;gap:20px}.brand-skeleton{color:#3399ff;text-align:center}.brand-skeleton img{max-width:120px;max-height:120px}.brand-skeleton span{font-size:40px}

/* Header logo placement, shared by all screen sizes. */
body .shell .top[data-logo-position]{position:relative;display:flex!important;align-items:center;gap:10px}
body .shell .top[data-logo-position] .brand-public-logo{max-width:calc(100% - 78px);min-width:0;overflow:hidden;display:flex;align-items:center;flex-shrink:1}
body .shell .top[data-logo-position] .brand-public-logo img{max-width:100%;height:38px;width:auto;object-fit:contain;flex-shrink:1}
body .shell .top[data-logo-position=left] .brand-public-logo{position:static;transform:none;order:0;justify-content:flex-start}
body .shell .top[data-logo-position=left] .top-right{margin-left:auto;order:1}
body .shell .top[data-logo-position=center] .brand-public-logo{position:absolute;left:50%;transform:translateX(-50%);max-width:calc(100% - 150px);justify-content:center}
body .shell .top[data-logo-position=center] .top-right{margin-left:auto}
body .shell .top[data-logo-position=right] .brand-public-logo{position:static;transform:none;order:1;margin-left:auto;justify-content:flex-end}
body .shell .top[data-logo-position=right] .top-right{order:0;margin-left:0;margin-right:auto}
@media(max-width:360px){body .shell .top[data-logo-position] .brand-public-logo img{height:30px}}

/* Portrait artwork is only painted while the initial lobby loading node is present. */
#app:has(> .dc88-loading-splash)::before {
  content: "";
  position: fixed;
  inset: 0;
  margin-inline: auto;
  width: var(--ref-width, min(100vw, calc(100vh * 750 / 1334)));
  max-width: 100%;
  z-index: 0;
  pointer-events: none;
  background: var(--dc88-loading-background-image, none) center / cover no-repeat;
}
@supports (height: 100dvh) {
  #app:has(> .dc88-loading-splash)::before {
    width: var(--ref-width, min(100vw, calc(100dvh * 750 / 1334)));
  }
}
#app > .dc88-loading-splash,
#app:has(> .dc88-loading-splash) > :is(#brandPublicLoading, .notice-loading-art) {
  position: relative;
  z-index: 1;
}
.dc88-loading-splash > .dc88-loading-label {
  display: inline-block;
  border: 1px solid #c9e9f3;
  border-radius: 999px;
  padding: 7px 14px;
  background: #f5fcffe8;
  color: #07546a;
  font-weight: 650;
  box-shadow: 0 3px 18px #06182320;
}