/* The account page and the arrival page (r56 D, #322): on dist/theme.css's tokens and dist/components.css's components
   (body.page): the buttons, fields, the primary (confirm) and quiet buttons, the card (dialog). Here only the page's
   own layout and art: the title landscape, the title, the card's gold double edge and corner marks, the lanterns. */
:root{color-scheme:dark}
*{box-sizing:border-box}
body.page{margin:0;min-height:100vh;min-height:100dvh;box-sizing:border-box;
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);
  display:grid;place-items:center;background:radial-gradient(ellipse at 50% 20%,var(--pal-title-sky),var(--ui-surface-0) 70%)}
body.page [hidden]{display:none}

/* the title landscape (art) */
.title-landscape{position:fixed;inset:0;overflow:hidden;pointer-events:none}
.moon{position:absolute;top:12%;left:22%;width:90px;height:90px;border-radius:var(--ui-radius-round);background:var(--pal-title-moon);
  box-shadow:var(--pal-title-moon-halo)}
.mountains{position:absolute;bottom:0;width:100%;height:65%;background:var(--pal-title-far-hills);
  clip-path:polygon(0 38%,12% 22%,23% 44%,34% 12%,48% 42%,61% 15%,74% 35%,84% 8%,100% 32%,100% 100%,0 100%)}
.near{height:43%;background:var(--pal-title-near-hills);transform:scaleX(-1)}
.keep{position:absolute;right:14%;bottom:22%;width:140px;height:145px;background:var(--pal-title-keep);
  border-top:var(--ui-space-md) solid var(--pal-title-keep-top)}
.keep i{position:absolute;bottom:0;width:40px;height:180px;background:var(--pal-title-tower);border-top:var(--ui-space-md) solid var(--pal-title-tower-top)}
.keep i:first-child{left:-20px}
.keep i:nth-child(2){right:-20px}
.keep i:last-child{left:53px;height:210px;width:35px}
.keep i:after{content:'';position:absolute;top:35px;left:15px;width:6px;height:16px;background:var(--pal-title-window);
  box-shadow:var(--pal-title-window-glow)}
.mist{position:absolute;inset:0;background:linear-gradient(0deg,var(--pal-title-mist),transparent 50%),
  radial-gradient(ellipse at 50% 80%,color-mix(in srgb,var(--pal-title-mist-glow) 8%,transparent),transparent 65%)}

/* the title */
.title-screen{position:relative;width:min(440px,calc(100% - 44px));padding:calc(var(--ui-space-xl) + var(--ui-space-md)) 0;text-align:center}
.game-title h1{font-family:var(--ui-font-serif);font-size:clamp(var(--ui-fs-h1),7vw,var(--ui-fs-banner));font-weight:400;line-height:1.08;
  letter-spacing:.055em;margin:var(--ui-space-md) 0;color:var(--ui-gold-light);text-shadow:var(--pal-title-text-shadow)}
.game-title>p:last-child{font-family:var(--ui-font-serif);font-style:italic;font-size:var(--ui-fs-num);color:var(--ui-text-2);
  margin:var(--ui-space-lg) 0 calc(var(--ui-space-xl) + var(--ui-space-lg))}
.eyebrow{font-size:var(--ui-fs-xs);letter-spacing:.26em;color:var(--ui-gold-light);margin:0}

/* the card: the dialog's glass, with the page's gold double edge and corner marks */
.login-frame{position:relative;background:var(--ui-glass-strong);border:var(--ui-border) solid var(--ui-gold-line);border-radius:0;
  box-shadow:var(--ui-shadow-pop);color:var(--ui-text);outline:var(--ui-border) solid color-mix(in srgb,var(--ui-gold-line) 45%,transparent);
  outline-offset:var(--ui-space-xs);padding:calc(var(--ui-space-xl) + var(--ui-space-md)) calc(var(--ui-space-xl) + var(--ui-space-lg)) var(--ui-space-xl)}
.login-frame:before,.login-frame:after{content:'◆';position:absolute;top:-9px;color:var(--ui-gold);font-size:var(--ui-fs-lg)}
.login-frame:before{left:10px}
.login-frame:after{right:10px}
.login-frame h2{font-family:var(--ui-font-serif);font-size:var(--ui-fs-display);font-weight:400;color:var(--ui-gold-light);margin:0 0 var(--ui-space-xl)}
.login-frame p{line-height:1.5}
/* Returning player / New adventurer: two buttons side by side, the chosen one in the shared selected state */
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:var(--ui-space-xs)}
.tabs button{min-height:var(--ui-h-md);padding:var(--ui-space-sm) var(--ui-space-xs);font-size:var(--ui-fs-lg)}
/* the confirm button fills the card's width */
.login-frame .primary{display:flex;align-items:center;justify-content:center;gap:var(--ui-space-md);width:100%;min-height:var(--ui-h-lg);
  margin:var(--ui-space-xl) 0 0;padding:var(--ui-space-md);border:var(--ui-border) solid;border-radius:var(--ui-radius-sm);
  font-size:var(--ui-fs-num);font-weight:var(--ui-fw-strong);letter-spacing:.03em;text-decoration:none}
