/* Account fields keep the project's canonical MFM Pixel font and inherited
   sizing. Free-form fields preserve letter case; PLAYER ID remains the one
   canonical uppercase field. */
#identityScreen input,
#identityScreen textarea{
  text-transform:none;
}
#identityScreen #loginId,
#identityScreen #registerId,
#identityScreen #recoveryId{
  text-transform:uppercase;
}

#identityScreen .account-news-link{
  display:flex;
  align-items:center;
  gap:.42em;
  width:max-content;
  margin:8px 0 0;
  color:var(--gold);
  text-decoration:underline;
  text-underline-offset:3px;
  white-space:nowrap;
  line-height:1;
}
#identityScreen .account-news-link:hover,
#identityScreen .account-news-link:focus-visible{color:#fff;outline:0}
#identityScreen #identityError{display:block;width:100%;text-align:center}
#identityScreen .account-news-details{display:none}

/* LOGIN is one open CRT field. The account copy and terminal remain the two
   layout columns, but neither the old screen frame nor the old logo banner is
   drawn around them. */
body:has(#identityScreen:not([hidden])) #identityScreen{
  border:0!important;
  box-shadow:none!important;
  background:transparent!important;
}
body:has(#identityScreen:not([hidden])) .auth-topbar{
  display:none!important;
}

/* The logo belongs to the ACCOUNT & NEWS copy container. Make the logo itself
   full-width and center MONSTER / FUSION / MASTERS independently, rather than
   aligning every word to the left edge of the longest row. */
#identityScreen .auth-copy{
  min-width:0!important;
}
#identityScreen .account-logo-stage{
  box-sizing:border-box;
  width:min(100%,380.82px)!important;
  height:180px;
  margin:0 0 22px;
  padding-inline:0!important;
  display:flex;
  align-items:center;
  justify-content:flex-start!important;
  align-self:flex-start!important;
  overflow:visible;
}
#identityScreen .account-login-logo{
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  min-height:0!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:3px!important;
  transform:none!important;
  filter:drop-shadow(0 0 1px rgba(255,255,255,.18));
}
#identityScreen .account-login-logo .hex-logo-word{
  flex:0 0 54px!important;
  height:40px!important;
  width:max-content!important;
  margin:0 auto!important;
  align-self:center!important;
  transform:translateY(3px) scale(1.34)!important;
  transform-origin:center center!important;
}

/* Single desktop layout: logo group starts on the same left edge as ACCOUNT &
   NEWS and the paragraph below. */
body:has(#identityScreen:not([hidden])) .shell{
  grid-template-rows:minmax(0,1fr)!important;
}
body:has(#identityScreen:not([hidden])) #identityScreen{
  height:var(--mfm-frame-height,100dvh)!important;
  min-height:var(--mfm-frame-height,100dvh)!important;
}
#identityScreen .auth-copy{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
}

/* Wiki-style legal navigation spans the existing scaled body, following the
   full window width. Intrinsic content height keeps long forms scrollable. */
