:root {
  color-scheme: dark;
  --bg: #050b16;
  --panel: rgba(8, 19, 35, .72);
  --panel-strong: rgba(10, 22, 40, .93);
  --line: rgba(158, 219, 255, .18);
  --text: #f4fbff;
  --muted: #9bb1c5;
  --accent: #69dcff;
  --accent-soft: rgba(105, 220, 255, .16);
  --gold: #e8c884;
  --max: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body.modal-open { overflow: hidden; }
button, a { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

#particle-canvas {
  position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none;
}
.cursor-aura {
  position: fixed; z-index: 5; width: 420px; height: 420px; border-radius: 50%;
  pointer-events: none; transform: translate(-50%, -50%);
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 10%, transparent), transparent 68%);
  opacity: .8; mix-blend-mode: screen;
}
.scene { position: fixed; inset: 0; z-index: -3; overflow: hidden; background: #041020; }
.scene-layer {
  position: absolute; inset: -3%; background-image: var(--scene); background-position: center; background-size: cover;
  opacity: 0; transform: scale(1.08); transition: opacity 1.4s ease, transform 8s ease;
  filter: saturate(.9) brightness(.55);
}
.scene-layer.active { opacity: 1; transform: scale(1.02); }
.scene-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 58% 40%, transparent 0 22%, rgba(2, 7, 16, .15) 52%, rgba(2, 7, 16, .86) 100%),
              linear-gradient(180deg, rgba(3, 9, 18, .2), #050b16 92%);
}
.scene-mist {
  position: absolute; left: -15%; width: 130%; height: 32%; bottom: 3%; opacity: .32;
  background: radial-gradient(ellipse at center, rgba(135, 220, 255, .38), transparent 66%);
  filter: blur(35px); animation: mistMove 14s ease-in-out infinite alternate;
}
.mist-two { bottom: 18%; opacity: .12; animation-duration: 20s; animation-direction: alternate-reverse; }
.lightning-flash { position: absolute; inset: 0; background: rgba(183, 178, 255, .18); opacity: 0; pointer-events: none; }
body[data-theme="leijie"] .lightning-flash { animation: lightning 7s infinite; }
@keyframes mistMove { from { transform: translateX(-4%) scale(1); } to { transform: translateX(6%) scale(1.12); } }
@keyframes lightning { 0%, 78%, 81%, 100% { opacity: 0; } 79% { opacity: .22; } 80% { opacity: .02; } 80.5% { opacity: .3; } }