.quiet,#password-help{font-size:var(--ui-fs-md);color:var(--ui-text-muted);line-height:1.6}
.quiet{margin:var(--ui-space-xl) 0 0}
#message{color:var(--ui-danger);font-size:var(--ui-fs-lg);margin:var(--ui-space-lg) 0 0}
#message:empty{display:none}
#message.signed-out-note{color:var(--ui-text-2)}
footer{display:flex;align-items:center;justify-content:space-between;gap:var(--ui-space-md);margin-top:var(--ui-space-xl);color:var(--ui-text-muted);font-size:var(--ui-fs-xs)}
/* #248 option B: Log out leaves the world and lands here still signed in; Sign out (this button) ends the sign-in */
.sign-out{display:block;margin:var(--ui-space-xl) auto 0;min-height:var(--ui-h-md);padding:var(--ui-space-sm) calc(var(--ui-space-xl) + var(--ui-space-sm))}
.sign-out[hidden]{display:none}
.lantern{position:absolute;top:58px;width:15px;height:27px;background:var(--pal-title-lantern);border:var(--ui-border-chosen) solid var(--pal-title-lantern-frame);
  box-shadow:var(--pal-title-lantern-glow);animation:lantern-glow 4s ease-in-out infinite alternate}
.lantern.left{left:-24px}
.lantern.right{right:-24px;animation-delay:-2s}
@keyframes lantern-glow{to{box-shadow:var(--pal-title-lantern-glow-lit);background:var(--pal-title-lantern-lit)}}
@media(prefers-reduced-motion:reduce){.lantern{animation:none}}
@media(max-height:700px){.title-screen{padding:var(--ui-space-xl) 0}
  .game-title h1{font-size:var(--ui-fs-jumbo)}
  .game-title>p:last-child{margin:var(--ui-space-md) 0 calc(var(--ui-space-xl) + var(--ui-space-xs))}
  .login-frame{padding:calc(var(--ui-space-xl) + var(--ui-space-xs)) calc(var(--ui-space-xl) + var(--ui-space-md)) var(--ui-space-lg)}
  .login-frame h2{font-size:var(--ui-fs-h2);margin-bottom:var(--ui-space-lg)}
  .login-frame .primary{margin-top:var(--ui-space-lg)}
  footer{margin-top:var(--ui-space-lg)}}
@media(max-width:500px){.moon{left:8%;top:6%;width:65px;height:65px}
  .keep{right:-8%}
  .lantern{display:none}
  .login-frame{padding-inline:calc(var(--ui-space-xl) + var(--ui-space-sm))}}
/* Landscape phones (#138): the title on the left, the form on the right, everything visible at once without
   scrolling. The character creator scrolls inside its frame if it must. */
@media (orientation:landscape) and (max-height:500px){
  .title-screen{width:min(900px,calc(100% - 20px));padding:var(--ui-space-md) 0;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
    grid-template-rows:auto 1fr;gap:var(--ui-space-xs) calc(var(--ui-space-xl) + var(--ui-space-2xs));align-items:center;text-align:left}
  .game-title{grid-column:1;grid-row:1}
  .game-title h1{font-size:var(--ui-fs-h1);margin:0;letter-spacing:.06em}
  .game-title>p:last-child{font-size:var(--ui-fs-md);margin:var(--ui-space-sm) 0 0}
  .login-frame{grid-column:2;grid-row:1/3;padding:var(--ui-space-lg) var(--ui-space-xl) var(--ui-space-md);max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);
    overflow:auto;outline-offset:var(--ui-space-2xs)}
  footer{grid-column:1;grid-row:2;align-self:start;flex-direction:column;align-items:flex-start;margin-top:0}
  .lantern,.moon{display:none}
  .login-frame h2{font-size:var(--ui-fs-title);margin:0 0 var(--ui-space-sm)}
  .quiet{margin-top:var(--ui-space-md);font-size:var(--ui-fs-sm);line-height:1.4}
  #message{margin-top:var(--ui-space-sm)}
  .login-frame .primary{margin-top:var(--ui-space-lg)}}
/* #239 (r46, Joseph 5 Oct): the world-switch pop-up wears the page's own card, heading and buttons; the dialog itself
   is only a transparent box inside the safe areas (room for the card's outline and corner marks). */
.world-stay-dialog{background:none;border:0;padding:var(--ui-space-lg);color:inherit;overflow:auto;max-width:min(520px,calc(100vw - 24px - env(safe-area-inset-left) - env(safe-area-inset-right)));max-height:calc(100vh - 24px - env(safe-area-inset-bottom));max-height:calc(100dvh - 24px - env(safe-area-inset-bottom))}
.world-stay-dialog header{display:flex;justify-content:space-between;align-items:center;gap:var(--ui-space-lg)}
.world-stay-dialog h2{margin:0}
.world-stay-dialog header>button{min-height:var(--ui-h-lg)}
.world-stay-dialog p{margin:var(--ui-space-lg) 0}
.home-screen-help summary{min-height:var(--ui-h-lg);box-sizing:border-box;padding:var(--ui-space-lg) 0;cursor:pointer}
.home-screen-help ol{margin:var(--ui-space-xs) 0 var(--ui-space-md);padding-left:calc(var(--ui-space-xl) + var(--ui-space-sm))}
.home-screen-help b{display:block;margin-top:var(--ui-space-xs)}

/* the arrival page (world-arrival.html): the loading screen's own look, it is the same moment */
body.page.arrival>main{text-align:center}
body.page.arrival>main a{display:inline-flex;align-items:center;min-height:var(--ui-h-lg);padding:0 var(--ui-space-lg);font-size:var(--ui-fs-md)}