:root {
  --brown: #4b2619;
  --brown-dark: #25120e;
  --cream: #fff8df;
  --paper: #fffdf2;
  --orange: #ff861b;
  --orange-dark: #d84b0b;
  --pink: #ef3b7d;
  --blue: #1596d2;
  --blue-dark: #06639a;
  --cyan: #78def8;
  --green: #59b82f;
  --gold: #ffd45d;
  --ink: #4d382a;
  --muted: #806a59;
  --shell: min(1120px, calc(100% - 32px));
  --portal-assets: "/website/warrior/static.koramgame.com/web/sf/index/images";
}

* { box-sizing: border-box; }
html { overflow-x: hidden; scroll-behavior: smooth; background: #7fd8f5; }
html.site-intro-active,
html.site-intro-active body { overflow: hidden; }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--ink);
  font: 14px/1.7 "Microsoft YaHei", "PingFang SC", sans-serif;
  background:
    url("/website/n.7k7kimg.cn/uploads/xjhx/bgg_header.jpg") center 34px / 1660px auto no-repeat,
    linear-gradient(180deg, #79d7f8 0, #dff8ff 850px, #fff9df 1450px, #bce8f6 100%);
}
button, a { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
[hidden], .hidden { display: none !important; }
.section-shell { width: var(--shell); margin-right: auto; margin-left: auto; }
.sky-noise, .aurora { display: none; }

.site-intro {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #020203;
  opacity: 1;
  transition: opacity .45s ease;
}
.site-intro.is-closing { opacity: 0; pointer-events: none; }
.site-intro-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #020203;
}
.site-intro-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at center, transparent 52%, rgba(0,0,0,.48) 100%);
}
.site-intro-skip {
  position: absolute;
  right: clamp(20px, 4vw, 70px);
  bottom: clamp(34px, 7vh, 76px);
  min-width: 142px;
  padding: 11px 24px 12px;
  border: 1px solid #ffde79;
  border-radius: 999px;
  color: #fff5c7;
  font-weight: 800;
  letter-spacing: .12em;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(112,62,26,.95), rgba(42,21,12,.96));
  box-shadow: 0 0 0 3px rgba(89,43,16,.7), 0 8px 30px rgba(0,0,0,.55), inset 0 1px rgba(255,255,255,.22);
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
.site-intro-skip span { margin-left: 8px; font-size: 21px; line-height: 0; }
.site-intro-skip:hover,
.site-intro-skip:focus-visible {
  outline: none;
  transform: translateY(-2px) scale(1.03);
  filter: brightness(1.18);
  box-shadow: 0 0 0 3px rgba(111,55,19,.82), 0 10px 34px rgba(0,0,0,.62), 0 0 24px rgba(255,205,72,.25);
}
.site-intro-hint {
  position: absolute;
  bottom: clamp(8px, 2.5vh, 25px);
  left: 50%;
  margin: 0;
  color: rgba(255,255,255,.64);
  font-size: 12px;
  letter-spacing: .08em;
  transform: translateX(-50%);
  text-shadow: 0 2px 4px #000;
}
@media (max-width: 640px) {
  .site-intro-skip { right: 50%; bottom: 56px; transform: translateX(50%); }
  .site-intro-skip:hover,
  .site-intro-skip:focus-visible { transform: translateX(50%) translateY(-2px) scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  .site-intro, .site-intro-skip { transition: none; }
}

#homeView {
  position: relative;
  background:
    linear-gradient(180deg, rgba(227,249,255,0) 0, rgba(255,249,218,.82) 760px, rgba(244,251,225,.72) 1320px, rgba(218,247,255,.78) 2050px),
    url("./assets/world-map-continent.jpg") center 690px / min(1120px, 92vw) auto no-repeat;
  background-blend-mode: normal, soft-light;
}

