/* MU 2K — celestial azure realm. Loaded last so the original functional UI stays intact. */
:root {
  --bg: #123e67;
  --panel: #164d7b;
  --ivory: #edf5f9;
  --muted: #b5d8e6;
  --faint: #9fc6d9;
  --gold: #88b8d0;
  --gold-light: #c7e1ec;
  --purple: #99c2d6;
  --line: rgba(174,220,247,.35);
}
body {
  background: radial-gradient(ellipse at 0 30%, #4296c755, transparent 65%), #123e67;
  color: var(--ivory);
}
::selection { background: #316a90; color: #f7fbfc; }
h1, h2, h3 { font-weight: 700; }
h2 { font-size: clamp(38px, 4vw, 54px); letter-spacing: -.8px; }
em { color: var(--gold-light); }
.container { width: min(1200px, calc(100% - 80px)); }
.section { padding-block: 90px; }
.chapter { display: flex; align-items: center; gap: 15px; color: #9dc4d8; }
.chapter::before { content: ''; display: block; width: 28px; height: 2px; background: #74acc7; flex: 0 0 28px; }
.section-intro { color: #bedce9; }
/* A silver navigation rail, with room for the full translated labels. */
.site-header {
  height: auto; min-height: 86px; padding: 16px max(28px, 3vw); gap: 18px;
  flex-wrap: wrap; background: #15456f; border-top: 3px solid #a5d7ef;
  border-bottom: 1px solid #36759f; box-shadow: 0 4px 0 #123e67, 0 8px 24px #061d3355;
}
.header-brand { flex: 0 0 auto; }
.brand-monogram { color: #deedf4; text-shadow: 0 2px #061d33, 0 -1px #f7fbfc44; }
.brand-caption { color: #94bfd4; }
.desktop-nav { gap: 23px; }
.desktop-nav a { padding-block: 10px; color: #d4e8f0; font-size: 11px; letter-spacing: .8px; }
.desktop-nav a::after { bottom: 2px; }
.account-header-group { flex-wrap: wrap; gap: 8px; }
.account-header-group button { white-space: normal; max-width: 260px; border-radius: 0; }
.account-header-register { background: #92bed4; color: #0e2941; border-color: #c7e1ec; box-shadow: inset 0 0 0 3px #66a4c2; }
.account-header-register:hover { background: #abd2e2; }
.account-header-profile { background: #11314e; border-color: #5fa0bf; color: #d2e7f0; }
#header-account-name { color: #cbe4ed; }
.header-actions { gap: 15px; flex-shrink: 0; }
.language-control select { background: #15456f; color: #ebf5f8; min-height: 38px; }
.header-calendar { display: none; }
.mobile-nav { background: #0f2e49; border-color: #3777a1; }
.mobile-nav a + a { border-top: 1px solid #285574; }
/* Elf and Wizard share a luminous right-side composition; copy sits on an opaque, quiet left side. */
.hero { text-align: left; min-height: 810px; background: #123d66; border-bottom: 1px solid #9bd1f1; }
.hero-art { left: 40%; width: 60%; background: #4f9fc5; overflow: hidden; }
.hero-art img { position: absolute; top: 0; width: 70%; height: 100%; object-fit: cover; opacity: 1; }
.hero-art .hero-elf { left: -6%; object-position: 48% center; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 75%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 75%, transparent); }
.hero-art .hero-wizard { right: 0; object-position: 77% center; mask-image: linear-gradient(90deg, transparent, #000 26%); -webkit-mask-image: linear-gradient(90deg, transparent, #000 26%); }
.classic-art-edge { position: absolute; inset: 0; background: linear-gradient(90deg, #123d66 0%, #123d6600 24%), linear-gradient(0deg, #123d66 0%, transparent 23%); }
.hero::before { background: linear-gradient(90deg, #123d66 0%, #123d66 31%, #123d66d9 39%, #123d6600 51%); }
.hero::after { content: ''; position: absolute; z-index: -1; inset: 22px; border: 1px solid #79afca26; pointer-events: none; }
.hero-content { width: min(53%, 700px); max-width: none; margin: 0 0 0 max(40px, calc((100vw - 1200px) / 2)); padding: 46px 28px 90px 0; }
.hero-eyebrow { color: #a9ccdd; font-size: 10px; letter-spacing: 2px; padding-left: 1px; }
.hero-logo { width: min(340px, 88%); margin: 6px 0 14px -12px; filter: drop-shadow(0 5px 14px #061d3388); }
.hero h1, .hero h1 em { font-size: clamp(42px, 4vw, 59px); line-height: 1.04; letter-spacing: -1px; text-shadow: 0 3px 3px #061d3388; }
.hero h1 em { color: #c0dee9; }
.hero-description { margin: 22px 0 0; max-width: 480px; color: #d6e9f1; font-size: 14px; line-height: 1.85; }
.hero-badges { justify-content: flex-start; margin-top: 22px; gap: 10px 15px; font-size: 10px; letter-spacing: 1px; color: #d8eaf2; }
.hero-badges i { color: #81b4cd; }
.hero-actions { justify-content: flex-start; flex-wrap: wrap; margin-top: 30px; gap: 12px; }
.button { border-radius: 0; font-size: 11px; letter-spacing: .75px; padding: 14px 20px; gap: 20px; min-height: 50px; }
.button-gold { background: #95c0d5; border-color: #cbe3ed; color: #0e2a43; box-shadow: inset 0 0 0 3px #6da8c5, inset 0 0 0 4px #aad2e2, 0 3px 0 #285574, 0 5px 12px #061d3344; }
.button-gold:hover { background: #add4e3; box-shadow: inset 0 0 0 3px #85b6ce, inset 0 0 0 4px #d3e8f0, 0 3px 0 #285574; }
.button-ghost { background: #102f4a; border-color: #7bb0cb; color: #f1f7fa; box-shadow: inset 0 0 0 3px #0f2c46, inset 0 0 0 4px #2d6184, 0 3px 0 #061d33; }
.button-ghost:hover { background: #285574; }
.web-play-block { align-items: flex-start; margin: 23px 0 0; max-width: 470px; gap: 9px; }
.web-play-button, .web-play-button:disabled { min-width: 240px; background: #10314d; color: #c8e2ec; border-color: #60a0c0; box-shadow: inset 0 0 0 3px #0f2d48, inset 0 0 0 4px #2e6387; }
.web-play-button:hover:not(:disabled) { background: #2c5f81; border-color: #c4e0eb; }
.web-test-notice { color: #abd2e2; font-size: 12px; line-height: 1.75; text-shadow: none; }
.web-test-local { color: #a8cbdc; font-size: 11px; }
.web-test-local time { color: #cee5ee; }
.hero-side-note { display: none; }
.scroll-line { background: linear-gradient(#b5e3f7, transparent); }
.scroll-indicator { right: 32px; bottom: 92px; color: #d1e6ef; text-shadow: 0 2px 5px #061d33; }
/* Engraved information rails and a single, unmistakable registration counter. */
.launch-strip { margin-top: -37px; background: #174b75; border: 1px solid #6ea8c5; box-shadow: inset 0 0 0 4px #0e2942, inset 0 0 0 5px #326a91, 0 16px 35px #061d3355; padding: 30px; }
.opening-intro .eyebrow, .opening-local > p { color: #a6cadc; }
.opening-date { color: #e6f2f6; font-weight: 600; }
.opening-date span { color: #8bb9d2; }
.status-dot { box-shadow: 0 0 10px #b0e4ff; }
.countdown strong { color: #d6e9f1; font-weight: 700; font-size: clamp(33px, 3.4vw, 46px); text-shadow: 0 2px #061d33; }
.countdown span, .opening-local .time-zone { color: #b8d9e7; }
.countdown > b { color: #66a4c2; }
.account-community { margin-top: 0; padding: 26px 30px; border: 1px solid #5e94bb; border-top: 0; background: #17466d; gap: 24px; }
.account-community .eyebrow { color: #aecfdf; }
.account-count-note { color: #a5cfe0; }
.account-count-value strong { color: #dfeef4; font-weight: 700; font-size: 46px; text-shadow: 0 0 20px #84b6ce33; }
.account-count-value > span { color: #c3dfea; }
.account-community-cta { color: #abd2e2; border-color: #6da8c5; }
/* A full-height party plate anchors three compact feature stories. */
.overview { padding-top: 80px; }
.section-heading { margin-bottom: 40px; }
.feature-stories { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 0 48px; border: 0; }
.classic-party-art { grid-column: 1; grid-row: 1 / 4; position: relative; min-height: 540px; overflow: hidden; background: #061d33; border: 1px solid #336f96; box-shadow: inset 0 0 0 5px #0d263c, 0 15px 35px #061d3355; }
.classic-party-art::after { content: ''; position: absolute; inset: 9px; border: 1px solid #7eb2cc44; pointer-events: none; }
.classic-party-art img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; object-position: 69% center; }
.classic-art-caption { position: absolute; left: 0; bottom: 0; right: 0; padding: 40px 16px 22px; text-align: center; font-size: 10px; letter-spacing: 2px; color: #c8e2ec; background: linear-gradient(transparent, #0c253a 45%); }
.classic-art-caption i { font-style: normal; padding: 0 10px; color: #73abc7; font-size: 6px; }
.feature-story, .feature-story:first-child, .feature-story:last-child { grid-column: 2; padding: 27px 0 27px 62px; border-top: 1px solid #2d6083; }
.feature-story:last-child { border-bottom: 1px solid #2d6083; }
.feature-story + .feature-story::before { display: none; }
.feature-heading { position: absolute; top: 29px; left: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0; }
.feature-symbol { color: #9cc4d8; width: 34px; height: 34px; font-size: 43px; }
.feature-index { color: #71aac6; font-size: 17px; }
.feature-kicker { color: #96c0d5; font-size: 10px; margin-bottom: 6px; }
.feature-story h3 { font-size: 28px; margin-bottom: 10px; }
.feature-story > p:last-child { color: #bbdbe8; font-size: 13px; line-height: 1.85; }
/* Character selection as a blue-steel-and-silver game menu, not floating portraits. */
.classes-section { background: radial-gradient(ellipse at 25% 65%, #64b8db55, transparent 65%), #164970; border-color: #83b8d5; }
.classes-section::before { width: 110px; left: calc(50% - 55px); height: 2px; }
.class-roster { gap: 6px; margin-bottom: 0; padding: 10px; border: 1px solid #3777a1; background: #0d273e; }
.class-tab { background: #11314e; border-color: #2e6387; color: #c2dfea; box-shadow: inset 0 0 0 2px #0e2a43; }
.class-tab img { border-color: #6ba7c4; filter: saturate(.8); }
.class-tab:hover { background: #2a5979; border-color: #a8d0e1; }
.class-tab[aria-selected=true] { background: #244d69; border-color: #a9ccdd; box-shadow: inset 0 0 0 2px #0f2d47, 0 2px 0 #95c0d5; color: #e1eff5; }
.class-stage { border: 1px solid #3878a3; border-top: 0; padding: 38px; background: linear-gradient(110deg, #11324f80, #0d283fbb); gap: 50px; }
.class-portrait-area { min-height: 360px; padding: 10px 0 0; }
.class-portrait-area::before, .class-portrait-area::after { display: none; }
.portrait-glyph { color: #2b5d7f66; text-shadow: none; font-size: 200px; top: -14px; }
.portrait-frame { transform: none; background: #102e49; border-color: #76adc8; padding: 12px; box-shadow: 0 14px 40px #061d3388, 0 0 0 4px #0d2840, 0 0 0 5px #60a0bf; }
.portrait-frame img { width: min(280px, 100%); height: auto; aspect-ratio: 1; }
.portrait-frame::after { box-shadow: inset 0 0 35px #0d253b44; }
.portrait-caption { color: #a6d0e1; margin-top: 26px; }
.class-count { color: #9fc6d9; }
.class-count-line { background: #62a1c0; }
.class-details h3 { color: #daebf2; font-size: clamp(39px, 4.6vw, 62px); }
.class-description { color: #c6e1ec; }
.class-attributes dt { color: #a4cfe0; }
.class-attributes dd { color: #f2f8fb; }
.class-stage.is-changing .portrait-frame { animation: classicClassArrival .3s ease-out; }
@keyframes classicClassArrival { from { opacity: .2; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* The silver Elf sky gives the launch section a luminous celestial setting. */
.launch-section { background: #377aa5; border-color: #a9d8ee; padding-block: 110px; }
.launch-backdrop { background-image: url('assets/classic/40965.jpg'); background-size: cover; background-position: center 35%; filter: none; opacity: .8; }
.launch-section::before { background: linear-gradient(90deg, #0d3b67ed 0%, #14507db8 48%, #19507888 100%); }
.launch-copy h2 { font-size: clamp(42px, 4.6vw, 62px); color: #f7fbfc; text-shadow: 0 3px 15px #061d33; }
.launch-copy h2 em { color: #abd2e2; }
.launch-copy > p:not(.eyebrow) { color: #cee5ee; }
.launch-platforms { color: #bcdbe8; }
.launch-ticket { background: #0f2c46f5; border-color: #85b6ce; box-shadow: inset 0 0 0 5px #0d2840, inset 0 0 0 6px #336d94, 0 20px 45px #061d3388; padding: 32px; }
.ticket-topline { color: #abcddd; }
.ticket-label, .timezone-note { color: #c2deea; }
.ticket-date { color: #d8eaf2; font-size: 31px; font-weight: 600; }
.ticket-zone { color: #d7eaf1; }
.reference-time { color: #b0d5e4; }
.reference-time time { color: #d1e7ef; }
/* Details, footer, and account access use the same steel palette. */
.faq-list { border-top-color: #68a5c3; }
.faq-list details { border-bottom-color: #2c5f82; }
.faq-list summary { color: #eef6f9; padding-inline: 14px; }
.faq-list details[open] { background: #0f2e49; }
.faq-list details p { color: #bfdde9; padding: 0 18px 22px 14px; margin-bottom: 0; }
.site-footer { background: #0c253b; border-top: 3px double #336d94; }
.footer-top p, .footer-bottom { color: #abcdde; }
.footer-bottom { border-color: #275573; }
.guide-attribution { color: #c0dce9; }
.account-inline-action { border-color: #87b4cf; }
.noscript-note { background: #113351; }
.account-dialog { background: #0f2b45; border-color: #7cb1cb; box-shadow: 0 24px 110px #061d33dd, inset 0 0 0 4px #0d273e; }
.account-dialog::backdrop { background: #061d33e0; }
.account-dialog-inner { background: linear-gradient(145deg, #2b5c7d44, transparent 42%); }
.account-close { color: #d1e7ef; }
.account-close:hover { background: #2a5b7b; }
.account-brand-line span { color: #92bed4; }
.account-dialog h2 { color: #d8eaf2; font-weight: 700; }
.account-dialog-subtitle { color: #bddce8; }
.account-tabs button { color: #b3d6e5; }
.account-tabs [aria-selected=true] { color: #c8e2ec; }
.account-message { background: #244d69; border-color: #a5c9db; color: #e6f2f6; }
.account-message[data-kind=error] { background: #482522; border-color: #f2b7a4; color: #ffe0d5; }
.account-message[data-kind=success] { background: #1d4438; border-color: #b4ddc2; color: #e1f5e6; }
.account-form label { color: #eef6f9; }
.account-form input { border-color: #3777a1; background: #0d2840; color: #f7fbfc; }
.account-form input:-webkit-autofill { -webkit-text-fill-color: #f7fbfc; box-shadow: 0 0 0 1000px #11324f inset; }
.account-field-help, .account-google-help { color: #b0d5e4; }
.account-divider, .account-google-status { color: #c2deea; }
.account-divider::before, .account-divider::after { background: #326b92; }
.account-profile dt { color: #b3d7e5; }
.account-profile dd { color: #cee5ee; }
.account-logout { border-color: #6ea8c5; color: #d8eaf2; }
.account-logout:hover { background: #285675; }
.discord-float { background: #2d6183; border: 1px solid #9ac3d7; border-radius: 10px; box-shadow: inset 0 0 0 3px #113350, 0 5px 22px #061d3388; }
.discord-float:hover, .discord-float:focus-visible { background: #3879a5; box-shadow: inset 0 0 0 3px #2a5979, 0 6px 28px #061d3399; }
/* Tablet: retain the art/text split without squeezing the translated controls. */
@media (max-width: 1120px) {
  .desktop-nav { display: none; }
  .menu-toggle { display: flex; flex-direction: column; gap: 6px; width: 36px; height: 36px; justify-content: center; padding: 6px; background: transparent; }
  .menu-toggle span { width: 24px; height: 1px; background: var(--gold-light); }
}
@media (max-width: 1190px) {
  .hero-content { width: 58%; margin-left: 40px; padding-right: 30px; }
  .hero-art { left: 44%; width: 56%; }
  .hero h1, .hero h1 em, html[lang=ru] .hero h1, html[lang=ru] .hero h1 em { font-size: 49px; }
  .class-stage { gap: 32px; padding: 30px; }
  .feature-stories { gap: 0 32px; }
}
@media (max-width: 850px) {
  .container { width: calc(100% - 48px); }
  .site-header { padding-inline: 24px; }
  .hero { display: flex; flex-direction: column; min-height: 0; }
  .hero-content { width: min(100%, 680px); max-width: 100%; margin: -30px auto 0; padding: 0 32px 80px; }
  .hero-art { position: relative; inset: auto; width: 100%; height: 450px; z-index: -2; }
  .hero-art img { width: 64%; }
  .hero-art .hero-elf { left: 0; object-position: 50% 33%; }
  .hero-art .hero-wizard { right: 0; object-position: 79% 24%; }
  .classic-art-edge { background: linear-gradient(0deg, #123d66 0%, transparent 26%); }
  .hero::before { display: none; }
  .hero h1, .hero h1 em, html[lang=ru] .hero h1, html[lang=ru] .hero h1 em { font-size: 43px; }
  .hero-logo { width: 300px; }
  .hero-actions .button { flex: 1 1 180px; max-width: 290px; }
  .scroll-indicator { display: none; }
  .feature-stories { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 0 24px; }
  .classic-party-art { min-height: 600px; }
  .feature-story, .feature-story:first-child, .feature-story:last-child { padding: 22px 0; }
  .feature-heading { position: static; flex-direction: row; margin-bottom: 12px; gap: 14px; justify-content: flex-start; }
  .feature-symbol { width: 26px; height: 26px; font-size: 34px; }
  .feature-index { margin: 0; }
  .feature-story h3 { font-size: 26px; }
  .class-stage { padding: 30px 22px; gap: 30px; }
  .class-portrait-area { min-height: 310px; }
  .portrait-frame { width: min(100%, 260px); }
  .portrait-glyph { font-size: 165px; }
  .launch-ticket { padding: 28px 24px; }
}
/* Phones: artwork becomes its own cinematic opening, never a backdrop for the face. */
@media (max-width: 640px) {
  .container { width: calc(100% - 32px); }
  .section { padding-block: 60px; }
  .site-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: 12px 16px; gap: 12px 10px; min-height: 0; }
  .header-actions { gap: 8px; }
  .language-control select { max-width: 108px; }
  .account-header-group { flex-wrap: nowrap; }
  .account-header-group button { max-width: none; min-height: 44px; }
  .hero { display: flex; flex-direction: column; min-height: 0; }
  .hero-art { position: relative; inset: auto; width: 100%; height: 335px; z-index: -2; }
  .hero-art img { width: 68%; opacity: 1; }
  .hero-art .hero-elf { left: -5%; object-position: 50% 34%; }
  .hero-art .hero-wizard { right: -4%; object-position: 80% 27%; }
  .classic-art-edge { background: linear-gradient(0deg, #123d66 0%, transparent 26%); }
  .hero::before { display: none; }
  .hero::after { inset: 10px; border-color: #79afca22; }
  .hero-content { width: 100%; max-width: 100%; margin: -22px 0 0; padding: 0 24px 70px; }
  .hero-eyebrow { font-size: 10px; margin-bottom: 8px; letter-spacing: 1.2px; }
  .hero-logo { width: min(295px, 94%); margin: 0 0 8px -10px; }
  .hero h1, .hero h1 em, html[lang=ru] .hero h1, html[lang=ru] .hero h1 em { font-size: 43px; line-height: 1.08; }
  html[lang=th] .hero h1, html[lang=th] .hero h1 em { font-size: 35px; line-height: 1.45; }
  html[lang=zh] .hero h1, html[lang=zh] .hero h1 em, html[lang=ja] .hero h1, html[lang=ja] .hero h1 em { font-size: 37px; line-height: 1.35; }
  .hero-description { font-size: 14px; margin-top: 19px; max-width: 100%; }
  .hero-badges { margin-top: 20px; font-size: 10px; gap: 8px 12px; }
  .hero-actions { margin-top: 25px; gap: 12px; }
  .hero-actions .button { width: 100%; max-width: none; flex: 1 1 100%; font-size: 12px; justify-content: space-between; }
  .web-play-block { max-width: 100%; margin-top: 22px; }
  .web-play-button, .web-play-button:disabled { width: 100%; min-width: 0; max-width: none; justify-content: space-between; font-size: 12px; }
  .web-test-notice { font-size: 13px; }
  .web-test-local { font-size: 12px; }
  .launch-strip { margin-top: -24px; padding: 28px 20px; }
  .countdown strong { font-size: 38px; }
  .account-community { padding: 25px 22px; margin-top: 0; gap: 18px; }
  .account-community-heading { gap: 13px; }
  .account-count-value { padding-left: 27px; }
  .account-count-value strong { font-size: 46px; }
  .account-community-cta { margin-left: 27px; }
  .section-heading { margin-bottom: 30px; }
  .feature-stories { display: block; }
  .classic-party-art { height: 370px; min-height: 0; margin-bottom: 27px; }
  .classic-party-art img { object-position: center; object-fit: contain; }
  .classic-art-caption { font-size: 9px; padding-bottom: 18px; letter-spacing: 1.3px; }
  .feature-story, .feature-story:first-child, .feature-story:last-child { padding: 25px 0 25px 51px; }
  .feature-heading { position: absolute; top: 28px; left: 0; margin: 0; flex-direction: column; gap: 12px; }
  .feature-story h3 { font-size: 27px; }
  .feature-story > p:last-child { font-size: 14px; }
  .class-roster { padding: 8px; gap: 6px; }
  .class-tab { padding: 10px 4px; min-height: 80px; }
  .class-stage { padding: 28px 18px; gap: 28px; }
  .class-portrait-area { min-height: 0; padding-top: 13px; }
  .portrait-frame { width: min(100%, 260px); }
  .portrait-frame img { width: 100%; height: auto; }
  .portrait-caption { margin-top: 22px; padding-inline: 0; }
  .class-details h3 { font-size: 43px; }
  .class-attributes { gap: 18px; }
  .class-attributes > div { min-width: 0; }
  .launch-backdrop { background-position: 57% center; background-size: auto 100%; }
  .launch-section::before { background: #103f6bd1; }
  .launch-copy h2 { font-size: 44px; }
  .launch-ticket { padding: 29px 23px; margin-top: 32px; }
  .ticket-date { font-size: 29px; }
  .faq-list summary { padding-inline: 12px; }
  .faq-list details p { padding-left: 12px; font-size: 14px; }
  .site-footer { padding-bottom: 38px; }
  .footer-top { gap: 18px; }
  .footer-bottom { padding-right: 45px; }
}
@media (max-width: 380px) {
  .hero-art { height: 310px; }
  .hero-content { padding-inline: 20px; }
  .hero h1, .hero h1 em { font-size: 40px; }
  .class-stage { padding-inline: 16px; }
  .class-details h3 { font-size: 39px; }
  .class-tab img { width: 30px; height: 32px; flex-basis: 32px; }
  .launch-ticket { padding-inline: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .class-stage.is-changing .portrait-frame { animation: none; }
}