/* Public RPG landing. The authenticated interface keeps its existing layout. */
body.signed-out { background: #101e2b; color: #f5eddd; }
.signed-out main { max-width: 1600px; padding: 0 6vw; }
.signed-out #login-panel { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 390px; grid-template-rows: auto 1fr auto; column-gap: 6vw; max-width: none; min-height: 100svh; margin: 0; padding: 46px 0 25px; }
.city-scene { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, rgba(7,19,31,.16) 0%, rgba(7,19,31,.03) 43%, rgba(7,19,31,.64) 78%, rgba(7,19,31,.82) 100%), linear-gradient(0deg, rgba(5,15,24,.92), transparent 75%), url('/petersburg-night.png') center / cover; }
.city-brand, .city-story, .city-login, .city-bottom { position: relative; z-index: 1; }
.city-brand { grid-column: 1 / -1; display: flex; align-items: center; gap: 15px; font-size: 17px; font-weight: 600; letter-spacing: 5px; color: #f4e5c8; }
.city-brand img { filter: drop-shadow(0 2px 16px #06101c); }
.city-brand span { display: block; color: #d7c5a6; font-size: 8px; letter-spacing: 3px; margin-top: 8px; font-weight: 400; }
.city-story { align-self: end; padding: 100px 0 54px; }
.city-kicker { display: flex; align-items: center; gap: 14px; font-size: 9px; font-weight: 600; letter-spacing: 2.5px; color: #ecd3a4; }
.city-kicker > span { display: block; width: 37px; height: 1px; background: #d5b780; }
.city-story h1 { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-size: clamp(48px, 5.4vw, 82px); line-height: 1.08; letter-spacing: -2.4px; margin: 25px 0 24px; text-shadow: 0 3px 30px #06121d; }
.city-story h1 em { color: #e8c993; font-weight: 400; }
.city-story > p:not(.city-kicker) { color: #d3d6d5; font-size: 15px; font-weight: 300; line-height: 1.85; margin: 0; text-shadow: 0 2px 12px #091623; }
.city-coordinate { margin-top: 38px; font-size: 10px; letter-spacing: 2px; color: #c3bba9; font-variant-numeric: tabular-nums; }
.city-coordinate > span { display: block; font-size: 8px; letter-spacing: 2.7px; margin-top: 10px; color: #9babae; }
.city-login { align-self: center; margin-top: 30px; padding: 34px 34px 22px; border: 1px solid rgba(230,202,151,.24); border-radius: 4px; background: linear-gradient(150deg, rgba(20,38,52,.91), rgba(11,25,38,.96)); box-shadow: 0 24px 80px #020a1470, inset 0 0 0 6px #f9e5c403; backdrop-filter: blur(16px); }
.city-card-ornament { font-size: 25px; color: #dabc86; text-align: center; margin-bottom: 20px; }
.city-card-kicker { font-size: 8px; font-weight: 600; color: #b5a88f; letter-spacing: 2.6px; text-align: center; margin: 0 0 15px; }
.city-login h2 { text-align: center; font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-size: 28px; letter-spacing: -.6px; margin: 0 0 11px; color: #f4e7ce; }
.city-card-intro { text-align: center; font-size: 12px; color: #aebdc3; line-height: 1.5; margin: 0 0 29px; }
.city-login label { margin: 18px 0 8px; color: #cbd0cc; font-size: 11px; letter-spacing: .6px; }
.city-login input { background: #07172580; border: 1px solid #9eb5bf30; border-radius: 3px; padding: 13px 14px; margin: 0; font-size: 14px; color: #f5ead7; min-height: 48px; }
.city-login input::placeholder { color: #81939f; opacity: 1; }
.city-login input:focus { outline: 2px solid #d6b783; outline-offset: 3px; border-color: #d6b783; }
.city-login form > .primary { display: flex; justify-content: center; align-items: center; gap: 18px; width: 100%; background: linear-gradient(115deg,#dcc293,#b89963); color: #192731; border: 1px solid #eed6a6; border-radius: 3px; min-height: 50px; margin-top: 25px; font-size: 14px; font-weight: 650; box-shadow: 0 8px 22px #0003; }
.city-login .primary span { font-size: 20px; font-weight: 400; }
.city-login .primary:hover { filter: brightness(1.1); }
.city-card-bottom { display: flex; align-items: center; justify-content: center; gap: 13px; color: #9c8b6e; font-size: 12px; margin-top: 27px; }
.city-card-bottom span { height: 1px; width: 44px; background: linear-gradient(90deg,transparent,#ccb17a50); }
.city-card-bottom span:last-child { transform: rotate(180deg); }
.city-bottom { grid-column: 1 / -1; text-align: center; font-size: 8px; letter-spacing: 2.5px; color: #8d9a9d; padding-top: 20px; }
.signed-out #notice:not(:empty) { position: fixed; z-index: 5; bottom: 24px; right: 6vw; max-width: 390px; width: calc(100% - 24px); color: #f4e5c7; background: #27323d; border-color: #bfa275; box-shadow: 0 8px 35px #0008; font-size: 13px; }
@media (min-width: 1600px) { .signed-out #notice:not(:empty) { right: calc((100vw - 1600px)/2 + 96px); } }
@media (max-width: 900px) {
  .signed-out main { padding: 0 28px; }
  .signed-out #login-panel { grid-template-columns: minmax(0,1fr) 350px; column-gap: 30px; }
  .city-login { padding: 30px 26px 20px; }
  .city-story h1 { font-size: 48px; }
  .city-story > p:not(.city-kicker) { font-size: 13px; }
  .city-kicker { font-size: 8px; letter-spacing: 1.5px; }
  .city-kicker > span { width: 18px; }
  .signed-out #notice:not(:empty) { right: 28px; max-width: 350px; }
}
@media (max-width: 700px) {
  .signed-out main { padding: 0 22px; }
  .signed-out #login-panel { display: flex; flex-direction: column; align-items: stretch; min-height: 100svh; padding: 25px 0 24px; }
  .city-scene { background-position: 36% center; background-image: linear-gradient(0deg,rgba(5,15,24,.94) 0%,rgba(7,19,31,.50) 55%,rgba(7,19,31,.26) 100%),url('/petersburg-night.png'); }
  .city-brand { font-size: 13px; letter-spacing: 3.5px; gap: 12px; }
  .city-brand img { width: 40px; height: 40px; }
  .city-brand span { font-size: 7px; letter-spacing: 2px; margin-top: 6px; }
  .city-story { align-self: stretch; padding: 57px 0 27px; }
  .city-story h1 { font-size: clamp(43px,10vw,64px); line-height: 1.06; letter-spacing: -1.6px; margin: 18px 0 17px; }
  .city-story > p:not(.city-kicker) { font-size: 13px; line-height: 1.6; }
  .city-kicker { font-size: 7px; letter-spacing: 1.8px; }
  .city-coordinate { display: none; }
  .city-login { align-self: stretch; width: 100%; max-width: 430px; margin: 3px auto 0; padding: 24px 26px 16px; }
  .city-card-ornament { font-size: 20px; margin-bottom: 14px; }
  .city-card-kicker { font-size: 7px; margin-bottom: 13px; }
  .city-login h2 { font-size: 26px; }
  .city-card-intro { margin-bottom: 21px; font-size: 11px; }
  .city-login label { margin-top: 14px; }
  .city-login form > .primary { margin-top: 21px; }
  .city-card-bottom { margin-top: 20px; }
  .city-bottom { font-size: 7px; letter-spacing: 1.5px; margin-top: auto; padding-top: 26px; }
  .signed-out #notice:not(:empty) { right: 12px; max-width: none; bottom: 12px; }
}