/* =====================================================================
   SCROLL OF MANA — title_mana.css
   The "Scroll of Mana" logo (assets/ui/logo/*.svg, sparkles drawn by
   js/logo_mana.js) on the loading screen (index.html #loading), the title
   gate (login, menu, server list: ui.js buildGate) and the character
   select header (ui.js buildTitle). The main logo image carries the crest
   (crystal in a vine garland) and the subtitle scroll, so it replaces the
   old .tg-crest / .t-logo text / .tg-sub trio. Linked after
   title_chars.css, before theme_mana.css (the theme stays last); the
   storybook backdrop (js/title_mana_bg.js) is styled in theme_mana.css.
   ===================================================================== */

/* main logo: up to 520px, the phone width minus the 16px gutters, and 68vh so short screens keep room for the menu.
   No overflow: hidden here or on a parent box: the sparkle canvas reaches past the image */
.som-logo { position: relative; display: block; width: min(520px, calc(100vw - 32px), 68vh); margin: 0 auto; line-height: 0; }
.som-logo img { display: block; width: 100%; height: auto; image-rendering: auto; -webkit-user-drag: none; user-select: none; }

/* the head is taller than the old text logo: the gate column (title.css .tg-main) and the loader box (index.html) start
   higher by the same amount, so loader → gate never moves the logo and the menu / account panel stay where they were */
.t-gate .tg-main { margin-top: max(0px, calc(50vh - 334px)); }
html body #loading .ld-box { width: min(560px, 100vw); padding-top: calc(20px + env(safe-area-inset-top) + max(0px, 50vh - 334px)); }
html body #loading .som-logo { margin-bottom: 22px; }

/* gate over the sunny scene: title_bg.css's dark pool behind the menu (made for the night castle) becomes the theme's soft
   cream glow (theme_mana.css §11 uses lower-specificity selectors, which lose to title_bg.css's "#ui .title") */
#ui .title, #ui .title.st-gate {
  background:
    radial-gradient(ellipse 60% 46% at 50% 34%, rgba(255, 252, 238, .5), rgba(255, 252, 238, 0) 70%),
    linear-gradient(180deg, rgba(255, 248, 226, .2), transparent 30%, transparent 80%, rgba(120, 90, 50, .16));
}

/* the tall panes (Criar conta, Opções, Esqueci a senha) on laptop / tablet heights: the logo steps down and the column starts
   higher, so the pane's last button stays above the fold. Only once the player opens one of them, so loader → gate (login tab
   or menu) never moves the logo */
@media (min-height: 501px) and (max-height: 1100px) {
  .t-gate:has(.tg-acc:not(.hide) #tg-tp-reg:not(.hide), .tg-pane:not(.hide), .tg-fg:not(.hide)) .tg-logo.som-logo { width: min(400px, calc(100vw - 32px), 44vh); }
  .t-gate:has(.tg-acc:not(.hide) #tg-tp-reg:not(.hide), .tg-pane:not(.hide), .tg-fg:not(.hide)) .tg-main { margin-top: max(0px, calc(50vh - 400px)); }
}

/* character select: the one-line wordmark (crystal over "of") */
.som-logo.cs-logo { width: min(280px, calc(100vw - 32px)); }

@media (min-width: 1100px) and (min-height: 821px) {
  .som-logo { width: min(600px, 68vh); }
}
@media (min-width: 1600px) and (min-height: 960px) {
  .som-logo.cs-logo { width: 340px; }
}
@media (max-width: 560px) {
  .som-logo.cs-logo { width: 220px; }
}
/* short screens (phones sideways): the loader centres the logo (index.html), the gate puts it left of the menu (title.css grid) */
@media (max-height: 500px) {
  html body #loading .ld-box { padding-top: 0; }
  html body #loading .som-logo { margin-bottom: 14px; }
}
@media (max-height: 500px) and (min-width: 561px) {
  .som-logo { width: min(400px, 44vw, calc((100vh - 48px) * 2.06)); }
  .t-gate .tg-main { margin-top: auto; }
  .som-logo.cs-logo { width: 170px; margin: 0; }
}