/* ImageGen scenery is decorative. All identity, history and actions are HTML. */
body #loginDialog.sanctuary-login {
  width:100%; max-width:none; height:100dvh; max-height:none; margin:0;
  padding:0; border:0; border-radius:0; isolation:isolate;
  background:#091b25; color:#f8efdc; overflow:auto;
}
.sanctuary-art {position:fixed;inset:0;z-index:-2;background:url('/assets/welcome/everdawn-sanctuary-v1.png') center 43%/cover no-repeat;pointer-events:none;}
.sanctuary-art::after {content:"";position:absolute;inset:0;background:linear-gradient(90deg,#05131c70,transparent 60%),linear-gradient(0deg,#06131be8,transparent 75%);}
.welcome-layout {min-height:calc(100dvh - 48px);max-width:1260px;margin:auto;padding:clamp(30px,6vw,92px) 5vw 32px;display:grid;grid-template-columns:1.35fr 1fr;align-items:end;gap:clamp(40px,8vw,130px);box-sizing:border-box;}
.welcome-story {padding-bottom:50px;text-shadow:0 2px 20px #000;}
.welcome-kicker {font:11px/1.6 system-ui,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:#e9e2c8;}
#loginDialog #welcomeTitle {font:clamp(38px,5.3vw,76px)/1.02 Georgia,serif;letter-spacing:-.035em;color:#ffe6ac;margin:18px 0 16px;}
#welcomeTitle span {display:block;font-size:.43em;letter-spacing:.22em;text-transform:uppercase;margin:15px 0 0 3px;color:#fff0ca;white-space:nowrap;}
#loginDialog #welcomeTitle {text-align:left;}
.welcome-rule {display:flex;align-items:center;gap:15px;color:#cab776;width:min(310px,85%);margin:28px 0;}
.welcome-rule::before,.welcome-rule::after {content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,#c3a866);}
.welcome-rule::after {transform:rotate(180deg);}
#loginDialog .welcome-story p {font:clamp(18px,2vw,26px)/1.55 Georgia,serif;color:#f2ecde;margin:0 0 24px;}
.welcome-edition {font:10px/1.5 system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#bde4e1;}
.welcome-entry {width:100%;max-width:380px;justify-self:end;}
#loginDialog #loginForm {padding:28px;border:1px solid #cab5786b;border-radius:18px;background:linear-gradient(145deg,#132e37ed,#09161ff5);box-shadow:0 20px 80px #0008,inset 0 0 0 5px #a38e4e09;backdrop-filter:blur(14px);}
#loginDialog #loginForm>.eyebrow {text-align:left;font-size:9px;letter-spacing:.17em;color:#bde0da;}
#loginForm h3 {font:30px/1.2 Georgia,serif;margin:10px 0;color:#ffe5ad;}
#loginDialog #loginForm>p {font-size:13px;line-height:1.5;color:#d9e2e3;}
#loginDialog #loginForm label {font:12px/1.5 system-ui,sans-serif;letter-spacing:.02em;display:block;margin:18px 0 6px;color:#efe9d9;}
#loginDialog #loginForm input {min-height:46px;width:100%;box-sizing:border-box;border-radius:8px;background:#07141edb;border:1px solid #96beb05e;color:#fff4df;padding:11px 12px;font-size:16px;}
#loginDialog #enter {min-height:50px;margin-top:22px;width:100%;border-radius:8px;background:linear-gradient(115deg,#ecd09c,#b9995b);border:1px solid #ffe8b7;color:#182526;text-shadow:none;font-size:15px;box-shadow:0 4px 18px #0004;}
#loginDialog #enter:hover {background:#f5dfb2;transform:translateY(-1px);}
#loginDialog #loginError:empty {display:none;}
#loginDialog #loginError {color:#ffc4b9;}
#loginDialog .login-settings {display:block;width:100%;min-height:36px;margin:12px 0 0;border:0;background:transparent;color:#b5ccc9;font-size:11px;padding:6px;}
body:has(#loginDialog[open]) #settingsDialog label:has(#graphicsMode) {display:none;}
#creditsButton {width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px;padding:16px 20px;border:1px solid #91c6c058;border-radius:12px;background:#0c202bec;color:#eddfbb;box-shadow:0 6px 30px #0004;text-align:left;}
#creditsButton>span:nth-child(2) {flex:1;font:18px/1.2 Georgia,serif;}
#creditsButton small {display:block;font:11px/1.5 system-ui,sans-serif;color:#bcd4d3;margin-top:5px;}
#creditsButton>span:first-child {font-size:26px;color:#b6daec;text-shadow:0 0 18px #938eff;}
#creditsButton:hover {border-color:#d6c58c;background:#153c46;}
#loginDialog .welcome-footer {margin:0;padding:0 20px 22px;text-align:center;font:10px/1.4 system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#b8cccd;}
.sanctuary-sparks {position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.5;background:radial-gradient(circle at 12% 72%,#a7cbff 0 1px,transparent 3px),radial-gradient(circle at 75% 30%,#ffda8a 0 1px,transparent 3px),radial-gradient(circle at 82% 76%,#c7b6ff 0 1px,transparent 3px),radial-gradient(circle at 32% 46%,#fff0c6 0 1px,transparent 3px);animation:sanctuary-drift 14s ease-in-out infinite alternate;}
@keyframes sanctuary-drift {to {transform:translateY(-18px);opacity:.85;}}
body #creditsDialog.sanctuary-credits {width:min(760px,calc(100% - 28px));max-width:none;max-height:min(900px,calc(100dvh - 32px));padding:0;border:1px solid #c6ba876e;border-radius:20px;color:#f4ecda;background:linear-gradient(#081c27e8,#091820f7),url('/assets/welcome/everdawn-sanctuary-v1.png') center top/cover;box-shadow:0 30px 100px #000b;overflow:hidden;}
#creditsDialog[open] {display:flex;flex-direction:column;animation:credits-arrive .28s ease-out;}
#creditsDialog.sanctuary-credits {margin:auto;}
#creditsDialog::backdrop {background:#030e19bb;backdrop-filter:blur(9px);}
.credits-scroll {padding:34px 38px 12px;overflow:auto;overscroll-behavior:contain;min-height:0;scrollbar-color:#8a9b93 #0b2029;}
#creditsDialog .credits-heading {display:block;height:auto;background:none;border:0;padding:0 40px 0 0;margin:0 0 22px;}
#creditsDialog .eyebrow {font:10px/1.5 system-ui,sans-serif;letter-spacing:.18em;color:#b3d9d5;}
#creditsDialog h2 {font:clamp(24px,3vw,34px)/1.15 Georgia,serif;margin:10px 0 0;color:#f8e5b9;}
#creditsDialog .credits-close {position:absolute;right:16px;top:14px;z-index:2;width:44px;height:44px;padding:0;margin:0;border:1px solid #c6bb8255;border-radius:50%;background:#0d2530;color:#ede4ca;font-size:26px;}
.credits-feature {position:relative;isolation:isolate;padding:26px 28px;border:1px solid #bfcecead;border-radius:14px;background:radial-gradient(ellipse at 95% 10%,#7568a859,transparent 65%),linear-gradient(120deg,#194957,#132b40);box-shadow:inset 0 0 0 5px #c5d7d508,0 0 34px #7567b82b;}
.credits-feature::before,.credits-feature::after {content:"✧";position:absolute;top:12px;right:14px;font-size:26px;color:#d9d1ff;text-shadow:0 0 15px #ad8efb;pointer-events:none;}
.credits-feature::after {top:auto;bottom:10px;right:12px;font-size:16px;}
.credits-feature::before {animation:crystal-light 6s ease-in-out infinite alternate;}
@keyframes crystal-light {to {opacity:.55;text-shadow:0 0 22px #ad8efb;}}
#creditsDialog .credits-feature h3 {font:29px/1.15 Georgia,serif;color:#ffebba;margin:12px 0;}
.credits-feature h3 span {display:block;font-size:.83em;margin-top:5px;}
#creditsDialog .project-creators {color:#e2e6ef;font-size:14px;margin:12px 0 18px;}
.official-project-link {display:inline-flex;align-items:center;justify-content:center;gap:13px;min-height:48px;padding:10px 18px;box-sizing:border-box;border:1px solid #f4e2b4;border-radius:8px;background:linear-gradient(115deg,#f3deb1,#c7a46b);color:#102b34;text-decoration:none;font:600 14px/1.4 system-ui,sans-serif;box-shadow:0 4px 18px #060d2555;transition:background .2s,box-shadow .2s,transform .2s;}
.official-project-link:hover {background:#fff0cb;box-shadow:0 0 25px #beaaea60;transform:translateY(-2px);}
.credits-feature>small {display:block;margin-top:10px;color:#c3d8dd;font:11px/1.5 system-ui,sans-serif;letter-spacing:.04em;}
#creditsDialog #creditsIntro {font:14px/1.7 system-ui,sans-serif;color:#d0dce0;margin:26px 0 10px;}
.credits-history section {padding:24px 0;border-bottom:1px solid #a4b5ad30;}
.credits-history section:last-child {border:0;padding-bottom:18px;}
#creditsDialog .credits-history h3 {font:12px/1.5 system-ui,sans-serif;text-transform:uppercase;letter-spacing:.1em;color:#b7d5d2;margin:0 0 13px;}
.credits-history h3 span {color:#d8bd85;white-space:nowrap;}
.credits-history h4 {font:20px/1.4 Georgia,serif;color:#f3dfb7;margin:18px 0 7px;}
#creditsDialog .credits-history p {font:14px/1.75 system-ui,sans-serif;color:#dee3e5;margin:0;}
#creditsDialog .credits-footer {display:block;height:auto;min-height:71px;flex-shrink:0;margin:0;padding:14px 28px max(14px,env(safe-area-inset-bottom));border-top:1px solid #a4b5ad40;background:#081b26f5;box-sizing:border-box;}
#creditsDialog #backToMain {width:100%;min-height:46px;margin:0;border:1px solid #b9c6b86b;border-radius:8px;background:#193440;color:#f1e7ca;font-size:14px;}
#creditsDialog #backToMain:hover {background:#24515a;}
#loginDialog :focus-visible,#creditsDialog :focus-visible {outline:3px solid #c8f4fa;outline-offset:4px;box-shadow:0 0 0 6px #0c2632;}
.sr-only {position:absolute!important;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
@keyframes credits-arrive {from {opacity:0;transform:translateY(10px);}to {opacity:1;transform:none;}}
@media(max-width:700px) {
  .welcome-layout {display:flex;flex-direction:column;gap:22px;align-items:center;padding:36px 20px 18px;min-height:calc(100dvh - 44px);justify-content:center;}
  .welcome-story {padding:0;text-align:center;}
  .welcome-kicker {font-size:9px;letter-spacing:.16em;}
  #loginDialog #welcomeTitle {font-size:clamp(36px,9vw,52px);margin:14px 0;text-align:center;}
  #welcomeTitle span {margin-top:9px;}
  .welcome-rule {margin:16px auto 12px;width:210px;}
  #loginDialog .welcome-story p {display:none;}
  .welcome-edition {font-size:9px;}
  .welcome-entry {max-width:380px;}
  #loginDialog #loginForm {padding:22px;}
  #loginForm h3 {font-size:26px;}
  #loginDialog #loginForm label {margin-top:13px;}
  #creditsButton {padding:12px 18px;}
  .sanctuary-art {background-position:54% center;}
  body #creditsDialog.sanctuary-credits {width:calc(100% - 16px);max-height:calc(100dvh - 16px);border-radius:14px;}
  .credits-scroll {padding:26px 20px 10px;}
  #creditsDialog .credits-heading {padding-right:32px;margin-bottom:18px;}
  #creditsDialog h2 {font-size:25px;}
  .credits-feature {padding:22px 18px;}
  #creditsDialog .credits-feature h3 {font-size:26px;}
  .official-project-link {display:flex;width:100%;font-size:13px;padding:10px;gap:8px;}
  #creditsDialog .credits-footer {padding:12px 18px max(12px,env(safe-area-inset-bottom));}
}
@media(prefers-reduced-motion:reduce) {
  .sanctuary-sparks,#creditsDialog[open] {animation:none!important;}
  .credits-feature::before {animation:none!important;}
  #loginDialog *,#creditsDialog * {transition:none!important;scroll-behavior:auto!important;}
  .official-project-link:hover,#loginDialog #enter:hover {transform:none;}
}