.auth-footer{display:none}
html[data-display-profile="desktop"] body:has(#identityScreen:not([hidden])){
  display:flex;
  flex-direction:column;
  overflow-y:auto!important;
  background:radial-gradient(ellipse at 50% 46%,#102321 0%,#081613 32%,#020705 58%,#000 80%)!important;
  background-attachment:fixed!important;
}
html[data-display-profile="desktop"] body:has(#identityScreen:not([hidden])) .shell{
  flex:1 0 auto;
  height:auto!important;
  min-height:0!important;
  overflow:visible!important;
  grid-template-rows:minmax(min-content,1fr)!important;
}
html[data-display-profile="desktop"] body:has(#identityScreen:not([hidden])) #identityScreen{
  height:auto!important;
  min-height:auto!important;
  overflow:visible;
}
body:has(#identityScreen:not([hidden])) .auth-footer{
  display:flex;
  container:mfm-auth-footer / inline-size;
  flex:none;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  width:100%;
  margin-inline:auto;
  padding:4px max(var(--mfm-frame-pad,12px),env(safe-area-inset-right)) 4px max(var(--mfm-frame-pad,12px),env(safe-area-inset-left));
  border-top:1px solid #2c302a;
  background:#000;
  color:#8d8a7b;
  font-size:12px;
  line-height:1.7;
  overflow-wrap:anywhere;
}
.auth-footer .rating-summary{display:flex;align-items:center;gap:10px;flex:1 1 285px;min-width:0}
.auth-footer [data-rating-locale="zh-TW"],
.auth-footer [lang="zh-Hant"]{font-family:"MFM Reading","MFM Pixel",monospace;letter-spacing:normal}
.auth-footer .rating-symbol{display:block;flex:none;width:52px;height:52px;object-fit:contain}
.auth-footer .rating-copy{min-width:0;overflow-wrap:anywhere;font-size:12px;line-height:1.4}
.auth-footer .rating-title{margin-bottom:6px;color:#c2c4bb;font-size:12px;font-weight:600}
.auth-footer .rating-pending{font-size:12px;font-weight:400;color:#a6aea7}
.auth-footer .rating-warning{color:#8d8a7b}
.auth-footer .rating-zh-notice[lang="zh-Hant"]{display:block;font-size:12px}
.auth-footer .rating-copy[data-rating-locale="zh-TW"]{display:none}
html[data-mfm-locale="zh-TW"] .auth-footer .rating-copy[data-rating-locale="en"]{display:none}
html[data-mfm-locale="zh-TW"] .auth-footer .rating-copy[data-rating-locale="zh-TW"]{display:block}
.auth-footer .footer-meta{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;width:max-content;max-width:100%;margin-left:auto;flex:0 1 auto}
.auth-footer .footer-copyright{display:flex;justify-content:space-between;align-items:center;gap:5px;white-space:nowrap;font-size:12px}
.auth-footer .footer-nav{display:flex;justify-content:space-between;flex-wrap:nowrap;align-items:center;gap:4px;width:100%;margin:0}
.auth-footer .footer-nav a+a::before{content:"/";display:inline-block;margin-right:7px;color:#45453c}
/* About has two locale-specific URLs; only one participates in the layout. */
.auth-footer [lang="zh-Hant"]{display:none}
html[data-mfm-locale="zh-TW"] .auth-footer [lang="en"]{display:none}
html[data-mfm-locale="zh-TW"] .auth-footer [lang="zh-Hant"]{display:revert}
.auth-footer .rating-zh-notice[lang="zh-Hant"]{display:block}
.auth-footer a{color:#8d8a7b;text-decoration:none;text-underline-offset:4px;white-space:nowrap}
.auth-footer a:hover{color:#b7ded7}
.auth-footer a:focus-visible{outline:2px solid #c8a951;outline-offset:4px}
@container mfm-auth-footer (max-width:760px){.auth-footer .rating-summary{flex:1 1 100%}.auth-footer .footer-meta{margin-left:auto}}
@container mfm-auth-footer (max-width:420px){.auth-footer .footer-copyright{font-size:12px;gap:3px}.auth-footer .footer-nav a+a::before{margin-right:4px}}
@container mfm-desktop-frame (max-width:700px){
  html[data-display-profile="desktop"] #identityScreen{
    grid-template-columns:minmax(0,1fr)!important;
    padding:22px 12px!important;
    gap:24px!important;
  }
  #identityScreen .auth-terminal{justify-self:center;max-width:500px}
  #identityScreen .auth-copy{width:100%;max-width:500px;justify-self:center}
  #identityScreen .account-logo-stage{max-width:100%}
}
@container mfm-desktop-frame (max-width:450px){
  #identityScreen .account-login-logo .hex-logo-word{transform:translateY(3px) scale(1.15)!important}
}
@container mfm-desktop-frame (max-width:350px){
  #identityScreen .account-login-logo .hex-logo-word{transform:translateY(3px)!important}
}
