/* 首页对角线双品牌分屏：左上猪猪助手（时光服/熊猫人），右下彼岸花（无限服/正式服） */
.split-hero {
  --seam-top: 58%;
  --seam-bottom: 42%;
  --higan: #ff3b5c;
  --higan-soft: #ff9cae;
  --higan-gold: #f5c98a;
  position: relative;
  isolation: isolate;
  height: max(720px, 100svh - 128px);
  overflow: hidden;
  background: #04070b;
}
.split-hero:has(.realm--zhu:hover, .realm--zhu:focus-within) { --seam-top: 61%; --seam-bottom: 45%; }
.split-hero:has(.realm--bianhua:hover, .realm--bianhua:focus-within) { --seam-top: 55%; --seam-bottom: 39%; }

.split-layer, .split-seam { position: absolute; inset: 0; pointer-events: none; transition: clip-path .7s cubic-bezier(.2, .8, .2, 1); }
.split-layer canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.split-layer--zhu {
  z-index: 0;
  clip-path: polygon(0 0, var(--seam-top) 0, var(--seam-bottom) 100%, 0 100%);
  background:
    radial-gradient(circle at 22% 30%, rgba(255, 157, 28, .09), transparent 34%),
    radial-gradient(circle at 46% 62%, rgba(15, 105, 145, .2), transparent 40%),
    linear-gradient(112deg, #06101a 0%, #03070c 55%, #05101a 100%);
}
.split-layer--zhu::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(118, 173, 206, .045) 0 1px, transparent 1px 64px), repeating-linear-gradient(0deg, rgba(118, 173, 206, .035) 0 1px, transparent 1px 64px); mask-image: linear-gradient(115deg, #000 10%, transparent 60%); }
.split-layer--bianhua {
  z-index: 1;
  clip-path: polygon(var(--seam-top) 0, 100% 0, 100% 100%, var(--seam-bottom) 100%);
  background:
    radial-gradient(ellipse at 62% 88%, rgba(220, 28, 64, .3), transparent 42%),
    radial-gradient(circle at 96% 6%, rgba(150, 14, 52, .32), transparent 38%),
    radial-gradient(circle at 82% 52%, rgba(255, 90, 120, .06), transparent 30%),
    linear-gradient(160deg, #1a0710 0%, #0d0408 55%, #070205 100%);
}
.split-layer--bianhua::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(255, 210, 220, .1) 1px, transparent 1.4px) 0 0 / 26px 26px; mask-image: linear-gradient(295deg, #000 0%, transparent 55%); opacity: .6; }

.split-seam { z-index: 2; filter: drop-shadow(0 0 6px rgba(255, 120, 80, .75)) drop-shadow(0 0 22px rgba(255, 59, 92, .35)); }
.split-seam i {
  position: absolute;
  inset: 0;
  clip-path: polygon(calc(var(--seam-top) - 1px) 0, calc(var(--seam-top) + 1px) 0, calc(var(--seam-bottom) + 1px) 100%, calc(var(--seam-bottom) - 1px) 100%);
  background: linear-gradient(180deg, transparent 0%, var(--amber) 18%, #ffd7a0 34%, var(--higan) 66%, transparent 100%) 0 0 / 100% 200%;
  animation: seam-flow 6s ease-in-out infinite alternate;
  transition: clip-path .7s cubic-bezier(.2, .8, .2, 1);
}
@keyframes seam-flow { from { background-position: 0 0; } to { background-position: 0 100%; } }

.split-grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 37%) 1fr minmax(0, 37%);
  height: 100%;
  padding: clamp(40px, 6vh, 72px) clamp(24px, 3.4vw, 64px) clamp(28px, 4vh, 44px);
}
.realm { min-width: 0; display: flex; flex-direction: column; gap: clamp(22px, 3.2vh, 36px); }
.realm--zhu { grid-column: 1; --accent: var(--amber); --accent-2: var(--cyan-soft); }
.realm--bianhua { grid-column: 3; --accent: var(--higan); --accent-2: var(--higan-soft); }

.realm-kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; color: #9fb2be; font-size: .82rem; letter-spacing: .14em; }
.realm-kicker span { color: var(--accent); font-family: var(--display); font-weight: 700; letter-spacing: .24em; }
.realm-kicker b { width: 34px; height: 1px; background: linear-gradient(90deg, var(--accent), transparent); }
.realm-title { margin: 0; font-family: var(--body); font-size: clamp(3.4rem, 4.8vw, 5.6rem); font-weight: 800; line-height: 1; letter-spacing: -.02em; color: var(--text); text-shadow: 0 10px 40px rgba(0, 0, 0, .6); }
.realm--bianhua .realm-title { letter-spacing: .06em; background: linear-gradient(180deg, #fff1f3 8%, #ff8fa3 58%, #e2203f 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 26px rgba(255, 59, 92, .35)); }
.realm-signal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 22px; }
.realm-signal span { display: inline-flex; align-items: center; gap: 10px; color: var(--accent); font-size: .92rem; font-weight: 700; letter-spacing: .03em; }
.realm-signal span i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px var(--accent); }
.realm-signal p { margin: 0; padding-left: 18px; border-left: 1px solid rgba(169, 186, 198, .4); color: #b3c0c8; font-size: clamp(.98rem, 1.05vw, 1.12rem); line-height: 1.55; }
.realm--bianhua .realm-signal p { color: #d8b9c0; border-left-color: rgba(255, 156, 174, .35); }

.realm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 30px; }
.realm-download, .realm-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 8px; font-weight: 750; font-size: 1rem; transition: transform .18s, box-shadow .18s, background .18s, border-color .18s; }
.realm-download svg { width: 19px; height: 19px; }
.realm--zhu .realm-download { color: #1b1004; background: var(--amber); box-shadow: 0 12px 36px rgba(255, 157, 28, .28); }
.realm--bianhua .realm-download { color: #fff; background: linear-gradient(135deg, #ff5a73, #c8102e); box-shadow: 0 12px 36px rgba(230, 30, 66, .35); }
.realm-download:hover, .realm-download:focus-visible { transform: translateY(-2px); }
.realm-download--disabled { cursor: not-allowed; opacity: .55; transform: none !important; }
.realm-secondary { color: var(--text); border: 1px solid rgba(169, 186, 198, .3); background: rgba(255, 255, 255, .03); }
.realm-secondary:hover, .realm-secondary:focus-visible { border-color: var(--accent); color: var(--accent-2); }
.realm .hero-download-note { margin-top: 14px; font-size: .86rem; color: var(--amber); }
.realm--bianhua .hero-download-note { color: var(--higan-gold); }

.realm-updates.home-updates-panel { flex: 1 1 0; min-height: 220px; padding: 16px 18px 14px; border-color: color-mix(in srgb, var(--accent) 26%, rgba(118, 173, 206, .2)); background: rgba(5, 9, 14, .5); backdrop-filter: blur(3px); }
.realm--bianhua .realm-updates.home-updates-panel { background: rgba(16, 5, 9, .52); }
.realm-updates > header { padding-bottom: 10px; }
.realm-updates > header a { color: #8fa8b5; }
.realm-updates a:hover { color: var(--accent-2); }
.realm-tabs { display: inline-flex; gap: 4px; padding: 3px; border-radius: 9px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .06); }
.realm-tabs button { padding: 6px 16px; border: 0; border-radius: 6px; background: transparent; color: #8fa1ab; font: 700 .98rem "Microsoft YaHei", "微软雅黑", sans-serif; cursor: pointer; transition: color .18s, background .18s; }
.realm-tabs button:hover { color: var(--text); }
.realm-tabs button[aria-selected="true"] { color: var(--accent-2); background: color-mix(in srgb, var(--accent) 18%, transparent); box-shadow: inset 0 -2px 0 var(--accent); }
.realm-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.realm-updates .home-updates-list[hidden] { display: none; }
.realm-updates .home-updates-list { scrollbar-color: color-mix(in srgb, var(--accent) 45%, transparent) transparent; }
.realm-updates .home-update-entry { padding: 13px 0 14px; }
.realm-updates .home-update-entry time { color: var(--accent); }
.realm--bianhua .home-update-entry { border-bottom-color: rgba(255, 156, 174, .14); }
.realm-updates .home-update-entry div { font-size: .95rem; line-height: 1.68; }
.realm-updates .home-updates-empty { margin: auto; padding: 40px 0; }

/* 右侧镜像对齐 */
.realm--bianhua .realm-copy { text-align: right; }
.realm--bianhua .realm-kicker, .realm--bianhua .realm-signal, .realm--bianhua .realm-actions { justify-content: flex-end; }
.realm--bianhua .realm-kicker b { order: -1; background: linear-gradient(270deg, var(--accent), transparent); }
.realm--bianhua .realm-kicker span { order: 1; }
.realm--bianhua .realm-kicker { flex-direction: row; }
.realm--bianhua .realm-signal span { order: 2; }
.realm--bianhua .realm-signal p { order: 1; padding: 0 18px 0 0; border-left: 0; border-right: 1px solid rgba(255, 156, 174, .35); }

@media (max-width: 1250px) {
  .split-hero { --seam-top: 56%; --seam-bottom: 44%; }
  .split-hero:has(.realm--zhu:hover, .realm--zhu:focus-within) { --seam-top: 58%; --seam-bottom: 46%; }
  .split-hero:has(.realm--bianhua:hover, .realm--bianhua:focus-within) { --seam-top: 54%; --seam-bottom: 42%; }
  .split-grid { grid-template-columns: minmax(0, 41%) 1fr minmax(0, 41%); padding-inline: 24px; }
  .realm-download, .realm-secondary { min-height: 48px; padding: 0 18px; }
}

@media (max-width: 900px) {
  .split-hero, .split-hero:has(.realm:hover), .split-hero:has(.realm:focus-within) { --seam-top: 47%; --seam-bottom: 53%; }
  .split-layer--zhu { clip-path: polygon(0 0, 100% 0, 100% var(--seam-top), 0 var(--seam-bottom)); }
  .split-layer--bianhua { clip-path: polygon(0 var(--seam-bottom), 100% var(--seam-top), 100% 100%, 0 100%); }
  .split-seam i { clip-path: polygon(0 calc(var(--seam-bottom) - 1px), 100% calc(var(--seam-top) - 1px), 100% calc(var(--seam-top) + 1px), 0 calc(var(--seam-bottom) + 1px)); background: linear-gradient(90deg, transparent, var(--amber) 25%, var(--higan) 75%, transparent); animation: none; }
  .split-hero { height: auto; }
  .split-grid { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; row-gap: 140px; padding: 48px 20px; }
  .realm--zhu, .realm--bianhua { grid-column: 1; }
  .realm-updates.home-updates-panel { flex: none; height: 400px; }
}

@media (max-width: 680px) {
  .split-grid { row-gap: 110px; padding: 40px 16px; }
  .realm-actions { flex-direction: column; align-items: stretch; }
  .realm-signal p { width: 100%; padding: 0 !important; border: 0 !important; }
  .realm-tabs button { padding: 6px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .split-layer, .split-seam, .split-seam i { transition: none; animation: none; }
}