.site-header {
  position: fixed; z-index: 30; top: 0; left: 0; right: 0; height: 82px; padding: 0 max(24px, calc((100vw - var(--max))/2));
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid transparent; transition: background .35s ease, border-color .35s ease, height .35s ease;
}
.site-header.scrolled { height: 68px; background: rgba(4, 11, 22, .78); border-color: var(--line); backdrop-filter: blur(18px); }
.brand { display: flex; align-items: center; gap: 13px; min-width: 245px; }
.brand-seal {
  width: 47px; height: 47px; display: grid; place-items: center; border: 1px solid rgba(232, 200, 132, .72);
  color: #f7dfad; background: linear-gradient(145deg, rgba(93, 52, 25, .9), rgba(29, 21, 20, .7));
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.04), 0 8px 28px rgba(0,0,0,.25);
  font: 700 14px/1 "STKaiti", "KaiTi", serif; letter-spacing: -1px; transform: rotate(-3deg);
}
.brand-seal.small { width: 38px; height: 38px; font-size: 12px; }
.brand-copy { display: flex; flex-direction: column; gap: 3px; }
.brand-copy strong { font: 600 17px/1.1 "STSong", "SimSun", serif; letter-spacing: .18em; }
.brand-copy small { color: #91a7ba; font-size: 8px; letter-spacing: .2em; }
.desktop-nav { display: flex; gap: 34px; align-items: center; }
.desktop-nav a { position: relative; color: #c3d2df; font-size: 14px; letter-spacing: .12em; }
.desktop-nav a::after { content:""; position:absolute; left:50%; right:50%; bottom:-9px; height:1px; background:var(--accent); transition:.3s ease; }
.desktop-nav a:hover::after { left:0; right:0; }
.desktop-nav a:hover { color:#fff; }
.header-actions { display:flex; gap:10px; min-width:245px; justify-content:flex-end; }
.icon-button, .menu-button {
  width:43px; height:43px; border:1px solid var(--line); border-radius:50%; background:rgba(8,18,31,.35); cursor:pointer;
  display:grid; place-items:center; backdrop-filter:blur(12px); transition:.25s ease;
}
.icon-button:hover, .menu-button:hover { border-color:rgba(255,255,255,.4); transform:translateY(-2px); }
.music-bars { display:flex; align-items:center; gap:3px; height:15px; }
.music-bars i { width:2px; height:6px; background:var(--accent); border-radius:2px; }
.icon-button[aria-pressed="true"] .music-bars i { animation:eq .7s ease-in-out infinite alternate; }
.icon-button[aria-pressed="true"] .music-bars i:nth-child(2) { animation-delay:-.25s; }
.icon-button[aria-pressed="true"] .music-bars i:nth-child(3) { animation-delay:-.48s; }
@keyframes eq { to { height:15px; } }
.menu-button { display:none; position:relative; }
.menu-button span { position:absolute; width:17px; height:1px; background:#fff; transition:.3s; }
.menu-button span:first-child { transform:translateY(-4px); }
.menu-button span:last-child { transform:translateY(4px); }
.menu-button.open span:first-child { transform:rotate(45deg); }
.menu-button.open span:last-child { transform:rotate(-45deg); }
.mobile-menu { display:none; }

.hero { min-height: 100svh; position: relative; display: grid; align-items: center; padding: 122px 24px 80px; }
.hero-grid { width: min(var(--max), 100%); margin: 0 auto; display:grid; grid-template-columns: .9fr 1.1fr; align-items:center; gap:56px; }
.eyebrow, .section-kicker { color: var(--accent); font-size: 12px; letter-spacing: .24em; text-transform: uppercase; }
.eyebrow { display:flex; align-items:center; gap:12px; margin:0 0 25px; }
.eyebrow span { width:38px; height:1px; background:var(--accent); box-shadow:0 0 14px var(--accent); }
.hero h1 { margin:0; font-family:"STKaiti", "KaiTi", serif; font-weight:500; line-height:.95; text-shadow:0 5px 32px rgba(0,0,0,.55); }
.title-small { display:block; margin-bottom:15px; color:#c5d8e8; font-size:clamp(28px,3.2vw,48px); letter-spacing:.08em; }
.title-main { display:block; font-size:clamp(54px,6.3vw,94px); letter-spacing:.06em; background:linear-gradient(100deg,#fff 10%,#c9efff 48%,#eed39c); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-description { max-width:630px; margin:31px 0 0; color:#b9cada; font-size:16px; line-height:2; letter-spacing:.04em; }
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:36px; }
.primary-button, .ghost-button {
  min-height:54px; padding:0 24px; border-radius:3px; display:inline-flex; align-items:center; justify-content:center; gap:36px;
  border:1px solid rgba(134,230,255,.62); cursor:pointer; transition:.3s ease; letter-spacing:.1em; font-weight:600;
}
.primary-button { color:#06101b; background:linear-gradient(110deg,#d9f8ff,#70dcff 60%,#b5f2ff); box-shadow:0 12px 44px rgba(61,188,230,.24); }
.primary-button:hover { transform:translateY(-4px); box-shadow:0 17px 52px rgba(61,188,230,.4); }
.primary-button b { font-size:18px; }
.ghost-button { color:#eef9ff; background:rgba(8,20,36,.25); backdrop-filter:blur(12px); }
.ghost-button:hover { border-color:#fff; background:rgba(255,255,255,.08); transform:translateY(-4px); }
.hero-meta { display:flex; gap:22px; flex-wrap:wrap; margin-top:33px; color:#94aabd; font-size:12px; letter-spacing:.08em; }
.hero-meta span { display:flex; align-items:center; gap:8px; }
.hero-meta b { color:#fff; font-size:17px; font-weight:500; }
.hero-stage { position:relative; height:min(72vh,710px); min-height:520px; perspective:1000px; }
.hero-character { position:absolute; left:50%; top:50%; transform-origin:center bottom; image-rendering:auto; filter:drop-shadow(0 30px 26px rgba(0,0,0,.55)); }
.character-main { width:min(38vw,520px); transform:translate(-48%,-50%) scale(1.45); animation:floatMain 5s ease-in-out infinite; z-index:3; }
.character-back { width:min(23vw,320px); transform:translate(-122%,-38%) scale(1.08) rotateY(9deg); opacity:.55; animation:floatBack 6s ease-in-out infinite; z-index:2; filter:blur(.2px) drop-shadow(0 20px 22px rgba(0,0,0,.45)); }
.character-front { width:min(24vw,330px); transform:translate(27%,-27%) scale(1.08) rotateY(-9deg); opacity:.72; animation:floatFront 5.6s ease-in-out infinite; z-index:4; }
@keyframes floatMain { 50% { transform:translate(-48%,-53%) scale(1.48); } }
@keyframes floatBack { 50% { transform:translate(-122%,-42%) scale(1.1) rotateY(9deg); } }
@keyframes floatFront { 50% { transform:translate(27%,-31%) scale(1.11) rotateY(-9deg); } }
.hero-halo { position:absolute; left:50%; top:50%; border:1px solid rgba(136,225,255,.25); border-radius:50%; transform:translate(-50%,-50%); }
.halo-one { width:62%; aspect-ratio:1; box-shadow:inset 0 0 80px rgba(78,177,255,.08),0 0 70px rgba(86,189,255,.08); animation:spin 25s linear infinite; }
.halo-two { width:78%; aspect-ratio:1; border-style:dashed; opacity:.55; animation:spin 38s linear infinite reverse; }
.halo-one::before, .halo-two::before { content:""; position:absolute; inset:9%; border:1px dotted rgba(232,200,132,.26); border-radius:50%; }
@keyframes spin { to { transform:translate(-50%,-50%) rotate(360deg); } }
.hero-rune { position:absolute; z-index:1; color:rgba(199,236,255,.18); font:700 84px/1 "STKaiti",serif; filter:blur(.1px); animation:runeFloat 7s ease-in-out infinite; }
.rune-one { left:9%; top:17%; }
.rune-two { right:5%; bottom:18%; animation-delay:-3s; }
@keyframes runeFloat { 50% { transform:translateY(-18px) rotate(5deg); opacity:.34; } }
.stage-plaque { position:absolute; right:0; bottom:8%; z-index:6; min-width:150px; padding:15px 18px; border-left:2px solid var(--accent); background:rgba(4,15,27,.6); backdrop-filter:blur(12px); }
.stage-plaque span,.stage-plaque small { display:block; color:#96adbf; font-size:10px; letter-spacing:.18em; }
.stage-plaque strong { display:block; margin:5px 0; font-size:28px; font-weight:300; }
.scroll-hint { position:absolute; left:50%; bottom:23px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; color:#8197aa; font-size:10px; letter-spacing:.25em; }
.scroll-hint i { width:1px; height:38px; background:linear-gradient(var(--accent),transparent); animation:scrollLine 2s ease-in-out infinite; }
@keyframes scrollLine { 0% { transform:scaleY(.2); transform-origin:top; } 55% { transform:scaleY(1); transform-origin:top; } 56% { transform-origin:bottom; } 100% { transform:scaleY(.2); transform-origin:bottom; } }

.section-shell { width:min(var(--max),calc(100% - 48px)); margin:0 auto; padding:130px 0; position:relative; }
.section-heading { max-width:780px; margin-bottom:54px; }
.section-heading h2, .studio h2, .final-cta h2 { margin:10px 0 18px; font:500 clamp(38px,4.6vw,67px)/1.2 "STKaiti","KaiTi",serif; letter-spacing:.05em; }
.section-heading > p:last-child, .split-heading > p { color:var(--muted); line-height:1.9; }
.split-heading { max-width:none; display:grid; grid-template-columns:1.1fr .8fr; gap:70px; align-items:end; }

.realm-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; }
.realm-card { position:relative; height:520px; padding:0; overflow:hidden; border:1px solid rgba(255,255,255,.11); background:#08111f; cursor:pointer; text-align:left; }
.realm-card img { width:100%; height:100%; object-fit:cover; transition:transform 1.1s cubic-bezier(.2,.7,.2,1),filter .4s; filter:saturate(.75) brightness(.72); }
.realm-shade { position:absolute; inset:0; background:linear-gradient(180deg,transparent 35%,rgba(2,7,14,.15) 48%,rgba(2,7,14,.94)); }
.realm-copy { position:absolute; left:30px; right:30px; bottom:31px; display:flex; flex-direction:column; }
.realm-copy small { color:var(--accent); font-size:11px; letter-spacing:.23em; }
.realm-copy strong { margin:8px 0; font:500 42px/1 "STKaiti",serif; letter-spacing:.18em; }
.realm-copy em { color:#9eb0c1; font-style:normal; font-size:12px; letter-spacing:.1em; }
.realm-card > i { position:absolute; right:24px; top:22px; font-style:normal; color:rgba(255,255,255,.38); font-size:12px; }
.realm-card::after { content:""; position:absolute; inset:0; border:1px solid transparent; transition:.4s; pointer-events:none; }
.realm-card:hover img, .realm-card.active img { transform:scale(1.08); filter:saturate(1.05) brightness(.83); }
.realm-card:hover::after, .realm-card.active::after { inset:9px; border-color:color-mix(in srgb,var(--accent) 68%,transparent); }
.realm-card.active { box-shadow:0 28px 80px rgba(0,0,0,.28); }

.system-showcase { display:grid; grid-template-columns:.9fr 1.1fr; gap:70px; align-items:center; }
.skill-orbit { position:relative; width:min(520px,100%); aspect-ratio:1; margin:auto; }
.orbit-line { position:absolute; inset:12%; border:1px solid rgba(139,221,255,.2); border-radius:50%; animation:spinCenter 24s linear infinite; }
.orbit-two { inset:25%; border-style:dashed; animation-duration:16s; animation-direction:reverse; }
@keyframes spinCenter { to { transform:rotate(360deg); } }
.dao-core { position:absolute; left:50%; top:50%; width:175px; height:175px; transform:translate(-50%,-50%); display:grid; place-content:center; text-align:center; border-radius:50%; border:1px solid rgba(130,222,255,.42); background:radial-gradient(circle,#153c58 0,#071827 62%,rgba(5,13,24,.4)); box-shadow:0 0 65px rgba(73,190,242,.2),inset 0 0 48px rgba(108,216,255,.14); }
.dao-core::before,.dao-core::after { content:""; position:absolute; inset:-15px; border:1px dotted rgba(232,200,132,.28); border-radius:50%; animation:spinCenter 18s linear infinite; }
.dao-core::after { inset:-31px; animation-direction:reverse; animation-duration:30s; }
.dao-core span { font:500 37px/1 "STKaiti",serif; letter-spacing:.1em; }
.dao-core small { margin-top:8px; color:var(--gold); letter-spacing:.32em; font-size:9px; }
.orbit-icon { position:absolute; width:58px; height:58px; border-radius:17px; filter:drop-shadow(0 10px 17px rgba(0,0,0,.35)); animation:iconFloat 4s ease-in-out infinite; }
.oi-1{left:47%;top:2%}.oi-2{right:5%;top:26%;animation-delay:-.6s}.oi-3{right:12%;bottom:13%;animation-delay:-1.2s}.oi-4{left:15%;bottom:7%;animation-delay:-1.8s}.oi-5{left:2%;top:39%;animation-delay:-2.4s}.oi-6{left:20%;top:10%;animation-delay:-3s}
@keyframes iconFloat { 50% { transform:translateY(-10px) scale(1.07); } }
.feature-list { border-top:1px solid var(--line); }
.feature-row { display:grid; grid-template-columns:55px 1fr 54px; gap:18px; align-items:center; padding:27px 0; border-bottom:1px solid var(--line); transition:.3s; }
.feature-row:hover { padding-left:12px; background:linear-gradient(90deg,var(--accent-soft),transparent 75%); }
.feature-index { color:var(--accent); font-size:11px; letter-spacing:.2em; }
.feature-row h3 { margin:0 0 7px; font-size:20px; font-weight:500; }
.feature-row p { margin:0; color:#92a8ba; line-height:1.7; font-size:13px; }
.feature-row > b { color:rgba(255,255,255,.14); font-size:34px; font-weight:300; text-align:right; }

.character-lab { min-height:620px; display:grid; grid-template-columns:1.15fr .85fr; gap:25px; border:1px solid var(--line); background:linear-gradient(145deg,rgba(12,29,49,.72),rgba(4,11,21,.73)); backdrop-filter:blur(14px); }
.character-display { position:relative; overflow:hidden; min-height:620px; display:flex; align-items:center; justify-content:center; }
.character-display::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 52% 48%,var(--accent-soft),transparent 48%),linear-gradient(135deg,transparent 50%,rgba(255,255,255,.03)); }
.character-display::after { content:"道"; position:absolute; right:2%; top:3%; color:rgba(255,255,255,.025); font:700 360px/1 "STKaiti",serif; }
.character-aura { position:absolute; width:430px; height:430px; border-radius:50%; border:1px solid rgba(134,225,255,.25); box-shadow:inset 0 0 90px var(--accent-soft),0 0 80px rgba(0,0,0,.28); animation:pulse 4s ease-in-out infinite; }
@keyframes pulse { 50% { transform:scale(1.06); opacity:.72; } }
#character-image { position:relative; z-index:2; width:min(72%,500px); max-height:470px; object-fit:contain; transform:scale(1.55); filter:drop-shadow(0 34px 28px rgba(0,0,0,.58)); transition:opacity .28s,transform .48s cubic-bezier(.2,.8,.2,1); }
#character-image.switching { opacity:0; transform:translateY(18px) scale(1.42); }
.character-caption { position:absolute; z-index:3; left:32px; bottom:28px; max-width:340px; padding:17px 20px; border-left:2px solid var(--accent); background:rgba(3,12,22,.58); backdrop-filter:blur(11px); }
.character-caption small { color:var(--accent); letter-spacing:.2em; }
.character-caption strong { display:block; margin:5px 0; font:500 28px/1.2 "STKaiti",serif; }
.character-caption p { margin:0; color:#9cb0c2; font-size:12px; line-height:1.7; }
.character-tabs { display:grid; align-content:center; padding:28px; border-left:1px solid var(--line); }
.character-tab { position:relative; display:flex; align-items:center; gap:18px; width:100%; min-height:78px; padding:13px 18px; border:0; border-bottom:1px solid var(--line); background:transparent; color:#a9baca; text-align:left; cursor:pointer; transition:.3s; letter-spacing:.08em; }
.character-tab span { display:grid; place-items:center; width:39px; height:39px; border:1px solid rgba(255,255,255,.18); color:#e4eef6; font-family:"STKaiti",serif; transition:.3s; }
.character-tab::after { content:"→"; position:absolute; right:18px; opacity:0; transform:translateX(-10px); transition:.3s; }
.character-tab:hover,.character-tab.active { color:#fff; padding-left:27px; background:linear-gradient(90deg,var(--accent-soft),transparent); }
.character-tab.active span { color:#06111c; background:var(--accent); border-color:var(--accent); box-shadow:0 0 25px color-mix(in srgb,var(--accent) 35%,transparent); }
.character-tab.active::after { opacity:1; transform:none; }
.boss-heading { margin:90px 0 24px; display:flex; align-items:center; gap:20px; }
.boss-heading span { font:500 25px/1 "STKaiti",serif; letter-spacing:.15em; }
.boss-heading i { flex:1; height:1px; background:var(--line); }
.boss-heading small { color:#8198aa; letter-spacing:.12em; }
.boss-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.boss-card { position:relative; min-height:390px; overflow:hidden; border:1px solid var(--line); background:linear-gradient(155deg,rgba(14,27,44,.88),rgba(5,10,20,.92)); transform-style:preserve-3d; transition:transform .2s ease,border-color .3s; }
.boss-card::before { content:""; position:absolute; inset:-30%; background:radial-gradient(circle at var(--mx,50%) var(--my,50%),var(--accent-soft),transparent 28%); opacity:0; transition:.3s; }
.boss-card:hover { border-color:rgba(255,255,255,.38); }
.boss-card:hover::before { opacity:1; }
.boss-card img { position:absolute; z-index:1; width:90%; height:72%; left:5%; top:0; object-fit:contain; filter:drop-shadow(0 25px 20px rgba(0,0,0,.55)); transition:.5s; }
.boss-card:hover img { transform:translateY(-8px) scale(1.06); }
.boss-card div { position:absolute; z-index:2; left:22px; right:22px; bottom:22px; transform:translateZ(24px); }
.boss-card small { color:var(--accent); font-size:9px; letter-spacing:.17em; }
.boss-card h3 { margin:7px 0; font:500 24px/1.2 "STKaiti",serif; letter-spacing:.1em; }
.boss-card p { margin:0; color:#8fa4b6; font-size:12px; }

.studio-panel { position:relative; min-height:500px; padding:70px; display:grid; grid-template-columns:1fr .65fr; align-items:center; overflow:hidden; border:1px solid var(--line); background:linear-gradient(115deg,rgba(8,22,38,.95),rgba(8,15,28,.65)),url('play/assets/backgrounds/default.png') center/cover; }
.studio-panel::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,12,23,.2),rgba(5,12,23,.82)); pointer-events:none; }
.studio-copy,.studio-seal { position:relative; z-index:2; }
.studio-copy { max-width:700px; }
.studio-copy > p:last-of-type { color:#a5b6c5; line-height:2; max-width:670px; }
.studio-tags { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.studio-tags span { padding:9px 14px; border:1px solid var(--line); color:#b7c7d4; font-size:11px; letter-spacing:.1em; background:rgba(4,12,22,.48); }
.studio-seal { justify-self:center; width:260px; height:260px; border:1px solid rgba(232,200,132,.48); display:grid; grid-template-columns:1fr 1fr; place-items:center; padding:33px; transform:rotate(4deg); background:rgba(40,23,20,.32); box-shadow:inset 0 0 0 8px rgba(232,200,132,.035); }
.studio-seal span { font:500 46px/1 "STKaiti",serif; color:#edd9ae; }
.studio-seal i { position:absolute; inset:14px; border:1px solid rgba(232,200,132,.17); }

.final-cta { position:relative; min-height:620px; overflow:hidden; display:grid; place-items:center; padding:90px 24px; }
.final-bg { position:absolute; inset:0; background:linear-gradient(90deg,rgba(4,8,17,.94),rgba(4,8,17,.38) 50%,rgba(4,8,17,.75)),url('play/assets/backgrounds/leijie.png') center/cover; filter:saturate(.85); }
.final-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,#050b16 0,transparent 25%,transparent 70%,#050b16 100%); }
.final-content { position:relative; z-index:3; width:min(var(--max),100%); }
.final-content p { color:var(--accent); letter-spacing:.23em; }
.final-content h2 { max-width:690px; font-size:clamp(48px,6vw,88px); }
.primary-button.large { min-height:62px; padding:0 30px; }
.final-character { position:absolute; z-index:2; right:max(3%,calc((100vw - var(--max))/2)); bottom:-4%; width:min(44vw,560px); transform:scale(1.45); filter:drop-shadow(0 35px 32px rgba(0,0,0,.58)); animation:floatFinal 5s ease-in-out infinite; }
@keyframes floatFinal { 50% { transform:translateY(-12px) scale(1.48); } }

footer { width:min(var(--max),calc(100% - 48px)); min-height:115px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:20px; color:#788ea0; font-size:11px; border-top:1px solid var(--line); }
.footer-brand { display:flex; align-items:center; gap:12px; color:#d4e2ec; }
footer a:hover { color:#fff; }

.game-modal { position:fixed; z-index:100; inset:0; display:grid; grid-template-rows:56px 1fr; background:#02060e; opacity:0; visibility:hidden; transform:scale(.985); transition:.35s ease; }
.game-modal.open { opacity:1; visibility:visible; transform:none; }
.game-modal-bar { display:flex; align-items:center; justify-content:space-between; padding:0 20px; background:#07111f; border-bottom:1px solid var(--line); }
.game-modal-bar > div { display:flex; align-items:center; gap:10px; }
.game-modal-bar small { color:#7f95a8; margin-left:8px; }
.live-dot { width:8px; height:8px; border-radius:50%; background:#6fffb4; box-shadow:0 0 14px #6fffb4; }
.game-modal-bar button { padding:8px 14px; border:1px solid var(--line); background:rgba(255,255,255,.04); cursor:pointer; }
.game-modal iframe { width:100%; height:100%; border:0; background:#030916; }

.reveal { opacity:0; transform:translateY(32px); transition:opacity .9s ease,transform .9s cubic-bezier(.2,.75,.2,1); transition-delay:var(--delay,0ms); }
.reveal.in-view { opacity:1; transform:none; }

@media (max-width: 1050px) {
  .desktop-nav { display:none; }
  .header-actions,.brand { min-width:0; }
  .menu-button { display:grid; }
  .mobile-menu { position:fixed; z-index:29; inset:0; padding:110px 28px 35px; display:flex; flex-direction:column; justify-content:center; gap:5px; background:rgba(3,10,20,.96); backdrop-filter:blur(20px); opacity:0; visibility:hidden; transition:.35s; }
  .mobile-menu.open { opacity:1; visibility:visible; }
  .mobile-menu a { padding:17px 0; border-bottom:1px solid var(--line); font:500 29px/1.2 "STKaiti",serif; letter-spacing:.12em; }
  .hero-grid { grid-template-columns:1fr; text-align:center; }
  .hero-copy { order:2; }
  .hero-stage { order:1; height:48vh; min-height:380px; }
  .eyebrow,.hero-actions,.hero-meta { justify-content:center; }
  .hero-description { margin-left:auto; margin-right:auto; }
  .character-main { width:min(54vw,430px); }
  .character-back,.character-front { width:min(32vw,250px); }
  .realm-card { height:430px; }
  .system-showcase,.split-heading { grid-template-columns:1fr; }
  .skill-orbit { width:min(470px,90vw); }
  .character-lab { grid-template-columns:1fr; }
  .character-tabs { border-left:0; border-top:1px solid var(--line); grid-template-columns:repeat(3,1fr); }
  .character-tab { border-right:1px solid var(--line); }
  .boss-grid { grid-template-columns:1fr 1fr; }
  .studio-panel { padding:55px; grid-template-columns:1fr .45fr; }
}

@media (max-width: 720px) {
  .site-header { height:68px; padding:0 16px; }
  .brand-copy small { display:none; }
  .brand-copy strong { font-size:14px; letter-spacing:.12em; }
  .brand-seal { width:40px; height:40px; }
  .icon-button,.menu-button { width:39px; height:39px; }
  .cursor-aura { display:none; }
  .hero { padding:90px 18px 60px; }
  .hero-stage { height:42vh; min-height:330px; }
  .title-small { font-size:25px; }
  .title-main { font-size:clamp(46px,14vw,66px); line-height:1.05; }
  .hero-description { font-size:14px; line-height:1.85; }
  .hero-actions > * { flex:1; min-width:145px; padding:0 16px; gap:18px; }
  .hero-meta { gap:12px 18px; }
  .character-main { width:min(78vw,390px); }
  .character-back,.character-front { width:min(40vw,210px); }
  .stage-plaque { right:8px; bottom:1%; min-width:120px; }
  .scroll-hint { display:none; }
  .section-shell { width:calc(100% - 32px); padding:88px 0; }
  .section-heading { margin-bottom:35px; }
  .section-heading h2,.studio h2 { font-size:clamp(36px,11vw,50px); }
  .realm-grid { grid-template-columns:1fr; }
  .realm-card { height:310px; }
  .realm-copy { left:23px; bottom:23px; }
  .realm-copy strong { font-size:35px; }
  .system-showcase { gap:35px; }
  .feature-row { grid-template-columns:42px 1fr; }
  .feature-row > b { display:none; }
  .character-display { min-height:500px; }
  .character-lab { min-height:0; }
  .character-aura { width:300px; height:300px; }
  #character-image { width:88%; transform:scale(1.45); }
  .character-tabs { grid-template-columns:1fr 1fr; padding:10px; }
  .character-tab { min-height:63px; padding:10px 12px; }
  .character-tab:hover,.character-tab.active { padding-left:16px; }
  .character-tab::after { display:none; }
  .boss-grid { grid-template-columns:1fr; }
  .boss-card { min-height:360px; }
  .boss-heading small { display:none; }
  .studio-panel { padding:38px 24px 330px; grid-template-columns:1fr; background-position:center; }
  .studio-seal { position:absolute; bottom:36px; left:50%; transform:translateX(-50%) rotate(4deg); width:230px; height:230px; }
  .final-cta { min-height:700px; align-items:start; padding-top:110px; text-align:center; }
  .final-content h2 { font-size:55px; }
  .final-character { right:50%; transform:translateX(50%) scale(1.45); width:88vw; }
  @keyframes floatFinal { 50% { transform:translateX(50%) translateY(-10px) scale(1.48); } }
  footer { min-height:170px; flex-direction:column; justify-content:center; text-align:center; }
  .game-modal { grid-template-rows:50px 1fr; }
  .game-modal-bar small { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.001ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.001ms!important; }
}
/* Global studio/game switcher */
.game-global-nav{gap:24px}.global-game-wrap{position:relative}.global-game-trigger{border:0;background:transparent;color:#c3d2df;font-size:14px;letter-spacing:.12em;cursor:pointer;padding:0;display:flex;gap:7px;align-items:center}.global-game-trigger span{font-size:11px;transition:.2s}.global-game-trigger[aria-expanded="true"] span{transform:rotate(180deg)}
.global-game-dropdown{position:absolute;left:50%;top:calc(100% + 24px);width:260px;padding:9px;border:1px solid var(--line);background:rgba(4,12,23,.96);backdrop-filter:blur(20px);box-shadow:0 24px 70px rgba(0,0,0,.45);transform:translate(-50%,-8px);opacity:0;visibility:hidden;transition:.2s;border-radius:16px}.global-game-dropdown.open{transform:translate(-50%,0);opacity:1;visibility:visible}.global-game-dropdown a{display:block;padding:13px 14px;border-radius:11px}.global-game-dropdown a::after{display:none}.global-game-dropdown a:hover,.global-game-dropdown a.current{background:rgba(105,220,255,.08)}.global-game-dropdown b{display:block;color:#fff;font-size:13px;letter-spacing:.06em}.global-game-dropdown small{display:block;margin-top:5px;color:#8fa6b9;font-size:10px;letter-spacing:.04em}.mobile-menu small{float:right;color:var(--accent);font:600 10px/1 system-ui;letter-spacing:.08em}
@media(max-width:980px){.game-global-nav{display:none}}