/*
  Starhallow Online - sign-in and recovery pages (concept "gate" layout).
  Public: loaded on the dev gate, so this file must not reference any gated image.
  Its two images (town banner, Puffling) are public assets; every other image stays behind the gate.
*/

.concept-gate main { padding-block: 0 36px; }
.gate-wrap { max-width: 1480px; margin: 50px auto 0; padding-inline: 28px; }

/* Hero: town banner, with a painted-sky fallback while it loads. */
.gate-hero { position: relative; height: 440px; border: 1px solid #bfac71; border-radius: 10px; overflow: hidden; isolation: isolate; box-shadow: inset 0 0 0 3px #fffaf0a0, 0 3px 10px #8e79373a;
  background:
    radial-gradient(circle at 50% 74%, #fff6d0 0, #ffe9a8a0 9%, transparent 26%),
    radial-gradient(ellipse 16% 6% at 16% 24%, #fffdf6e6, transparent 70%),
    radial-gradient(ellipse 12% 5% at 26% 20%, #fffdf6cc, transparent 70%),
    radial-gradient(ellipse 18% 6% at 78% 18%, #fffdf6d8, transparent 70%),
    radial-gradient(ellipse 36% 20% at 10% 86%, #3f7656 0 58%, transparent 60%),
    radial-gradient(ellipse 34% 18% at 92% 84%, #3b7053 0 58%, transparent 60%),
    radial-gradient(ellipse 44% 16% at 50% 96%, #5a8d62 0 58%, transparent 60%),
    radial-gradient(ellipse 30% 22% at 28% 82%, #7fa8a8 0 58%, transparent 60%),
    radial-gradient(ellipse 34% 24% at 70% 80%, #8db3b5 0 58%, transparent 60%),
    radial-gradient(ellipse 22% 26% at 50% 78%, #a9c6c6 0 58%, transparent 60%),
    linear-gradient(#6fb3cf, #a9d6e3 38%, #e9eedb 64%, #f6e7bd 80%);
}
.gate-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; z-index: -2; }
.gate-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, #fffdf2e0 0%, #fffdf200 34%, #fffdf200 62%, #f5ecd3 100%); }
.gate-title { text-align: center; padding: 30px 16px 0; }
.gate-title .gate-heading { margin: 0; font: 700 58px/1.05 "Times New Roman", Georgia, serif; color: #133047; text-shadow: 0 2px 14px #fffef4, 0 0 22px #fffef4; }
.gate-title p { margin: 8px 0 0; font: 20px Georgia, serif; color: #23414f; text-shadow: 0 0 12px #fffef4; }
.ribbon { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 6px 26px; background: linear-gradient(#f6dc94, #e2bd63); border: 1px solid #b38b38; border-radius: 999px; box-shadow: inset 0 0 0 2px #fbe9b7; font: 17px "Times New Roman", serif; color: #173847; }
.gate-hero.short { height: 300px; }

/* Cards row overlapping the hero. */
.gate-row { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 440px 1fr; gap: 18px; align-items: start; margin: -150px 40px 0; }
.gate-row.single { grid-template-columns: minmax(0, 470px); justify-content: center; margin-top: -110px; }
.gate-card { position: relative; padding: 18px 20px; border: 1px solid #cfad67; border-radius: 10px; background: linear-gradient(120deg, #fffef8, #fcf8ec); box-shadow: inset 0 0 0 3px #fffdf1, inset 0 0 0 4px #eadabc, 0 2px 6px #8b712218; color: #1d3440; }
.gate-card.main { padding: 26px 30px 22px; box-shadow: inset 0 0 0 3px #fffdf1, inset 0 0 0 4px #eadabc, 0 10px 30px #3c2f0f40; }
.gate-side { margin-top: 110px; }
.gate-card h2, .gate-card h1 { display: flex; align-items: center; margin: 0 0 10px; font: 700 21px/1.2 "Times New Roman", Georgia, serif; color: #133047; }
.gate-card.main h1 { justify-content: center; font-size: 28px; margin-bottom: 14px; }
.gate-card .gi { flex: none; width: 30px; height: 30px; padding: 6px; margin-inline-end: 11px; border-radius: 50%; background: #153f50; box-shadow: 0 0 0 2px #e3cf98; fill: none; stroke: #f4e6bf; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.gate-card p { margin: 0 0 10px; font: 15.5px/1.5 Georgia, serif; color: #2b4250; }
.gate-card .muted, .gate-card .field-hint { font-size: 14px; color: #5b6b70; }
.gate-card .notice-text { font-size: 17px; text-align: center; }
.gate-rule { display: flex; align-items: center; gap: 10px; width: 220px; margin: 10px auto 0; color: #b48b35; }
.gate-rule::before, .gate-rule::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #c9a24f); }
.gate-rule::after { background: linear-gradient(90deg, #c9a24f, transparent); }
.gate-links { text-align: center; margin-top: 12px !important; }
.gate-links a, .gate-card a.link { font: 14.5px Georgia, serif; color: #1b5d66; text-decoration: underline; text-underline-offset: 3px; }

/* Help row (same look as the portal's help rows). */
.portal-classic .gate-help, .gate-help { text-decoration: none; }
.gate-help { display: flex; align-items: center; gap: 12px; min-height: 52px; padding-block: 9px; border-top: 1px solid #e8ddc4; text-decoration: none; color: inherit; }
.gate-help svg { flex: none; width: 26px; height: 26px; fill: none; stroke: #1d5d6b; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gate-help strong { display: block; font: 700 15.5px Georgia, serif; color: #173f54; }
.gate-help small { display: block; font: 13px Georgia, serif; color: #4f6168; }
.gate-help .chev { margin-inline-start: auto; font-size: 22px; color: #1d5d6b; }

/* Welcome card art. */
.gate-mascot { aspect-ratio: 292/210; margin-bottom: 12px; border: 1px solid #d0b67d; border-radius: 3px; overflow: hidden; }
.gate-mascot img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Forms. */
.gate-card .auth-form { display: grid; gap: 4px; }
.gate-card .field { display: grid; gap: 6px; position: relative; margin-top: 6px; }
.gate-card .field label { font: 700 14.5px Georgia, serif; color: #1d3440; }
.gate-card .field input:not([type=hidden]) { width: 100%; min-height: 46px; padding: 0 14px; border: 1px solid #d6cbb2; border-radius: 4px; background: #fffdf8; font: 15px Georgia, serif; color: #1f3540; box-shadow: inset 0 1px 2px #8b712212; }
.gate-card .field input[type=password] { padding-right: 70px; }
.gate-card .field input:focus-visible { outline: 2px solid #1e6263; outline-offset: 1px; }
.gate-card .field input + .pw-toggle { position: absolute; right: 6px; top: 31px; height: 34px; min-height: 0; margin: 0; padding: 0 10px; border: 0; background: none; box-shadow: none; clip-path: none; color: #1e5560; font: 14px Georgia, serif; text-decoration: underline; cursor: pointer; }
.gate-card .field-hint { margin: 2px 0 0; }
.gate-card button.btn-primary { width: 100%; min-height: 54px; margin-top: 16px; border: 1px solid #d7ae5d; background: linear-gradient(#1a5767, #0a394c); box-shadow: inset 0 0 0 2px #123d4b, inset 0 0 0 3px #d9b96c; color: #fff3d6; font: 600 20px "Times New Roman", Georgia, serif; cursor: pointer; clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px); }
.gate-card button.btn-primary:hover { background: linear-gradient(#20667a, #0e4459); }
.gate-card .alert { margin: 0 0 10px; padding: 10px 14px; border-radius: 4px; font: 15px Georgia, serif; }
.gate-card .alert-error { background: #fbe7e2; border: 1px solid #e3a99c; color: #8f2f22; }
.gate-card .alert-info { background: #e2edf8; border: 1px solid #a9c3e3; color: #2c5d93; }
.gate-card .alert-ok { background: #e5f2e3; border: 1px solid #a9cfae; color: #2f6e3f; }

@media (max-width: 1100px) {
  .gate-row { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); margin-inline: 20px; }
  .gate-row .gate-side.left { grid-column: 1 / -1; order: 3; margin-top: 0; }
  .gate-row .gate-side.right { order: 2; margin-top: 110px; }
  .gate-row .gate-card.main { order: 1; }
}
@media (max-width: 760px) {
  .gate-wrap { padding-inline: 14px; margin-top: 12px; }
  .gate-hero { height: 300px; }
  .gate-hero.short { height: 230px; }
  .gate-title { padding: 22px 14px 0; }
  .gate-title .gate-heading { font-size: 38px; }
  .gate-title p { font-size: 16px; }
  .gate-row, .gate-row.single { grid-template-columns: minmax(0, 1fr); margin: -90px 0 0; }
  .gate-row .gate-side { margin-top: 0; }
  .gate-row .gate-side.left { order: 2; }
  .gate-row .gate-side.right { order: 3; }
  .gate-card.main { padding: 22px 18px 18px; }
}