/* Fantarise's crystal-and-starlight visual theme. Layout lives in landing.css. */
:root {
  color-scheme: dark;
  --paper: #101334;
  --ink: #f0eaff;
  --muted: #bdbde0;
  --teal: #7bddff;
  --line: #a791ff3d;
  --gold: #ffd687;
  --font-display: 'Cinzel Decorative', Georgia, serif;
}
body {
  background:
    radial-gradient(ellipse at 0% 27%, #47349866, transparent 27%),
    radial-gradient(ellipse at 100% 54%, #164e9066, transparent 30%),
    radial-gradient(ellipse at 10% 83%, #692b7066, transparent 30%),
    #101334;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 35px 70px, #b8dfffaa 90%, transparent),
    radial-gradient(1px 1px at 130px 180px, #e2b8ffaa 90%, transparent);
  background-size: 240px 270px, 350px 390px;
}
h1, h2, h3 { font-weight: 700; letter-spacing: -.025em; line-height: 1.25; }
h2 { font-size: clamp(34px, 3.5vw, 52px); }
h1, h2, .brand span {
  color: #ffdf9e;
  background: linear-gradient(180deg, #fff3cf 10%, #ffd077 58%, #e59a66 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 3px 0 #26144550) drop-shadow(0 0 18px #ffba6420);
}
h1 em, h2 em, .hero h1 em, .adventure-copy h2 em {
  font-style: normal;
  font-weight: 700;
  color: #a0eaff;
  background: linear-gradient(120deg, #8af4ff 10%, #b5bdff 55%, #f6a9ea 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.eyebrow { font-size: 11px; color: #b8d8ff; letter-spacing: 2px; }
::selection { background: #764abe; color: white; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline-color: #ffdc89; }
.site-header {
  top: 20px;
  left: 3%;
  width: 94%;
  height: 80px;
  padding: 0 30px;
  border: 0;
  background: transparent;
  box-shadow: none;
}
.brand { font-size: 27px; gap: 12px; letter-spacing: -.8px; }
.brand img { width: 46px; height: 46px; box-shadow: 0 0 20px #81caff55; }
.site-header nav { gap: 28px; font-size: 12px; font-weight: 600; color: #e3e1ff; }
.site-header nav a:hover { color: #a1edff; }
.site-header nav .nav-cta { color: #ffdf9e; font-weight: 800; }
.header-cta, .button-dark {
  background: linear-gradient(135deg, #348fea, #7451cd 65%, #a852b0);
  border: 1px solid #c3c7ff99;
  color: #fff5ff;
  box-shadow: 0 6px 25px #7451cd66, inset 0 1px #ffffff55;
  font-weight: 800;
}
.header-cta { border-radius: 14px; font-size: 12px; padding: 10px 18px; }
.header-cta:hover, .button-dark:hover {
  background: linear-gradient(135deg, #45abf0, #9470e3 65%, #c477c5);
  box-shadow: 0 8px 30px #9d73ef88, inset 0 1px #ffffff66;
}
.lang-picker summary {
  border: 1px solid #c3c7ff55;
  border-radius: 14px;
  background: #ffffff0d;
  color: #e3e1ff;
  transition: background .2s, border-color .2s;
}
.lang-picker summary:hover, .lang-picker[open] summary { background: #ffffff1c; border-color: #c3c7ffaa; }
.lang-picker summary:focus-visible { outline-color: #ffdc89; }
.lang-menu {
  background: #232447f5;
  border: 1px solid #a994e266;
  border-radius: 16px;
  box-shadow: 0 18px 40px #07092388;
  backdrop-filter: blur(12px);
}
.lang-menu a { border-radius: 10px; color: #e3e1ff; font-weight: 600; }
.lang-menu a:hover { background: #ffffff12; color: #a1edff; }
.lang-menu a[aria-current] { color: #ffdf9e; }
.lang-menu b { color: #b8b3e0; }
.button { border-radius: 18px; min-height: 58px; font-size: 13px; padding-inline: 28px; }
.hero { background: #171b4b; min-height: 850px; }
.hero-landscape img { filter: saturate(1.55) brightness(.85) hue-rotate(7deg); }
.hero-wash {
  background:
    linear-gradient(90deg, #12183ee8 0%, #202052b8 35%, #37387720 77%),
    linear-gradient(0deg, #101334 0%, #20194422 45%, #20174755 100%);
}
.hero h1 { font-size: clamp(56px, 6.3vw, 94px); line-height: 1.19; letter-spacing: -.035em; }
.hero-content { padding-top: clamp(210px, 26vh, 295px); }
.hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: #726ac333;
  border: 1px solid #acb6ff55;
  border-radius: 30px;
  color: #d1e7ff;
  font-size: 10px;
  letter-spacing: 1.5px;
}
.small-star { color: #ffdb94; filter: drop-shadow(0 0 8px #ffde91); }
.hero-description { color: #d4d9f1; font-size: 15px; line-height: 1.9; text-shadow: 0 2px 10px #101334; }
.platform-note { color: #c0caeb; font-size: 11px; margin-top: 21px; }
.status-dot { background: #a2ffdc; box-shadow: 0 0 0 4px #77ffd51a, 0 0 12px #8affda; }
.note-divider { color: #b0a4da; }
.hero-companion { right: 10%; bottom: 8%; }
.hero-companion img { filter: drop-shadow(0 0 25px #81d7ff50) drop-shadow(0 25px 30px #12123866); }
.companion-caption { font-family: var(--font-body); font-size: 11px; font-style: normal; color: #ccddff; text-shadow: 0 2px 5px #142245; }
.companion-caption i { background: #cdb7ff; }
.hero-cloud { background: #171640; bottom: -115px; height: 180px; filter: blur(35px); }
.cloud-two { background: #292258; }
.hero-bottom { color: #c8d5ff; font-size: 10px; }
.scroll-cue > span { border-color: #b6aeff77; background: #5053a133; color: #b7eeff; }
.hero-edition span, .section-mark { color: #ffd688; filter: drop-shadow(0 0 12px #ffd68888); }
.intro { padding-block: 85px 65px; position: relative; }
.intro::before {
  content: '';
  position: absolute;
  top: 40px;
  left: 10%;
  width: 80%;
  height: 330px;
  background: radial-gradient(ellipse, #784fba29, transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.intro h2 { font-size: clamp(32px, 3.2vw, 48px); max-width: 1020px; }
.intro-copy { max-width: 620px; font-size: 15px; line-height: 1.9; }
.chapter-line { color: #c7b7fd; font-weight: 700; font-size: 11px; }
.chapter-line::before, .chapter-line::after { background: linear-gradient(90deg, transparent, #aa81db, transparent); }
.section-heading > p { font-size: 14px; color: #bfc5e8; }
.world-view {
  width: min(1370px, calc(100% - 64px));
  margin-inline: auto;
  border-radius: 38px;
  border: 1px solid #b5a8ff77;
  box-shadow: 0 20px 65px #07092388, 0 0 35px #6752b122, inset 0 0 0 6px #c6bcff11;
}
.world-image { filter: saturate(1.25); }
.world-shade { background: linear-gradient(90deg, #12153088, transparent 80%), linear-gradient(0deg, #101330e6, transparent 85%); }
.world-copy { width: calc(100% - 80px); }
.world-copy .eyebrow { color: #aaf5dd; font-size: 10px; }
.world-copy h3 { font-size: clamp(30px, 3.5vw, 51px); color: #ffe5ac; text-shadow: 0 2px 20px #080b31; max-width: 850px; }
.world-copy > p:not(.eyebrow) { color: #e0e5ff; font-size: 14px; max-width: 460px; }
.world-caption { color: #b7bfeb; font-size: 9px; }
.world-coordinate { background: #16183b77; backdrop-filter: blur(10px); border: 1px solid #d2c5ff44; border-radius: 16px; padding: 13px 18px; }
.region-tabs { gap: 15px; margin-top: 22px; }
.region-tabs button {
  background: #23264b;
  border: 1px solid #7976b955;
  padding: 18px 22px;
  min-height: 65px;
  border-radius: 18px;
  color: #c4c8eb;
  font-size: 12px;
  gap: 14px;
  transition: border-color .25s, background .25s, box-shadow .25s;
}
.region-tabs button::after { display: none; }
.region-tabs button > span { color: #c8adf9; font-size: 10px; }
.region-tabs button[aria-selected=true] {
  color: #fff1c9;
  border-color: #b9a0fb;
  background: linear-gradient(135deg, #3b4c86, #503975);
  box-shadow: 0 0 25px #9267d72b, inset 0 1px #ffffff22;
}
.region-tabs button:hover { background: #3a3b69; }
.creature-grid { gap: 25px; }
.creature-card {
  --element: #9ceaff;
  --element-rgb: 83, 164, 230;
  border-radius: 30px;
  border: 1px solid #85c9fa77;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(var(--element-rgb), .32), transparent 72%),
    linear-gradient(155deg, #252c59, #17213e);
  box-shadow: 0 15px 40px #050a262f, inset 0 1px #e0f1ff22;
}
.creature-card.grass { --element: #bcf29b; --element-rgb: 115, 193, 107; border-color: #9aca8277; background: radial-gradient(ellipse at 50% 30%, #69a86355, transparent 72%), linear-gradient(155deg, #283e4d, #152d37); }
.creature-card.fire { --element: #ffcd8c; --element-rgb: 246, 142, 84; border-color: #e6a16d77; background: radial-gradient(ellipse at 50% 30%, #c5745a55, transparent 72%), linear-gradient(155deg, #4f304c, #29203d); }
.creature-card::before { content: '✧'; position: absolute; top: 85px; right: 28px; color: var(--element); font-size: 25px; opacity: .65; text-shadow: 0 0 15px var(--element); }
.creature-card:hover { border-color: var(--element); box-shadow: 0 15px 40px #03062477, 0 0 28px rgba(var(--element-rgb), .2), inset 0 1px #ffffff33; }
.creature-card-top { align-items: center; color: var(--element); font-size: 10px; font-weight: 700; }
.creature-card-top > span:first-child { background: rgba(var(--element-rgb), .12); padding: 5px 12px; border: 1px solid rgba(var(--element-rgb), .35); border-radius: 20px; }
.creature-art img { filter: drop-shadow(0 8px 20px rgba(var(--element-rgb), .15)); }
.creature-card h3 { color: var(--element); font-size: 32px; text-shadow: 0 0 20px rgba(var(--element-rgb), .35); }
.creature-kicker { color: #d1d1e4; font-size: 10px; letter-spacing: 0; }
.creature-card button { width: 44px; height: 44px; background: rgba(var(--element-rgb), .13); color: var(--element); border-color: rgba(var(--element-rgb), .5); }
.creature-card button:hover { background: rgba(var(--element-rgb), .4); color: white; }
.collection-note { color: #c1bddd; font-size: 12px; }
.adventure-section { background: linear-gradient(140deg, #171735, #172b4c 45%, #291c48); border-block: 1px solid #9580c744; }
.adventure-section::before { background: radial-gradient(ellipse at 26% 50%, #3677af55, transparent 50%); }
.adventure-copy > .eyebrow { color: #bcaafa; }
.adventure-lead { color: #c8c8e5; font-size: 14px; }
.adventure-step { padding: 22px; border: 1px solid #9a8acf44; border-radius: 22px; background: linear-gradient(120deg, #8172b014, #99baff0a); max-width: none; box-shadow: inset 0 1px #ffffff09; gap: 18px; }
.adventure-step > span { color: #ffda91; font-size: 11px; }
.adventure-step h3 { font-size: 23px; color: #d3c4ff; }
.adventure-step p { color: #c2c5e3; font-size: 13px; }
.crystal-orbit { border-color: #bd9bff66; box-shadow: 0 0 40px #7959d411; }
.crystal-orbit::before, .crystal-orbit::after { color: #ffdd91; text-shadow: 0 0 15px #ffdd91; }
.crystal-label { color: #d6beff; font-size: 9px; }
.crystal-index { color: #c0c4f3; }
.begin-section { background: #191b44; }
.begin-art { background: linear-gradient(90deg, #29204ae8, #222859aa), url('../assets/worlds/sky-kingdom.jpg') center 65% / cover; }
.begin-section::after { background: linear-gradient(0deg, #101334, transparent 85%); }
.begin-content h2 { font-size: clamp(48px, 5.2vw, 78px); }
.begin-content > p:not(.eyebrow) { color: #d1c9e9; font-size: 15px; }
.coming-label { display: inline-flex; padding: 10px 20px; background: #9278c51a; border: 1px solid #b19ad366; border-radius: 18px; color: #e4d3ff; font-size: 11px; }
.begin-creature { filter: drop-shadow(0 0 28px #a6a5ff44) drop-shadow(0 25px 35px #10133455); }
.site-footer > .brand { font-size: 26px; }
.site-footer > p { font-family: var(--font-body); font-size: 12px; color: #c1b6dd; }
.site-footer > div { color: #d5c8ef; font-size: 11px; }
.site-footer small { color: #a8a1c5; font-size: 10px; }
.site-footer a:hover { color: #93eaff; }
.creature-dialog { border-radius: 30px; border-color: #b9a4f388; background: radial-gradient(ellipse at 20% 40%, #4f558b66, transparent 70%), #20213f; box-shadow: 0 0 70px #9b73ee33, inset 0 1px #ffffff33; }
.creature-dialog::backdrop { background: #080d29c7; }
.dialog-art { background: radial-gradient(ellipse, #7c9de433, transparent 70%); }
.dialog-copy > p:not(.eyebrow) { font-size: 14px; color: #cbc7e2; }
.dialog-copy h2 { font-size: 38px; }
.dialog-close { color: #dfd0ff; }
.dialog-note { font-size: 11px!important; }
@media (max-width: 1050px) {
  .site-header { padding-inline: 20px; gap: 20px; }
  .site-header nav { gap: 18px; font-size: 11px; }
  .brand { font-size: 23px; }
  .hero h1 { font-size: 68px; }
  .hero-description { max-width: 440px; }
  .hero-description .desktop-break { display: none; }
  .creature-card h3 { font-size: 25px; }
  .creature-card-bottom { flex-wrap: wrap; }
  .region-tabs button { padding-inline: 14px; font-size: 11px; }
  .adventure-step { padding: 18px; }
  .adventure-step h3 { font-size: 20px; }
}
@media (max-width: 760px) {
  .site-header { top: 12px; height: 68px; left: 3%; width: 94%; padding-inline: 14px; gap: 8px; border-radius: 20px; }
  .brand { font-size: 20px; gap: 8px; }
  .brand img { width: 32px; height: 32px; }
  .header-cta { font-size: 10px; gap: 10px; padding: 9px 10px; border-radius: 12px; }
  .lang-picker summary { min-height: 36px; border-radius: 12px; font-size: 10px; }
  .menu-toggle { flex-shrink: 0; width: 32px; }
  .menu-toggle span { background: #e5d4ff; }
  .site-header nav { top: 76px; background: #232447f5; border: 1px solid #a994e266; border-radius: 20px; font-size: 14px; padding: 20px; }
  .hero { min-height: 0; height: 930px; }
  .hero-content { padding-top: 133px; }
  .hero h1 { font-size: clamp(42px, 8.6vw, 64px); line-height: 1.28; margin-top: 25px; }
  .hero-wash { background: linear-gradient(90deg, #171a47df, #2426586b), linear-gradient(0deg, #101334 0%, #17193822 60%); }
  .hero .eyebrow { font-size: 8px; letter-spacing: 1px; padding: 6px 10px; }
  .hero-description { font-size: 14px; line-height: 1.9; max-width: 390px; margin-top: 22px; }
  .hero .button { margin-top: 25px; }
  .hero-companion { width: 280px; bottom: 80px; right: 9%; }
  .platform-note { font-size: 10px; gap: 6px; }
  .hero-cloud { bottom: -135px; }
  .companion-caption { font-size: 10px; }
  .intro { padding-block: 65px 35px; }
  .intro h2 { font-size: 32px; }
  .intro-copy { font-size: 14px; }
  .chapter-line { gap: 14px; font-size: 9px; letter-spacing: 1px; }
  .section-heading h2 { font-size: 36px; }
  .section-heading > p { font-size: 14px; }
  .world-view { width: calc(100% - 28px); height: 560px; border-radius: 26px; }
  .world-copy { width: calc(100% - 40px); }
  .world-copy h3 { font-size: 30px; }
  .world-copy > p:not(.eyebrow) { font-size: 13px; }
  .world-coordinate { top: 20px; right: 20px; font-size: 10px; }
  .region-tabs { gap: 8px; padding: 0 14px; margin-top: 14px; }
  .region-tabs button { font-size: 10px; padding: 12px 10px; border-radius: 14px; gap: 7px; flex-direction: column; }
  .region-tabs button > span { font-size: 9px; }
  .creature-grid { gap: 14px; }
  .creature-card { border-radius: 23px; }
  .creature-card h3 { font-size: 22px; }
  .creature-card-top { font-size: 9px; }
  .creature-card-top > span:first-child { padding: 4px 8px; }
  .creature-card button { width: 44px; height: 44px; }
  .collection-note { font-size: 11px; }
  .adventure-copy h2 { font-size: 38px; }
  .adventure-step h3 { font-size: 21px; }
  .crystal-label { font-size: 8px; letter-spacing: 1px; }
  .begin-content { padding-block: 70px 290px; }
  .begin-content h2 { font-size: 48px; }
  .begin-content .eyebrow { font-size: 9px; }
  .begin-creature { width: 240px; }
  .coming-label { font-size: 10px; padding-inline: 15px; }
  .site-footer > .brand { font-size: 22px; }
  .site-footer > p { font-size: 10px; }
  .site-footer small, .site-footer small:last-child { font-size: 8px; }
}
@media (max-width: 480px) {
  .hero h1 { font-size: clamp(36px, 10vw, 48px); }
  .hero { height: 900px; }
  .hero-companion { width: 260px; bottom: 75px; right: 6%; }
  .hero .eyebrow { font-size: 7px; letter-spacing: .7px; }
  .eyebrow { font-size: 9px; letter-spacing: 1.4px; }
  .hero-description { max-width: 340px; }
  .intro h2 { font-size: 28px; }
  .section-heading h2 { font-size: 32px; }
  .creature-card { padding: 22px; }
  .creature-card h3 { font-size: 31px; }
  .creature-card-bottom { flex-wrap: nowrap; }
  .creature-kicker { font-size: 10px; }
  .begin-content h2 { font-size: 40px; }
  .begin-content .eyebrow { font-size: 8px; letter-spacing: 1px; }
}
@media (max-width: 360px) {
  .site-header { padding-inline: 10px; }
  .brand { font-size: 17px; }
  .brand img { width: 26px; height: 26px; }
  .header-cta { font-size: 9px; gap: 6px; }
  .lang-picker summary svg { display: none; }
  .platform-note { font-size: 9px; }
  .hero .eyebrow { font-size: 6px; }
  .coming-label { font-size: 9px; gap: 9px; }
  .adventure-copy h2 { font-size: 32px; }
}
@media (forced-colors: active) {
  h1, h2, .brand span, h1 em, h2 em, .hero h1 em, .adventure-copy h2 em {
    background: none;
    -webkit-text-fill-color: CanvasText;
    filter: none;
  }
}