/* Page navigation and the game's floating menu lettering. */
.showcase-shortcuts, .social-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.2rem 2rem; max-width: 1040px; margin: 3rem auto; }
.explore-choice { position: relative; display: grid; place-items: center; text-align: center; padding: .65rem .3rem; color: var(--cream); font-family: var(--font-label); font-size: clamp(1.2rem, 2vw, 1.7rem); text-decoration: none; text-shadow: 3px 3px var(--ink); animation: menu-float 4s ease-in-out infinite; transition: color .15s, scale .15s; }
.explore-choice:nth-child(3n + 2) { animation-delay: -1.4s; }
.explore-choice:nth-child(3n) { animation-delay: -2.8s; }
.explore-choice:hover, .explore-choice:focus-visible { color: #fff; scale: 1.04; }
.explore-choice:focus-visible { outline: 2px dashed var(--water); outline-offset: 5px; }
@keyframes menu-float { 0%, 100% { translate: 0 -3px; } 50% { translate: 0 3px; } }
.page-home-return { text-align: center; padding: 1rem 1rem 5rem; }
.creator-contact { max-width: 720px; margin: 5rem auto 0; }
.creator-contact [hidden] { display: none; }
.creator-contact h2 { font-family: var(--font-display); font-size: clamp(1.8rem, 4vw, 2.5rem); color: var(--cream); }
.site-header__inner { grid-template-columns: auto auto minmax(0, 1fr); }
.header-left { justify-content: flex-start; }
.site-nav { justify-content: flex-start; }
.header-right { justify-content: flex-end; }
@media (min-width: 981px) and (max-width: 1400px) {
  .site-header__inner { gap: .4rem; }
  .brand, .header-shell { width: 90px; }
  .studio-name { font-size: 1rem; }
  .nav-link { font-size: 1.05rem; padding-inline: .45rem; }
  .header-right { gap: .35rem; }
  .header-right .nav-cta { font-size: .9rem; padding-inline: .65rem; }
}
.header-shell { transition: transform .2s steps(2); }
.header-shell:hover { transform: scaleX(-1); }
.footer-portraits { display: flex; align-items: center; justify-content: center; width: min(100%, 500px); gap: .5rem; }
.footer-portraits img { width: calc((100% - .5rem) / 2); height: auto; object-fit: contain; }
.footer-portraits [data-site-portrait="shell"] { transform: scaleX(-1); }
.portrait-expression { display: grid; gap: .4rem; margin: 0 0 1.2rem; font-size: .9rem; color: var(--water); }
.portrait-expression select { width: 100%; max-width: 210px; margin: 0 auto; padding: .4rem; font: inherit; color: var(--text); border: 2px solid var(--water); background: var(--ink); }
.dialogue__text::after { content: none; }
.dialogue__box { width: 100%; }

/* Compact field guide: a single, level row of equally sized landmarks. */
.region-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
#region-roster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.moth-card, .moth-card:hover { cursor: default; rotate: 0deg; translate: none; }
.region-card { padding: 1rem; }
.region-card__mystery { filter: blur(5px); user-select: none; margin-bottom: 1rem; }
.region-card--concealed { justify-content: center; min-height: 130px; }
.region-scene { height: 96px; padding: 0; gap: .35rem; margin: 0 0 1rem; align-items: flex-end; justify-content: center; overflow: visible; }
.region-scene__sprite { width: 54px; height: 88px; max-height: none; max-width: calc((100% - 1.4rem) / 5); flex: 0 1 54px; object-fit: contain; object-position: bottom; }
.region-scene__sprite:nth-child(even) { margin-bottom: 0; }
.region-scene--lettered { align-items: center; }
.region-scene__word { font-size: 1.7rem; rotate: 0deg; }
.region-card__name { font-size: 1.9rem; margin-bottom: .35rem; }
.region-card__type { font-size: .78rem; }
.region-card__description { font-size: .86rem; line-height: 1.35; margin-top: .8rem; }
.region-card__tag { margin-bottom: .5rem; border: 0; }
.region-residents { margin-top: .8rem; }
.region-residents img { width: 60px; height: 60px; }

/* The original dialogue panel, beneath the character's description. */
.character-dialog__dialogue { display: block; width: min(100%, 800px); margin: 1.5rem auto 0; position: relative; isolation: isolate; background: none; border: 0; border-radius: 0; box-shadow: none; min-height: 0; padding: 0; }
.character-dialog__panel { position: relative; width: 100%; aspect-ratio: 291 / 83; container-type: inline-size; }
.character-dialog__panel-art { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; }
.character-dialog__dialogue > div { min-width: 0; }
.character-dialog__label { font-size: clamp(1rem, 2vw, 1.5rem); text-transform: none; text-align: right; letter-spacing: 0; color: #fff; margin: 0 4% .35rem; }
#character-dialogue { position: absolute; inset: 9% 6% 10% 4%; margin: 0; font-family: var(--font-label); font-size: 4cqi; font-weight: 400; line-height: 1.5; min-height: 0; color: #fff; }
.character-dialog__dialogue .btn { font-size: .9rem; }
.character-roster--main { max-width: 720px; margin-bottom: 4rem; }

.combat-video { position: relative; aspect-ratio: 16 / 9; max-width: 860px; margin: 2rem auto; }
.combat-video .slide__facade, .combat-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.combat-video .slide__facade { overflow: hidden; border-radius: 6px; }
.combat-video .slide__facade img { width: 100%; height: 100%; object-fit: cover; }

/* Three appearances, with the new world still deliberately obscured. */
.art-manifesto { max-width: 800px; text-align: center; margin: 0 auto 3rem; }
.art-manifesto h2 { font-family: var(--font-display); color: var(--cream); font-size: clamp(1.8rem, 4vw, 2.8rem); }
.style-comparison__pair { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.style-comparison img, .style-concealed { height: 220px; }
.style-concealed { position: relative; overflow: hidden; }
.style-concealed img { filter: brightness(0) blur(8px); opacity: .8; scale: .88; }
.style-concealed span { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-size: 3rem; color: var(--cream); text-shadow: 3px 3px var(--ink); }
.gate-preview { max-width: 620px; margin: 2rem auto 0; text-align: center; }
.gate-portal { position: relative; width: 100%; aspect-ratio: 1; }
.gate-portal img { position: absolute; width: 80%; height: 80%; left: 10%; top: 10%; object-fit: cover; image-rendering: pixelated; clip-path: polygon(35% 0, 65% 0, 65% 3%, 75% 3%, 75% 8%, 82% 8%, 82% 15%, 90% 15%, 90% 25%, 96% 25%, 96% 35%, 100% 35%, 100% 65%, 96% 65%, 96% 75%, 90% 75%, 90% 85%, 82% 85%, 82% 92%, 75% 92%, 75% 97%, 65% 97%, 65% 100%, 35% 100%, 35% 97%, 25% 97%, 25% 92%, 18% 92%, 18% 85%, 10% 85%, 10% 75%, 4% 75%, 4% 65%, 0 65%, 0 35%, 4% 35%, 4% 25%, 10% 25%, 10% 15%, 18% 15%, 18% 8%, 25% 8%, 25% 3%, 35% 3%); }
.gate-portal canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; pointer-events: none; filter: drop-shadow(0 0 8px #3da9ed80); }
.gate-preview figcaption { font-family: var(--font-label); color: var(--water); margin-top: 1rem; }
@media (max-width: 1100px) and (min-width: 981px) { .brand, .header-shell { width: 70px; } .studio-name { font-size: .9rem; } .site-header__inner { gap: .3rem; padding-inline: .5rem; } }
@media (max-width: 980px) { .site-header__inner { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } .region-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .showcase-shortcuts, .social-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
  .explore-choice { font-size: 1.15rem; }
  .region-grid { grid-template-columns: minmax(0, 1fr); max-width: 420px; margin-inline: auto; }
  #region-roster { grid-template-columns: minmax(0, 1fr); }
  .region-scene__sprite { width: 54px; }
  .style-comparison__pair { gap: .6rem; }
  .style-comparison img, .style-concealed { height: 130px; }
  .style-comparison figcaption { font-size: .7rem; }
  .character-dialog__dialogue { padding: 0; min-height: 0; }
  .character-dialog__dialogue .btn { align-self: flex-end; }
}
@media (max-width: 480px) { .site-header__inner { grid-template-columns: minmax(0, 1fr) 44px auto; } }
@media (max-width: 360px) { .site-header__inner { grid-template-columns: minmax(0, 1fr) 32px auto; } .style-comparison img, .style-concealed { height: 105px; } }
@media (prefers-reduced-motion: reduce) { .explore-choice { animation: none; } }

/* A compact teaser beside the story, followed by Features and exploration. */
.home-overview .info-intro { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 2.5rem; }
.home-story, .home-teasers { min-width: 0; padding: 1.8rem; }
.home-teasers { --panel-bg: linear-gradient(180deg, #3350b8, #273d95); }
.home-story h3, .home-teasers h2 { font-family: var(--font-display); font-size: 1.8rem; line-height: 1.2; color: var(--cream); margin: 0 0 1rem; text-align: left; text-shadow: 2px 2px var(--ink); }
.home-story p { font-weight: 400; }
.home-teasers .player { width: 100%; padding: 0; }
.home-teasers .player__arrow { width: 38px; height: 44px; }
.home-teasers .player__arrow svg { width: 12px; height: 18px; }
.home-teasers .player__arrow--prev { left: .5rem; }
.home-teasers .player__arrow--next { right: .5rem; }
.home-teasers .slide__play { width: 64px; height: 54px; }
.home-teasers .dialogue__box { padding: .6rem; }
.home-teasers .dialogue__name { font-size: .7rem; }
.home-teasers .dialogue__text { font-size: 1rem; min-height: 2.7em; }
.home-teasers .order { gap: .5rem; margin-top: .7rem; }
.home-teasers .order__label { font-size: 1rem; }
.home-teasers .order__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
.home-teasers .order__item { font-size: .85rem; padding: .2rem; gap: .4rem; }
.home-teasers .order__thumb { width: 38px; height: 24px; }
.home-overview .features { margin-bottom: 4rem; }
.home-explore { scroll-margin-top: 120px; }
.video-fallback { text-align: center; font-size: .9rem; margin: 1rem 0 0; }
.video-fallback a { color: var(--water); text-decoration: underline; text-underline-offset: .2em; }
.video-fallback a:hover { color: var(--cream); }

/* Separate platform and composer cards, with recognizable platform marks. */
.social-links, #composer-roster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; max-width: none; }
.social-links { grid-template-columns: repeat(6, minmax(0, 1fr)); max-width: 1000px; }
.social-links .social-card { grid-column: span 2; }
.social-links .social-card:nth-child(4) { grid-column: 2 / span 2; }
.social-links .social-card:nth-child(5) { grid-column: 4 / span 2; }
.composer-heading { margin: 2rem 0; color: var(--cream); }
.music-previews { padding-top: 2rem; }
.support-notes { display: grid; gap: 2rem; min-width: 0; }
.discord-note .btn { margin-top: .5rem; font-size: 1rem; }
.guest-card--concealed, .guest-card--concealed:hover { cursor: default; rotate: -1deg; translate: none; }
.guest-card--concealed .character-card__sprite { filter: blur(2px); }
.guest-hidden-name { filter: blur(5px); user-select: none; }
.guest-card__secret { margin-top: 1.3rem; font-family: var(--font-label); color: var(--cream); }
.social-card { --panel-bg: linear-gradient(145deg, #3b4077, #172454); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1rem; color: var(--text); text-decoration: none; min-width: 0; text-align: center; transition: translate .15s; }
.social-card:hover { translate: 0 -5px; }
.social-card:focus-visible, .composer-card__link:focus-visible { outline: 3px dashed var(--cream); outline-offset: 8px; }
.social-card__icon { display: grid; place-items: center; width: 76px; height: 76px; background: var(--ink); border: 3px solid var(--water); border-radius: 12px 8px 14px 6px; margin-bottom: 1.3rem; }
.social-card__icon svg, .social-card__icon .platform-logo { width: 42px; height: 42px; }
.social-card__icon .platform-logo[src$="/youtube.png"] { width: 64px; height: 55px; }
.social-card__icon .platform-logo[src$="/tiktok.png"] { width: 60px; height: 60px; }
.platform-logo { object-fit: contain; image-rendering: auto; }
.social-card__name { font-family: var(--font-display); color: var(--cream); font-size: 1.6rem; text-shadow: 2px 2px var(--ink); }
.social-card__handle { font-family: var(--font-label); font-size: .8rem; margin-top: .8rem; white-space: nowrap; }
.composer-card { --panel-bg: linear-gradient(145deg, #414378, #191c39); display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1.8rem 1rem; min-width: 0; }
.composer-card__photo { width: 130px; height: 130px; object-fit: cover; border: 4px solid var(--ink); border-radius: 50%; }
.composer-card h3 { font-family: var(--font-display); color: var(--cream); font-size: 1.6rem; margin: 1.2rem 0; overflow-wrap: anywhere; }
.composer-card__link { display: flex; align-items: center; justify-content: center; gap: .6rem; padding: .5rem; font-family: var(--font-label); color: #fff; text-decoration: none; }
.composer-card__link svg, .composer-card__link .platform-logo { width: 30px; height: 30px; }
.composer-card__link .platform-logo[src$="/youtube.png"] { width: 44px; height: 38px; }
.composer-card__link:hover { color: var(--cream); }
@media (max-width: 980px) { .social-links, #composer-roster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 980px) {
  .social-links .social-card, .social-links .social-card:nth-child(4) { grid-column: auto; }
  .social-links .social-card:nth-child(5) { grid-column: 1 / -1; width: calc((100% - 1.5rem) / 2); justify-self: center; }
}
@media (max-width: 600px) {
  .social-links { grid-template-columns: minmax(0, 1fr); max-width: 340px; }
  .social-links .social-card:nth-child(5) { grid-column: auto; width: 100%; }
}
@media (max-width: 800px) { .home-overview .info-intro { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; } .home-teasers, .home-story { max-width: 560px; width: 100%; justify-self: center; padding: 1.3rem; } }
@media (max-width: 480px) { .social-links, #composer-roster { gap: 1rem; } .social-card, .composer-card { padding: 1.3rem .65rem; } .composer-card__photo { width: 95px; height: 95px; } .social-card__name, .composer-card h3 { font-size: 1.25rem; } .social-card__handle { font-size: .7rem; } }
@media (prefers-reduced-motion: reduce) { .social-card { transition: none; } }