.top-notice {
  position: relative;
  z-index: 70;
  height: 34px;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 18px minmax(0,1fr) auto;
  align-items: center;
  gap: 9px;
  color: #fff5b7;
  border-bottom: 1px solid #140704;
  background: linear-gradient(180deg, #583224, #2c1712);
  box-shadow: 0 2px 8px rgba(55, 20, 5, .35);
  font-size: 12px;
  text-shadow: 0 1px #38120a;
}
.top-notice-star { position:relative; z-index:2; color: #ffdb45; text-align:center; }
.top-notice-marquee { position:relative; min-width:0; height:100%; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent); mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent); }
.top-notice-track { width:max-content; height:100%; display:flex; align-items:center; will-change:transform; animation:top-notice-marquee 34s linear infinite; }
.top-notice-group { min-width:max(900px,100vw); height:100%; padding:0 48px 0 20px; display:flex; flex:none; align-items:center; justify-content:space-around; gap:30px; white-space:nowrap; }
.ticker-item { display:inline-flex; align-items:center; gap:8px; color:#fff0bd; }
.ticker-item b { padding:1px 7px; color:#35160d; border:1px solid #ffe492; border-radius:9px; background:linear-gradient(#ffe982,#f0a923); box-shadow:inset 0 1px #fff7c1,0 1px 3px rgba(20,7,3,.36); font-size:9px; text-shadow:none; }
.ticker-campaign b { color:#fff; border-color:#ffb36e; background:linear-gradient(#e86c35,#a82c20); text-shadow:0 1px #6b190f; }
.ticker-update b { color:#fff; border-color:#80ddfa; background:linear-gradient(#31bade,#0876ad); text-shadow:0 1px #07557b; }
.ticker-separator { color:#ffd34d; text-shadow:0 0 7px rgba(255,211,77,.75); }
.top-notice button { position:relative; z-index:2; padding: 2px 10px; color: #3f1d10; border: 1px solid #fff1a4; border-radius: 12px; background: linear-gradient(#fff599, #ffb72c); cursor: pointer; font-size: 11px; font-weight: 700; white-space:nowrap; box-shadow:0 1px 4px rgba(36,12,5,.34); }
.top-notice button:hover { color:#260c06; border-color:#fff9ce; background:linear-gradient(#fffbd0,#ffd34f); box-shadow:0 0 10px rgba(255,208,70,.45); }
@keyframes top-notice-marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }

.site-header {
  position: relative;
  z-index: 60;
  height: 112px;
  background: url("/website/warrior/static.koramgame.com/web/sf/index/images/bgt.jpg") center top / max(100vw, 1706px) auto no-repeat;
}
.site-header::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: url("./assets/navbar-fantasy-ai-v3.webp") center / min(1400px, 112vw) auto no-repeat;
  filter: drop-shadow(0 5px 5px rgba(44, 20, 10, .28));
  pointer-events: none;
}
.header-frame { position: relative; z-index: 1; width: 100%; height: 100%; }
.site-navigation {
  position: relative;
  width: min(1320px, calc(100% - 12px));
  height: 108px;
  margin: 0 auto;
  padding: 0 46px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px minmax(0, 1fr);
  align-items: center;
  background: none;
  filter: none;
}
.site-navigation::before { display: none; }
.nav-wing { position: relative; z-index: 2; height: 42px; display: flex; align-items: stretch; }
.nav-wing-left { justify-content: flex-end; }
.nav-wing-right { justify-content: flex-start; }
.nav-wing > a, .nav-wing > button, .nav-menu > summary {
  min-width: 0;
  height: 42px;
  padding: 0 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff7c8;
  border: 0;
  border-right: 1px solid rgba(255, 231, 157, .22);
  background: transparent;
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  font-weight: 800;
  text-shadow: 0 2px #2a0d07, 0 0 7px rgba(255, 185, 66, .35);
  transition: color .15s ease, background .15s ease, transform .15s ease;
}
.nav-wing > a, .nav-wing > button, .nav-menu { flex: 1 1 0; }
.nav-wing > a:hover, .nav-wing > button:hover, .nav-menu > summary:hover, .nav-menu[open] > summary { color: #fff; background: radial-gradient(ellipse at center, rgba(255, 186, 48, .62), rgba(213, 59, 32, .17) 68%, transparent 72%); transform: translateY(-1px); }
.nav-wing > .nav-forum-link {
  position: relative;
  color: #fff7c8;
  border-right: 1px solid rgba(255, 224, 133, .22);
  border-left: 1px solid rgba(255, 224, 133, .22);
  background: radial-gradient(ellipse at center, rgba(255, 190, 66, .13), transparent 72%);
  box-shadow: inset 0 -2px rgba(246, 186, 58, .58);
}
.nav-wing > .nav-forum-link::before {
  content: "◆";
  margin-right: 7px;
  color: #ffd96c;
  font-size: 7px;
  line-height: 1;
  text-shadow: 0 0 6px rgba(255, 207, 73, .72);
}
.nav-wing > .nav-forum-link:hover,
.nav-wing > .nav-forum-link:focus-visible {
  color: #fff;
  border-color: rgba(255, 232, 159, .42);
  outline: none;
  background: radial-gradient(ellipse at center, rgba(255, 186, 48, .62), rgba(213, 59, 32, .17) 68%, transparent 72%);
  box-shadow: inset 0 -2px #ffe078, 0 0 10px rgba(255, 186, 48, .16);
  transform: translateY(-1px);
}
.nav-wing > .nav-forum-link:hover::before,
.nav-wing > .nav-forum-link:focus-visible::before {
  color: #fff3ad;
  text-shadow: 0 0 8px #ffc64c;
}
.nav-menu { position: relative; height: 42px; }
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-dropdown {
  position: absolute;
  z-index: 20;
  top: 47px;
  left: 50%;
  width: 210px;
  padding: 10px;
  display: grid;
  border: 3px solid #6f3a1d;
  border-radius: 8px;
  background: linear-gradient(180deg, #fff8d9, #f4d38b);
  box-shadow: 0 9px 18px rgba(64, 26, 10, .35), inset 0 0 0 1px #fff7c5;
  transform: translateX(-50%);
}
.nav-menu-right .nav-dropdown { right: 0; left: auto; transform: none; }
.nav-dropdown::before { content: ""; position: absolute; top: -8px; left: 50%; width: 12px; height: 12px; border-top: 3px solid #6f3a1d; border-left: 3px solid #6f3a1d; background: #fff8d9; transform: translateX(-50%) rotate(45deg); }
.nav-menu-right .nav-dropdown::before { right: 24px; left: auto; transform: rotate(45deg); }
.nav-wing-left .nav-menu .nav-dropdown { width: 390px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nav-dropdown-title { grid-column: 1 / -1; padding: 3px 8px 7px; color: #a1491d; font-size: 10px; font-weight: 800; letter-spacing: 1px; }
.nav-dropdown-subtitle { margin-top: 5px; padding-top: 9px; border-top: 1px solid rgba(126, 72, 32, .25); }
.nav-dropdown-compact { width: 190px; }
.nav-dropdown button, .nav-dropdown > a { position: relative; z-index: 1; padding: 7px 9px; color: #563421; border: 0; border-bottom: 1px dashed rgba(123, 70, 34, .28); border-radius: 5px; background: transparent; cursor: pointer; text-align: left; text-decoration: none; font: inherit; }
.nav-dropdown button:hover, .nav-dropdown > a:hover { color: #fff; background: linear-gradient(90deg, #ff9226, #ed4d20); }
.brand {
  position: relative;
  z-index: 4;
  height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 3px 1px rgba(62, 22, 11, .65));
}
.brand > * { visibility: visible; }
.brand-crown { display: none; }
.brand strong {
  color: #fff4a8;
  font: 900 29px/1 "STKaiti", "KaiTi", "Microsoft YaHei", serif;
  letter-spacing: 2px;
  text-shadow: -2px -2px #a9366b, 2px -2px #a9366b, -2px 2px #a9366b, 2px 2px #a9366b, 0 4px #532010, 0 0 9px rgba(255, 223, 88, .7);
}
.brand small { margin-top: 4px; color: #fff; font-size: 7px; font-weight: 800; letter-spacing: 3px; text-shadow: 0 2px #522013, 0 0 5px #2a749a; }
.mobile-menu-button { display: none; }

@media (min-width: 901px) {
  .nav-wing, .brand { transform: translateY(7px); }
}

.hero-section {
  position: relative;
  min-height: 600px;
  margin-top: -10px;
  overflow: hidden;
  border-bottom: 7px solid #61bd2d;
  background:
    linear-gradient(90deg, rgba(255,255,255,.1), transparent 48%, rgba(255,255,255,.06)),
    url("/website/warrior/static.koramgame.com/web/sf/index/images/bgt.jpg") center -102px / max(100vw, 1706px) auto no-repeat;
  box-shadow: inset 0 -18px 35px rgba(20,112,150,.2), 0 8px 15px rgba(56, 114, 28, .25);
}
.hero-section::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 92px; background: linear-gradient(transparent, rgba(113,218,239,.52)); pointer-events: none; }
.hero-stars { display: none; }
.hero-world-map {
  position: absolute;
  z-index: 1;
  top: 8px;
  left: 50%;
  width: min(1180px, 94vw);
  height: 575px;
  opacity: .58;
  border-radius: 46% 54% 48% 52%;
  background: url("./assets/world-map-continent.jpg") center bottom / auto 112% no-repeat;
  filter: sepia(.32) saturate(1.08) brightness(1.02) contrast(1.1);
  mix-blend-mode: normal;
  -webkit-mask-image: radial-gradient(ellipse 82% 80% at center, #000 50%, rgba(0,0,0,.9) 72%, transparent 100%);
  mask-image: radial-gradient(ellipse 82% 80% at center, #000 50%, rgba(0,0,0,.9) 72%, transparent 100%);
  transform: translateX(-50%) rotate(-1deg);
  pointer-events: none;
}
.hero-world-map::before {
  content: "";
  position: absolute;
  inset: 5% 3%;
  border: 2px dashed rgba(112,65,31,.25);
  border-radius: 49%;
  box-shadow: 0 0 55px rgba(255,237,149,.5) inset;
}
.hero-world-map span {
  position: absolute;
  z-index: 2;
  right: 11%;
  bottom: 7%;
  padding: 5px 14px;
  color: rgba(83,45,24,.76);
  border: 1px solid rgba(128,78,35,.34);
  border-radius: 15px;
  background: rgba(255,241,181,.55);
  font: 800 10px/1.2 "STKaiti","KaiTi","Microsoft YaHei",serif;
  letter-spacing: 2px;
}
.hero-inner { position: relative; z-index: 2; width: var(--shell); min-height: 620px; margin: 0 auto; display: grid; grid-template-columns: 250px minmax(300px,.76fr) minmax(400px,1fr); align-items: center; gap: 22px; }
.hero-login-panel {
  position: relative;
  padding: 66px 35px 57px;
  border: 0;
  border-radius: 0;
  background:
    url("./assets/panel-frame-fantasy-v1.webp") center / 100% 100% no-repeat,
    radial-gradient(circle at 50% 18%,rgba(135,76,39,.96),rgba(47,23,17,.98) 68%) center / calc(100% - 58px) calc(100% - 104px) no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 16px 17px rgba(31,44,48,.34));
}
.hero-login-panel::before, .hero-login-panel::after { display: none; }
.hero-login-heading { margin: -3px 0 12px; padding-bottom: 11px; border-bottom: 1px solid rgba(255,224,151,.25); text-align: center; text-shadow: 0 2px #2b130d,0 0 8px rgba(255,207,80,.28); }
.hero-login-heading span { display: block; color: #ffd15c; font-size: 9px; font-weight: 800; letter-spacing: 2px; }
.hero-login-heading strong { display: block; color: #fff1ae; font: 900 24px/1.25 "STKaiti","KaiTi","Microsoft YaHei",serif; }
.hero-login-heading small { display: block; color: #ead2ad; font-size: 9px; }
.hero-login-panel .account-login-card { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.hero-login-panel .account-login-card .tabs { margin-bottom: 12px; }
.hero-login-panel .account-login-card .tabs button { min-height:36px; padding: 8px 12px; color: #ead5ae; border: 1px solid #9e6a3b; border-radius:4px 4px 10px 10px; background:radial-gradient(circle at 10px 50%,#c88d3e 0 2px,transparent 3px),linear-gradient(#42231b,#24120f); box-shadow:inset 0 0 0 1px rgba(255,220,139,.08),0 3px 0 #160a08; cursor:pointer; font-weight:800; text-shadow:0 1px #180a08; transition:.15s ease; }
.hero-login-panel .account-login-card .tabs button:hover { color:#fff6c9; border-color:#e6b75b; background:radial-gradient(circle at 10px 50%,#ffe379 0 2px,transparent 3px),linear-gradient(#6f3d23,#3c1b14); box-shadow:inset 0 0 0 1px rgba(255,233,167,.14),0 3px 0 #21100b,0 0 9px rgba(255,183,55,.25); transform:translateY(-1px); }
.hero-login-panel .account-login-card .tabs button.active { color: #fff9dc; border-color: #ffe48a; background:radial-gradient(circle at 10px 50%,#fffbd0 0 2px,#ffc94c 3px 5px,transparent 6px),linear-gradient(#d2702a,#8a321b); box-shadow:inset 0 0 0 2px rgba(90,31,13,.35),0 3px 0 #541b10,0 0 11px rgba(255,161,43,.34); text-shadow:0 1px #68210e; }
.hero-login-panel .account-login-card .row { grid-template-columns: 42px 1fr; gap: 7px; margin: 8px 0; color: #fff0c4; font-size: 11px; }
.hero-login-panel .account-login-card input { height: 36px; padding: 6px 8px; border-color: #ddb46f; border-radius: 4px; background: #f5dfb5; }
.hero-login-panel .account-login-card .btn-primary,
.hero-login-panel .account-login-card .btn-secondary {
  position: relative;
  width: 100%;
  min-height: 46px;
  margin: 0;
  padding: 10px 30px;
  overflow: hidden;
  color: #fff9d9;
  border: 2px solid #e8bc58;
  border-radius: 5px 5px 12px 12px;
  background:
    radial-gradient(circle at 14px 50%,#fffbd7 0 2px,#ffcf4d 3px 5px,transparent 6px),
    radial-gradient(circle at calc(100% - 14px) 50%,#fffbd7 0 2px,#ffcf4d 3px 5px,transparent 6px),
    linear-gradient(180deg,#bd6428,#6c2b1c);
  box-shadow: inset 0 0 0 2px rgba(55,20,13,.48),inset 0 9px 12px rgba(255,255,255,.12),0 4px 0 #35130e,0 7px 12px rgba(23,12,9,.3);
  cursor: pointer;
  font-weight: 900;
  letter-spacing: .5px;
  line-height: 1.2;
  text-shadow: 0 2px #3b160e;
  transition: transform .16s ease,filter .16s ease,box-shadow .16s ease,background .16s ease,border-color .16s ease;
}
.hero-login-panel .account-login-card .user-actions { margin: 0 0 9px; display: grid; gap: 8px; }
.hero-login-panel .account-login-card #manageAccountButton {
  border-color: #85dff6;
  background:
    radial-gradient(circle at 14px 50%,#eaffff 0 2px,#56dcff 3px 5px,transparent 6px),
    radial-gradient(circle at calc(100% - 14px) 50%,#eaffff 0 2px,#56dcff 3px 5px,transparent 6px),
    linear-gradient(180deg,#178eb9,#084b77);
  box-shadow: inset 0 0 0 2px rgba(4,40,63,.55),inset 0 9px 13px rgba(160,244,255,.17),0 4px 0 #062d49,0 7px 12px rgba(6,36,54,.32);
  text-shadow: 0 2px #063a59;
}
.hero-login-panel .account-login-card #manageAccountButton:hover {
  border-color: #d1f8ff;
  background:
    radial-gradient(circle at 14px 50%,#fff 0 2px,#8af0ff 3px 6px,transparent 7px),
    radial-gradient(circle at calc(100% - 14px) 50%,#fff 0 2px,#8af0ff 3px 6px,transparent 7px),
    linear-gradient(180deg,#2fc3df,#0870a8);
  box-shadow: inset 0 0 0 2px rgba(5,61,91,.48),inset 0 9px 13px rgba(210,251,255,.25),0 4px 0 #064466,0 0 15px rgba(72,220,255,.58);
}
.hero-login-panel .account-login-card #logoutButton {
  margin: 0 0 9px;
  border-color: #e8a766;
  background:
    radial-gradient(circle at 14px 50%,#fff3d5 0 2px,#ff9e55 3px 5px,transparent 6px),
    radial-gradient(circle at calc(100% - 14px) 50%,#fff3d5 0 2px,#ff9e55 3px 5px,transparent 6px),
    linear-gradient(180deg,#a94835,#6b201d);
  box-shadow: inset 0 0 0 2px rgba(61,15,14,.55),inset 0 9px 13px rgba(255,196,144,.13),0 4px 0 #3b1110,0 7px 12px rgba(40,12,10,.3);
  text-shadow: 0 2px #481411;
}
.hero-login-panel .account-login-card #logoutButton:hover {
  border-color: #ffd498;
  background:
    radial-gradient(circle at 14px 50%,#fff8df 0 2px,#ffc168 3px 6px,transparent 7px),
    radial-gradient(circle at calc(100% - 14px) 50%,#fff8df 0 2px,#ffc168 3px 6px,transparent 7px),
    linear-gradient(180deg,#d76545,#8e2921);
  box-shadow: inset 0 0 0 2px rgba(77,19,14,.48),inset 0 9px 13px rgba(255,225,177,.18),0 4px 0 #531713,0 0 14px rgba(255,122,65,.48);
}
.hero-login-panel .account-login-card #playButton,
.hero-login-panel .account-login-card #doLogin,
.hero-login-panel .account-login-card #doRegister {
  border-color: #ffe08a;
  background:
    radial-gradient(circle at 14px 50%,#ffffdf 0 2px,#d8ff67 3px 5px,transparent 6px),
    radial-gradient(circle at calc(100% - 14px) 50%,#ffffdf 0 2px,#d8ff67 3px 5px,transparent 6px),
    linear-gradient(180deg,#6ab63d,#276b2d);
  box-shadow: inset 0 0 0 2px rgba(28,67,24,.58),inset 0 9px 13px rgba(225,255,156,.18),0 4px 0 #173e1d,0 7px 12px rgba(15,42,20,.32);
  text-shadow: 0 2px #1b4b22;
}
.hero-login-panel .account-login-card #playButton { margin-top: 8px; }
.account-login-card .login-download-button {
  width: 100%;
  min-height: 38px;
  margin-top: 10px;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff4d7;
  border: 2px solid #ef9a63;
  border-radius: 5px 5px 11px 11px;
  background: linear-gradient(180deg, #c94b35, #8a211d);
  box-shadow: inset 0 0 0 2px rgba(84, 18, 15, .42), inset 0 7px 10px rgba(255, 178, 122, .12), 0 3px 0 #4b1513;
  font-size: 11px;
  font-weight: 900;
  text-decoration: none;
  text-shadow: 0 2px #5a1714;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.account-login-card .login-download-button:hover,
.account-login-card .login-download-button:focus-visible {
  color: #fff;
  border-color: #ffc48c;
  outline: none;
  background: linear-gradient(180deg, #e05d3e, #a52b22);
  box-shadow: inset 0 0 0 2px rgba(91, 20, 16, .36), inset 0 7px 10px rgba(255, 202, 154, .16), 0 3px 0 #5b1915, 0 0 11px rgba(224, 77, 51, .38);
  transform: translateY(-1px);
}
.account-login-card .login-download-button:active {
  transform: translateY(2px);
  box-shadow: inset 0 4px 8px rgba(60, 10, 10, .25), 0 1px 0 #4b1513;
}
.hero-login-panel .account-login-card .login-download-button {
  min-height: 34px;
  margin-top: 9px;
  padding: 7px 12px;
  font-size: 10px;
}
.hero-login-panel .account-login-card #playButton:hover,
.hero-login-panel .account-login-card #doLogin:hover,
.hero-login-panel .account-login-card #doRegister:hover {
  border-color: #fff2ac;
  background:
    radial-gradient(circle at 14px 50%,#fff 0 2px,#edff83 3px 6px,transparent 7px),
    radial-gradient(circle at calc(100% - 14px) 50%,#fff 0 2px,#edff83 3px 6px,transparent 7px),
    linear-gradient(180deg,#8ed14c,#358739);
  box-shadow: inset 0 0 0 2px rgba(38,89,29,.5),inset 0 9px 13px rgba(240,255,188,.25),0 4px 0 #205225,0 0 16px rgba(151,230,73,.52);
}
.hero-login-panel .account-login-card .btn-primary:hover,
.hero-login-panel .account-login-card .btn-secondary:hover { transform: translateY(-2px); filter: saturate(1.08) brightness(1.04); }
.hero-login-panel .account-login-card .btn-primary:active,
.hero-login-panel .account-login-card .btn-secondary:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px rgba(40,18,12,.48),inset 0 5px 12px rgba(0,0,0,.18),0 1px 0 #2b120d; }
.hero-login-panel .account-login-card .btn-primary:focus-visible,
.hero-login-panel .account-login-card .btn-secondary:focus-visible { outline: 3px solid #fff3a5; outline-offset: 3px; }
.hero-login-panel .account-login-card button:disabled,
.hero-actions .button:disabled { cursor:wait; filter:grayscale(.35) brightness(.75); opacity:.72; transform:none; box-shadow:inset 0 3px 9px rgba(0,0,0,.25),0 2px 0 rgba(44,18,11,.7); }
.hero-login-panel .account-welcome { padding: 9px; }
.hero-login-panel .auth-message { margin-top: 8px; color: #f6ddb2; font-size: 9px; }
.hero-login-links { margin-top: 12px; padding-top: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; border-top: 1px solid rgba(255,224,151,.2); }
.hero-login-links button { position:relative; min-height:29px; padding: 6px 12px; color: #ffe9ac; border: 1px solid #b88345; border-radius: 4px 4px 11px 11px; background: radial-gradient(circle at 9px 50%,#f7c64f 0 2px,transparent 3px),linear-gradient(#44231a,#24120f); box-shadow:inset 0 0 0 1px rgba(255,220,129,.1),0 3px 0 #180b09; cursor: pointer; font-size: 9px; font-weight:800; text-shadow:0 1px #1c0c09; transition:.15s ease; }
.hero-login-links button:hover { color: #fff9cf; border-color: #ffe080; background: radial-gradient(circle at 9px 50%,#fff3a2 0 2px,transparent 3px),linear-gradient(#80502a,#4e2519); box-shadow:inset 0 0 0 1px rgba(255,240,175,.2),0 3px 0 #25100b,0 0 10px rgba(255,190,70,.36); transform:translateY(-1px); }
.hero-login-links button:active { transform:translateY(2px); box-shadow:inset 0 2px 6px rgba(0,0,0,.3),0 1px 0 #180b09; }
.account-login-host { width: 100%; }
.hero-copy {
  position: relative;
  margin-top: 8px;
  padding: 70px 47px 58px;
  border: 0;
  border-radius: 0;
  background:
    url("./assets/panel-frame-fantasy-v1.webp") center / 100% 100% no-repeat,
    radial-gradient(circle at 50% 15%,rgba(255,255,235,.98),rgba(255,222,143,.95) 74%) center / calc(100% - 64px) calc(100% - 110px) no-repeat;
  box-shadow: none;
  filter: drop-shadow(0 17px 18px rgba(38,86,108,.32));
}
.hero-copy::before { display: none; }
.eyebrow { display: flex; align-items: center; gap: 9px; color: #a24b1b; font-size: 11px; font-weight: 800; letter-spacing: 2px; }
.eyebrow i { width: 28px; height: 2px; background: #f19828; }
.hero-copy h1 { margin: 9px 0 10px; color: #ef5422; font: 900 39px/1.06 Georgia,"Microsoft YaHei",serif; letter-spacing: -2px; text-shadow: 2px 2px #fff7b1, 4px 4px #7b371e; }
.hero-copy h1 em { color: #e53975; font-style: normal; }
.hero-copy > p { margin: 0; color: #604332; font-size: 14px; line-height: 1.85; }
.hero-actions { margin-top: 20px; display: flex; flex-direction: column; gap: 9px; }
.hero-actions .button { width: 100%; }
.button { position:relative; min-width: 150px; min-height:55px; padding: 13px 42px; display:flex; align-items:center; justify-content:center; border-radius: 5px 5px 14px 14px; cursor: pointer; font-weight: 900; letter-spacing:1px; text-align:center; text-decoration:none; transition:transform .16s ease,filter .16s ease,box-shadow .16s ease,background .16s ease,border-color .16s ease; }
.button-primary { color: #fff9dc; border: 2px solid #ffe08a; background: radial-gradient(circle at 17px 50%,#fffbd9 0 2px,#ffc944 3px 6px,transparent 7px),radial-gradient(circle at calc(100% - 17px) 50%,#fffbd9 0 2px,#ffc944 3px 6px,transparent 7px),linear-gradient(180deg,#f69325 0,#d64a18 58%,#a72d14 100%); box-shadow:inset 0 0 0 2px rgba(116,37,11,.42),inset 0 10px 15px rgba(255,239,163,.18),0 5px 0 #7b2813,0 9px 15px rgba(103,43,20,.25); text-shadow: 0 2px #7b2507; }
.button-forum { min-height:65px; padding-top:9px; padding-bottom:9px; flex-direction:column; color:#fff8c8; border:2px solid #ffe477; background:radial-gradient(circle at 17px 50%,#fff 0 2px,#ffe16b 3px 6px,transparent 7px),radial-gradient(circle at calc(100% - 17px) 50%,#fff 0 2px,#ffe16b 3px 6px,transparent 7px),linear-gradient(180deg,#c641a2 0,#842477 56%,#571752 100%); box-shadow:inset 0 0 0 2px rgba(77,12,71,.52),inset 0 10px 16px rgba(255,211,245,.18),0 5px 0 #43103f,0 9px 16px rgba(87,22,79,.3); text-shadow:0 2px #4c1046; }
.button-forum span { font-size:15px; line-height:1.15; }
.button-forum small { margin-top:4px; color:#ffeab4; font-size:8px; font-weight:700; letter-spacing:1px; }
.button-forum:hover,.button-forum:focus-visible { color:#fff; border-color:#fff2a3; outline:none; background:radial-gradient(circle at 17px 50%,#fff 0 2px,#fff083 3px 7px,transparent 8px),radial-gradient(circle at calc(100% - 17px) 50%,#fff 0 2px,#fff083 3px 7px,transparent 8px),linear-gradient(180deg,#ed64c3 0,#ad3197 56%,#731e6b 100%); box-shadow:inset 0 0 0 2px rgba(91,18,82,.4),inset 0 10px 16px rgba(255,235,251,.25),0 5px 0 #55144f,0 0 20px rgba(232,73,191,.54); transform:translateY(-2px); }
.button-ghost { color: #effcff; border: 2px solid #aeeeff; background: radial-gradient(circle at 17px 50%,#fff 0 2px,#67e6ff 3px 6px,transparent 7px),radial-gradient(circle at calc(100% - 17px) 50%,#fff 0 2px,#67e6ff 3px 6px,transparent 7px),linear-gradient(180deg,#27b5d9 0,#0877b2 58%,#07578d 100%); box-shadow:inset 0 0 0 2px rgba(3,70,108,.46),inset 0 10px 15px rgba(180,247,255,.2),0 5px 0 #064d78,0 9px 15px rgba(19,85,118,.24); text-shadow: 0 2px #045b85; }
.button-primary:hover { border-color:#fff2ad; background:radial-gradient(circle at 17px 50%,#fff 0 2px,#ffe16f 3px 7px,transparent 8px),radial-gradient(circle at calc(100% - 17px) 50%,#fff 0 2px,#ffe16f 3px 7px,transparent 8px),linear-gradient(180deg,#ffb437 0,#ed651d 58%,#c33a17 100%); box-shadow:inset 0 0 0 2px rgba(133,49,14,.38),inset 0 10px 15px rgba(255,246,187,.25),0 5px 0 #8d2f15,0 0 17px rgba(255,151,48,.5); }
.button-ghost:hover { border-color:#e0fbff; background:radial-gradient(circle at 17px 50%,#fff 0 2px,#91f3ff 3px 7px,transparent 8px),radial-gradient(circle at calc(100% - 17px) 50%,#fff 0 2px,#91f3ff 3px 7px,transparent 8px),linear-gradient(180deg,#42d2e8 0,#0c95c7 58%,#076ca4 100%); box-shadow:inset 0 0 0 2px rgba(5,85,123,.4),inset 0 10px 15px rgba(215,253,255,.28),0 5px 0 #075a83,0 0 17px rgba(70,220,255,.52); }
.button:hover { filter:saturate(1.06) brightness(1.03); transform:translateY(-2px); }
.button:active { filter:saturate(1.02); transform:translateY(2px); box-shadow:inset 0 4px 10px rgba(0,0,0,.25),0 1px 0 #4b1f13; }
.button:focus-visible { outline:3px solid #8142c4; outline-offset:3px; }
.hero-meta { margin-top: 20px; padding-top: 14px; display: flex; gap: 13px; border-top: 1px dashed rgba(126,75,36,.35); }
.hero-meta span { color: #8a674e; font-size: 10px; }
.hero-meta b { display: block; color: #bb401a; font: 900 18px/1.15 Georgia,serif; }
.hero-art { position: relative; min-height: 520px; }
.hero-art-glow { position: absolute; inset: 38px -8px 12px; border-radius: 50%; background: radial-gradient(circle,rgba(255,253,211,.88),rgba(111,220,246,.38) 52%,transparent 72%); filter: blur(18px); }
.hero-party { position: absolute; inset: 15px -9px 5px 2px; perspective: 900px; }
.hero-party::before { content: ""; position: absolute; top: 124px; left: 50%; width: 330px; height: 330px; border: 2px solid rgba(255,235,128,.72); border-radius: 50%; background: repeating-conic-gradient(from 7deg,rgba(255,255,255,.25) 0 4deg,transparent 4deg 27deg),radial-gradient(circle,rgba(255,246,166,.24),transparent 66%); box-shadow: 0 0 0 8px rgba(42,163,211,.16),0 0 42px rgba(255,244,146,.55); transform: translateX(-50%); }
.hero-party-kicker {
  position: absolute;
  z-index: 8;
  top: -5px;
  left: 50%;
  min-width: 215px;
  padding: 10px 30px 11px;
  color: #fff7b4;
  border: 3px solid #f9d86d;
  border-radius: 7px 7px 16px 16px;
  background:
    radial-gradient(circle at 50% 0,rgba(255,233,119,.25),transparent 38%),
    linear-gradient(180deg,#783925,#3a1716 76%);
  box-shadow: inset 0 0 0 2px #a76331,0 4px 0 #29100f,0 10px 18px rgba(44,56,58,.28);
  font: 900 12px/1.1 "Microsoft YaHei",sans-serif;
  letter-spacing: 2px;
  text-align: center;
  text-shadow: 0 1px #35120c;
  transform: translateX(-50%);
  white-space: nowrap;
}
.hero-party-kicker::before,
.hero-party-kicker::after {
  content: "";
  position: absolute;
  top: 7px;
  width: 31px;
  height: 24px;
  background: linear-gradient(145deg,#fff1a4 0 13%,#c7772d 14% 38%,#5f291b 39% 63%,#e5a845 64% 79%,transparent 80%);
  filter: drop-shadow(0 2px 1px rgba(50,20,11,.65));
}
.hero-party-kicker::before { right: 100%; clip-path: polygon(100% 0,100% 100%,0 70%,25% 50%,0 24%); }
.hero-party-kicker::after { left: 100%; clip-path: polygon(0 0,0 100%,100% 70%,75% 50%,100% 24%); transform: scaleX(-1); }
.party-banner { position: absolute; z-index: 1; top: 32px; right: 4px; left: 4px; height: 145px; overflow: hidden; border: 6px solid #fff4af; border-radius: 28px 8px 28px 8px; background: #69d6f0; box-shadow: 0 0 0 3px #168ebc,0 14px 25px rgba(28,67,85,.32); transform-origin: center center; transition: transform .28s cubic-bezier(.2,.8,.2,1),filter .28s ease,box-shadow .28s ease; }
.party-banner:hover { z-index: 7; filter: brightness(1.07) saturate(1.1); box-shadow: 0 0 0 3px #27b8e4,0 20px 34px rgba(24,62,83,.44),0 0 25px rgba(111,231,255,.42); transform: translateY(-8px) scale(1.065); }
.party-banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(255,247,184,.14),transparent 38%,rgba(89,213,241,.1)); box-shadow: inset 0 0 28px rgba(28,76,112,.2); }
.party-banner img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 43%; transform: scale(1.03); }
.party-banner span { position: absolute; z-index: 2; left: 18px; bottom: 10px; padding: 5px 11px; color: #fff8b5; border: 1px solid rgba(255,236,135,.78); border-radius: 12px; background: rgba(53,30,25,.76); font-size: 9px; font-weight: 800; letter-spacing: 1px; text-shadow: 0 1px #2c1711; }
.class-card { position: absolute; z-index: 2; width: 250px; height: 155px; margin: 0; overflow: hidden; border: 6px solid #fff5bd; border-radius: 15px 5px 15px 5px; background: #989898; box-shadow: 0 0 0 3px #b85d26,0 12px 21px rgba(28,67,85,.35); transform-origin: center center; transition: transform .28s cubic-bezier(.2,.8,.2,1),filter .28s ease,box-shadow .28s ease; }
.class-card:hover { z-index: 9; filter: brightness(1.08) saturate(1.12); box-shadow: 0 0 0 3px #f1a148,0 22px 34px rgba(25,58,76,.48),0 0 22px rgba(255,225,117,.34); }
.class-card::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 25px rgba(36,19,25,.2); pointer-events: none; }
.class-card img { width: 100%; height: 100%; display: block; object-fit: cover; }
.class-card-warrior img { object-position: 52% 48%; }
.class-card-ranger img { object-position: 50% 52%; }
.class-card-mage img { object-position: 50% 45%; }
.class-card figcaption { position: absolute; z-index: 2; right: 0; bottom: 0; left: 0; padding: 23px 12px 8px; display: flex; align-items: baseline; gap: 8px; color: #fff; background: linear-gradient(transparent,rgba(60,25,16,.9)); text-shadow: 0 1px 2px #32120c; }
.class-card figcaption b { color: #fff4a4; font-size: 16px; }
.class-card figcaption small { font-size: 9px; }
.class-card-warrior { top: 184px; left: -2px; transform: rotate(-5deg); }
.class-card-warrior:hover { transform: rotate(-2deg) translateY(-9px) scale(1.085); }
.class-card-ranger { z-index: 3; top: 196px; right: -2px; border-color: #c8f6ff; box-shadow: 0 0 0 3px #1988bd,0 12px 21px rgba(28,67,85,.35); transform: rotate(5deg); }
.class-card-ranger:hover { transform: rotate(2deg) translateY(-9px) scale(1.085); }
.class-card-mage { z-index: 4; right: 78px; bottom: 30px; border-color: #ffe0f2; box-shadow: 0 0 0 3px #c64e89,0 12px 21px rgba(28,67,85,.35); transform: rotate(-1deg); }
.class-card-mage:hover { transform: rotate(1deg) translateY(-9px) scale(1.085); }
.world-preview { position: absolute; z-index: 6; right: -4px; bottom: 4px; width: 150px; height: 94px; overflow: hidden; border: 5px solid #fff5a4; border-radius: 10px; background: #47bfe2; box-shadow: 0 0 0 3px #0c78ad,0 9px 17px rgba(22,70,93,.32); transform: rotate(3deg); transform-origin: center center; transition: transform .28s cubic-bezier(.2,.8,.2,1),filter .28s ease,box-shadow .28s ease; }
.world-preview:hover { z-index: 10; filter: brightness(1.08) saturate(1.12); box-shadow: 0 0 0 3px #1cb7e8,0 18px 29px rgba(20,61,82,.48),0 0 20px rgba(89,224,255,.45); transform: rotate(1deg) translateY(-10px) scale(1.12); }
.world-preview img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 48% 48%; }
.world-preview span { position: absolute; right: 0; bottom: 0; left: 0; padding: 17px 5px 5px; color: #fff; background: linear-gradient(transparent,rgba(5,86,132,.94)); font-size: 9px; font-weight: 800; text-align: center; text-shadow: 0 1px #05456b; }
.floating-card { position: absolute; z-index: 4; isolation: isolate; padding: 11px 17px; border: 0; border-radius: 0; color: #fff; filter: drop-shadow(0 8px 8px rgba(47,39,20,.28)); text-shadow: 0 1px #7d250d; }
.floating-card span, .floating-card small { display: block; font-size: 9px; }
.floating-card strong { display: block; color: #fff8a9; font: 900 20px/1.1 Georgia,serif; }
.floating-card-version {
  top: 2px;
  right: -1px;
  min-width: 112px;
  padding: 13px 20px 21px;
  background: radial-gradient(circle at 50% 12%,#ffba3f,#f05419 54%,#b22518);
  clip-path: polygon(12% 0,88% 0,100% 14%,94% 78%,50% 100%,6% 78%,0 14%);
  text-align: center;
}
.floating-card-version::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 4px;
  border: 2px solid rgba(255,245,167,.85);
  clip-path: inherit;
  box-shadow: inset 0 0 0 2px rgba(131,40,19,.42);
}
.floating-card-version::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 50%;
  width: 10px;
  height: 10px;
  background: #77edff;
  border: 2px solid #fff2a1;
  box-shadow: 0 0 8px #5ee6ff;
  transform: translate(-50%,-50%) rotate(45deg);
}
.floating-card-world {
  bottom: -1px;
  left: -8px;
  min-width: 143px;
  padding: 11px 24px 12px;
  display: grid;
  grid-template-columns: 10px auto;
  column-gap: 8px;
  background: radial-gradient(circle at 50% 0,#49dcf1,#087ebc 59%,#075586);
  clip-path: polygon(9% 0,91% 0,100% 50%,91% 100%,9% 100%,0 50%);
  box-shadow: inset 0 0 0 3px #bdf6ff;
}
.floating-card-world::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 4px 7px;
  border: 2px solid rgba(255,236,133,.8);
  clip-path: inherit;
}
.floating-card-world .status-dot { grid-row: 1/3; align-self: center; width: 9px; height: 9px; border: 2px solid #fff; border-radius: 50%; background: #7cf24f; box-shadow: 0 0 8px #76ef47; }
.floating-card-world strong { color: #fff; font-size: 14px; }
.hero-scroll { display: none; }

.campaign-spotlight {
  position: relative;
  z-index: 5;
  min-height: 330px;
  margin-top: -48px;
  display: grid;
  grid-template-columns: 39% 61%;
  overflow: visible;
  border-style: solid;
  border-color: transparent;
  border-width: 30px 38px;
  border-image: url("./assets/campaign-frame-celestial-v1.webp") 150 190 135 190 / 30px 38px / 0 stretch;
  background: #fffaf0;
  box-shadow: 0 18px 32px rgba(75,57,44,.28);
  filter: drop-shadow(0 4px 0 rgba(70,30,73,.45));
}
.campaign-art { position: relative; min-height: 330px; overflow: hidden; border-radius: 10px 0 0 10px; background: url("/website/images/news/recharge-event-opening-2026.webp") center 22% / cover no-repeat; }
.campaign-forum-link { display: block; color: inherit; text-decoration: none; transition: filter .18s ease; }
.campaign-forum-link:hover { filter: brightness(1.06); }
.campaign-forum-link:focus-visible { outline: 3px solid #ffde58; outline-offset: -5px; }
.campaign-art::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 42%; background: linear-gradient(transparent, rgba(92,24,85,.9)); }
.campaign-tag { position: absolute; z-index: 2; top: 16px; left: 16px; padding: 5px 12px; color: #fff; border: 2px solid #fff0a0; border-radius: 15px; background: linear-gradient(#ff6ca1,#d32672); font-size: 10px; font-weight: 800; }
.campaign-art-copy { position: absolute; z-index: 2; right: 20px; bottom: 19px; left: 20px; color: #fff; text-shadow: 0 2px #5f164c; }
.campaign-art-copy small { display: block; color: #ffefad; }
.campaign-art-copy strong { display: block; font-size: 23px; }
.campaign-content { padding: 31px 35px; border-radius: 0 10px 10px 0; background: radial-gradient(circle at 100% 0, #ffe0f1 0, transparent 32%), linear-gradient(135deg,#fffdf4,#ffedc7); }
.section-kicker { color: #d85628; font-size: 9px; font-weight: 900; letter-spacing: 2px; }
.campaign-content h2, .latest-card h2, .start-card h2, .section-heading h2 { margin: 1px 0 8px; color: #9b3e20; font: 900 25px/1.2 Georgia,"Microsoft YaHei",serif; }
.campaign-content p { color: #725544; }
.campaign-tiers { margin: 18px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.campaign-tiers span { min-width: 62px; padding: 6px 11px; color: #fff; border: 2px solid #fff1a0; border-radius: 15px; background: linear-gradient(#ff9e38,#ed5418); box-shadow: 0 2px 0 #b53c0e; font-weight: 800; text-align: center; }
.campaign-actions { display: flex; flex-wrap: wrap; gap: 20px; }
.text-link { padding: 0; color: #b83e17; border: 0; background: transparent; cursor: pointer; font-size: 12px; font-weight: 800; }
.text-link:hover { color: #e93478; }
.text-link-muted { color: #6e7891; }
.campaign-forum-action { color: #a53b77; text-decoration: none; }
.campaign-reward-details { margin-top: 16px; display: grid; grid-template-columns: repeat(5,1fr); gap: 6px; }
.campaign-reward-details article { min-width: 0; padding: 8px; border: 1px solid #e9b766; border-radius: 8px; background: #fff9e2; text-align: center; }
.campaign-reward-details strong { color: #d94b18; }
.campaign-reward-details small { display: block; overflow: hidden; color: #826b57; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }

.qq-celebration { margin-top: 52px; padding: 26px 30px 30px; border: 4px solid #f4d272; border-radius: 10px; background: linear-gradient(135deg,#f7fdff 0%,#fff9df 56%,#f7e8ff 100%); box-shadow: 0 15px 28px rgba(71,70,85,.2); }
.qq-celebration-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.qq-celebration-head h2 { margin: 2px 0 0; color: #8f3c25; font: 900 27px/1.2 Georgia,"Microsoft YaHei",serif; }
.qq-forum-link { color: #086f9e; font-size: 12px; font-weight: 800; }
.qq-celebration-columns { display: grid; grid-template-columns: 1fr 1.35fr; gap: 18px; }
.qq-reward-group { overflow: hidden; border: 2px solid #81c9e5; border-radius: 8px; background: rgba(255,255,255,.88); }
.qq-reward-group header { padding: 11px 14px; color: #fff; background: linear-gradient(90deg,#0879aa,#35b9dd); }
.qq-code-group { border-color: #d49bca; }
.qq-code-group header { background: linear-gradient(90deg,#933c7c,#d65c93); }
.qq-reward-group header small { display: block; color: #fff2a8; font-size: 9px; font-weight: 900; letter-spacing: 2px; }
.qq-reward-group header strong { font-size: 17px; }
.qq-reward-items { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; padding: 12px; }
.qq-code-items { grid-template-columns: repeat(4,1fr); }
.qq-reward-items span { min-width: 0; padding: 8px 4px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.qq-reward-items img { width: 48px; height: 48px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 3px 2px rgba(52,50,57,.22)); }
.qq-reward-items b { margin-top: 4px; color: #604333; font-size: 10px; line-height: 1.25; }
.qq-reward-items small { color: #c14f28; font-size: 9px; font-weight: 800; }
.qq-reward-group p { margin: 0; padding: 0 14px 14px; color: #6d5a50; font-size: 11px; line-height: 1.7; }

.news-and-start { margin-top: 54px; display: grid; grid-template-columns: minmax(0,1.45fr) minmax(300px,.55fr); gap: 20px; }
.latest-card, .start-card { position: relative; border-style: solid; border-color: transparent; border-radius: 0; box-shadow: none; filter: drop-shadow(0 13px 13px rgba(53,65,58,.24)); }
.latest-card {
  padding: 19px 25px 23px;
  border-width: 39px 29px 25px;
  border-image: url("./assets/news-frame-guild-v1.webp") 175 125 125 125 / 39px 29px 25px / 0 stretch;
  background: radial-gradient(circle at 50% 0,#fffef8,#fff0c9 78%);
}
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.section-heading-centered { justify-content: center; text-align: center; }
.section-heading p { margin: 4px 0 0; color: #806957; }
.latest-news { margin-top: 10px; }
.latest-news button { width: 100%; padding: 11px 3px; display: grid; grid-template-columns: 48px minmax(0,1fr) 48px; gap: 10px; align-items: center; color: #5d4737; border: 0; border-bottom: 1px dashed #d4a86c; background: transparent; cursor: pointer; text-align: left; }
.latest-news button:hover strong { color: #e24c18; transform: translateX(3px); }
.latest-news span { padding: 2px 4px; color: #fff; border-radius: 8px; background: linear-gradient(#ff8c28,#e44916); font-size: 9px; text-align: center; }
.latest-news strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: .15s ease; }
.latest-news time { color: #9c7c65; font-size: 10px; text-align: right; }
.start-card {
  padding: 15px 24px 18px;
  color: #fff;
  border-width: 48px 29px 35px;
  border-image: url("./assets/quest-frame-crystal-v1.webp") 315 150 275 150 / 48px 29px 35px / 0 stretch;
  background:
    radial-gradient(circle at 50% 5%,rgba(93,232,255,.35),transparent 36%),
    linear-gradient(155deg,#22bce0,#076ca9 70%,#064c83);
}
.start-card .section-kicker { color: #fff09d; }
.start-card h2 { color: #fff; text-shadow: 0 2px #075985; }
.start-card p { color: #e2f9ff; }
.start-card ol { margin: 18px 0 0; padding: 0; list-style: none; }
.start-card li { padding: 9px 0; display: flex; align-items: center; gap: 10px; border-top: 1px solid rgba(255,255,255,.24); }
.start-card li b { width: 27px; height: 27px; display: grid; place-items: center; color: #87420d; border: 2px solid #fff1a7; border-radius: 50%; background: #ffd44d; font-size: 9px; }
.start-card li button { color: #fff; border: 0; background: transparent; cursor: pointer; font-weight: 700; }

.feature-section {
  position: relative;
  margin-top: 88px;
  padding: 30px 28px 34px;
  border: 52px solid transparent;
  border-width: 58px 42px 44px;
  border-image: url("./assets/feature-frame-sky-v1.webp") 225 145 165 / 58px 42px 44px / 0 stretch;
  border-radius: 0;
  background:
    radial-gradient(circle at 50% 0,rgba(255,248,184,.82),transparent 25%),
    linear-gradient(155deg,rgba(224,250,255,.94),rgba(183,231,246,.9));
  box-shadow: none;
  filter: drop-shadow(0 16px 17px rgba(48,109,137,.28));
}
.feature-section::before {
  display: none;
}
.feature-section .section-heading { position: relative; z-index: 3; width: min(650px,92%); min-height: 124px; margin: -34px auto 0; padding: 17px 34px 14px; border: 28px solid transparent; border-width: 38px 22px 20px; border-image: url("./assets/gameplay-title-frame-v2.webp") 126 72 58 / 38px 22px 20px / 0 stretch; border-radius: 0; background: radial-gradient(circle at 50% 0,rgba(35,183,225,.16),transparent 42%),linear-gradient(90deg,#351b20,#6d3428 48%,#351b20); box-shadow: none; filter: drop-shadow(0 9px 6px rgba(31,16,16,.32)); }
.feature-section .section-heading h2 { color: #fff2a4; text-shadow: 0 2px #2b1110; }
.feature-section .section-heading p { color: #f3d9b4; }
.feature-section .section-kicker { color: #65e5ff; }
.feature-grid { margin-top: 28px; display: grid; grid-template-columns: repeat(12,1fr); grid-auto-rows: 225px; gap: 15px; }
.feature-card { --frame-accent:#087ead; --frame-gem:#64eaff; position: relative; min-width: 0; padding: 0; overflow: hidden; color: #fff; border: 17px solid transparent; border-image: url("./assets/card-frame-jeweled-v1.webp") 122 / 17px / 0 stretch; border-radius: 0; background: #3faed8; box-shadow: 0 9px 16px rgba(45,79,89,.23); cursor: pointer; text-align: left; }
.feature-card:nth-child(2) { --frame-accent:#d7511b; --frame-gem:#ff9a3f; }
.feature-card:nth-child(3) { --frame-accent:#6c4da8; --frame-gem:#c79aff; }
.feature-card:nth-child(4) { --frame-accent:#a64369; --frame-gem:#ff77ac; }
.feature-card:nth-child(5) { --frame-accent:#2b8b55; --frame-gem:#7eea83; }
.feature-card::before {
  display: none;
}
.feature-card.feature-large { grid-column: span 7; grid-row: span 2; }
.feature-card:not(.feature-large):not(.feature-wide) { grid-column: span 5; }
.feature-card.feature-wide { grid-column: span 5; }
.feature-card img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .35s ease; }
.feature-card:hover img { transform: scale(1.055); }
.feature-shade { position: absolute; inset: 0; background: linear-gradient(180deg,transparent 30%,rgba(27,20,16,.9)); }
.feature-number { position: absolute; top: 11px; right: 13px; color: rgba(255,255,255,.85); font: 900 13px Georgia,serif; text-shadow: 0 1px #274c5e; }
.feature-copy { position: absolute; right: 17px; bottom: 15px; left: 17px; display: flex; flex-direction: column; text-shadow: 0 2px 2px #2d160c; }
.feature-copy small { color: #ffe687; font-size: 9px; font-weight: 800; letter-spacing: 1px; }
.feature-copy strong { font-size: 22px; }
.feature-copy em { color: #fff4de; font-size: 10px; font-style: normal; }

.gallery-section { margin-top: 80px; padding: 64px 0 80px; border-top: 7px solid #fff; border-bottom: 7px solid #3a9e23; background: url("/website/warrior/static.koramgame.com/web/sf/index/images/ftbg.jpg") center / cover no-repeat; box-shadow: inset 0 12px 24px rgba(62,136,30,.12); }
.gallery-section .section-heading { position: relative; min-height: 126px; padding: 24px 42px; border: 24px solid transparent; border-width: 25px 20px; border-image: url("./assets/gallery-title-frame-v2.webp") 88 78 / 25px 20px / 0 stretch; border-radius: 0; background: radial-gradient(circle at 50% 0,rgba(209,70,78,.2),transparent 42%),linear-gradient(90deg,#2e1518,#632727 50%,#2e1518); box-shadow: none; filter: drop-shadow(0 10px 10px rgba(53,40,25,.26)); }
.gallery-section .section-heading::before,.gallery-section .section-heading::after { display:none; }
.gallery-section .section-heading::before { right:100%; clip-path:polygon(100% 0,100% 100%,0 72%,24% 50%,0 25%); }
.gallery-section .section-heading::after { left:100%; clip-path:polygon(0 0,0 100%,100% 72%,76% 50%,100% 25%); transform:scaleX(-1); }
.gallery-section .section-heading h2 { color:#fff0a3; text-shadow:0 2px #2a120e; }
.gallery-section .section-heading .section-kicker { color:#69e6ff; }
.gallery-section .section-heading .text-link { color:#ffe8a2; }
.gallery-ribbon { margin-top: 24px; display: grid; grid-template-columns: repeat(4,1fr); gap: 13px; }
.gallery-ribbon button { --gallery-accent:#087daf; --gallery-gem:#61e5ff; position: relative; height: 205px; padding: 0; overflow: hidden; color: #fff; border: 15px solid transparent; border-image: url("./assets/card-frame-jeweled-v1.webp") 122 / 15px / 0 stretch; border-radius: 0; background: #43b4dc; box-shadow: 0 8px 14px rgba(34,84,92,.24); cursor: pointer; }
.gallery-ribbon button:nth-child(2) { --gallery-accent:#8b55ad; --gallery-gem:#d995ff; }
.gallery-ribbon button:nth-child(3) { --gallery-accent:#2585ae; --gallery-gem:#83edff; }
.gallery-ribbon button:nth-child(4) { --gallery-accent:#cf6728; --gallery-gem:#ffab4c; }
.gallery-ribbon button::before { display:none; }
.gallery-ribbon img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .3s ease; }
.gallery-ribbon button:hover img { transform: scale(1.06); }
.gallery-ribbon span { position: absolute; right: 0; bottom: 0; left: 0; padding: 28px 13px 10px; background: linear-gradient(transparent,rgba(70,28,17,.9)); font-weight: 800; text-align: left; text-shadow: 0 1px #3c130a; }

.directory-section { position:relative; margin-top: 88px; margin-bottom: 90px; padding: 28px 26px 32px; border: 46px solid transparent; border-width: 62px 38px 42px; border-image: url("./assets/directory-frame-cartographer-v1.webp") 230 145 130 / 62px 38px 42px / 0 stretch; border-radius: 0; background: radial-gradient(circle at 50% 0,rgba(255,227,124,.5),transparent 26%),linear-gradient(rgba(255,251,228,.94),rgba(244,224,174,.94)),url("./assets/world-map-continent.jpg") center / cover; box-shadow: none; filter: drop-shadow(0 16px 15px rgba(80,61,38,.24)); }
.directory-section::before,.directory-section::after { display:none; }
.directory-grid { margin-top: 27px; display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.directory-group { --group-accent:#1687b3; --group-gem:#64e8ff; position:relative; z-index:1; overflow: hidden; padding: 0 16px 15px; border: 15px solid transparent; border-image: url("./assets/card-frame-jeweled-v1.webp") 122 / 15px / 0 stretch; border-radius: 0; background: #f4fcff; box-shadow: inset 0 0 14px rgba(76,171,208,.12),0 8px 13px rgba(77,55,37,.14); }
.directory-group:nth-child(2) { --group-accent:#d45b20; --group-gem:#ff9f43; background: #fff9e8; }
.directory-group:nth-child(3) { --group-accent:#b83f79; --group-gem:#ff84b7; background: #fff3f8; }
.directory-group:nth-child(4) { --group-accent:#4c922c; --group-gem:#8de75f; background: #f7ffe9; }
.directory-group::before { display:none; }
.directory-group h3 { margin: 0 -16px 13px; padding: 10px 15px; color: #fff; background: linear-gradient(#42c4e8,#087cb8); font-size: 14px; text-shadow: 0 1px #07547d; }
.directory-group:nth-child(2) h3 { background: linear-gradient(#ff9e3b,#e45818); }
.directory-group:nth-child(3) h3 { background: linear-gradient(#ff76aa,#d53277); }
.directory-group:nth-child(4) h3 { background: linear-gradient(#8fd455,#4b9b27); }
.directory-group small { display: block; margin-top: -8px; margin-bottom: 7px; color: #9a765e; font-size: 8px; letter-spacing: 1px; }
.directory-group button { width: 100%; padding: 7px 1px; display: flex; justify-content: space-between; color: #5d483a; border: 0; border-bottom: 1px dashed rgba(115,83,57,.25); background: transparent; cursor: pointer; text-align: left; }
.directory-group button::after { content: "›"; color: #e45b20; font-weight: 900; }
.directory-group button:hover { color: #e24516; transform: translateX(2px); }

.page-view { min-height: 0; padding: 8px 0 35px; background: linear-gradient(rgba(222,249,255,.45),rgba(255,248,221,.58)); }
.page-view-hero { position: relative; width: var(--shell); min-height: 132px; margin: 0 auto 16px; padding: 25px 40px; overflow: hidden; border: 7px solid #fff2a5; border-radius: 19px; background: url("/website/n.7k7kimg.cn/uploads/xjhx/pbg_headerpic.jpg") center / cover no-repeat; box-shadow: 0 0 0 3px #168ac0, 0 14px 26px rgba(54,98,117,.24); }
.page-view-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(255,249,213,.96) 0,rgba(255,242,177,.82) 37%,transparent 70%); pointer-events: none; }
.page-view-hero > * { position: relative; z-index: 1; }
.back-home { padding: 4px 10px; color: #fff; border: 2px solid #ffdc6d; border-radius: 12px; background: linear-gradient(#ff982b,#df4c13); cursor: pointer; font-size: 10px; font-weight: 700; }
.page-view-hero > span { display: block; margin-top: 8px; color: #b64b1e; font-size: 9px; font-weight: 900; letter-spacing: 2px; }
.page-view-hero h1 { margin: 1px 0; color: #e74d1a; font: 900 30px/1.1 Georgia,"Microsoft YaHei",serif; text-shadow: 2px 2px #fff4af; }
.page-view-hero p { margin: 0; color: #654839; }
.page-frame-shell { overflow: hidden; border: 7px solid #fff6bf; border-radius: 17px; background: #e8f9ff; box-shadow: 0 0 0 3px #258fc1, 0 18px 34px rgba(48,94,114,.24); }
.page-frame-toolbar { min-height: 45px; padding: 0 17px; display: flex; align-items: center; justify-content: space-between; color: #fff; border-bottom: 3px solid #ffd057; background: linear-gradient(#42bbe0,#0878b5); font-size: 10px; font-weight: 700; text-shadow: 0 1px #075678; }
.frame-status-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border: 2px solid #fff; border-radius: 50%; background: #77e842; box-shadow: 0 0 7px #98ff69; }
.page-frame-toolbar a { color: #fff7a3; }
#legacyFrame { width: 100%; height: 320px; min-height: 180px; display: block; border: 0; background: #eaf9ff; }

.account-native { min-height: 560px; padding: 50px; display: grid; grid-template-columns: minmax(0,.8fr) minmax(360px,1fr); align-items: center; gap: 55px; background: linear-gradient(90deg,rgba(255,249,211,.94),rgba(255,255,255,.55)),url("/website/images/character-creation.png") center / cover no-repeat; }
.account-native-copy span { color: #d94b19; font-size: 9px; font-weight: 900; letter-spacing: 2px; }
.account-native-copy h2 { margin: 7px 0 10px; color: #e34b18; font: 900 34px/1.2 Georgia,"Microsoft YaHei",serif; text-shadow: 2px 2px #fff2a6; }
.account-native-copy p { max-width: 400px; margin: 0; color: #684b39; }
.account-login-card { padding: 25px; border: 6px solid #fff3aa; border-radius: 17px; background: linear-gradient(145deg,rgba(255,253,231,.97),rgba(255,221,141,.96)); box-shadow: 0 0 0 3px #b85c22, 0 18px 32px rgba(79,54,32,.25); }
.account-login-card .tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 20px; }
.account-login-card .tabs button { padding: 10px; color: #76533e; border: 2px solid #d99e4c; border-radius: 8px; background: #fff9db; cursor: pointer; }
.account-login-card .tabs button.active { color: #fff; border-color: #ffda65; background: linear-gradient(#ff972a,#df4a12); font-weight: 800; text-shadow: 0 1px #7f2909; }
.account-login-card .row { display: grid; grid-template-columns: 72px 1fr; align-items: center; gap: 12px; margin: 12px 0; color: #654634; }
.account-login-card input { width: 100%; height: 41px; padding: 8px 11px; color: #4e3829; border: 2px solid #c99b55; border-radius: 7px; outline: none; background: #fffdf2; }
.account-login-card input:focus { border-color: #159bd2; box-shadow: 0 0 0 3px rgba(21,155,210,.15); }
.account-login-card .btn-primary, .account-login-card .btn-secondary { width: 100%; padding: 11px 15px; border-radius: 8px; cursor: pointer; font-weight: 800; }
.account-login-card .btn-primary { color: #fff; border: 2px solid #ffdf74; background: linear-gradient(#ff982b,#df4a12); text-shadow: 0 1px #7b290b; }
.account-login-card .btn-secondary { margin-top: 8px; color: #fff; border: 2px solid #baf0ff; background: linear-gradient(#3bc3e9,#0878b6); }
.account-welcome { margin-bottom: 14px; padding: 13px; display: flex; flex-direction: column; gap: 3px; border: 2px solid #74c7e5; border-radius: 9px; background: #eafaff; }
.account-welcome span { color: #708393; font-size: 10px; }
.account-welcome strong { color: #a8401d; word-break: break-all; }
.auth-message { min-height: 18px; margin-top: 12px; color: #8b5f43; font-size: 11px; text-align: center; }

.site-footer-v2 { min-height: 270px; padding: 70px 20px 30px; display: flex; flex-direction: column; align-items: center; color: #fff; border-top: 6px solid #fff4aa; background: linear-gradient(rgba(75,151,30,.08),rgba(24,91,21,.48)),url("/website/warrior/static.koramgame.com/web/sf/index/images/ftbg.jpg") center 28% / cover no-repeat; text-align: center; text-shadow: 0 1px #2e6b1c; }
.footer-brand { min-width: 300px; min-height: 150px; padding: 47px 66px 38px; display: flex; flex-direction: column; align-items: center; justify-content:center; border: 0; border-radius: 0; background: url("./assets/footer-plaque-guild-v1.webp") center / 100% 100% no-repeat; box-shadow: none; filter: drop-shadow(0 9px 10px rgba(35,55,18,.3)); }
.footer-brand span { color: #ffdf52; }
.footer-brand strong { color: #fff1a3; font: 900 24px Georgia,serif; }
.footer-brand small { font-size: 8px; letter-spacing: 4px; }
.footer-links { margin: 20px 0 10px; padding: 9px 16px; display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; border-radius: 18px; background: rgba(49,107,27,.72); }
.footer-links button, .footer-links a { padding: 0; color: #fff; border: 0; background: transparent; cursor: pointer; font-size: 11px; font-weight: 700; }
.footer-links button:hover, .footer-links a:hover { color: #fff0a0; }
.site-footer-v2 p { font-size: 9px; }
.v2-page-mode .site-footer-v2 { min-height: 150px; padding: 24px 20px 18px; }
.v2-page-mode .footer-brand { min-width: 250px; min-height: 120px; padding: 38px 55px 30px; }
.v2-page-mode .footer-brand strong { font-size: 20px; }
.v2-page-mode .footer-links { margin: 10px 0 5px; }
.noscript { margin: 0; padding: 15px; color: #fff; background: #9b2b25; text-align: center; }

@media (max-width: 1080px) {
  .site-navigation { grid-template-columns: minmax(0,1fr) 215px minmax(0,1fr); padding: 0 30px; }
  .nav-wing > a, .nav-wing > button, .nav-menu > summary { padding: 0 7px; font-size: 11px; }
  .hero-inner { grid-template-columns: 225px minmax(280px,.78fr) minmax(350px,1fr); gap: 15px; }
  .hero-copy { padding-right: 22px; padding-left: 22px; }
  .hero-copy h1 { font-size: 35px; }
}

@media (max-width: 900px) {
  :root { --shell: min(100% - 26px, 760px); }
  .top-notice { overflow: hidden; }
  .top-notice-group { min-width:1100px; gap:24px; }
  .site-header { height: 76px; }
  .site-header::before { background-size: auto 270px; }
  .site-navigation { height: 74px; padding: 0; display: block; }
  .brand { position: absolute; top: 0; left: 50%; width: 175px; height: 72px; align-items: center; transform: translateX(-50%); }
  .brand strong { font-size: 22px; letter-spacing: 1px; }
  .brand small { padding-left: 4px; }
  .brand-crown { display: none; }
  .mobile-menu-button { position: absolute; z-index: 70; top: 12px; right: 11px; width: 48px; height: 43px; padding: 4px 7px; display: block; color: #fff7c8; border: 2px solid #ffe27b; border-radius: 9px; background: linear-gradient(#ff8d27,#d94813); cursor: pointer; box-shadow: 0 3px 0 #8b2a0c, 0 0 0 2px rgba(90,28,12,.32); }
  .mobile-menu-button span { width: 20px; height: 2px; margin: 3px auto; display: block; background: #fff; }
  .mobile-menu-button b { display: block; font-size: 8px; }
  .nav-wing { height: auto; padding: 8px 10px; display: none; align-items: stretch; flex-direction: column; border-right: 4px solid #ffdd73; border-left: 4px solid #ffdd73; background: linear-gradient(90deg,#422018,#6a3924 48%,#341b15); box-shadow: 0 12px 24px rgba(54,25,12,.38); }
  .site-navigation.mobile-open { padding: 74px 8px 0; }
  .site-navigation.mobile-open .nav-wing { position: relative; top: auto; right: auto; left: auto; display: flex; }
  .site-navigation.mobile-open .nav-wing-left { border-top: 4px solid #ffdd73; border-radius: 13px 13px 0 0; }
  .site-navigation.mobile-open .nav-wing-right { border-bottom: 4px solid #ffdd73; border-radius: 0 0 13px 13px; }
  .nav-wing > a, .nav-wing > button, .nav-menu > summary { width: 100%; height: 37px; justify-content: flex-start; border-bottom: 1px solid rgba(255,238,185,.15); }
  .nav-menu { width: 100%; height: auto; }
  .nav-dropdown, .nav-menu-right .nav-dropdown { position: static; width: 100%; margin: 4px 0 7px; grid-template-columns: 1fr; transform: none; }
  .nav-wing-left .nav-menu .nav-dropdown { position: static; width: 100%; margin: 4px 0 7px; grid-template-columns: repeat(2, minmax(0, 1fr)); transform: none; }
  .nav-dropdown-title { grid-column: 1; }
  .nav-wing-left .nav-menu .nav-dropdown-title { grid-column: 1 / -1; }
  .nav-dropdown::before { display: none; }
  .hero-section { margin-top: -10px; background-position: center, center -66px; }
  .hero-world-map { top: 25px; width: 1060px; height: 530px; opacity: .44; }
  .hero-inner { padding: 50px 0 75px; grid-template-columns: 1fr; }
  .hero-login-panel { width: 100%; max-width: 430px; margin: 0 auto; }
  .hero-copy { max-width: 620px; margin: 0 auto; }
  .hero-art { width: 100%; max-width: 650px; min-height: 390px; margin: 0 auto; }
  .hero-party { inset: 5px 25px 0; }
  .party-banner { height: 130px; }
  .class-card { width: 270px; height: 168px; }
  .class-card-warrior { top: 165px; }
  .class-card-ranger { top: 175px; }
  .class-card-mage { right: 110px; bottom: -12px; }
  .world-preview { right: 8px; bottom: -18px; }
  .campaign-spotlight { grid-template-columns: 1fr; border-width: 24px; border-image-width: 24px; }
  .campaign-art { min-height: 290px; background-position: center 22%; }
  .campaign-art { border-radius: 10px 10px 0 0; }
  .campaign-content { border-radius: 0 0 10px 10px; }
  .qq-celebration-columns { grid-template-columns: 1fr; }
  .news-and-start { grid-template-columns: 1fr; }
  .feature-grid { grid-template-columns: repeat(2,1fr); grid-auto-rows: 230px; }
  .feature-card.feature-large, .feature-card:not(.feature-large):not(.feature-wide), .feature-card.feature-wide { grid-column: span 1; grid-row: auto; }
  .feature-card.feature-large { grid-column: span 2; }
  .gallery-ribbon { grid-template-columns: repeat(2,1fr); }
  .directory-grid { grid-template-columns: repeat(2,1fr); }
  .account-native { grid-template-columns: 1fr; gap: 27px; padding: 38px; }
  .account-native-copy { text-align: center; }
  .account-native-copy p { margin-right: auto; margin-left: auto; }
}

@media (max-width: 600px) {
  :root { --shell: calc(100% - 18px); }
  body { background-size: 1100px auto, auto; }
  .top-notice { grid-template-columns:14px minmax(0,1fr) auto; padding: 0 8px; gap: 5px; font-size: 9px; }
  .top-notice button { margin-left: auto; padding: 2px 7px; }
  .top-notice-group { min-width:980px; padding-right:28px; padding-left:12px; gap:18px; }
  .ticker-item { gap:5px; }
  .ticker-item b { padding:1px 5px; font-size:8px; }
  .hero-section { min-height: auto; background-position: center, center -66px; }
  .hero-world-map { top: 18px; width: 750px; height: 470px; opacity: .36; }
  .hero-world-map span { display: none; }
  .hero-inner { padding-top: 34px; gap: 12px; }
  .hero-login-panel { padding: 62px 34px 55px; }
  .hero-copy { padding: 67px 43px 56px; }
  .eyebrow { font-size: 9px; letter-spacing: 1px; }
  .hero-copy h1 { font-size: 39px; letter-spacing: -2px; }
  .hero-copy > p { font-size: 12px; }
  .hero-actions { flex-direction: column; }
  .button { width: 100%; }
  .hero-meta { gap: 16px; }
  .hero-art { min-height: 455px; }
  .hero-party { inset: 10px 0 0; }
  .hero-party::before { top: 118px; width: 260px; height: 260px; }
  .hero-party-kicker { font-size: 10px; letter-spacing: 1px; }
  .party-banner { top: 31px; right: 2px; left: 2px; height: 118px; border-width: 4px; }
  .party-banner span { left: 9px; bottom: 7px; padding: 4px 8px; font-size: 8px; }
  .class-card { width: 245px; height: 153px; border-width: 4px; }
  .class-card-warrior { top: 162px; left: 0; }
  .class-card-ranger { top: 224px; right: 0; }
  .class-card-mage { right: auto; bottom: 9px; left: 12px; }
  .class-card figcaption { padding: 19px 8px 6px; }
  .class-card figcaption b { font-size: 13px; }
  .world-preview { right: 0; bottom: 8px; width: 145px; height: 92px; }
  .floating-card-version { top: 15px; }
  .campaign-spotlight { margin-top: -28px; border-width: 18px; border-image-width: 18px; }
  .campaign-art { min-height: 240px; }
  .campaign-content { padding: 25px 20px; }
  .qq-celebration { margin-top: 38px; padding: 20px 14px; }
  .qq-celebration-head { align-items: flex-start; flex-direction: column; }
  .qq-code-items { grid-template-columns: repeat(2,1fr); }
  .campaign-reward-details { grid-template-columns: repeat(2,1fr); }
  .news-and-start { margin-top: 42px; }
  .latest-card { padding: 16px 15px 20px; border-width: 32px 20px 22px; border-image-width: 32px 20px 22px; }
  .start-card { padding: 15px 18px 18px; border-width: 42px 23px 31px; border-image-width: 42px 23px 31px; }
  .section-heading { align-items: flex-start; }
  .latest-news button { grid-template-columns: 42px minmax(0,1fr) 40px; gap: 6px; }
  .feature-section { margin-top: 66px; padding: 24px 11px 20px; border-width: 42px 20px 30px; border-image-width: 42px 20px 30px; }
  .feature-section .section-heading { width: 96%; min-height: 116px; margin-top: -30px; padding: 14px 16px 12px; border-width: 34px 14px 17px; border-image-width: 34px 14px 17px; }
  .feature-grid { grid-template-columns: 1fr; grid-auto-rows: 235px; }
  .feature-card.feature-large { grid-column: auto; }
  .gallery-section { margin-top: 55px; padding: 48px 0 60px; }
  .gallery-section .section-heading { min-height: 112px; align-items: center; padding: 20px 18px; border-width: 22px 12px; border-image-width: 22px 12px; }
  .gallery-ribbon { grid-template-columns: 1fr; }
  .gallery-ribbon button { height: 220px; }
  .directory-section { margin-top: 68px; margin-bottom: 60px; padding: 22px 8px 22px; border-width: 46px 18px 28px; border-image-width: 46px 18px 28px; }
  .directory-grid { grid-template-columns: 1fr; }
  .page-view { padding-top: 7px; }
  .page-view-hero { min-height: 180px; padding: 28px 22px; border-width: 5px; background-position: 63% center; }
  .page-view-hero h1 { font-size: 29px; }
  .page-frame-shell { border-width: 5px; }
  .page-frame-toolbar { align-items: flex-start; height: auto; min-height: 45px; padding: 10px 12px; gap: 10px; }
  .page-frame-toolbar a { text-align: right; }
  .account-native { padding: 24px 14px; }
  .account-native-copy h2 { font-size: 28px; }
  .account-login-card { padding: 18px; border-width: 5px; }
  .account-login-card .row { grid-template-columns: 1fr; gap: 5px; }
  .site-footer-v2 { min-height: 230px; padding-top: 55px; }
}

/* Branded cursors stay consistent even on controls with component-level cursor rules. */
body { cursor: url("./assets/cursor-fantasy.svg") 3 2, auto; }
button, a, summary, label, select, [role="button"], input[type="button"], input[type="submit"], input[type="checkbox"], input[type="radio"] {
  cursor: url("./assets/cursor-fantasy-pointer.svg") 7 2, pointer !important;
}
input[type="text"], input[type="email"], input[type="password"], input[type="search"], textarea { cursor: text !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

/* V2 refinement pass: atmosphere, native pages, accessibility and gallery. */
.top-notice:hover .top-notice-track,
.top-notice:focus-within .top-notice-track { animation-play-state: paused; }

:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible {
  outline: 3px solid #fff29b !important;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(50,117,190,.72) !important;
}

.mobile-login-toggle { display: none; }

.hero-cloud { position:absolute; z-index:1; width:460px; height:150px; border-radius:50%; opacity:.34; filter:blur(15px); pointer-events:none; background:radial-gradient(ellipse at center,rgba(255,255,255,.95),rgba(232,252,255,.66) 45%,transparent 72%); animation:cloud-drift 18s ease-in-out infinite alternate; }
.hero-cloud-one { top:92px; left:-170px; }
.hero-cloud-two { right:-210px; bottom:64px; animation-duration:23s; animation-direction:alternate-reverse; }
.hero-spark-field { position:absolute; z-index:1; inset:0; opacity:.7; pointer-events:none; background-image:radial-gradient(circle,#fffbd1 0 1px,transparent 1.8px),radial-gradient(circle,#92efff 0 1.5px,transparent 2.3px); background-position:0 0,43px 61px; background-size:92px 92px,137px 137px; mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent); animation:spark-rise 14s linear infinite; }
.hero-world-map { transform:translate(calc(var(--pointer-x,0) * -10px),calc(var(--pointer-y,0) * -6px)); transition:transform .25s ease-out; }
.hero-art { transform:translate(calc(var(--pointer-x,0) * 7px),calc(var(--pointer-y,0) * 4px)); transition:transform .25s ease-out; }
.hero-copy { transform:translate(calc(var(--pointer-x,0) * -2px),calc(var(--pointer-y,0) * -1px)); transition:transform .25s ease-out; }
@keyframes cloud-drift { to { transform:translate3d(95px,18px,0) scale(1.08); } }
@keyframes spark-rise { to { background-position:20px -184px,63px -213px; } }

.feature-card:focus-visible img,.feature-card:hover img { transform:scale(1.075); }
.feature-card:focus-visible .feature-shade,.feature-card:hover .feature-shade { background:linear-gradient(180deg,rgba(36,218,255,.06) 16%,rgba(27,20,16,.92)); }
.gallery-ribbon button { transition:transform .28s cubic-bezier(.2,.8,.2,1),filter .28s ease; }
.gallery-ribbon button:hover,.gallery-ribbon button:focus-visible { z-index:3; transform:translateY(-10px) scale(1.045); filter:saturate(1.12) drop-shadow(0 15px 12px rgba(49,45,28,.3)); }
.gallery-ribbon button:hover img,.gallery-ribbon button:focus-visible img { transform:scale(1.12); }

.native-breadcrumbs { width:100%; padding:13px 20px; display:flex; align-items:center; flex-wrap:wrap; gap:8px; color:#896547; border-bottom:1px solid rgba(133,83,34,.2); background:linear-gradient(90deg,#fff8d9,#ffedb7); font-size:11px; }
.native-breadcrumbs button { padding:0; color:#137faa; border:0; background:transparent; font-weight:800; }
.native-breadcrumbs strong { color:#a4431d; }
.native-page-layout { padding:24px; display:grid; grid-template-columns:minmax(0,1fr) 220px; align-items:start; gap:22px; background:radial-gradient(circle at 30% 0,rgba(255,255,255,.95),transparent 45%),linear-gradient(180deg,#e5f9ff,#fff6d5); }
.native-page-content { min-width:0; min-height:320px; padding:30px clamp(20px,4vw,48px); color:#563e2e; border:1px solid #d7b66f; border-radius:12px; background:linear-gradient(135deg,rgba(255,255,255,.97),rgba(255,249,222,.96)); box-shadow:0 0 0 5px #fff8ca,0 0 0 8px #2d9cca,0 15px 30px rgba(58,99,112,.16); line-height:1.8; }
.native-page-content > :first-child { margin-top:0; }
.native-page-content h1,.native-page-content h2,.native-page-content h3,.native-page-content h4 { scroll-margin-top:120px; color:#a83f1b; font-family:Georgia,"STKaiti","KaiTi","Microsoft YaHei",serif; line-height:1.35; }
.native-page-content h2 { margin:32px 0 14px; padding:9px 14px; color:#fff3ae; border-left:5px solid #69eaff; background:linear-gradient(90deg,#572519,#7d3824 72%,transparent); text-shadow:0 1px #28110b; }
.native-page-content h3 { margin:25px 0 11px; padding-bottom:7px; border-bottom:2px solid #eccd83; }
.native-page-content p { margin:10px 0; }
.native-page-content a { color:#087eaf; font-weight:700; text-decoration-thickness:1px; text-underline-offset:3px; }
.native-page-content img { max-width:100%; height:auto; border-radius:8px; box-shadow:0 7px 18px rgba(56,40,25,.18); }
.native-page-content ul,.native-page-content ol { padding-left:24px; }
.native-page-content table { width:100%; border-collapse:collapse; border:2px solid #cf9a49; background:#fffdf1; }
.native-page-content th { padding:10px; color:#fff8ce; border:1px solid #bd772f; background:linear-gradient(#4ec1e5,#087eae); }
.native-page-content td { padding:9px; border:1px solid #ead4a2; }
.native-page-content tr:nth-child(even) td { background:#fff8df; }
.native-page-content .article,.native-page-content .blog-post,.native-page-content .content-page,.native-page-content .news-panel,.native-page-content .news-detail { width:100%; max-width:none; margin:0; padding:0; border:0; background:transparent; box-shadow:none; }
.native-page-content .class-tabs,.native-page-content .talents-jump { position:sticky; z-index:4; top:74px; margin:0 0 20px; padding:10px; display:flex; flex-wrap:wrap; gap:7px; border:1px solid #e1b666; border-radius:9px; background:rgba(255,248,213,.94); backdrop-filter:blur(9px); }
.native-page-content .class-tabs a { padding:6px 10px; color:#fff; border-radius:14px; background:linear-gradient(#ef7f25,#bd3f13); text-decoration:none; }
.native-page-content .news-table { font-size:12px; }
.native-page-content .hidden { display:none !important; }
.native-page-content.is-loading { display:grid; place-items:center; }
.native-loading { min-height:260px; display:grid; place-items:center; align-content:center; gap:14px; color:#8e5a2a; }
.native-loading span { width:42px; height:42px; border:5px solid #f6d67c; border-top-color:#0aa3d0; border-radius:50%; animation:native-spin .8s linear infinite; }
@keyframes native-spin { to { transform:rotate(360deg); } }
.native-error { padding:50px 20px; text-align:center; }
.native-error strong { display:block; color:#ad3c1d; font-size:22px; }
.native-page-aside { position:sticky; top:88px; padding:19px 17px 17px; border:4px solid #ffe798; border-radius:11px; background:linear-gradient(#5b291e,#2d1714); box-shadow:0 0 0 2px #a65324,0 10px 24px rgba(56,31,18,.22); }
.native-page-aside > strong { display:block; margin-bottom:10px; color:#ffe89b; font-size:15px; }
.native-page-aside nav { display:grid; }
.native-page-aside nav:empty::after { content:"此页面没有章节目录"; color:#d9b98d; font-size:10px; }
.native-page-aside a { padding:8px 2px; color:#f2dbc0; border-bottom:1px solid rgba(255,232,172,.12); font-size:11px; text-decoration:none; }
.native-page-aside a:hover { color:#fff29d; padding-left:5px; }
.native-page-aside > button { width:100%; margin-top:14px; padding:9px; color:#fff; border:1px solid #ffde70; border-radius:7px; background:linear-gradient(#18b5df,#087aae); font-weight:800; }

.gallery-lightbox { width:min(1040px,calc(100% - 30px)); max-height:calc(100vh - 30px); padding:0; overflow:visible; color:#fff; border:8px solid #fce795; border-radius:18px; background:#211215; box-shadow:0 0 0 4px #8a4625,0 30px 80px #000; }
.gallery-lightbox::backdrop { background:rgba(16,10,20,.86); backdrop-filter:blur(8px); }
.gallery-lightbox figure { margin:0; display:grid; grid-template-columns:minmax(0,1fr) 260px; min-height:480px; }
.gallery-lightbox figure > img { width:100%; height:100%; max-height:75vh; display:block; object-fit:contain; background:#09070a; }
.gallery-lightbox figcaption { padding:32px 24px; display:flex; flex-direction:column; justify-content:center; background:radial-gradient(circle at top,#794024,#351b18 65%); }
.gallery-lightbox figcaption strong { color:#fff0a6; font:900 26px/1.2 Georgia,"Microsoft YaHei",serif; }
.gallery-lightbox figcaption span { margin:13px 0 24px; color:#efd9bc; line-height:1.8; }
.gallery-lightbox figcaption button { padding:11px 16px; color:#fff; border:2px solid #ffe173; border-radius:8px; background:linear-gradient(#ff9228,#d84613); font-weight:800; }
.lightbox-close { position:absolute; z-index:4; top:-18px; right:-18px; width:42px; height:42px; color:#fff; border:3px solid #ffe994; border-radius:50%; background:#d8461b; font-size:25px; }
.lightbox-arrow { position:absolute; z-index:3; top:50%; width:44px; height:70px; color:#fff4ad; border:2px solid #ffe68a; border-radius:10px; background:rgba(62,29,21,.9); font-size:42px; transform:translateY(-50%); }
.lightbox-previous { left:-24px; }.lightbox-next { right:-24px; }

@media (max-width:900px) {
  .native-page-layout { grid-template-columns:1fr; }
  .native-page-aside { position:static; order:-1; padding:12px 14px; }
  .native-page-aside nav { display:flex; flex-wrap:wrap; gap:5px 12px; }
  .native-page-aside a { padding:5px 0; }
  .native-page-aside > button { width:auto; }
}

@media (max-width:600px) {
  .hero-inner { padding:18px 0 48px; }
  .hero-copy { order:1; padding:50px 32px 43px; }
  .hero-copy h1 { font-size:34px; }
  .hero-art { order:2; min-height:390px; }
  .hero-login-panel { order:3; padding:49px 31px 45px; }
  .mobile-login-toggle { margin:8px auto 0; padding:6px 13px; display:block; color:#fff5bd; border:1px solid #dba754; border-radius:15px; background:linear-gradient(#754224,#371c16); font-size:10px; font-weight:800; }
  .hero-login-panel .home-login-host,.hero-login-panel .hero-login-links { display:none; }
  .mobile-login-expanded .hero-login-panel .home-login-host,.mobile-login-expanded .hero-login-panel .hero-login-links { display:grid; }
  .hero-cloud { opacity:.2; }
  .party-banner { height:105px; }
  .class-card { width:220px; height:137px; }
  .class-card-warrior { top:146px; }
  .class-card-ranger { top:196px; }
  .class-card-mage { bottom:5px; }
  .world-preview { width:126px; height:80px; }
  .native-breadcrumbs { padding:10px 12px; }
  .native-page-layout { padding:11px 8px 20px; gap:12px; }
  .native-page-content { padding:20px 14px; border-radius:8px; box-shadow:0 0 0 3px #fff8ca,0 0 0 5px #2d9cca,0 12px 24px rgba(58,99,112,.15); }
  .native-page-content h2 { margin-top:24px; font-size:19px; }
  .native-page-content table { display:block; max-width:100%; overflow-x:auto; }
  .native-page-content .class-tabs,.native-page-content .talents-jump { top:72px; }
  .gallery-lightbox { width:calc(100% - 20px); border-width:5px; }
  .gallery-lightbox figure { grid-template-columns:1fr; min-height:0; }
  .gallery-lightbox figure > img { height:auto; max-height:58vh; }
  .gallery-lightbox figcaption { padding:18px; }
  .gallery-lightbox figcaption strong { font-size:21px; }
  .lightbox-arrow { top:40%; width:36px; height:56px; font-size:32px; }
  .lightbox-previous { left:4px; }.lightbox-next { right:4px; }
  .lightbox-close { top:-13px; right:-8px; }
}

/* V2 page-wide ornamental language: every page owns a framed content panel,
   a title crest, and jewel-styled navigation controls. */
.v2-page-mode .page-frame-shell {
  overflow: visible;
  border: 20px solid transparent;
  border-image: url("./assets/card-frame-jeweled-v1.webp") 122 / 20px / 0 stretch;
  border-radius: 0;
  background: linear-gradient(180deg,#e7f9ff,#fff8df);
  box-shadow: none;
  filter: drop-shadow(0 15px 14px rgba(57,47,29,.24));
}
.v2-page-mode .page-frame-toolbar { margin:-1px; border-bottom:2px solid #ffd97b; }
.native-page-content { padding:16px; border:0; border-radius:0; background:transparent; box-shadow:none; }
.native-ornament-shell {
  --page-accent:#1288ba;
  --page-gem:#71eaff;
  position:relative;
  min-height:320px;
  margin:42px 0 8px;
  padding:58px 28px 30px;
  border:18px solid transparent;
  border-image:url("./assets/card-frame-jeweled-v1.webp") 122 / 18px / 0 stretch;
  background:radial-gradient(circle at 50% 0,color-mix(in srgb,var(--page-gem) 22%,transparent),transparent 28%),linear-gradient(145deg,#fffdf0,#fff2c9);
  filter:drop-shadow(0 12px 10px rgba(58,42,25,.2));
}
.native-theme-gold { --page-accent:#c7751b; --page-gem:#ffd460; }
.native-theme-rose { --page-accent:#b23d72; --page-gem:#ff92c2; }
.native-theme-green { --page-accent:#3f8d45; --page-gem:#91e77d; }
.native-panel-crest {
  position:absolute;
  z-index:3;
  left:50%;
  top:-48px;
  width:min(510px,82%);
  min-height:94px;
  padding:23px 60px 17px;
  border:25px solid transparent;
  border-width:27px 20px 17px;
  border-image:url("./assets/gameplay-title-frame-v2.webp") 126 72 58 / 27px 20px 17px / 0 stretch;
  background:radial-gradient(circle at 50% 0,color-mix(in srgb,var(--page-gem) 30%,transparent),transparent 48%),linear-gradient(90deg,#30151a,#682c26 50%,#30151a);
  color:#fff3b1;
  text-align:center;
  transform:translateX(-50%);
  filter:drop-shadow(0 7px 5px rgba(35,18,15,.35));
}
.native-panel-crest::before,.account-gate-crest::before {
  content:"";
  position:absolute;
  left:50%;
  top:-13px;
  width:19px;
  height:19px;
  border:3px solid #ffe48c;
  background:radial-gradient(circle at 36% 30%,#fff 0 7%,var(--page-gem,#6de9ff) 15% 45%,var(--page-accent,#1288ba) 70%);
  box-shadow:0 0 0 3px #7b421c,0 0 13px var(--page-gem,#6de9ff);
  transform:translateX(-50%) rotate(45deg);
}
.native-panel-crest span,.native-panel-crest strong { display:block; }
.native-panel-crest span { color:var(--page-gem); font-size:9px; font-weight:900; letter-spacing:3px; }
.native-panel-crest strong { margin-top:2px; font:900 23px/1.1 "STKaiti","KaiTi","Microsoft YaHei",serif; text-shadow:0 2px #35140d; }
.native-ornament-body > .article,.native-ornament-body > .blog-post,.native-ornament-body > .content-page,.native-ornament-body > .news-panel,.native-ornament-body > .news-detail {
  width:100%;
  max-width:none;
  margin:0;
  padding:22px;
  border:13px solid transparent;
  border-image:url("./assets/card-frame-jeweled-v1.webp") 122 / 13px / 0 stretch;
  background:rgba(255,253,239,.9);
  box-shadow:inset 0 0 24px color-mix(in srgb,var(--page-accent) 12%,transparent);
}
.native-ornament-body :is(.class-tabs,.talents-jump,.tabs,[class*="-tabs"]) {
  padding:9px 12px;
  border:2px solid #d8a64d;
  border-radius:5px 5px 14px 14px;
  background:linear-gradient(#5e301f,#2b1512);
  box-shadow:inset 0 0 0 2px rgba(255,225,142,.1),0 4px 0 #1d0d0b,0 8px 15px rgba(45,22,14,.18);
}
.native-ornament-body :is(.class-tabs,.talents-jump,.tabs,[class*="-tabs"]) :is(a,button) {
  position:relative;
  min-height:31px;
  padding:6px 18px;
  border:1px solid #d7a14a;
  border-radius:4px 4px 11px 11px;
  background:radial-gradient(circle at 10px 50%,var(--page-gem) 0 2px,transparent 3px),linear-gradient(#774524,#3b1c15);
  color:#fff1b4;
  text-decoration:none;
  text-shadow:0 1px #25100b;
  box-shadow:0 3px 0 #1b0b09;
}
.native-ornament-body :is(.class-tabs,.talents-jump,.tabs,[class*="-tabs"]) :is(a,button):hover,
.native-ornament-body :is(.class-tabs,.talents-jump,.tabs,[class*="-tabs"]) :is(a.active,button.active) {
  border-color:#ffea92;
  background:radial-gradient(circle at 10px 50%,#fffbd7 0 2px,var(--page-gem) 3px 5px,transparent 6px),linear-gradient(color-mix(in srgb,var(--page-accent) 72%,#ffb43c),var(--page-accent));
  color:#fff;
  transform:translateY(-1px);
}

/* Account page gets a separate blue-and-gold gate frame and bespoke controls. */
.account-native { grid-template-columns:minmax(0,.72fr) minmax(430px,1fr); }
.account-gate-frame {
  --page-accent:#087aad;
  --page-gem:#69eaff;
  position:relative;
  min-width:0;
  padding:64px 42px 50px;
  border:42px solid transparent;
  border-width:52px 34px 42px;
  border-image:url("./assets/quest-frame-crystal-v1.webp") 315 150 275 / 52px 34px 42px / 0 stretch;
  background:radial-gradient(circle at 50% 0,rgba(73,217,255,.18),transparent 28%),linear-gradient(145deg,rgba(255,254,237,.98),rgba(255,226,154,.96));
  filter:drop-shadow(0 15px 12px rgba(42,60,69,.28));
}
.account-gate-crest {
  position:absolute;
  z-index:3;
  left:50%;
  top:-52px;
  min-width:265px;
  padding:13px 42px 11px;
  border:3px solid #ffe28c;
  border-radius:6px 6px 18px 18px;
  background:linear-gradient(#69351f,#2d1714);
  color:#fff0a7;
  text-align:center;
  transform:translateX(-50%);
  box-shadow:inset 0 0 0 2px #9d5d2b,0 5px 0 #1e0d0b,0 8px 16px rgba(31,15,11,.35);
}
.account-gate-crest span,.account-gate-crest strong { display:block; }
.account-gate-crest span { color:#79eaff; font-size:8px; font-weight:900; letter-spacing:3px; }
.account-gate-crest strong { font:900 19px/1.25 "STKaiti","KaiTi","Microsoft YaHei",serif; }
.account-gate-frame .account-login-card { padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.account-gate-frame .account-login-card .tabs { gap:11px; margin-bottom:22px; }
.account-gate-frame .account-login-card .tabs button {
  min-height:43px;
  border:2px solid #d6a550;
  border-radius:5px 5px 14px 14px;
  background:radial-gradient(circle at 16px 50%,#dca94a 0 3px,transparent 4px),radial-gradient(circle at calc(100% - 16px) 50%,#dca94a 0 3px,transparent 4px),linear-gradient(#fff8d5,#f2d997);
  color:#6c462e;
  font-weight:900;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.4),0 4px 0 #9e642e;
  transition:.16s ease;
}
.account-gate-frame .account-login-card .tabs button:hover { transform:translateY(-2px); filter:brightness(1.04); }
.account-gate-frame .account-login-card .tabs button.active {
  border-color:#bff5ff;
  background:radial-gradient(circle at 16px 50%,#fff 0 2px,#69eaff 3px 6px,transparent 7px),radial-gradient(circle at calc(100% - 16px) 50%,#fff 0 2px,#69eaff 3px 6px,transparent 7px),linear-gradient(#30bedf,#0874aa);
  color:#fff;
  box-shadow:inset 0 0 0 2px rgba(2,77,117,.45),0 4px 0 #07517a,0 0 13px rgba(72,212,246,.35);
  text-shadow:0 2px #07567e;
}
.account-gate-frame .account-login-card input { border-color:#be8d43; background:linear-gradient(#fffef7,#fff5d7); box-shadow:inset 0 2px 5px rgba(99,62,30,.1); }
.account-gate-frame .account-login-card input:focus { border-color:#16a8d1; box-shadow:0 0 0 3px rgba(35,187,224,.2),inset 0 2px 5px rgba(99,62,30,.08); }
.account-gate-frame .account-login-card .btn-primary,
.account-gate-frame .account-login-card .btn-secondary {
  min-height:54px;
  margin-top:14px;
  border:2px solid #c5f4ff;
  border-radius:5px 5px 15px 15px;
  background:radial-gradient(circle at 19px 50%,#fff 0 2px,#66e7ff 3px 7px,transparent 8px),radial-gradient(circle at calc(100% - 19px) 50%,#fff 0 2px,#66e7ff 3px 7px,transparent 8px),linear-gradient(#28badc,#0877ad 60%,#065985);
  color:#fff;
  font-weight:900;
  letter-spacing:1px;
  text-shadow:0 2px #07557d;
  box-shadow:inset 0 0 0 2px rgba(3,75,110,.38),inset 0 10px 14px rgba(185,247,255,.18),0 5px 0 #064d75,0 9px 15px rgba(27,97,125,.24);
  transition:.16s ease;
}
.account-gate-frame .account-login-card .btn-primary:hover,
.account-gate-frame .account-login-card .btn-secondary:hover { transform:translateY(-2px); filter:saturate(1.1) brightness(1.06); box-shadow:inset 0 0 0 2px rgba(3,75,110,.3),0 5px 0 #064d75,0 0 18px rgba(68,218,252,.55); }
.account-gate-frame .account-login-card .btn-primary:active,
.account-gate-frame .account-login-card .btn-secondary:active { transform:translateY(3px); box-shadow:inset 0 5px 12px rgba(0,0,0,.22),0 1px 0 #064d75; }

@media(max-width:900px) {
  .account-native { grid-template-columns:1fr; }
  .account-gate-frame { width:min(100%,620px); margin:0 auto; }
  .native-ornament-shell { padding-left:17px; padding-right:17px; }
}
@media(max-width:600px) {
  .v2-page-mode .page-frame-shell { border-width:12px; border-image-width:12px; }
  .native-ornament-shell { margin-top:34px; padding:50px 8px 15px; border-width:11px; border-image-width:11px; }
  .native-panel-crest { top:-39px; min-height:77px; padding:18px 29px 12px; border-width:21px 13px 12px; border-image-width:21px 13px 12px; }
  .native-panel-crest strong { font-size:18px; }
  .native-ornament-body > .article,.native-ornament-body > .blog-post,.native-ornament-body > .content-page,.native-ornament-body > .news-panel,.native-ornament-body > .news-detail { padding:12px; border-width:8px; border-image-width:8px; }
  .account-native { padding:28px 10px; }
  .account-gate-frame { padding:52px 18px 30px; border-width:43px 20px 32px; border-image-width:43px 20px 32px; }
  .account-gate-crest { top:-45px; min-width:220px; padding-left:25px; padding-right:25px; }
}

/* Replace the former cyan rounded page banner with a Koram-style guild header. */
.v2-page-mode .page-view { padding-top:22px; }
.v2-page-mode .page-view-hero {
  min-height:184px;
  margin-bottom:25px;
  padding:36px 62px 32px;
  overflow:visible;
  border:36px solid transparent;
  border-width:38px 29px 28px;
  border-image:url("./assets/news-frame-guild-v1.webp") 175 125 125 125 / 38px 29px 28px / 0 stretch;
  border-radius:0;
  background:url("/website/n.7k7kimg.cn/uploads/xjhx/pbg_headerpic.jpg") 62% 43% / cover no-repeat;
  box-shadow:none;
  filter:drop-shadow(0 13px 11px rgba(66,35,22,.28));
}
.v2-page-mode .page-view-hero::after {
  inset:-1px;
  background:linear-gradient(90deg,rgba(48,20,18,.97) 0,rgba(74,29,22,.91) 34%,rgba(70,29,22,.56) 49%,rgba(41,23,20,.08) 72%,transparent 100%);
}
.v2-page-mode .page-view-hero::before {
  content:"";
  position:absolute;
  z-index:1;
  left:39px;
  top:25px;
  bottom:23px;
  width:4px;
  border-radius:4px;
  background:linear-gradient(transparent,#ffd774 18%,#fff4b4 50%,#ffd774 82%,transparent);
  box-shadow:0 0 10px rgba(255,195,66,.6);
}
.v2-page-mode .page-view-hero > * { z-index:2; }
.v2-page-mode .back-home {
  min-height:30px;
  padding:5px 16px;
  border:1px solid #ffe69a;
  border-radius:4px 4px 12px 12px;
  background:radial-gradient(circle at 10px 50%,#fffbd1 0 2px,#f2b93e 3px 5px,transparent 6px),linear-gradient(#8d4d27,#4a2118);
  color:#fff3b6;
  box-shadow:inset 0 0 0 1px rgba(255,231,161,.14),0 3px 0 #29110d;
  text-shadow:0 1px #2b100b;
}
.v2-page-mode .back-home:hover { border-color:#fff4bd; background:radial-gradient(circle at 10px 50%,#fff 0 2px,#ffd966 3px 6px,transparent 7px),linear-gradient(#b56b2d,#68291b); transform:translateY(-1px); }
.v2-page-mode .page-view-hero > span { margin-top:12px; color:#65e8ff; text-shadow:0 1px #081d27; }
.v2-page-mode .page-view-hero h1 { margin:3px 0; color:#fff0a5; font-size:34px; text-shadow:0 2px #37130d,0 0 12px rgba(255,182,55,.2); }
.v2-page-mode .page-view-hero p { color:#f0dcc1; text-shadow:0 1px #2b1510; }

@media(max-width:600px) {
  .v2-page-mode .page-view { padding-top:12px; }
  .v2-page-mode .page-view-hero { min-height:170px; padding:31px 34px 27px; border-width:29px 18px 22px; border-image-width:29px 18px 22px; background-position:68% 43%; }
  .v2-page-mode .page-view-hero::after { background:linear-gradient(90deg,rgba(48,20,18,.96),rgba(67,27,21,.82) 66%,rgba(48,20,18,.3)); }
  .v2-page-mode .page-view-hero::before { left:19px; top:23px; bottom:20px; }
  .v2-page-mode .page-view-hero h1 { font-size:28px; }
}

/* Native QQ page action — one unmistakable direct-join control. */
.native-ornament-body .qq-card { max-width:620px; margin:16px auto; padding:30px; border:13px solid transparent; border-image:url("./assets/card-frame-jeweled-v1.webp") 122 / 13px / 0 stretch; background:linear-gradient(145deg,#fffdf0,#ffe6a7); text-align:center; }
.native-ornament-body .qq-card h3 { margin:0 0 8px; color:#a9451d; }
.native-ornament-body .qq-number { color:#087dac; font:900 35px/1.2 Georgia,serif; letter-spacing:4px; user-select:all; }
.native-ornament-body .qq-hint,.native-ornament-body .qq-note { color:#6c5140; }
.native-ornament-body .qq-actions { display:flex; justify-content:center; margin:20px 0 8px; }
.native-ornament-body .qq-direct-join {
  min-width:270px;
  min-height:54px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 40px;
  border:2px solid #c4f3ff;
  border-radius:5px 5px 15px 15px;
  background:radial-gradient(circle at 18px 50%,#fff 0 2px,#67e8ff 3px 7px,transparent 8px),radial-gradient(circle at calc(100% - 18px) 50%,#fff 0 2px,#67e8ff 3px 7px,transparent 8px),linear-gradient(#2cc1e0,#0877ad 60%,#065783);
  color:#fff;
  font-weight:900;
  letter-spacing:1px;
  text-decoration:none;
  text-shadow:0 2px #07547a;
  box-shadow:inset 0 0 0 2px rgba(2,71,106,.38),0 5px 0 #064b72,0 9px 16px rgba(30,103,132,.27);
  transition:.16s ease;
}
.native-ornament-body .qq-direct-join:hover { color:#fff; transform:translateY(-2px); filter:saturate(1.1) brightness(1.06); box-shadow:inset 0 0 0 2px rgba(2,71,106,.28),0 5px 0 #064b72,0 0 18px rgba(77,222,255,.58); }
.native-ornament-body .qq-direct-join:active { transform:translateY(3px); box-shadow:inset 0 5px 12px rgba(0,0,0,.22),0 1px 0 #064b72; }

/* The complete artwork page is image-only: no captions beneath gallery cards. */
body[data-v2-page="artwork"] .native-ornament-body .artwork-lead { display:none; }
body[data-v2-page="artwork"] .native-ornament-body .art-gallery .slot { padding:7px; font-size:0; line-height:0; }
body[data-v2-page="artwork"] .native-ornament-body .art-gallery .slot img { margin:0; }