@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@700;900&display=swap");

:root {
  --panel: rgba(4, 14, 24, .82);
  --line: rgba(111, 181, 255, .25);
  --line-strong: rgba(155, 216, 255, .46);
  --text: #e9f3ff;
  --muted: #a8b5c4;
  --gold: #d4af37;
  --gold-soft: #e7c885;
  --blue: #62c2ff;
}

* {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}

html {
  background: #06090e;
}

body {
  margin: 0;
  min-width: 1180px;
  color: var(--text);
  font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  background:
    radial-gradient(circle at 50% 0, rgba(92, 180, 255, .12), transparent 34%),
    linear-gradient(180deg, rgba(5, 8, 14, .38), rgba(5, 8, 14, .9)),
    url("./assets/images/reference_page_bg.jpg") center top / cover fixed no-repeat;
  letter-spacing: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input {
  font: inherit;
}

a,
button,
input,
textarea,
select,
strong,
em,
small,
li,
dt,
dd,
p,
h1,
h2,
h3 {
  font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
}

.site-shell {
  width: min(1700px, calc(100% - 56px));
  margin: 0 auto;
  padding: 28px 0 36px;
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 72fr) minmax(360px, 28fr);
  gap: 18px;
  align-items: start;
}

.home-card,
.side-panel {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(2, 8, 14, .66);
  box-shadow: 0 0 30px rgba(0, 0, 0, .55);
}

.home-card {
  overflow: hidden;
}

.site-header {
  height: 64px;
  display: flex;
  align-items: center;
  padding: 0 22px;
  border-bottom: 1px solid rgba(111, 181, 255, .2);
  background: linear-gradient(180deg, rgba(7, 19, 32, .94), rgba(2, 8, 14, .96));
  box-shadow: inset 0 -1px 0 rgba(105, 190, 255, .18);
}

.site-logo img {
  display: block;
  width: 180px;
  height: auto;
}

.site-nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
}

.site-nav a {
  height: 64px;
  display: flex;
  align-items: center;
  position: relative;
  color: #dce8f4;
  font-size: 14px;
  font-weight: 900;
}

.site-nav a.active {
  color: #fff;
}

.site-nav a.active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 62px;
  height: 2px;
  transform: translateX(-50%);
  background: #65c7ff;
  box-shadow: 0 0 16px #65c7ff;
}

.account-actions {
  display: flex;
  gap: 14px;
}

.account-actions a {
  width: 66px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(130, 195, 255, .35);
  border-radius: 4px;
  background: rgba(2, 8, 15, .75);
  font-size: 14px;
  font-weight: 900;
}

.account-actions .register {
  border-color: rgba(212, 175, 55, .6);
  color: #f4d999;
  box-shadow: inset 0 0 16px rgba(171, 115, 35, .18);
}

.hero-banner {
  height: 640px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(3, 7, 13, 0) 0%, rgba(3, 7, 13, .12) 70%, rgba(3, 7, 13, .78) 100%),
    url("./assets/images/reference_hero_visual.png") center top / auto 590px no-repeat,
    #03070d;
}

.hero-banner img {
  display: none;
}

.quick-links {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: -40px 22px 0;
}

.quick-links a {
  height: 78px;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 9px 16px;
  border: 1px solid rgba(212, 175, 55, .46);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(13, 24, 36, .92), rgba(4, 9, 16, .96));
  box-shadow: 0 0 18px rgba(0, 0, 0, .52), inset 0 0 18px rgba(90, 170, 255, .06);
}

.quick-links a:hover {
  border-color: rgba(232, 206, 134, .82);
  box-shadow: 0 0 20px rgba(100, 190, 255, .24), inset 0 0 18px rgba(212, 175, 55, .08);
}

.quick-links img {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  object-fit: contain;
}

.quick-links b {
  display: block;
  color: #f0d9ad;
  font-size: 18px;
  font-weight: 900;
  text-shadow: 0 1px 0 #000;
}

.quick-links small {
  display: block;
  margin-top: 3px;
  color: #d0a666;
  font-size: 11px;
  letter-spacing: .4px;
  font-weight: 900;
}

.news-panel {
  margin: 20px 22px 24px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(4, 14, 24, .82);
  box-shadow: inset 0 0 22px rgba(80, 160, 255, .05);
}

.panel-title {
  height: 56px;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 0 24px;
}

.panel-title span {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, .65), transparent);
}

.panel-title h2 {
  margin: 0;
  color: #edf3f8;
  font-size: 22px;
  letter-spacing: 4px;
}

.panel-title a {
  color: #6fc9ff;
  font-size: 14px;
  font-weight: 900;
}

.news-list {
  margin: 0;
  padding: 0 48px 16px;
  list-style: none;
}

.news-list li {
  min-height: 31px;
  display: grid;
  grid-template-columns: 112px 96px 1fr;
  align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, .045);
}

.news-list time {
  color: #a6b3c2;
  font-size: 14px;
}

.news-list em {
  width: 74px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  background: rgba(0, 95, 160, .35);
  color: var(--blue);
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
}

.news-list a {
  color: #e9f3ff;
  font-size: 15px;
  font-weight: 800;
}

.article-guide-list li {
  grid-template-columns: 96px minmax(0, 1fr);
}

.article-guide-list em {
  width: 70px;
}

.article-guide-list a {
  min-height: 31px;
  display: flex;
  align-items: center;
}

.side-column {
  display: grid;
  gap: 12px;
}

.side-panel {
  padding: 18px;
  background: linear-gradient(180deg, rgba(8, 19, 31, .84), rgba(4, 10, 18, .88));
  box-shadow: 0 0 24px rgba(0, 0, 0, .42), inset 0 0 18px rgba(80, 160, 255, .04);
}

.side-panel h2 {
  margin: 0 0 16px;
  color: #dce6ef;
  font-size: 18px;
  font-weight: 900;
}

.login-panel form,
.community-links {
  display: grid;
  gap: 12px;
}

.login-panel label {
  display: grid;
  gap: 6px;
}

.login-panel span,
.server-panel dt {
  color: #aab7c6;
  font-size: 14px;
}

.login-panel input {
  height: 38px;
  width: 100%;
  border: 1px solid rgba(130, 195, 255, .24);
  border-radius: 4px;
  outline: none;
  color: #edf7ff;
  background: rgba(0, 6, 12, .72);
  box-shadow: inset 0 0 14px rgba(0, 0, 0, .35);
}

.login-panel input:focus {
  border-color: rgba(120, 205, 255, .65);
  box-shadow: 0 0 12px rgba(98, 194, 255, .16), inset 0 0 14px rgba(0, 0, 0, .35);
}

.login-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 4px;
}

.login-actions button,
.login-actions a,
.community-links a {
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(212, 175, 55, .52);
  border-radius: 4px;
  color: #f3dfb2;
  background: linear-gradient(180deg, rgba(41, 31, 14, .88), rgba(8, 15, 24, .94));
  box-shadow: inset 0 0 14px rgba(212, 175, 55, .08);
  font-weight: 900;
  cursor: pointer;
}

.login-actions button {
  color: #f6fbff;
  border-color: rgba(120, 195, 255, .5);
  background: linear-gradient(180deg, rgba(13, 42, 66, .9), rgba(4, 12, 22, .96));
}

.server-panel dl {
  margin: 0;
}

.server-panel div {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.server-panel .pair {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  gap: 8px;
}

.server-panel dd {
  margin: 0;
  color: #f3f7fb;
  font-size: 15px;
  font-weight: 900;
}

.server-panel .online {
  color: #47ff89;
}

.focus-list,
.system-link-grid,
.feature-badge-grid {
  display: grid;
  gap: 10px;
}

.focus-list a {
  display: grid;
  gap: 4px;
  min-height: 58px;
  padding: 11px 12px;
  border: 1px solid rgba(111, 181, 255, .22);
  border-radius: 4px;
  color: #e9f3ff;
  background:
    radial-gradient(circle at 10% 20%, rgba(74, 178, 255, .16), transparent 38%),
    linear-gradient(180deg, rgba(8, 24, 38, .78), rgba(3, 10, 18, .9));
  box-shadow: inset 0 0 16px rgba(91, 181, 255, .04);
}

.focus-list a:hover,
.system-link-grid a:hover,
.community-links a:hover {
  border-color: rgba(232, 206, 134, .72);
  box-shadow: 0 0 16px rgba(83, 184, 255, .18), inset 0 0 18px rgba(212, 175, 55, .08);
}

.focus-list b {
  color: #ffe8a7;
  font-size: 15px;
  font-weight: 950;
}

.focus-list span {
  color: #9fc7e8;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.45;
}

.system-link-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.system-link-grid a {
  min-height: 72px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 10px;
  border: 1px solid rgba(111, 181, 255, .24);
  border-radius: 4px;
  color: #eaf6ff;
  background:
    linear-gradient(135deg, rgba(12, 33, 51, .86), rgba(3, 10, 18, .94));
}

.system-link-grid b {
  color: #f0d9ad;
  font-size: 14px;
  font-weight: 950;
}

.system-link-grid span {
  color: #75d9ff;
  font-size: 11px;
  font-weight: 800;
}

.feature-badge-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.feature-badge-grid span {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 8px;
  border: 1px solid rgba(212, 175, 55, .34);
  border-radius: 4px;
  color: #f1dfb7;
  background: linear-gradient(180deg, rgba(35, 28, 14, .68), rgba(5, 13, 22, .88));
  box-shadow: inset 0 0 14px rgba(212, 175, 55, .06);
  font-size: 13px;
  font-weight: 900;
}

.official-contact-section {
  margin-top: 0;
}

.official-contact-card {
  display: grid;
  gap: 0;
  padding: 0;
  background:
    linear-gradient(135deg, rgba(8, 18, 32, 0.94), rgba(3, 8, 16, 0.96));
  border: 1px solid rgba(90, 170, 255, 0.34);
  border-radius: 5px;
  overflow: hidden;
  box-shadow:
    inset 0 0 18px rgba(70, 150, 255, 0.08),
    0 0 22px rgba(0, 0, 0, 0.45);
}

.contact-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  min-height: 118px;
  padding: 18px 20px;
}

.contact-row + .contact-row {
  border-top: 1px solid rgba(120, 180, 255, .16);
}

.contact-row-community {
  background:
    linear-gradient(90deg, rgba(28, 22, 10, .66), rgba(4, 10, 18, .16));
}

.contact-row-copy {
  min-width: 0;
}

.contact-row-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 7px;
  white-space: nowrap;
}

.contact-dot {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 999px;
  background: #4fe6ff;
  box-shadow: 0 0 12px rgba(80, 210, 255, .72);
}

.contact-dot.gold {
  background: #f1c35b;
  box-shadow: 0 0 12px rgba(240, 190, 80, .72);
}

.contact-row h3 {
  margin: 0;
  color: #f8fbff;
  font-size: 18px;
  font-weight: 900;
}

.contact-row p {
  margin: 0;
  color: #aac7e6;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.6;
}

.contact-id {
  display: inline-block;
  padding: 4px 9px;
  color: #42e6ff;
  border: 1px solid rgba(70, 200, 255, 0.45);
  background: rgba(20, 80, 120, 0.18);
  border-radius: 3px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.contact-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.zero-btn {
  min-width: 116px;
  padding: 9px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 900;
  font-size: 13px;
  text-align: center;
  text-decoration: none;
  transition: 0.18s ease;
}

.zero-btn.blue,
.zero-btn.blue-outline {
  color: #f6fbff;
  background: linear-gradient(180deg, rgba(20, 80, 120, 0.95), rgba(6, 24, 42, 0.98));
  border: 1px solid rgba(90, 190, 255, 0.58);
  box-shadow: inset 0 0 12px rgba(80, 180, 255, 0.12);
}

.zero-btn.blue-outline {
  color: #bdefff;
  background: linear-gradient(180deg, rgba(8, 28, 46, .78), rgba(3, 12, 22, .96));
  border-color: rgba(90, 190, 255, .36);
}

.zero-btn.gold {
  color: #ffe7a8;
  background: linear-gradient(180deg, rgba(120, 82, 18, 0.95), rgba(35, 22, 8, 0.98));
  border: 1px solid rgba(220, 170, 70, 0.75);
  box-shadow: inset 0 0 12px rgba(255, 190, 70, 0.12);
}

.zero-btn:hover {
  filter: brightness(1.18);
  transform: translateY(-1px);
}

.hot-panel ul,
.feature-panel ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hot-panel li + li,
.feature-panel li + li {
  border-top: 1px solid rgba(255, 255, 255, .055);
}

.hot-panel a,
.feature-panel li {
  min-height: 38px;
  display: flex;
  align-items: center;
  color: #e9f3ff;
  font-size: 15px;
  font-weight: 800;
}

.hot-panel a::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 10px var(--blue);
}

.feature-panel li {
  color: #f1dfb7;
}

.community-links {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.community-links a {
  min-height: 38px;
  height: auto;
  padding: 8px 10px;
  text-align: center;
}


.info-shell {
  padding-top: 28px;
}

.info-header {
  border: 1px solid var(--line);
  border-radius: 4px 4px 0 0;
}

.info-page {
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 4px 4px;
  background: rgba(2, 8, 14, .68);
  box-shadow: 0 0 30px rgba(0, 0, 0, .55);
  padding: 34px 34px 42px;
}

.info-title-panel {
  min-height: 150px;
  display: grid;
  place-items: center;
  text-align: center;
  border: 1px solid rgba(111, 181, 255, .22);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(5, 16, 28, .72), rgba(3, 9, 16, .86)), radial-gradient(circle at 50% 0, rgba(98, 194, 255, .15), transparent 44%);
  box-shadow: inset 0 0 28px rgba(80, 160, 255, .055);
}

.info-title-panel h1 {
  margin: 0;
  font-family: "Noto Sans TC", "Source Han Sans TC", "Microsoft JhengHei", sans-serif;
  color: #f5fbff;
  font-size: 44px;
  font-weight: 950;
  line-height: 1.25;
  letter-spacing: 0;
  text-shadow:
    0 0 8px rgba(80, 190, 255, .55),
    0 0 18px rgba(30, 120, 220, .35),
    0 2px 0 rgba(0, 0, 0, .75);
}

.info-title-panel p {
  margin: 10px 0 0;
  color: #aebdca;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0;
}

.page-title {
  font-family: "Noto Sans TC", "Source Han Sans TC", "Microsoft JhengHei", sans-serif;
  font-size: 44px;
  font-weight: 950;
  line-height: 1.25;
  letter-spacing: 0;
  color: #f4fbff;
  text-shadow:
    0 0 8px rgba(80, 190, 255, .55),
    0 0 18px rgba(30, 120, 220, .35),
    0 2px 0 rgba(0, 0, 0, .75);
}

.page-title .accent,
.info-title-panel h1 .accent,
.promotion-hero-copy h1 .accent {
  color: #22e6ff;
  text-shadow:
    0 0 8px rgba(34, 230, 255, .72),
    0 0 18px rgba(34, 160, 255, .42),
    0 2px 0 rgba(0, 0, 0, .8);
}

.page-subtitle {
  margin-top: 10px;
  font-size: 15px;
  color: #8fb4d8;
  letter-spacing: 0;
}

.title-line {
  width: 210px;
  height: 1px;
  display: block;
  margin-bottom: 12px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, .78), transparent);
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 22px;
}

.category-card {
  min-height: 152px;
  display: grid;
  grid-template-columns: 58px 1fr;
  grid-template-rows: auto 1fr auto;
  column-gap: 16px;
  align-items: start;
  padding: 20px;
  border: 1px solid rgba(111, 181, 255, .25);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(8, 20, 33, .86), rgba(3, 9, 16, .92));
  box-shadow: inset 0 0 18px rgba(80, 160, 255, .04), 0 0 20px rgba(0, 0, 0, .3);
}

.category-card:hover {
  border-color: rgba(155, 216, 255, .62);
  box-shadow: 0 0 22px rgba(98, 194, 255, .16), inset 0 0 18px rgba(212, 175, 55, .055);
}

.download-page {
  display: grid;
  gap: 22px;
}

.download-title-panel {
  min-height: 132px;
}

.download-section {
  display: grid;
  gap: 12px;
}

.download-section h2 {
  margin: 0;
  color: #ffe7a6;
  font-size: 22px;
  font-weight: 950;
}

.download-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 22px;
  align-items: center;
  padding: 24px 26px;
  border: 1px solid rgba(111, 181, 255, .28);
  border-radius: 4px;
  background:
    linear-gradient(135deg, rgba(8, 22, 36, .92), rgba(2, 8, 14, .94));
  box-shadow: inset 0 0 22px rgba(80, 160, 255, .055);
}

.download-label {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 10px;
  padding: 5px 10px;
  border: 1px solid rgba(220, 170, 70, .58);
  border-radius: 3px;
  color: #ffe7a6;
  background: rgba(96, 63, 10, .24);
  font-size: 13px;
  font-weight: 950;
}

.download-card h3 {
  margin: 0 0 8px;
  color: #f7fbff;
  font-size: 28px;
  font-weight: 950;
}

.download-card p {
  margin: 0 0 12px;
  color: #b9d5ef;
  font-size: 15px;
  font-weight: 800;
}

.download-card ul,
.download-notes ul {
  margin: 0;
  padding-left: 20px;
  color: #e6f6ff;
  font-weight: 800;
  line-height: 1.8;
}

.download-primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 168px;
  min-height: 46px;
  padding: 0 24px;
  border: 1px solid rgba(220, 170, 70, .78);
  border-radius: 4px;
  color: #ffe7a6;
  background:
    linear-gradient(180deg, rgba(120, 82, 18, .95), rgba(35, 22, 8, .98));
  box-shadow: inset 0 0 12px rgba(255, 190, 70, .12), 0 0 18px rgba(0, 0, 0, .34);
  font-size: 17px;
  font-weight: 950;
  text-decoration: none;
}

.download-primary-btn:hover {
  filter: brightness(1.16);
}

.download-notes {
  padding: 18px 20px;
  border: 1px solid rgba(111, 181, 255, .22);
  border-radius: 4px;
  background: rgba(2, 10, 18, .35);
}

.sponsor-page {
  padding-bottom: 72px;
}

.sponsor-title-panel {
  margin-bottom: 30px;
}

.sponsor-section {
  margin-top: 28px;
}

.sponsor-section h2 {
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: #ffe2a4;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .04em;
}

.sponsor-section h2::before,
.sponsor-section h2::after {
  content: "";
  height: 1px;
  background: rgba(212, 175, 55, .55);
}

.sponsor-section h2::before {
  width: 46px;
}

.sponsor-section h2::after {
  flex: 1;
}

.sponsor-package-grid,
.sponsor-service-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.sponsor-package-card,
.sponsor-service-grid article,
.sponsor-rate-card {
  border: 1px solid rgba(90, 170, 255, .28);
  background:
    linear-gradient(135deg, rgba(8, 20, 34, .88), rgba(2, 8, 15, .92));
  box-shadow: inset 0 0 18px rgba(80, 170, 255, .06);
}

.sponsor-package-card {
  min-height: 138px;
  padding: 18px 20px;
}

.sponsor-package-card span {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 14px;
  padding: 4px 10px;
  color: #ffe4a7;
  border: 1px solid rgba(212, 175, 55, .55);
  background: rgba(118, 82, 20, .22);
  font-size: 13px;
  font-weight: 900;
}

.sponsor-package-card h3 {
  margin: 0 0 8px;
  color: #ffe6ad;
  font-size: 19px;
  font-weight: 900;
}

.sponsor-package-card p,
.sponsor-rate-card p {
  margin: 0;
  color: #bcd7f2;
  font-size: 14px;
  line-height: 1.7;
}

.sponsor-service-grid article {
  min-height: 72px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  color: #f3fbff;
  font-size: 17px;
  font-weight: 900;
}

.sponsor-notice-section,
.sponsor-rate-section {
  padding: 0;
}

.sponsor-notice-list {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  list-style: none;
}

.sponsor-notice-list li {
  position: relative;
  padding-left: 18px;
  color: #dcefff;
  font-size: 15px;
  line-height: 1.7;
}

.sponsor-notice-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d4af37;
  box-shadow: 0 0 10px rgba(212, 175, 55, .55);
}

.sponsor-process {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: center;
}

.sponsor-process span {
  min-height: 58px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(90, 170, 255, .32);
  background: rgba(5, 16, 28, .72);
  color: #f3fbff;
  font-size: 16px;
  font-weight: 900;
}

.sponsor-process b {
  display: none;
}

.sponsor-rate-card {
  padding: 18px 20px;
}

.sponsor-rate-card strong {
  display: block;
  margin-bottom: 6px;
  color: #ffe2a4;
  font-size: 18px;
  font-weight: 900;
}

.sponsor-product-card {
  border: 1px solid rgba(90, 170, 255, .28);
  background:
    linear-gradient(135deg, rgba(8, 20, 34, .88), rgba(2, 8, 15, .92));
  box-shadow: inset 0 0 18px rgba(80, 170, 255, .06);
}

.sponsor-product-card {
  padding: 20px 22px;
}

.sponsor-page .sponsor-package-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sponsor-pack-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.sponsor-pack-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid rgba(90, 170, 255, .22);
  background: rgba(4, 14, 25, .62);
}

.sponsor-pack-item img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  image-rendering: auto;
}

.sponsor-pack-item span {
  color: #f3fbff;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.35;
}

.sponsor-pack-ability,
.sponsor-pack-reward {
  margin: 14px 0;
  padding: 12px 14px;
  border: 1px solid rgba(212, 175, 55, .32);
  background: rgba(70, 48, 12, .14);
}

.sponsor-pack-ability > strong,
.sponsor-pack-reward > strong {
  display: block;
  margin-bottom: 10px;
  color: #ffe4a7;
  font-size: 15px;
  font-weight: 900;
}

.sponsor-pack-ability div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.sponsor-pack-ability span {
  display: inline-flex;
  padding: 4px 8px;
  border: 1px solid rgba(90, 170, 255, .32);
  background: rgba(10, 34, 54, .45);
  color: #dff7ff;
  font-size: 13px;
  font-weight: 900;
}

.sponsor-pack-reward div {
  display: grid;
  gap: 8px;
}

.sponsor-pack-reward span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #dff7ff;
  font-size: 14px;
  font-weight: 900;
}

.sponsor-pack-reward img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.sponsor-pack-notes {
  margin: 0 0 14px;
  padding-left: 20px;
  color: #bcd7f2;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.75;
}

.sponsor-package-main {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 16px;
  align-items: center;
  margin: 14px 0;
}

.sponsor-package-main img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  padding: 8px;
  border: 1px solid rgba(90, 170, 255, .3);
  background: rgba(3, 12, 22, .78);
  box-shadow: inset 0 0 14px rgba(80, 170, 255, .08);
}

.sponsor-package-main p {
  margin: 6px 0 0;
  color: #bcd7f2;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.55;
}

.sponsor-summary-list {
  display: grid;
  gap: 7px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.sponsor-summary-list li {
  color: #e5f5ff;
  font-size: 14px;
  font-weight: 900;
}

.sponsor-summary-list li::before {
  content: "・";
  color: #d4af37;
}

.zero-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 126px;
  min-height: 40px;
  padding: 9px 18px;
  border: 1px solid rgba(212, 175, 55, .58);
  border-radius: 3px;
  color: #f7df9e;
  background: linear-gradient(180deg, rgba(86, 58, 12, .72), rgba(24, 17, 7, .88));
  box-shadow: inset 0 0 12px rgba(240, 199, 91, .08);
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}

.zero-action-btn:hover {
  color: #fff1bd;
  border-color: rgba(255, 214, 126, .82);
  filter: brightness(1.12);
}

.zero-action-btn-secondary {
  color: #e8f6ff;
  border-color: rgba(90, 170, 255, .42);
  background: linear-gradient(180deg, rgba(8, 20, 34, .94), rgba(3, 10, 18, .98));
  box-shadow: inset 0 0 10px rgba(90, 170, 255, .08);
}

.zero-action-btn-secondary:hover {
  color: #fff;
  border-color: rgba(126, 208, 255, .62);
}

/* Homepage friendship links */
.friend-links-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin-top: 20px;
  padding: 22px 24px;
  border: 1px solid rgba(59, 116, 148, .48);
  background:
    linear-gradient(90deg, transparent, rgba(212, 175, 55, .08), transparent),
    rgba(2, 12, 21, .9);
  box-shadow: inset 0 0 24px rgba(34, 147, 208, .06);
}

.friend-links-heading {
  min-width: 130px;
  text-align: right;
}

.friend-links-heading span {
  display: block;
  color: #45c9ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
}

.friend-links-heading h2 {
  margin: 4px 0 0;
  color: #f4d47f;
  font-size: 19px;
  letter-spacing: .16em;
}

.partner-main-link {
  display: block;
  width: min(624px, 100%);
  aspect-ratio: 39 / 5;
  border: 1px solid rgba(244, 212, 127, .42);
  background: #f1f1ef url("./assets/images/GkpO873.gif?v=20260720") center / 100% 100% no-repeat;
  box-shadow: 0 0 16px rgba(0, 0, 0, .5);
  overflow: hidden;
  line-height: 0;
  transition: border-color .18s ease, filter .18s ease, transform .18s ease;
}

.partner-main-link:hover {
  border-color: rgba(255, 227, 148, .9);
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.partner-main-link img {
  display: block;
  width: 100%;
  height: auto;
}

.partner-corner-link {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 80;
  display: block;
  width: 88px;
  height: 31px;
  border: 1px solid rgba(244, 212, 127, .58);
  background: #080d10 url("./assets/friend-links/partner-corner.gif") center / 88px 31px no-repeat;
  box-shadow: 0 3px 14px rgba(0, 0, 0, .68);
  line-height: 0;
  transition: filter .18s ease, transform .18s ease;
}

.partner-corner-link:hover {
  filter: brightness(1.12);
  transform: translateY(-2px);
}

.partner-corner-link img {
  display: block;
  width: 88px;
  height: 31px;
}

@media (max-width: 700px) {
  .friend-links-footer {
    flex-direction: column;
    gap: 12px;
    padding: 18px 14px;
  }

  .friend-links-heading {
    min-width: 0;
    text-align: center;
  }

  .partner-corner-link {
    right: max(8px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    transform: scale(.86);
    transform-origin: right bottom;
  }

  .partner-corner-link:hover {
    transform: scale(.86) translateY(-2px);
  }
}

/* Final override: sponsor service prices are content, not right-aligned header values. */
.sponsor-service-card .sponsor-service-title {
  display: block !important;
  margin-bottom: 8px !important;
  text-align: left !important;
}

.sponsor-service-card .sponsor-service-price {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 0 10px !important;
  text-align: left !important;
}

.sponsor-service-card .sponsor-service-price span,
.sponsor-service-card .sponsor-service-price strong {
  display: inline !important;
  float: none !important;
  position: static !important;
  margin: 0 !important;
  text-align: left !important;
}

.sponsor-service-card .sponsor-service-price span {
  color: #bcd7f2 !important;
  font-size: 15px !important;
}

.sponsor-service-card .sponsor-service-price strong {
  color: #ffe6ad !important;
  font-size: 21px !important;
}

.sponsor-service-card .sponsor-service-options li {
  display: block !important;
  grid-template-columns: none !important;
}

.gpt-readable-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.gpt-readable-list li {
  padding: 12px 14px;
  border: 1px solid rgba(90, 170, 255, .24);
  background: rgba(4, 12, 22, .72);
  color: #d7ecff;
}

.gpt-readable-list a {
  color: #ffe7a8;
  font-weight: 900;
  text-decoration: none;
}

.gpt-readable-list p {
  margin: 6px 0 0;
  color: #9bbfe1;
  line-height: 1.6;
}

.sponsor-package-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0 0 14px;
  color: #bcd7f2;
  font-size: 14px;
  font-weight: 900;
}

.sponsor-package-price strong {
  color: #ffe6ad;
  font-size: 20px;
  font-weight: 950;
}

.sponsor-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.sponsor-card-actions .sponsor-card-link {
  margin-top: 0;
}

.sponsor-card-actions .sponsor-card-link:hover {
  transform: translateY(-1px);
}

.sponsor-pack-detail {
  display: grid;
  gap: 24px;
}

.sponsor-pack-hero {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 18px;
  align-items: center;
  padding: 22px 24px;
  border: 1px solid rgba(90, 170, 255, .28);
  background:
    linear-gradient(135deg, rgba(8, 20, 34, .88), rgba(2, 8, 15, .92));
  box-shadow: inset 0 0 18px rgba(80, 170, 255, .06);
}

.sponsor-pack-hero img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  padding: 10px;
  border: 1px solid rgba(212, 175, 55, .38);
  background: rgba(3, 12, 22, .82);
}

.sponsor-pack-hero span {
  color: #62c2ff;
  font-size: 15px;
  font-weight: 900;
}

.sponsor-pack-hero h2 {
  margin: 4px 0 6px;
  color: #ffe6ad;
  font-size: 26px;
  font-weight: 900;
}

.sponsor-pack-hero p {
  margin: 0;
  color: #bcd7f2;
  font-size: 15px;
  font-weight: 800;
}

.sponsor-pack-hero .zero-action-btn {
  margin-top: 14px;
}

.sponsor-ability-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 16px;
  border: 1px solid rgba(90, 170, 255, .22);
  background: rgba(4, 14, 25, .62);
}

.sponsor-ability-list span {
  color: #dff7ff;
  font-size: 15px;
  font-weight: 900;
}

.sponsor-daily-rewards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.sponsor-daily-rewards article {
  padding: 16px;
  border: 1px solid rgba(90, 170, 255, .24);
  background: rgba(4, 14, 25, .62);
}

.sponsor-daily-rewards strong {
  display: block;
  color: #ffe6ad;
  font-size: 16px;
  font-weight: 900;
}

.sponsor-daily-rewards span {
  display: block;
  margin-top: 8px;
  color: #62c2ff;
  font-size: 22px;
  font-weight: 900;
}

.sponsor-back-link {
  justify-self: start;
  color: #7ee4ff;
  font-size: 15px;
  font-weight: 900;
}

.sponsor-card-head,
.sponsor-service-title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  margin-bottom: 8px;
}

.sponsor-card-head span {
  display: inline-flex;
  padding: 4px 10px;
  border: 1px solid rgba(212, 175, 55, .55);
  color: #ffe4a7;
  background: rgba(118, 82, 20, .22);
  font-size: 13px;
  font-weight: 900;
}

.sponsor-card-head strong,
.sponsor-service-card strong {
  color: #62c2ff;
  font-size: 15px;
  font-weight: 900;
}

.sponsor-product-card h3,
.sponsor-service-card h3 {
  margin: 0;
  color: #ffe6ad;
  font-size: 20px;
  font-weight: 900;
}

.sponsor-item-list {
  margin: 0 0 14px;
  padding-left: 20px;
  color: #e5f5ff;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.8;
}

.sponsor-buy-note,
.sponsor-service-card p,
.sponsor-service-note,
.sponsor-rate-note {
  margin: 0;
  color: #bcd7f2;
  font-size: 14px;
  line-height: 1.7;
}

.sponsor-card-link:not(.zero-action-btn) {
  display: inline-flex;
  margin-top: 14px;
  color: #7ee4ff;
  font-size: 15px;
  font-weight: 900;
}

.sponsor-card-link:not(.zero-action-btn):hover {
  color: #fff;
  text-shadow: 0 0 12px rgba(98, 194, 255, .65);
}

.sponsor-service-list {
  display: block;
  border-top: 1px solid rgba(90, 170, 255, .22);
  border-bottom: 1px solid rgba(90, 170, 255, .16);
}

.sponsor-service-card {
  min-height: 0;
  padding: 18px 0;
  border-bottom: 1px solid rgba(90, 170, 255, .16);
  background: transparent;
  box-shadow: none;
}

.sponsor-service-card:last-child {
  border-bottom: 0;
}

.sponsor-service-price {
  display: flex;
  align-items: baseline;
  gap: 0;
  margin: 0 0 10px;
  color: #bcd7f2;
  font-size: 15px;
  font-weight: 950;
  letter-spacing: .02em;
}

.sponsor-service-price span {
  color: #bcd7f2;
  font-size: 15px;
  font-weight: 900;
}

.sponsor-service-price strong {
  color: #ffe6ad;
  font-size: 21px;
  font-weight: 950;
  line-height: 1;
}

.sponsor-service-price-text {
  margin: 0 0 10px !important;
  color: #62c2ff !important;
  font-size: 17px !important;
  font-weight: 950 !important;
  line-height: 1.45 !important;
  text-align: left !important;
}

.sponsor-service-options {
  display: grid;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.sponsor-service-options li {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
}

.sponsor-service-options span {
  display: block;
  color: #f3fbff;
  font-size: 14px;
  font-weight: 900;
}

.sponsor-service-options strong {
  display: block;
  margin-top: 2px;
  color: #62c2ff;
  font-size: 14px;
  white-space: nowrap;
}

.sponsor-service-options em {
  display: block;
  margin-top: 2px;
  color: #bcd7f2;
  font-size: 13px;
  font-style: normal;
  line-height: 1.55;
}

.sponsor-service-action {
  margin-top: 14px;
}

.sponsor-service-action:hover {
  transform: translateY(-1px);
}

.sponsor-service-subnote {
  margin-top: 10px !important;
  padding-top: 0;
  border-top: 0;
  color: #e5f5ff !important;
  font-weight: 800;
}

.sponsor-service-note {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(212, 175, 55, .38);
  background: rgba(90, 60, 16, .16);
  color: #ffe4a7;
  font-weight: 900;
}

.sponsor-rate-grid {
  display: block;
  border-top: 1px solid rgba(90, 170, 255, .22);
  border-bottom: 1px solid rgba(90, 170, 255, .16);
}

.sponsor-rate-grid article {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(180px, 240px) 1fr;
  align-items: center;
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(90, 170, 255, .14);
  background: transparent;
  box-shadow: none;
}

.sponsor-rate-grid article:last-child {
  border-bottom: 0;
}

.sponsor-rate-grid span {
  display: block;
  margin-bottom: 0;
  color: #bcd7f2;
  font-size: 14px;
  font-weight: 800;
}

.sponsor-rate-grid strong {
  display: block;
  color: #ffe6ad;
  font-size: 20px;
  font-weight: 900;
}

.sponsor-rate-grid article.sponsor-rate-featured {
  padding-left: 12px;
  border-left: 2px solid rgba(212, 175, 55, .75);
  background: linear-gradient(90deg, rgba(90, 62, 14, .16), transparent);
}

.sponsor-rate-grid article.sponsor-rate-featured span {
  color: #ffe4a7;
  font-size: 15px;
}

.sponsor-rate-grid article.sponsor-rate-featured strong {
  color: #fff2bd;
  font-size: 23px;
}

.sponsor-rate-note {
  margin-top: 12px;
}

.category-icon {
  grid-row: 1 / span 2;
  width: 50px;
  height: 50px;
  display: block;
  position: relative;
  border: 1px solid rgba(178, 226, 255, .55);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(126, 213, 255, .38), rgba(20, 56, 83, .72) 45%, rgba(3, 10, 18, .94) 72%);
  box-shadow: 0 0 14px rgba(98, 194, 255, .24), inset 0 0 16px rgba(182, 230, 255, .12);
}

.category-icon::before,
.category-icon::after {
  content: "";
  position: absolute;
  inset: 11px;
  border: 1px solid rgba(218, 244, 255, .72);
  transform: rotate(45deg);
}

.category-icon::after {
  inset: 18px;
  background: rgba(111, 198, 255, .32);
  box-shadow: 0 0 12px rgba(111, 198, 255, .42);
}

.category-card strong {
  color: #f4e1b8;
  font-size: 20px;
  font-weight: 900;
  text-shadow: 0 1px 0 #000;
}

.category-card p {
  margin: 8px 0 0;
  color: #b8c5d0;
  font-size: 14px;
  line-height: 1.65;
  font-weight: 800;
}

.category-tags {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 12px;
}

.category-tags em,
.category-tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 9px;
  color: #9fe6ff;
  border: 1px solid rgba(90, 190, 255, .42);
  background: rgba(18, 70, 104, .18);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  line-height: 1.3;
}

.category-tag.gold,
.category-tags em:first-child {
  color: #ffe6a0;
  border-color: rgba(220, 170, 70, .55);
  background: rgba(100, 70, 20, .18);
}

.game-info-hint {
  margin: 13px 0 0;
  color: #ffe6a0;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0;
}

.section-lead {
  margin: -4px 0 10px;
  color: #9fbfdc;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.55;
}

.starter-section {
  padding: 14px;
  border: 1px solid rgba(180, 130, 44, .24);
  background:
    linear-gradient(135deg, rgba(28, 21, 10, .34), rgba(4, 12, 22, .82));
  box-shadow: inset 0 0 18px rgba(220, 170, 70, .03);
}

.starter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 11px;
}

.starter-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 108px;
  padding: 15px 16px 13px;
  color: #f4fbff;
  text-decoration: none;
  border: 1px solid rgba(206, 154, 54, .32);
  background:
    linear-gradient(180deg, rgba(12, 24, 38, .9), rgba(3, 9, 16, .94));
  box-shadow: inset 0 0 14px rgba(220, 170, 70, .035), 0 0 14px rgba(0, 0, 0, .24);
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.starter-card:hover {
  border-color: rgba(238, 196, 108, .58);
  background:
    linear-gradient(180deg, rgba(16, 31, 48, .94), rgba(5, 13, 22, .96));
  box-shadow: inset 0 0 14px rgba(220, 170, 70, .06), 0 0 18px rgba(90, 170, 255, .1);
}

.starter-card strong {
  display: block;
  color: #f6e4b7;
  font-size: 17px;
  font-weight: 950;
  line-height: 1.28;
  margin-top: 0;
}

.starter-card p {
  margin: 6px 0 8px;
  color: #c5d9ea;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.starter-card .category-tag {
  margin-top: auto;
}

.starter-cta {
  display: inline-flex;
  margin-top: 7px;
  color: #8fe8ff;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: 0;
}

.starter-card:hover .starter-cta {
  color: #ffe6a0;
  text-shadow: 0 0 10px rgba(90, 190, 255, .42);
}

.starter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
  margin-top: auto;
  padding-top: 8px;
}

.starter-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 4px 12px;
  color: #f4fbff;
  text-decoration: none;
  border: 1px solid rgba(90, 190, 255, .46);
  background: rgba(20, 70, 105, .2);
  font-size: 13px;
  font-weight: 900;
  flex: 1 1 0;
}

.starter-actions a:hover {
  color: #ffe6a0;
  border-color: rgba(220, 170, 70, .62);
}

.game-info-page .category-section:not(.starter-section) {
  scroll-margin-top: 90px;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  color: #8fa4b8;
  font-size: 13px;
  font-weight: 800;
}

.breadcrumb a {
  color: #7fd0ff;
}

.breadcrumb strong {
  color: #e9f3ff;
}

.info-title-panel {
  min-height: 112px;
}

.info-title-panel h1 {
  font-size: 44px;
}

.category-section {
  margin-top: 24px;
}

.category-section h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  color: #f1dfb7;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 2px;
  text-shadow: 0 1px 0 #000;
}

.category-section h2::before,
.category-section h2::after {
  content: "";
  height: 1px;
  background: linear-gradient(90deg, rgba(212, 175, 55, .7), transparent);
}

.category-section h2::before {
  width: 42px;
}

.category-section h2::after {
  flex: 1;
}

.category-section .category-grid {
  margin-top: 0;
}

.category-icon::before,
.category-icon::after {
  transform: none;
}

.icon-class::before { inset: 12px 22px 10px 22px; border-width: 0 2px 0 2px; }
.icon-class::after { inset: 17px 12px 17px 12px; border-width: 2px 0 2px 0; background: transparent; }
.icon-skill::before { inset: 10px; border-radius: 50%; }
.icon-skill::after { inset: 19px; transform: rotate(45deg); }
.icon-doll::before { inset: 12px; border-radius: 50%; }
.icon-doll::after { inset: 20px; border-radius: 50%; }
.icon-relic::before { inset: 10px; transform: rotate(45deg); }
.icon-relic::after { inset: 19px; transform: rotate(45deg); }
.icon-color::before { inset: 9px; border-radius: 50%; }
.icon-color::after { inset: 18px; border-radius: 50%; background: transparent; }
.icon-gem::before { inset: 11px 14px; transform: rotate(45deg); }
.icon-gem::after { inset: 19px 21px; transform: rotate(45deg); }
.icon-achievement::before { inset: 16px 11px 12px; clip-path: polygon(0 42%, 22% 42%, 34% 0, 50% 42%, 66% 0, 78% 42%, 100% 42%, 88% 100%, 12% 100%); background: rgba(218, 244, 255, .24); }
.icon-achievement::after { inset: 25px 17px 17px; background: rgba(111, 198, 255, .32); }
.icon-gear::before { inset: 10px; clip-path: polygon(50% 0, 63% 22%, 88% 12%, 78% 37%, 100% 50%, 78% 63%, 88% 88%, 63% 78%, 50% 100%, 37% 78%, 12% 88%, 22% 63%, 0 50%, 22% 37%, 12% 12%, 37% 22%); background: rgba(218, 244, 255, .22); }
.icon-gear::after { inset: 21px; border-radius: 50%; background: rgba(111, 198, 255, .32); }
.icon-drop::before { inset: 9px 15px 8px; clip-path: polygon(50% 0, 86% 48%, 78% 82%, 50% 100%, 22% 82%, 14% 48%); background: rgba(218, 244, 255, .2); }
.icon-drop::after { inset: 21px; border-radius: 50%; background: rgba(111, 198, 255, .3); }
.icon-item::before { inset: 12px; border-radius: 4px; transform: rotate(45deg); }
.icon-item::after { inset: 21px; border-radius: 2px; transform: rotate(45deg); }


.relic-page {
  padding-bottom: 54px;
}

.relic-title-panel {
  margin-bottom: 24px;
}

.detail-section {
  margin-top: 26px;
}

.detail-section h2 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  color: #f1dfb7;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 2px;
  text-shadow: 0 1px 0 #000;
}

.detail-section h2::before,
.detail-section h2::after {
  content: "";
  height: 1px;
  background: linear-gradient(90deg, rgba(212, 175, 55, .72), transparent);
}

.detail-section h2::before {
  width: 42px;
}

.detail-section h2::after {
  flex: 1;
}

.detail-panel,
.method-grid article,
.relic-card,
.tier-card {
  border: 1px solid rgba(111, 181, 255, .25);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(8, 20, 33, .86), rgba(3, 9, 16, .92));
  box-shadow: inset 0 0 18px rgba(80, 160, 255, .04), 0 0 20px rgba(0, 0, 0, .3);
}

.detail-panel {
  padding: 22px 24px;
}

.detail-panel p,
.method-grid p,
.relic-card p {
  margin: 0;
  color: #b8c5d0;
  font-size: 15px;
  line-height: 1.8;
  font-weight: 800;
}

.info-list {
  margin: 0;
  padding-left: 24px;
  color: #dce8f4;
  font-size: 15px;
  line-height: 1.9;
  font-weight: 800;
}

.info-list li,
.info-list li::marker {
  font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  font-weight: 900;
}

.info-list li + li {
  margin-top: 6px;
}

.weapon-setting-note {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border-color: rgba(240, 199, 91, .38);
}

.weapon-setting-note strong {
  flex: 0 0 auto;
  color: #ffe5a0;
  font-size: 16px;
  font-weight: 900;
}

.weapon-setting-note span {
  color: #dce8f4;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.7;
}

.relic-meta {
  display: grid;
  gap: 7px;
  margin: 12px 0 0;
}

.relic-meta div {
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 10px;
  align-items: start;
  padding-top: 7px;
  border-top: 1px solid rgba(255, 255, 255, .055);
}

.relic-meta dt,
.relic-meta dd {
  margin: 0;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.55;
}

.relic-meta dt {
  color: #7fd0ff;
}

.relic-meta dd {
  color: #e9f3ff;
}

.tier-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.tier-card {
  min-height: 64px;
  display: grid;
  place-items: center;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.tier-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .18;
  background: currentColor;
}

.tier-card strong,
.tier-card span {
  position: relative;
  z-index: 1;
}

.tier-card strong {
  color: #fff;
  font-size: 22px;
  font-weight: 900;
  text-shadow: 0 2px 0 #000;
}

.tier-common { color: #d8dce2; }
.tier-green { color: #6eff96; }
.tier-blue { color: #62c2ff; }
.tier-red { color: #ff5d55; }
.tier-purple { color: #b47cff; }
.tier-gold { color: #f0c75b; }

.relic-toolbar,
.relic-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
}

.relic-toolbar button,
.relic-pagination button {
  min-width: 76px;
  height: 34px;
  border: 1px solid rgba(111, 181, 255, .28);
  border-radius: 4px;
  color: #dce8f4;
  background: linear-gradient(180deg, rgba(10, 25, 39, .88), rgba(3, 9, 16, .94));
  box-shadow: inset 0 0 14px rgba(80, 160, 255, .035);
  cursor: pointer;
  font-weight: 900;
}

.relic-toolbar button.active,
.relic-toolbar button:hover,
.relic-pagination button:hover:not(:disabled) {
  border-color: rgba(212, 175, 55, .58);
  color: #f4e1b8;
  box-shadow: 0 0 14px rgba(98, 194, 255, .14), inset 0 0 14px rgba(212, 175, 55, .06);
}

.feature-rule-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.feature-rule-card {
  min-height: 158px;
  padding: 20px;
  border: 1px solid rgba(111, 181, 255, .26);
  border-radius: 4px;
  background:
    radial-gradient(circle at 16% 18%, rgba(111, 181, 255, .11), transparent 36%),
    linear-gradient(180deg, rgba(6, 19, 32, .9), rgba(3, 9, 16, .95));
  box-shadow: inset 0 0 18px rgba(127, 208, 255, .05), 0 0 20px rgba(0, 0, 0, .24);
}

.feature-rule-card strong {
  display: block;
  color: #ffe8a7;
  font-size: 17px;
  line-height: 1.45;
  font-weight: 950;
  text-shadow: 0 1px 0 #000;
}

.feature-rule-card ul {
  display: grid;
  gap: 7px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  color: #dce8f4;
  font-size: 15px;
  line-height: 1.7;
  font-weight: 850;
}

.feature-rule-card li {
  position: relative;
  padding-left: 17px;
}

.feature-rule-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #7fd0ff;
  box-shadow: 0 0 8px rgba(127, 208, 255, .5);
}

.feature-warning-card {
  border-color: rgba(240, 199, 91, .36);
  background:
    radial-gradient(circle at 18% 20%, rgba(240, 199, 91, .13), transparent 38%),
    linear-gradient(180deg, rgba(22, 20, 14, .9), rgba(3, 9, 16, .95));
}

.feature-warning-card li::before {
  background: #f0c75b;
  box-shadow: 0 0 8px rgba(240, 199, 91, .48);
}

.attribute-scroll-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.attribute-scroll-card {
  overflow: hidden;
  border: 1px solid rgba(111, 181, 255, .26);
  border-radius: 4px;
  background:
    radial-gradient(circle at 18% 20%, rgba(111, 181, 255, .12), transparent 40%),
    linear-gradient(180deg, rgba(6, 19, 32, .92), rgba(3, 9, 16, .96));
  box-shadow: inset 0 0 18px rgba(127, 208, 255, .05), 0 0 20px rgba(0, 0, 0, .26);
}

.attribute-scroll-card header {
  display: grid;
  gap: 6px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(111, 181, 255, .18);
}

.attribute-scroll-card header strong {
  color: #ffe8a7;
  font-size: 20px;
  font-weight: 950;
  text-shadow: 0 1px 0 #000;
}

.attribute-scroll-card header span {
  color: #7fd0ff;
  font-size: 13px;
  font-weight: 900;
}

.attribute-scroll-card ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 14px 18px 16px;
  list-style: none;
}

.attribute-scroll-card li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 9px 10px;
  border: 1px solid rgba(111, 181, 255, .14);
  border-radius: 4px;
  background: rgba(3, 9, 16, .55);
}

.attribute-scroll-card b {
  min-width: 148px;
  color: #f4e1b8;
  font-size: 14px;
  font-weight: 950;
}

.attribute-scroll-card li span,
.clan-level-list span,
.feature-chip-panel span,
.blessing-grid span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 3px 9px;
  border: 1px solid rgba(127, 208, 255, .24);
  border-radius: 3px;
  color: #e9f5ff;
  background: rgba(5, 18, 30, .72);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 900;
}

.attribute-scroll-card p {
  margin: 0 18px 18px;
  padding: 12px 14px;
  border: 1px solid rgba(240, 199, 91, .24);
  border-radius: 4px;
  color: #ffe8a7;
  background: rgba(35, 27, 9, .46);
  font-size: 13px;
  line-height: 1.65;
  font-weight: 900;
}

.attribute-scroll-card.fire {
  border-color: rgba(255, 99, 72, .32);
}

.attribute-scroll-card.fire header span {
  color: #ff9c7e;
}

.attribute-scroll-card.wind {
  border-color: rgba(126, 235, 168, .3);
}

.attribute-scroll-card.wind header span {
  color: #8cffc4;
}

.attribute-scroll-card.water {
  border-color: rgba(99, 183, 255, .34);
}

.attribute-scroll-card.water header span {
  color: #8fd7ff;
}

.attribute-scroll-card.earth {
  border-color: rgba(214, 178, 96, .34);
}

.attribute-scroll-card.earth header span {
  color: #f0c75b;
}

.clan-level-list {
  display: grid;
  gap: 10px;
}

.clan-level-list article {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr) 250px;
  gap: 14px;
  align-items: center;
  min-height: 74px;
  padding: 14px 16px;
  border: 1px solid rgba(111, 181, 255, .22);
  border-radius: 4px;
  background:
    linear-gradient(90deg, rgba(10, 24, 39, .86), rgba(3, 9, 16, .88));
  box-shadow: inset 0 0 14px rgba(127, 208, 255, .04);
}

.clan-level-list b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border: 1px solid rgba(240, 199, 91, .34);
  border-radius: 4px;
  color: #ffe8a7;
  background: rgba(30, 24, 12, .62);
  font-size: 15px;
  font-weight: 950;
}

.clan-level-list div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.clan-level-list p {
  margin: 0;
  color: #7fd0ff;
  font-size: 13px;
  line-height: 1.65;
  text-align: right;
  font-weight: 900;
}

.feature-chip-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  padding: 18px;
  border: 1px solid rgba(111, 181, 255, .22);
  border-radius: 4px;
  background:
    radial-gradient(circle at 16% 20%, rgba(111, 181, 255, .1), transparent 36%),
    linear-gradient(180deg, rgba(6, 19, 32, .9), rgba(3, 9, 16, .95));
}

.blessing-flow-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: 14px;
}

.blessing-flow-card,
.blessing-note-card {
  padding: 20px 22px;
  border: 1px solid rgba(111, 181, 255, .24);
  border-radius: 4px;
  background:
    radial-gradient(circle at 16% 18%, rgba(111, 181, 255, .1), transparent 38%),
    linear-gradient(180deg, rgba(6, 19, 32, .9), rgba(3, 9, 16, .95));
  box-shadow: inset 0 0 18px rgba(127, 208, 255, .05), 0 0 20px rgba(0, 0, 0, .24);
}

.blessing-flow-card strong,
.blessing-note-card strong {
  display: block;
  margin-bottom: 14px;
  color: #ffe8a7;
  font-size: 18px;
  font-weight: 950;
  text-shadow: 0 1px 0 #000;
}

.blessing-flow-steps {
  display: flex;
  align-items: center;
  gap: 12px;
}

.blessing-flow-steps span {
  flex: 1 1 0;
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid rgba(127, 208, 255, .28);
  border-radius: 4px;
  color: #eef8ff;
  background: rgba(5, 18, 30, .68);
  font-size: 15px;
  font-weight: 900;
  text-align: center;
}

.blessing-flow-steps i {
  flex: 0 0 auto;
  color: #f0c75b;
  font-size: 22px;
  line-height: 1;
  font-style: normal;
  font-weight: 950;
  text-shadow: 0 0 10px rgba(240, 199, 91, .45);
}

.blessing-note-card {
  border-color: rgba(240, 199, 91, .3);
  background:
    radial-gradient(circle at 18% 20%, rgba(240, 199, 91, .1), transparent 38%),
    linear-gradient(180deg, rgba(20, 18, 12, .9), rgba(3, 9, 16, .95));
}

.blessing-note-card ul,
.blessing-grid ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.blessing-note-card li,
.blessing-grid li {
  position: relative;
  padding-left: 17px;
  color: #dce8f4;
  font-size: 15px;
  line-height: 1.65;
  font-weight: 850;
}

.blessing-note-card li::before,
.blessing-grid li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .74em;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #7fd0ff;
  box-shadow: 0 0 8px rgba(127, 208, 255, .45);
}

.blessing-note-card li::before {
  background: #f0c75b;
  box-shadow: 0 0 8px rgba(240, 199, 91, .45);
}

.blessing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.blessing-grid article {
  min-height: 0;
  padding: 20px;
  border: 1px solid rgba(240, 199, 91, .32);
  border-radius: 4px;
  background:
    radial-gradient(circle at 18% 20%, rgba(240, 199, 91, .13), transparent 38%),
    linear-gradient(180deg, rgba(18, 18, 14, .9), rgba(3, 9, 16, .95));
  box-shadow: inset 0 0 18px rgba(212, 175, 55, .06), 0 0 20px rgba(0, 0, 0, .24);
}

.blessing-grid header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.blessing-equip-icon {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(127, 208, 255, .34);
  border-radius: 4px;
  color: #7fd0ff;
  background: rgba(5, 18, 30, .72);
  box-shadow: inset 0 0 12px rgba(127, 208, 255, .06);
}

.blessing-equip-icon img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(127, 208, 255, .18));
}

.blessing-grid strong {
  color: #ffe8a7;
  font-size: 21px;
  font-weight: 950;
  text-shadow: 0 1px 0 #000;
}

.blessing-grid p {
  margin: 0 0 9px;
  color: #7fd0ff;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 900;
}

.basic-settings-page .detail-section {
  margin-top: 24px;
}

.basic-title-panel {
  min-height: 96px;
  padding: 16px 26px;
}

.basic-title-panel h1 {
  font-size: 40px;
  font-weight: 950;
  line-height: 1.2;
}

.basic-title-panel p {
  margin-top: 8px;
}

.basic-title-panel em {
  display: block;
  margin-top: 8px;
  color: #ffe4a0;
  font-size: 14px;
  font-style: normal;
  font-weight: 900;
  line-height: 1.6;
}

.basic-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.basic-summary-grid article {
  min-height: 82px;
  padding: 14px 16px;
  border: 1px solid rgba(111, 181, 255, .28);
  border-radius: 4px;
  background:
    radial-gradient(circle at 18% 14%, rgba(127, 208, 255, .08), transparent 34%),
    linear-gradient(180deg, rgba(7, 18, 30, .86), rgba(3, 9, 16, .94));
  box-shadow: inset 0 0 14px rgba(127, 208, 255, .04), 0 0 15px rgba(0, 0, 0, .22);
}

.basic-summary-grid span {
  display: block;
  color: #8fe8ff;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.3;
}

.basic-summary-grid strong {
  display: block;
  margin-top: 9px;
  color: #ffe8a7;
  font-size: 18px;
  font-weight: 950;
  line-height: 1.35;
}

.blood-step-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.blood-step-grid article {
  display: grid;
  gap: 7px;
  align-items: start;
  min-height: 96px;
  padding: 16px 18px;
  border: 1px solid rgba(111, 181, 255, .24);
  border-radius: 4px;
  background:
    radial-gradient(circle at 16% 16%, rgba(127, 208, 255, .08), transparent 34%),
    linear-gradient(180deg, rgba(7, 18, 30, .88), rgba(3, 9, 16, .94));
  box-shadow: inset 0 0 16px rgba(127, 208, 255, .04), 0 0 18px rgba(0, 0, 0, .22);
}

.blood-step-grid span {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(240, 199, 91, .55);
  border-radius: 50%;
  color: #ffe8a7;
  background: rgba(240, 199, 91, .08);
  box-shadow: 0 0 14px rgba(240, 199, 91, .12);
  font-size: 15px;
  font-weight: 950;
}

.blood-step-grid strong {
  color: #ffe8a7;
  font-size: 17px;
  line-height: 1.45;
  font-weight: 950;
}

.blood-step-grid p {
  margin: 0;
  color: #dce8f4;
  font-size: 15px;
  line-height: 1.7;
}

.basic-overview-panel,
.basic-compact-card,
.basic-note-grid article {
  border: 1px solid rgba(111, 181, 255, .24);
  border-radius: 4px;
  background:
    radial-gradient(circle at 16% 16%, rgba(127, 208, 255, .08), transparent 34%),
    linear-gradient(180deg, rgba(7, 18, 30, .9), rgba(3, 9, 16, .95));
  box-shadow: inset 0 0 16px rgba(127, 208, 255, .04), 0 0 18px rgba(0, 0, 0, .22);
}

.basic-overview-grid {
  display: grid;
  grid-template-columns: 1.4fr .9fr 1fr;
  gap: 14px;
}

.basic-overview-panel {
  display: block;
  padding: 16px 18px;
}

.basic-overview-panel > strong {
  display: block;
  margin-bottom: 12px;
  color: #ffe8a7;
  font-size: 17px;
  font-weight: 950;
  line-height: 1.45;
}

.basic-stat-list {
  display: grid;
  gap: 10px;
}

.basic-overview-panel:first-child .basic-stat-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.basic-stat-list section {
  padding: 11px 12px;
  border: 1px solid rgba(111, 181, 255, .16);
  border-radius: 4px;
  background: rgba(4, 14, 24, .56);
}

.basic-stat-list span {
  display: block;
  color: #9fdcff;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.25;
}

.basic-stat-list b {
  display: block;
  margin-top: 5px;
  color: #ffe8a7;
  font-size: 24px;
  font-weight: 950;
  line-height: 1.18;
  letter-spacing: .02em;
}

.basic-stat-list p {
  margin: 6px 0 0;
  color: #a9c9e8;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.45;
}

.basic-chip-list span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 3px 10px;
  border: 1px solid rgba(127, 208, 255, .22);
  border-radius: 3px;
  color: #e9f3ff;
  background: rgba(5, 18, 30, .72);
  font-size: 13px;
  line-height: 1.45;
  font-weight: 900;
}

.basic-chip-list b {
  margin-right: 7px;
  color: #f0c75b;
  font-weight: 950;
}

.basic-compact-grid,
.basic-note-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.basic-compact-card {
  padding: 16px 18px;
}

.basic-compact-card {
  position: relative;
}

.basic-compact-card::before {
  content: "";
  display: block;
  width: 26px;
  height: 3px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(143, 232, 255, .85), rgba(240, 199, 91, .55));
  box-shadow: 0 0 10px rgba(111, 181, 255, .18);
}

.basic-compact-card strong,
.basic-note-grid strong {
  display: block;
  margin-bottom: 11px;
  color: #ffe8a7;
  font-size: 17px;
  line-height: 1.45;
  font-weight: 950;
  text-shadow: 0 1px 0 #000;
}

.basic-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.basic-class-list span {
  color: #dff3ff;
  border-color: rgba(240, 199, 91, .28);
  background: rgba(28, 21, 7, .38);
}

.basic-note-grid article {
  padding: 15px 18px;
  border-color: rgba(111, 181, 255, .18);
  background:
    radial-gradient(circle at 16% 16%, rgba(240, 199, 91, .055), transparent 35%),
    linear-gradient(180deg, rgba(8, 17, 27, .78), rgba(3, 9, 16, .9));
}

.basic-warning-grid article {
  border-color: rgba(210, 143, 64, .34);
  background:
    radial-gradient(circle at 16% 16%, rgba(210, 83, 57, .055), transparent 36%),
    linear-gradient(180deg, rgba(18, 13, 11, .84), rgba(4, 9, 16, .93));
  box-shadow: inset 0 0 16px rgba(210, 143, 64, .035), 0 0 18px rgba(0, 0, 0, .22);
}

.section-alert-tag {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  margin-left: 8px;
  padding: 1px 8px;
  color: #ffe8a7;
  border: 1px solid rgba(210, 143, 64, .46);
  border-radius: 3px;
  background: rgba(80, 41, 19, .22);
  font-size: 12px;
  font-weight: 950;
  vertical-align: middle;
}

.basic-note-grid strong {
  margin-bottom: 8px;
  color: #f4e1b8;
  font-size: 16px;
}

.basic-note-grid ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #dce8f4;
  font-size: 14px;
  line-height: 1.65;
  font-weight: 850;
}

.basic-note-grid li {
  position: relative;
  padding-left: 15px;
}

.basic-note-grid li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: #f0c75b;
  box-shadow: 0 0 7px rgba(240, 199, 91, .35);
}

.blood-flow-panel {
  padding: 16px;
  border: 1px solid rgba(111, 181, 255, .24);
  border-radius: 4px;
  background:
    radial-gradient(circle at 14% 12%, rgba(127, 208, 255, .08), transparent 34%),
    linear-gradient(180deg, rgba(7, 18, 30, .88), rgba(3, 9, 16, .94));
  box-shadow: inset 0 0 16px rgba(127, 208, 255, .04), 0 0 18px rgba(0, 0, 0, .22);
}

.blood-flow-steps {
  display: grid;
  max-width: 520px;
  margin: 0 auto;
  gap: 28px;
}

.blood-flow-steps article {
  position: relative;
  min-height: 58px;
  padding: 13px 18px;
  border: 1px solid rgba(111, 181, 255, .22);
  border-radius: 4px;
  background: rgba(5, 18, 30, .68);
  text-align: center;
}

.blood-flow-steps article:not(:last-child)::after {
  content: "↓";
  position: absolute;
  left: 50%;
  bottom: -28px;
  z-index: 1;
  transform: translate(-50%, 52%);
  color: #f0c75b;
  font-size: 26px;
  font-weight: 950;
  line-height: 1;
  text-shadow: 0 0 12px rgba(240, 199, 91, .4);
}

.blood-flow-steps strong {
  color: #f4fbff;
  font-size: 15px;
  font-weight: 950;
  line-height: 1.55;
}

.blood-flow-note {
  margin: 14px 0 0;
  padding: 11px 13px;
  color: #dce8f4;
  border: 1px solid rgba(240, 199, 91, .25);
  border-radius: 4px;
  background: rgba(36, 27, 9, .24);
  font-size: 15px;
  font-weight: 850;
  line-height: 1.7;
}

.blood-flow-note b {
  color: #ffe8a7;
  font-weight: 950;
}

.blood-note-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border: 1px solid rgba(111, 181, 255, .2);
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(7, 18, 30, .72), rgba(3, 9, 16, .86));
  box-shadow: inset 0 0 12px rgba(127, 208, 255, .025);
}

.blood-note-card span {
  flex: 0 0 auto;
  min-width: 48px;
  padding: 4px 9px;
  color: #ffe8a7;
  text-align: center;
  border: 1px solid rgba(240, 199, 91, .36);
  border-radius: 3px;
  background: rgba(36, 27, 9, .28);
  font-size: 13px;
  font-weight: 950;
}

.blood-note-card p {
  margin: 0;
  color: #dce8f4;
  font-size: 15px;
  font-weight: 850;
  line-height: 1.7;
}

.basic-faq-list {
  display: grid;
  gap: 10px;
}

.basic-faq-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: -4px 0 12px;
}

.basic-faq-tools button {
  min-height: 34px;
  padding: 5px 14px;
  color: #f4fbff;
  cursor: pointer;
  border: 1px solid rgba(111, 181, 255, .34);
  border-radius: 4px;
  background: rgba(5, 18, 30, .72);
  font-size: 14px;
  font-weight: 950;
}

.basic-faq-tools button:hover {
  color: #ffe8a7;
  border-color: rgba(240, 199, 91, .46);
}

.basic-faq-list details {
  border: 1px solid rgba(111, 181, 255, .22);
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(7, 18, 30, .86), rgba(3, 9, 16, .94));
  box-shadow: inset 0 0 14px rgba(127, 208, 255, .035);
}

.basic-faq-list summary {
  cursor: pointer;
  padding: 13px 15px;
  color: #ffe8a7;
  font-size: 15px;
  font-weight: 950;
  line-height: 1.55;
}

.basic-faq-list summary::-webkit-details-marker {
  display: none;
}

.basic-faq-list summary::after {
  content: "+";
  float: right;
  color: #8fe8ff;
  font-weight: 950;
}

.basic-faq-list details[open] summary::after {
  content: "-";
}

.basic-faq-list p {
  margin: 0;
  padding: 0 15px 14px;
  color: #dce8f4;
  font-size: 15px;
  font-weight: 850;
  line-height: 1.7;
}

.catalog-search {
  display: grid;
  grid-template-columns: auto minmax(260px, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  margin: 0 0 16px;
  padding: 12px;
  border: 1px solid rgba(111, 181, 255, .22);
  border-radius: 4px;
  background:
    radial-gradient(circle at 10% 20%, rgba(127, 208, 255, .09), transparent 34%),
    linear-gradient(180deg, rgba(7, 18, 31, .78), rgba(3, 9, 16, .88));
  box-shadow: inset 0 0 18px rgba(80, 160, 255, .035), 0 0 18px rgba(0, 0, 0, .22);
}

.catalog-search label {
  color: #f4e1b8;
  font-size: 14px;
  font-weight: 950;
  white-space: nowrap;
}

.catalog-search input {
  width: 100%;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid rgba(111, 181, 255, .28);
  border-radius: 4px;
  outline: 0;
  color: #e9f3ff;
  background: rgba(2, 8, 15, .72);
  box-shadow: inset 0 0 14px rgba(80, 160, 255, .045);
  font: inherit;
  font-size: 14px;
  font-weight: 850;
}

.catalog-search input::placeholder {
  color: rgba(220, 232, 244, .45);
}

.catalog-search input:focus {
  border-color: rgba(127, 208, 255, .62);
  box-shadow: 0 0 14px rgba(98, 194, 255, .14), inset 0 0 14px rgba(80, 160, 255, .08);
}

.catalog-search button {
  min-width: 68px;
  height: 38px;
  border: 1px solid rgba(212, 175, 55, .42);
  border-radius: 4px;
  color: #ffe8a7;
  background: linear-gradient(180deg, rgba(30, 23, 10, .86), rgba(3, 9, 16, .94));
  cursor: pointer;
  font-weight: 950;
}

.catalog-search button:hover {
  border-color: rgba(240, 199, 91, .66);
  box-shadow: 0 0 14px rgba(212, 175, 55, .13);
}

.catalog-search p {
  grid-column: 2 / 5;
  margin: -2px 0 0;
  color: rgba(220, 232, 244, .62);
  font-size: 12px;
  font-weight: 850;
}

.catalog-empty-card {
  grid-column: 1 / -1;
  min-height: 150px;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 22px;
  border: 1px solid rgba(111, 181, 255, .22);
  border-radius: 4px;
  background:
    radial-gradient(circle at 50% 10%, rgba(127, 208, 255, .09), transparent 42%),
    linear-gradient(180deg, rgba(8, 20, 33, .82), rgba(3, 9, 16, .92));
  text-align: center;
}

.catalog-empty-card strong {
  color: #f4e1b8;
  font-size: 18px;
  font-weight: 950;
}

.catalog-empty-card p {
  margin: 0;
  color: #b8c5d0;
  font-size: 14px;
  font-weight: 850;
}

.relic-pagination {
  justify-content: center;
  margin: 18px 0 0;
}

.relic-pagination span {
  min-width: 110px;
  color: #aebdca;
  text-align: center;
  font-size: 13px;
  font-weight: 900;
}

.relic-pagination button:disabled {
  cursor: default;
  opacity: .42;
}

.relic-display-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.achievement-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.doll-display-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.relic-card {
  min-height: 172px;
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 16px;
  align-items: start;
  padding: 18px;
}

.achievement-card {
  min-height: 238px;
  display: block;
  padding: 16px;
  border: 1px solid rgba(111, 181, 255, .25);
  border-radius: 4px;
  background:
    radial-gradient(circle at 50% 8%, rgba(127, 208, 255, .14), transparent 42%),
    linear-gradient(180deg, rgba(12, 28, 44, .9), rgba(5, 14, 25, .94));
  box-shadow: inset 0 0 18px rgba(80, 160, 255, .04), 0 0 20px rgba(0, 0, 0, .3);
}

.doll-card {
  min-height: 150px;
  padding: 18px;
  border: 1px solid rgba(111, 181, 255, .25);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(8, 20, 33, .86), rgba(3, 9, 16, .92));
  box-shadow: inset 0 0 18px rgba(80, 160, 255, .04), 0 0 20px rgba(0, 0, 0, .3);
}

.doll-data-card {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 16px;
  align-items: start;
}

.doll-card-section {
  margin-top: 12px;
}

.doll-card-section h3 {
  margin: 0 0 8px;
  color: #f4d58a;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.35;
}

.doll-basic-info {
  padding: 10px 0 2px;
  border-top: 1px solid rgba(111, 181, 255, .12);
}

.doll-placeholder-card {
  grid-column: 1 / -1;
  min-height: 190px;
}

.doll-rule-card,
.doll-refine-card {
  min-height: 0;
  border-color: rgba(212, 175, 55, .34);
  background:
    radial-gradient(circle at 12% 18%, rgba(212, 175, 55, .1), transparent 38%),
    linear-gradient(180deg, rgba(10, 20, 31, .88), rgba(4, 9, 16, .94));
}

.doll-rule-card h3,
.doll-refine-card h3 {
  margin: 0 0 10px;
  color: #f4d58a;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.35;
}

.doll-rule-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.doll-rule-list li {
  position: relative;
  padding-left: 18px;
  color: #e9f3ff;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.65;
}

.doll-rule-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f0c75b;
  box-shadow: 0 0 10px rgba(240, 199, 91, .45);
}

.doll-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(127, 208, 255, .34);
  border-radius: 6px;
  background: radial-gradient(circle at 50% 45%, rgba(127, 208, 255, .18), rgba(4, 12, 22, .92) 64%);
  box-shadow: inset 0 0 16px rgba(127, 208, 255, .08), 0 0 14px rgba(0, 0, 0, .34);
}

.doll-icon img {
  max-width: 42px;
  max-height: 42px;
  object-fit: contain;
  display: block;
}

.relic-icon {
  width: 64px;
  height: 80px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  filter: drop-shadow(0 0 10px color-mix(in srgb, currentColor 32%, transparent));
}

.relic-icon img {
  width: 60px;
  height: 80px;
  object-fit: contain;
  display: block;
}

.relic-common { color: #d8dce2; }
.relic-green { color: #6eff96; }
.relic-blue { color: #62c2ff; }
.relic-red { color: #ff5d55; }
.relic-purple { color: #b47cff; }
.relic-gold { color: #f0c75b; }

.relic-card strong {
  display: block;
  color: #f4e1b8;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.45;
}

.achievement-card strong {
  display: block;
  color: #f4e1b8;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.45;
  margin-bottom: 3px;
}

.achievement-card-head {
  display: block;
  align-items: center;
  margin-bottom: 14px;
  padding: 2px 0 12px;
  border-bottom: 1px solid rgba(111, 181, 255, .14);
}

.achievement-card-head p {
  margin: 0;
  color: #7fd0ff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.5;
}

.achievement-card-body {
  display: grid;
  gap: 10px;
}

.doll-card strong {
  display: block;
  color: #f4e1b8;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.45;
  margin-bottom: 12px;
}

.doll-tier-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.doll-tier-young { color: #d8dce2; }
.doll-tier-growth { color: #6eff96; }
.doll-tier-evolve { color: #62c2ff; }
.doll-tier-awaken { color: #ff5d55; }
.doll-tier-transcend { color: #f0c75b; }

.poly-tier-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.poly-tier-low { color: #d8dce2; }
.poly-tier-mid { color: #62c2ff; }
.poly-tier-high { color: #f0c75b; }

.poly-display-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.poly-card {
  min-height: 232px;
  padding: 16px;
  border: 1px solid rgba(111, 181, 255, .25);
  border-radius: 4px;
  background:
    radial-gradient(circle at 18% 16%, rgba(98, 194, 255, .12), transparent 34%),
    linear-gradient(180deg, rgba(8, 20, 33, .86), rgba(3, 9, 16, .92));
  box-shadow: inset 0 0 18px rgba(80, 160, 255, .04), 0 0 20px rgba(0, 0, 0, .3);
}

.poly-card strong {
  display: block;
  color: #f4e1b8;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.45;
  margin-bottom: 4px;
}

.poly-card p {
  min-height: 44px;
  margin: 0 0 14px;
  color: #b8c5d0;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.7;
}

.poly-card-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.poly-card-title p {
  min-height: 0;
  margin: 3px 0 0;
  color: #7fd0ff;
  font-size: 12px;
  letter-spacing: 0;
}

.poly-card-title em {
  flex: 0 0 auto;
  padding: 4px 10px;
  border: 1px solid rgba(240, 199, 91, .48);
  border-radius: 3px;
  color: #ffe8a7;
  background: rgba(31, 22, 7, .55);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.poly-gif-slot {
  position: relative;
  min-height: 112px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(240, 199, 91, .22);
  border-radius: 4px;
  color: rgba(233, 243, 255, .68);
  background:
    radial-gradient(circle at 50% 42%, rgba(127, 208, 255, .16), transparent 44%),
    linear-gradient(180deg, rgba(7, 18, 30, .92), rgba(2, 8, 14, .96));
  box-shadow: inset 0 0 18px rgba(80, 160, 255, .06), inset 0 0 0 1px rgba(127, 208, 255, .06);
  font-size: 13px;
  font-weight: 900;
}

.poly-gif-slot::before,
.poly-gif-slot::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  pointer-events: none;
}

.poly-gif-slot::before {
  left: 6px;
  top: 6px;
  border-left: 1px solid rgba(240, 199, 91, .55);
  border-top: 1px solid rgba(240, 199, 91, .55);
}

.poly-gif-slot::after {
  right: 6px;
  bottom: 6px;
  border-right: 1px solid rgba(240, 199, 91, .55);
  border-bottom: 1px solid rgba(240, 199, 91, .55);
}

.poly-gif-slot img {
  max-width: 100%;
  max-height: 104px;
  object-fit: contain;
  image-rendering: auto;
  filter: drop-shadow(0 0 10px rgba(127, 208, 255, .22));
}

.poly-skin-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.poly-skin-card {
  margin: 0;
}

.poly-skin-card figcaption {
  margin-top: 8px;
  color: #f4e1b8;
  text-align: center;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.35;
}

.poly-level-list {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(127, 208, 255, .14);
  border-radius: 4px;
  background: rgba(2, 8, 14, .36);
}

.poly-level-row {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 12px;
  align-items: flex-start;
  padding-top: 8px;
  border-top: 1px solid rgba(111, 181, 255, .12);
}

.poly-level-row:first-child {
  padding-top: 0;
  border-top: 0;
}

.poly-level-row b {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  height: 24px;
  border: 1px solid rgba(127, 208, 255, .24);
  border-radius: 3px;
  color: #d8dce2;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}

.poly-level-row:nth-child(2) b {
  color: #7fd0ff;
  border-color: rgba(127, 208, 255, .42);
  background: rgba(19, 57, 88, .28);
}

.poly-level-row:nth-child(3) b {
  color: #f0c75b;
  border-color: rgba(240, 199, 91, .48);
  background: rgba(40, 28, 6, .35);
}

.poly-ability-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 8px;
  color: #e9f3ff;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.4;
}

.poly-ability-list span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 10px;
  border: 1px solid rgba(127, 208, 255, .18);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(12, 28, 44, .72), rgba(4, 12, 21, .78));
  white-space: nowrap;
  box-shadow: inset 0 0 10px rgba(127, 208, 255, .04);
}

.poly-skin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.poly-skin-grid span {
  min-height: 88px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 10px;
  border: 1px solid rgba(127, 208, 255, .24);
  border-radius: 4px;
  color: #e9f3ff;
  background:
    radial-gradient(circle at 50% 36%, rgba(127, 208, 255, .14), transparent 44%),
    linear-gradient(180deg, rgba(7, 18, 30, .92), rgba(2, 8, 14, .96));
  box-shadow: inset 0 0 14px rgba(80, 160, 255, .05);
  font-size: 13px;
  font-weight: 900;
}

.weapon-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.equipment-kind-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.equipment-kind-tabs button {
  min-width: 92px;
  height: 38px;
  padding: 0 20px;
  border: 1px solid rgba(111, 181, 255, .34);
  border-radius: 4px;
  color: #e9f3ff;
  background: rgba(8, 20, 33, .82);
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: inset 0 0 12px rgba(80, 160, 255, .04);
}

.equipment-kind-tabs button:hover {
  border-color: rgba(127, 208, 255, .56);
  color: #f6fbff;
}

.equipment-kind-tabs button.active {
  border-color: rgba(240, 199, 91, .72);
  color: #ffe8a7;
  background: linear-gradient(180deg, rgba(42, 29, 7, .82), rgba(8, 20, 33, .9));
}

.weapon-toolbar button {
  min-width: 74px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(111, 181, 255, .34);
  border-radius: 4px;
  color: #e9f3ff;
  background: rgba(8, 20, 33, .82);
  font-size: 14px;
  font-weight: 900;
  cursor: pointer;
}

.weapon-toolbar button.active {
  border-color: rgba(240, 199, 91, .72);
  color: #ffe8a7;
  background: linear-gradient(180deg, rgba(42, 29, 7, .8), rgba(8, 20, 33, .88));
}

.weapon-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.weapon-card {
  min-height: 190px;
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 16px;
  border: 1px solid rgba(111, 181, 255, .25);
  border-radius: 4px;
  background:
    radial-gradient(circle at 16% 14%, rgba(127, 208, 255, .1), transparent 34%),
    linear-gradient(180deg, rgba(8, 20, 33, .86), rgba(3, 9, 16, .92));
  box-shadow: inset 0 0 18px rgba(80, 160, 255, .04), 0 0 20px rgba(0, 0, 0, .3);
}

.weapon-head {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 12px;
  align-items: center;
}

.weapon-icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(127, 208, 255, .3);
  border-radius: 5px;
  background: radial-gradient(circle at 50% 45%, rgba(127, 208, 255, .18), rgba(4, 12, 22, .92) 64%);
  box-shadow: inset 0 0 14px rgba(127, 208, 255, .08);
}

.weapon-icon img {
  max-width: 38px;
  max-height: 38px;
  object-fit: contain;
}

.weapon-card strong {
  display: block;
  color: #f4e1b8;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.45;
}

.weapon-card em {
  display: inline-grid;
  place-items: center;
  min-width: 50px;
  height: 22px;
  margin-top: 5px;
  padding: 0 8px;
  border: 1px solid rgba(240, 199, 91, .42);
  border-radius: 3px;
  color: #ffe8a7;
  background: rgba(31, 22, 7, .44);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.weapon-core,
.weapon-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
}

.weapon-core span,
.weapon-stats span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border: 1px solid rgba(127, 208, 255, .16);
  border-radius: 999px;
  color: #e9f3ff;
  background: linear-gradient(180deg, rgba(12, 28, 44, .72), rgba(4, 12, 21, .78));
  font-size: 13px;
  font-weight: 900;
  line-height: 1.35;
}

.weapon-core span {
  border-color: rgba(240, 199, 91, .28);
  color: #ffe8a7;
}

.weapon-muted {
  color: rgba(233, 243, 255, .62) !important;
}

.weapon-classes {
  margin: 0;
  padding-top: 9px;
  border-top: 1px solid rgba(111, 181, 255, .12);
  color: #7fd0ff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.5;
}

.hecate-page {
  padding-bottom: 58px;
}

.hecate-rule-grid,
.hecate-rune-grid {
  display: grid;
  gap: 14px;
}

.hecate-rule-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hecate-rune-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hecate-rule-card,
.hecate-material-card,
.hecate-rune-card {
  border: 1px solid rgba(111, 181, 255, .25);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(8, 20, 33, .88), rgba(3, 9, 16, .94));
  box-shadow: inset 0 0 18px rgba(80, 160, 255, .045), 0 0 20px rgba(0, 0, 0, .32);
}

.hecate-rule-card,
.hecate-material-card {
  min-height: 142px;
  padding: 20px;
}

.hecate-rule-card strong,
.hecate-material-card strong,
.hecate-rune-card header strong {
  display: block;
  color: #f4e1b8;
  font-size: 20px;
  font-weight: 900;
  text-shadow: 0 1px 0 #000;
}

.hecate-rule-card ul {
  margin: 12px 0 0;
  padding-left: 18px;
  color: #dce8f4;
  font-size: 14px;
  line-height: 1.85;
  font-weight: 850;
}

.hecate-rule-card li + li {
  margin-top: 4px;
}

.hecate-material-card {
  display: grid;
  grid-template-columns: 62px 1fr;
  align-items: center;
  gap: 16px;
  border-color: rgba(212, 175, 55, .34);
  background: linear-gradient(135deg, rgba(22, 22, 18, .9), rgba(4, 10, 18, .94));
}

.hecate-material-card p,
.hecate-rune-card header p {
  margin: 8px 0 0;
  color: #b8c5d0;
  font-size: 14px;
  line-height: 1.65;
  font-weight: 800;
}

.hecate-material-icon,
.hecate-rune-icon {
  display: grid;
  place-items: center;
  border: 1px solid rgba(127, 208, 255, .28);
  border-radius: 6px;
  background: radial-gradient(circle, rgba(127, 208, 255, .14), rgba(5, 13, 22, .92) 68%);
  box-shadow: inset 0 0 15px rgba(127, 208, 255, .08), 0 0 16px rgba(0, 0, 0, .3);
}

.hecate-material-icon {
  width: 58px;
  height: 58px;
}

.hecate-material-icon img {
  max-width: 44px;
  max-height: 44px;
  image-rendering: auto;
}

.hecate-rune-card {
  padding: 20px;
  position: relative;
  overflow: hidden;
}

.hecate-rune-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .16;
  background: radial-gradient(circle at 14% 12%, currentColor, transparent 34%);
}

.hecate-attack {
  color: #f0c75b;
}

.hecate-defense {
  color: #7fd0ff;
}

.hecate-rune-card header {
  position: relative;
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 16px;
  align-items: center;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.hecate-rune-icon {
  width: 72px;
  height: 72px;
  border-color: rgba(212, 175, 55, .36);
}

.hecate-defense .hecate-rune-icon {
  border-color: rgba(127, 208, 255, .42);
}

.hecate-rune-icon img {
  max-width: 54px;
  max-height: 54px;
}

.hecate-level-list {
  position: relative;
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.hecate-level-list li {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 10px;
  align-items: start;
  min-height: 34px;
  padding: 8px 10px;
  border: 1px solid rgba(111, 181, 255, .16);
  border-radius: 4px;
  background: rgba(2, 8, 15, .42);
}

.hecate-level-list b {
  display: inline-grid;
  place-items: center;
  min-height: 24px;
  border: 1px solid rgba(212, 175, 55, .4);
  border-radius: 4px;
  color: #ffe8a7;
  background: rgba(212, 175, 55, .055);
  font-size: 13px;
  font-weight: 950;
}

.hecate-level-list span {
  color: #e9f3ff;
  font-size: 14px;
  line-height: 1.65;
  font-weight: 850;
}

.hecate-level-list .hecate-max {
  border-color: rgba(240, 199, 91, .46);
  background: linear-gradient(90deg, rgba(212, 175, 55, .12), rgba(4, 12, 20, .5));
}

.hecate-level-list .hecate-max span {
  color: #fff3c7;
}

.giltas-page {
  padding-bottom: 58px;
}

.giltas-rule-grid,
.giltas-doll-grid {
  display: grid;
  gap: 14px;
}

.giltas-rule-grid,
.giltas-doll-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.giltas-rule-card,
.giltas-doll-card {
  border: 1px solid rgba(111, 181, 255, .25);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(8, 20, 33, .88), rgba(3, 9, 16, .94));
  box-shadow: inset 0 0 18px rgba(80, 160, 255, .045), 0 0 20px rgba(0, 0, 0, .32);
}

.giltas-rule-card {
  min-height: 142px;
  padding: 20px;
}

.giltas-rule-card strong,
.giltas-doll-card header strong {
  display: block;
  color: #f4e1b8;
  font-size: 20px;
  font-weight: 900;
  text-shadow: 0 1px 0 #000;
}

.giltas-rule-card ul {
  margin: 12px 0 0;
  padding-left: 18px;
  color: #dce8f4;
  font-size: 14px;
  line-height: 1.85;
  font-weight: 850;
}

.giltas-rule-card li + li {
  margin-top: 4px;
}

.giltas-doll-card {
  padding: 18px;
  position: relative;
  overflow: hidden;
}

.giltas-doll-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .15;
  background: radial-gradient(circle at 16% 10%, currentColor, transparent 36%);
}

.giltas-melee {
  color: #f0c75b;
}

.giltas-ranged {
  color: #7fd0ff;
}

.giltas-magic {
  color: #b47cff;
}

.giltas-doll-card header {
  position: relative;
  display: grid;
  grid-template-columns: 66px 1fr;
  gap: 14px;
  align-items: center;
  min-height: 76px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.giltas-doll-card header p {
  margin: 7px 0 0;
  color: #b8c5d0;
  font-size: 13px;
  line-height: 1.55;
  font-weight: 800;
}

.giltas-doll-icon {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(127, 208, 255, .28);
  border-radius: 6px;
  background: radial-gradient(circle, rgba(127, 208, 255, .14), rgba(5, 13, 22, .92) 68%);
  box-shadow: inset 0 0 15px rgba(127, 208, 255, .08), 0 0 16px rgba(0, 0, 0, .3);
}

.giltas-melee .giltas-doll-icon {
  border-color: rgba(240, 199, 91, .44);
}

.giltas-ranged .giltas-doll-icon {
  border-color: rgba(127, 208, 255, .44);
}

.giltas-magic .giltas-doll-icon {
  border-color: rgba(180, 124, 255, .44);
}

.giltas-doll-icon img {
  max-width: 48px;
  max-height: 48px;
}

.giltas-level-list {
  position: relative;
  display: grid;
  gap: 8px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.giltas-level-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: flex-start;
  min-height: 38px;
  padding: 8px;
  border: 1px solid rgba(111, 181, 255, .16);
  border-radius: 4px;
  background: rgba(2, 8, 15, .42);
}

.giltas-level-list b {
  display: inline-grid;
  place-items: center;
  flex: 0 0 52px;
  min-height: 24px;
  border: 1px solid rgba(127, 208, 255, .32);
  border-radius: 4px;
  color: #7fd0ff;
  background: rgba(127, 208, 255, .055);
  font-size: 12px;
  font-weight: 950;
}

.giltas-level-list span {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 24px;
  width: fit-content;
  max-width: 100%;
  padding: 2px 8px;
  border: 1px solid rgba(111, 181, 255, .16);
  border-radius: 4px;
  color: #e9f3ff;
  background: rgba(5, 18, 30, .55);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 900;
  white-space: nowrap;
}

.giltas-level-list .giltas-max {
  border-color: rgba(240, 199, 91, .48);
  background: linear-gradient(90deg, rgba(212, 175, 55, .12), rgba(4, 12, 20, .5));
}

.giltas-level-list .giltas-max b {
  border-color: rgba(240, 199, 91, .58);
  color: #ffe8a7;
  background: rgba(212, 175, 55, .09);
}

.giltas-level-list .giltas-max span {
  color: #fff3c7;
  border-color: rgba(240, 199, 91, .22);
}

.special-page {
  padding-bottom: 58px;
}

.special-layout {
  display: grid;
  grid-template-columns: minmax(360px, .62fr) 1.38fr;
  gap: 14px;
}

.special-rule-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.special-main-card,
.special-rule-card,
.special-ability-panel {
  border: 1px solid rgba(111, 181, 255, .25);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(8, 20, 33, .88), rgba(3, 9, 16, .94));
  box-shadow: inset 0 0 18px rgba(80, 160, 255, .045), 0 0 20px rgba(0, 0, 0, .32);
}

.special-main-card {
  display: grid;
  grid-template-columns: 76px 1fr;
  align-items: center;
  gap: 18px;
  min-height: 172px;
  padding: 22px;
  position: relative;
  overflow: hidden;
}

.special-main-card::before,
.special-ability-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .14;
  background: radial-gradient(circle at 14% 14%, currentColor, transparent 36%);
}

.special-promo {
  color: #f0c75b;
}

.special-online {
  color: #7fd0ff;
}

.special-item-icon {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  border: 1px solid rgba(212, 175, 55, .38);
  border-radius: 6px;
  background: radial-gradient(circle, rgba(212, 175, 55, .15), rgba(5, 13, 22, .92) 68%);
  box-shadow: inset 0 0 15px rgba(212, 175, 55, .08), 0 0 16px rgba(0, 0, 0, .3);
}

.special-online .special-item-icon {
  border-color: rgba(127, 208, 255, .42);
  background: radial-gradient(circle, rgba(127, 208, 255, .14), rgba(5, 13, 22, .92) 68%);
}

.special-item-icon img {
  max-width: 56px;
  max-height: 56px;
}

.special-main-card strong,
.special-rule-card strong {
  display: block;
  color: #f4e1b8;
  font-size: 21px;
  font-weight: 900;
  text-shadow: 0 1px 0 #000;
}

.special-main-card p {
  margin: 9px 0 0;
  color: #dce8f4;
  font-size: 14px;
  line-height: 1.7;
  font-weight: 850;
}

.special-rule-card {
  min-height: 172px;
  padding: 20px;
}

.special-rate-card {
  min-height: 172px;
  padding: 20px;
  display: grid;
  align-content: center;
  gap: 8px;
  border: 1px solid rgba(240, 199, 91, .36);
  border-radius: 4px;
  background:
    radial-gradient(circle at 22% 20%, rgba(240, 199, 91, .18), transparent 40%),
    linear-gradient(180deg, rgba(22, 20, 14, .9), rgba(3, 9, 16, .94));
  box-shadow: inset 0 0 18px rgba(212, 175, 55, .06), 0 0 20px rgba(0, 0, 0, .32);
}

.special-online-rate {
  border-color: rgba(127, 208, 255, .38);
  background:
    radial-gradient(circle at 22% 20%, rgba(127, 208, 255, .17), transparent 40%),
    linear-gradient(180deg, rgba(8, 20, 33, .9), rgba(3, 9, 16, .94));
}

.special-hecate-rate {
  border-color: rgba(180, 124, 255, .32);
  background:
    radial-gradient(circle at 22% 20%, rgba(180, 124, 255, .14), transparent 40%),
    linear-gradient(180deg, rgba(13, 18, 31, .9), rgba(3, 9, 16, .94));
}

.special-giltas-rate {
  border-color: rgba(240, 199, 91, .4);
}

.special-rate-card span {
  color: #7fd0ff;
  font-size: 13px;
  font-weight: 900;
}

.special-rate-card strong {
  color: #ffe8a7;
  font-size: 32px;
  font-weight: 950;
  letter-spacing: 1px;
  text-shadow: 0 2px 0 #000, 0 0 14px rgba(212, 175, 55, .24);
}

.special-rate-card p {
  margin: 0;
  color: #dce8f4;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 850;
}

.special-rule-card ul {
  margin: 12px 0 0;
  padding-left: 18px;
  color: #dce8f4;
  font-size: 14px;
  line-height: 1.85;
  font-weight: 850;
}

.special-rule-card li + li {
  margin-top: 4px;
}

.special-featured-item {
  grid-template-columns: 108px 1fr;
}

.special-featured-item .special-item-icon {
  width: 104px;
  height: 104px;
}

.special-featured-item .special-item-icon img {
  max-width: 76px;
  max-height: 76px;
}

.special-final-panel {
  display: grid;
  grid-template-columns: minmax(250px, .5fr) 1fr;
  gap: 18px;
  align-items: center;
  min-height: 132px;
  padding: 24px;
  border: 1px solid rgba(240, 199, 91, .36);
  border-radius: 4px;
  color: #f0c75b;
  background:
    radial-gradient(circle at 14% 20%, rgba(240, 199, 91, .15), transparent 38%),
    linear-gradient(180deg, rgba(18, 18, 14, .9), rgba(3, 9, 16, .95));
  box-shadow: inset 0 0 22px rgba(212, 175, 55, .06), 0 0 22px rgba(0, 0, 0, .34);
}

.special-final-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.special-final-grid-triple {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.special-online-final {
  color: #7fd0ff;
  border-color: rgba(127, 208, 255, .38);
  background:
    radial-gradient(circle at 14% 20%, rgba(127, 208, 255, .14), transparent 38%),
    linear-gradient(180deg, rgba(8, 20, 33, .9), rgba(3, 9, 16, .95));
}

.hecate-attack-final,
.giltas-melee-final {
  color: #f0c75b;
}

.hecate-defense-final,
.giltas-ranged-final {
  color: #7fd0ff;
  border-color: rgba(127, 208, 255, .38);
  background:
    radial-gradient(circle at 14% 20%, rgba(127, 208, 255, .14), transparent 38%),
    linear-gradient(180deg, rgba(8, 20, 33, .9), rgba(3, 9, 16, .95));
}

.giltas-magic-final {
  color: #b47cff;
  border-color: rgba(180, 124, 255, .38);
  background:
    radial-gradient(circle at 14% 20%, rgba(180, 124, 255, .13), transparent 38%),
    linear-gradient(180deg, rgba(13, 16, 31, .9), rgba(3, 9, 16, .95));
}

.special-final-panel > div:first-child span {
  display: inline-flex;
  margin-bottom: 8px;
  color: #7fd0ff;
  font-size: 13px;
  font-weight: 950;
}

.special-final-panel strong {
  display: block;
  color: #f4e1b8;
  font-size: 24px;
  line-height: 1.45;
  font-weight: 950;
  text-shadow: 0 1px 0 #000;
}

.special-final-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.special-final-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 3px 12px;
  border: 1px solid rgba(240, 199, 91, .3);
  border-radius: 4px;
  color: #fff3c7;
  background: rgba(212, 175, 55, .08);
  font-size: 14px;
  line-height: 1.4;
  font-weight: 950;
}

.special-online-final .special-final-tags span {
  border-color: rgba(127, 208, 255, .28);
  color: #e9f3ff;
  background: rgba(80, 160, 255, .07);
}

.hecate-defense-final .special-final-tags span,
.giltas-ranged-final .special-final-tags span {
  border-color: rgba(127, 208, 255, .28);
  color: #e9f3ff;
  background: rgba(80, 160, 255, .07);
}

.giltas-magic-final .special-final-tags span {
  border-color: rgba(180, 124, 255, .26);
  color: #efe6ff;
  background: rgba(180, 124, 255, .07);
}

.special-ability-panel {
  position: relative;
  padding: 18px;
  overflow: hidden;
}

.special-level-list {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.special-level-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 7px;
  min-height: 42px;
  padding: 10px;
  border: 1px solid rgba(111, 181, 255, .16);
  border-radius: 4px;
  background: rgba(2, 8, 15, .42);
}

.special-level-list b {
  display: inline-grid;
  place-items: center;
  flex: 0 0 58px;
  min-height: 25px;
  border: 1px solid rgba(127, 208, 255, .34);
  border-radius: 4px;
  color: #7fd0ff;
  background: rgba(127, 208, 255, .055);
  font-size: 12px;
  font-weight: 950;
}

.special-level-list span {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  width: fit-content;
  max-width: 100%;
  padding: 2px 8px;
  border: 1px solid rgba(111, 181, 255, .16);
  border-radius: 4px;
  color: #e9f3ff;
  background: rgba(5, 18, 30, .55);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 900;
  white-space: nowrap;
}

.special-level-list .special-max {
  grid-column: 1 / -1;
  border-color: rgba(240, 199, 91, .48);
  background: linear-gradient(90deg, rgba(212, 175, 55, .12), rgba(4, 12, 20, .5));
}

.special-level-list .special-max b {
  border-color: rgba(240, 199, 91, .58);
  color: #ffe8a7;
  background: rgba(212, 175, 55, .09);
}

.special-level-list .special-max span {
  color: #fff3c7;
  border-color: rgba(240, 199, 91, .22);
}

.special-level-list-vertical {
  grid-template-columns: 1fr;
}

.special-level-list-vertical .special-max {
  grid-column: auto;
}

.special-growth-details {
  display: grid;
  gap: 12px;
}

.special-growth-details summary {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  min-width: 240px;
  padding: 0 22px;
  border: 1px solid rgba(240, 199, 91, .48);
  border-radius: 4px;
  color: #ffe8a7;
  background:
    linear-gradient(180deg, rgba(34, 27, 13, .92), rgba(4, 10, 18, .96));
  box-shadow: 0 0 18px rgba(212, 175, 55, .12), inset 0 0 14px rgba(212, 175, 55, .055);
  cursor: pointer;
  font-size: 15px;
  font-weight: 950;
  list-style: none;
  user-select: none;
}

.special-growth-details summary::-webkit-details-marker {
  display: none;
}

.special-growth-details summary::after {
  content: "+";
  color: #7fd0ff;
  font-size: 17px;
  font-weight: 950;
}

.special-growth-details[open] summary::after {
  content: "-";
}

.special-growth-details[open] summary {
  border-color: rgba(127, 208, 255, .45);
  color: #e9f3ff;
}

.special-growth-details .special-ability-panel {
  margin-top: 12px;
  animation: specialSlideDown .18s ease-out;
}

.tower-page {
  padding-bottom: 64px;
}

.tower-rule-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.tower-rule-card,
.tower-series-panel {
  border: 1px solid rgba(111, 181, 255, .25);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(8, 20, 33, .88), rgba(3, 9, 16, .94));
  box-shadow: inset 0 0 18px rgba(80, 160, 255, .045), 0 0 20px rgba(0, 0, 0, .32);
}

.tower-rule-card {
  min-height: 162px;
  padding: 20px;
  font-family: "Noto Sans TC", "Source Han Sans TC", sans-serif;
}

.tower-rule-card strong {
  display: block;
  color: #f4e1b8;
  font-size: 17px;
  line-height: 1.45;
  font-weight: 950;
  text-shadow: 0 1px 0 #000;
}

.tower-rule-card ul {
  display: grid;
  gap: 7px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  color: #dce8f4;
  font-size: 15px;
  line-height: 1.7;
  font-weight: 850;
}

.tower-rule-card li {
  position: relative;
  padding-left: 17px;
}

.tower-rule-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #7fd0ff;
  box-shadow: 0 0 8px rgba(127, 208, 255, .5);
}

.tower-risk-card {
  border-color: rgba(240, 199, 91, .34);
  background:
    radial-gradient(circle at 22% 18%, rgba(240, 199, 91, .13), transparent 40%),
    linear-gradient(180deg, rgba(20, 18, 14, .9), rgba(3, 9, 16, .94));
}

.tower-rune-final {
  color: #b47cff;
  border-color: rgba(180, 124, 255, .38);
  background:
    radial-gradient(circle at 14% 20%, rgba(180, 124, 255, .13), transparent 38%),
    linear-gradient(180deg, rgba(13, 16, 31, .9), rgba(3, 9, 16, .95));
}

.tower-rune-final .special-final-tags span {
  border-color: rgba(180, 124, 255, .26);
  color: #efe6ff;
  background: rgba(180, 124, 255, .07);
}

.tower-statue-final {
  color: #f0c75b;
}

.tower-series-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.tower-growth-panel {
  margin-top: 12px;
  padding: 14px;
}

.tower-growth-details summary {
  font-size: 15px;
}

.tower-growth-details summary::after {
  content: "+";
  color: #7fd0ff;
  font-size: 17px;
  font-weight: 950;
}

.tower-growth-details[open] summary {
  font-size: 15px;
}

.tower-growth-details[open] summary::before {
  content: none;
}

.tower-growth-details[open] summary::after {
  content: "-";
  font-size: 17px;
}

.tower-growth-details .summary-open {
  display: none;
}

.tower-growth-details[open] .summary-closed {
  display: none;
}

.tower-growth-details[open] .summary-open {
  display: inline;
}

.tower-series-panel {
  overflow: hidden;
}

.tower-series-panel header {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 20px;
  border-bottom: 1px solid rgba(111, 181, 255, .18);
  background:
    radial-gradient(circle at 12% 18%, rgba(127, 208, 255, .11), transparent 36%),
    linear-gradient(180deg, rgba(10, 24, 39, .72), rgba(3, 9, 16, .35));
}

.tower-rune-series header {
  background:
    radial-gradient(circle at 12% 18%, rgba(180, 124, 255, .12), transparent 36%),
    linear-gradient(180deg, rgba(16, 18, 38, .72), rgba(3, 9, 16, .35));
}

.tower-series-panel header span {
  display: inline-flex;
  color: #7fd0ff;
  font-size: 13px;
  font-weight: 950;
}

.tower-rune-series header span {
  color: #d8c2ff;
}

.tower-series-panel header strong {
  display: block;
  margin-top: 4px;
  color: #ffe8a7;
  font-size: 24px;
  font-weight: 950;
  text-shadow: 0 1px 0 #000;
}

.tower-series-panel header p {
  margin: 0;
  color: #dce8f4;
  font-size: 14px;
  line-height: 1.7;
  font-weight: 850;
}

.tower-level-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 14px;
  list-style: none;
}

.tower-level-list li {
  display: grid;
  grid-template-columns: 44px 58px 72px 1fr;
  gap: 10px;
  align-items: center;
  min-height: 58px;
  padding: 9px 10px;
  border: 1px solid rgba(111, 181, 255, .16);
  border-radius: 4px;
  background: rgba(2, 8, 15, .42);
}

.tower-level-list img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  image-rendering: auto;
  border: 1px solid rgba(111, 181, 255, .18);
  border-radius: 4px;
  background: radial-gradient(circle, rgba(127, 208, 255, .1), rgba(2, 8, 15, .78));
}

.tower-level-list b {
  display: inline-grid;
  place-items: center;
  min-height: 26px;
  border: 1px solid rgba(240, 199, 91, .32);
  border-radius: 4px;
  color: #ffe8a7;
  background: rgba(212, 175, 55, .06);
  font-size: 13px;
  font-weight: 950;
}

.tower-level-list li > strong {
  display: inline-grid;
  place-items: center;
  min-height: 26px;
  border: 1px solid rgba(127, 208, 255, .26);
  border-radius: 4px;
  color: #e9f3ff;
  background: rgba(127, 208, 255, .055);
  font-size: 13px;
  font-weight: 950;
  text-shadow: 0 1px 0 #000;
}

.tower-level-list div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tower-level-list span {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 2px 8px;
  border: 1px solid rgba(111, 181, 255, .16);
  border-radius: 4px;
  color: #e9f3ff;
  background: rgba(5, 18, 30, .55);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 900;
}

.tower-level-list .tower-max {
  border-color: rgba(240, 199, 91, .44);
  background: linear-gradient(90deg, rgba(212, 175, 55, .1), rgba(4, 12, 20, .48));
}

.tower-level-list .tower-max span {
  color: #fff3c7;
  border-color: rgba(240, 199, 91, .22);
  background: rgba(212, 175, 55, .07);
}

.color-page {
  padding-bottom: 64px;
}

.color-rule-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.color-rule-card,
.color-type-panel,
.color-ability-row {
  border: 1px solid rgba(111, 181, 255, .25);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(8, 20, 33, .88), rgba(3, 9, 16, .94));
  box-shadow: inset 0 0 18px rgba(80, 160, 255, .045), 0 0 20px rgba(0, 0, 0, .32);
}

.color-rule-card {
  min-height: 172px;
  padding: 20px;
  font-family: "Noto Sans TC", "Source Han Sans TC", sans-serif;
}

.color-rule-card strong,
.color-type-panel strong,
.color-ability-row header strong {
  color: #f4e1b8;
  font-size: 17px;
  line-height: 1.45;
  font-weight: 950;
  text-shadow: 0 1px 0 #000;
}

.color-rule-card strong,
.color-ability-row header strong {
  display: block;
}

.color-type-panel strong {
  display: flex;
  align-items: center;
  gap: 10px;
}

.color-type-panel strong img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  padding: 4px;
  border: 1px solid rgba(127, 208, 255, .28);
  border-radius: 4px;
  background: rgba(5, 18, 30, .64);
  box-shadow: inset 0 0 10px rgba(127, 208, 255, .06);
}

.color-rule-card ul {
  display: grid;
  gap: 7px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  color: #dce8f4;
  font-size: 15px;
  line-height: 1.7;
  font-weight: 850;
}

.color-rule-card li {
  position: relative;
  padding-left: 17px;
}

.color-rule-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: #7fd0ff;
  box-shadow: 0 0 8px rgba(127, 208, 255, .5);
}

.color-warning-card {
  border-color: rgba(240, 199, 91, .36);
  background:
    radial-gradient(circle at 20% 18%, rgba(240, 199, 91, .13), transparent 38%),
    linear-gradient(180deg, rgba(22, 18, 12, .9), rgba(3, 9, 16, .94));
}

.color-tier-strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.color-tier {
  display: grid;
  place-items: center;
  gap: 6px;
  min-height: 82px;
  padding: 14px 12px;
  border: 1px solid currentColor;
  border-radius: 4px;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, currentColor 15%, transparent), transparent 58%),
    linear-gradient(180deg, rgba(8, 20, 33, .78), rgba(3, 9, 16, .94));
  font-size: 18px;
  font-weight: 950;
  text-align: center;
  text-shadow: 0 1px 0 #000;
  box-shadow:
    inset 0 0 16px rgba(255, 255, 255, .035),
    0 0 14px color-mix(in srgb, currentColor 15%, transparent),
    0 0 16px rgba(0, 0, 0, .28);
}

.color-tier strong {
  display: block;
  font-size: 20px;
  line-height: 1.1;
  font-weight: 950;
}

.color-tier span {
  color: #b9cde1;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 850;
  text-shadow: none;
}

.tier-common { color: #d8dce4; }
.tier-craft { color: #ff55d9; }
.tier-royal { color: #53a3ff; }
.tier-sacred { color: #ff4949; }
.tier-zero { color: #f5ff4d; }

.color-tier.tier-zero {
  min-height: 92px;
  border-width: 2px;
  background:
    radial-gradient(circle at 50% 18%, rgba(245, 255, 77, .18), transparent 38%),
    linear-gradient(180deg, rgba(32, 35, 8, .76), rgba(3, 9, 16, .96));
  box-shadow:
    inset 0 0 18px rgba(245, 255, 77, .1),
    0 0 18px rgba(245, 255, 77, .14);
}

.color-tier.tier-zero strong {
  font-size: 23px;
  text-shadow: 0 0 10px rgba(245, 255, 77, .34), 0 1px 0 #000;
}

.color-final-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.color-final-card {
  min-height: 148px;
  padding: 20px;
  border: 1px solid rgba(226, 180, 76, .44);
  border-radius: 4px;
  background:
    radial-gradient(circle at 78% 8%, rgba(245, 255, 77, .12), transparent 34%),
    linear-gradient(180deg, rgba(23, 20, 12, .92), rgba(4, 10, 17, .96));
  box-shadow:
    inset 0 0 20px rgba(226, 180, 76, .08),
    0 0 22px rgba(0, 0, 0, .38);
}

.color-final-card strong {
  display: block;
  margin-bottom: 14px;
  color: #ffe7a6;
  font-size: 18px;
  line-height: 1.45;
  font-weight: 950;
  text-shadow: 0 1px 0 #000, 0 0 8px rgba(226, 180, 76, .28);
}

.color-final-card div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.color-final-card span {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 3px 10px;
  border: 1px solid rgba(226, 180, 76, .36);
  border-radius: 4px;
  color: #f7fbff;
  background: rgba(29, 22, 9, .58);
  font-size: 14px;
  line-height: 1.35;
  font-weight: 900;
}

.color-rule-grid-compact .color-rule-card {
  min-height: 0;
}

.color-rule-grid-compact .color-rule-card ul {
  margin-top: 10px;
}

.color-rule-grid-compact .color-rule-card li {
  line-height: 1.65;
}

.color-mobile-filter {
  display: none;
}

.color-ability-table {
  display: grid;
  gap: 10px;
}

.color-ability-row {
  display: grid;
  grid-template-columns: 168px 1fr;
  overflow: hidden;
}

.color-ability-row header {
  display: grid;
  align-content: start;
  gap: 7px;
  padding: 16px 18px;
  border-right: 1px solid rgba(111, 181, 255, .18);
  background:
    radial-gradient(circle at 24% 18%, rgba(127, 208, 255, .11), transparent 38%),
    rgba(2, 8, 15, .32);
}

.color-ability-row header span {
  color: #7fd0ff;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 900;
}

.color-ability-cells {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.color-cell {
  display: grid;
  align-content: start;
  gap: 6px;
  min-height: 76px;
  padding: 10px 14px;
  border-left: 1px solid rgba(111, 181, 255, .12);
  background:
    linear-gradient(180deg, rgba(8, 20, 33, .42), rgba(2, 8, 15, .5));
}

.color-cell b {
  display: inline-flex;
  width: fit-content;
  min-height: 28px;
  align-items: center;
  padding: 3px 12px;
  border: 2px solid currentColor;
  border-radius: 5px;
  background: rgba(255, 255, 255, .055);
  font-size: 15px;
  font-weight: 950;
  box-shadow: inset 0 0 10px rgba(255, 255, 255, .04), 0 0 12px color-mix(in srgb, currentColor 18%, transparent);
}

.color-cell span {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  min-height: 26px;
  align-items: center;
  padding: 2px 8px;
  border: 1px solid rgba(111, 181, 255, .16);
  border-radius: 4px;
  color: #e9f3ff;
  background: rgba(5, 18, 30, .55);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 900;
}

.color-type-panel {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 0;
  overflow: hidden;
}

.color-type-panel > div {
  padding: 20px;
}

.color-type-panel > div + div {
  border-left: 1px solid rgba(111, 181, 255, .18);
}

.color-type-panel p {
  margin: 10px 0 0;
  color: #dce8f4;
  font-size: 15px;
  line-height: 1.8;
  font-weight: 850;
}

/* Announcement center */
.announcement-page {
  padding-bottom: 54px;
}

.announcement-title-panel p {
  max-width: none;
}

.pinned-announcement-grid {
  display: grid;
  gap: 8px;
}

.pinned-announcement,
.announcement-row,
.history-announcement-box,
.announcement-detail-card {
  border: 1px solid rgba(111, 181, 255, .25);
  border-radius: 4px;
  background:
    radial-gradient(circle at 14% 12%, rgba(111, 181, 255, .08), transparent 34%),
    linear-gradient(180deg, rgba(8, 20, 33, .9), rgba(3, 9, 16, .95));
  box-shadow: inset 0 0 18px rgba(80, 160, 255, .045), 0 0 18px rgba(0, 0, 0, .26);
}

.pinned-announcement {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 12px 16px;
  border-color: rgba(226, 180, 76, .38);
  text-decoration: none;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.pinned-announcement:hover,
.announcement-row:hover {
  border-color: rgba(127, 208, 255, .55);
  background:
    radial-gradient(circle at 14% 12%, rgba(111, 181, 255, .13), transparent 34%),
    linear-gradient(180deg, rgba(10, 28, 45, .94), rgba(3, 10, 18, .97));
  transform: translateY(-1px);
}

.pinned-announcement header,
.announcement-row header,
.announcement-detail-header > div {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pinned-announcement header {
  gap: 8px;
}

.announcement-tag {
  display: inline-flex;
  min-width: 48px;
  min-height: 24px;
  align-items: center;
  justify-content: center;
  padding: 2px 10px;
  border: 1px solid rgba(111, 181, 255, .35);
  border-radius: 3px;
  color: #cdeeff;
  background: rgba(18, 50, 80, .22);
  font-size: 13px;
  font-weight: 950;
}

.announcement-tag.pinned {
  color: #ffe7a6;
  border-color: rgba(226, 180, 76, .65);
  background: rgba(93, 63, 12, .32);
}

.announcement-tag.event {
  color: #ffd194;
  border-color: rgba(231, 146, 63, .58);
  background: rgba(100, 54, 14, .28);
}

.announcement-tag.update {
  color: #9feaff;
  border-color: rgba(82, 205, 255, .48);
  background: rgba(18, 84, 128, .24);
}

.announcement-tag.maintenance {
  color: #ffb6a8;
  border-color: rgba(210, 82, 70, .52);
  background: rgba(96, 24, 20, .24);
}

.announcement-tag.system {
  color: #d4c0ff;
  border-color: rgba(160, 130, 255, .48);
  background: rgba(55, 42, 100, .24);
}

.pinned-announcement time,
.announcement-row time,
.announcement-detail-header time {
  color: #8fb4d8;
  font-size: 14px;
  font-weight: 800;
}

.pinned-announcement h3,
.announcement-row h3 {
  margin: 0;
  color: #ffe7a6;
  font-size: 18px;
  font-weight: 950;
  line-height: 1.4;
}

.pinned-announcement p,
.announcement-row p,
.history-announcement-box p,
.announcement-detail-header p,
.announcement-detail-block li,
.announcement-info-line dd {
  color: #dce8f4;
  line-height: 1.7;
  font-weight: 800;
}

.pinned-announcement p,
.history-announcement-box p {
  margin: 6px 0 0;
}

.history-announcement-box p {
  margin: 0;
}

.pinned-announcement a,
.announcement-section-head a,
.announcement-detail-footer a,
.announcement-related-links a,
.history-announcement-box a {
  color: #7fd0ff;
  font-weight: 950;
  text-decoration: none;
}

.pinned-announcement a:hover,
.announcement-section-head a:hover,
.announcement-detail-footer a:hover,
.announcement-related-links a:hover,
.history-announcement-box a:hover {
  color: #c8f4ff;
}

.announcement-filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.announcement-filter-bar button {
  min-height: 32px;
  padding: 5px 13px;
  border: 1px solid rgba(111, 181, 255, .35);
  border-radius: 3px;
  color: #e8f6ff;
  background: rgba(5, 18, 30, .78);
  font-size: 14px;
  font-weight: 950;
  cursor: pointer;
}

.announcement-filter-bar button.active {
  color: #ffe7a6;
  border-color: rgba(226, 180, 76, .72);
  background: linear-gradient(180deg, rgba(66, 43, 9, .72), rgba(5, 18, 30, .88));
}

.announcement-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.announcement-section-head h2 {
  margin: 0;
}

.announcement-list {
  display: grid;
  gap: 8px;
}

.announcement-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 12px 16px;
  text-decoration: none;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.announcement-row h3 {
  margin: 0;
}

.announcement-row p {
  margin: 5px 0 0;
  line-height: 1.55;
}

.announcement-row-main > time {
  display: inline-block;
  margin-top: 5px;
}

.history-announcement-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 16px;
}

.history-announcement-box a {
  flex: 0 0 auto;
  padding: 6px 12px;
  border: 1px solid rgba(111, 181, 255, .32);
  border-radius: 3px;
  background: rgba(11, 33, 52, .45);
}

.announcement-detail-card {
  padding: 26px 28px;
}

.announcement-detail-header {
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(111, 181, 255, .18);
}

.announcement-detail-header h1 {
  margin: 16px 0 10px;
  color: #f7fbff;
  font-size: 34px;
  line-height: 1.25;
  font-weight: 950;
  text-shadow: 0 0 10px rgba(80, 190, 255, .32), 0 2px 0 rgba(0, 0, 0, .85);
}

.announcement-detail-header p {
  margin: 0;
}

.announcement-detail-body {
  display: grid;
  gap: 18px;
  padding-top: 20px;
}

.announcement-event-banner {
  overflow: hidden;
  margin: 0;
  border: 1px solid rgba(111, 181, 255, .24);
  border-radius: 4px;
  background: rgba(2, 10, 18, .36);
}

.announcement-event-banner img {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: cover;
}

.announcement-event-time {
  padding: 18px 20px;
  border: 1px solid rgba(220, 170, 70, .48);
  border-radius: 4px;
  background:
    linear-gradient(135deg, rgba(52, 35, 10, .58), rgba(3, 12, 22, .88));
  box-shadow: inset 0 0 18px rgba(220, 170, 70, .08);
}

.announcement-event-time span {
  display: block;
  margin-bottom: 6px;
  color: #7fd0ff;
  font-size: 13px;
  font-weight: 950;
}

.announcement-event-time strong {
  display: block;
  color: #ffe7a6;
  font-size: 28px;
  font-weight: 950;
  line-height: 1.25;
}

.announcement-event-info-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.announcement-event-flow {
  display: flex;
  align-items: stretch;
  gap: 12px;
}

.announcement-flow-step {
  position: relative;
  flex: 1 1 0;
  display: grid;
  gap: 8px;
  align-content: center;
  min-height: 82px;
  padding: 14px 16px;
  border: 1px solid rgba(111, 181, 255, .24);
  border-radius: 4px;
  background: rgba(4, 18, 30, .58);
}

.announcement-flow-step:not(:last-child)::after {
  content: "↓";
  position: absolute;
  right: -15px;
  top: 50%;
  color: #ffe08c;
  font-size: 22px;
  font-weight: 950;
  transform: translateY(-50%) rotate(-90deg);
}

.announcement-flow-step span {
  color: #7fd0ff;
  font-size: 12px;
  font-weight: 950;
}

.announcement-flow-step strong {
  color: #f4fbff;
  font-size: 17px;
  line-height: 1.45;
}

.announcement-highlight-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.announcement-highlight-card {
  min-height: 74px;
  padding: 16px;
  border: 1px solid rgba(220, 170, 70, .5);
  border-radius: 4px;
  color: #ffe7a6;
  background:
    linear-gradient(180deg, rgba(44, 30, 8, .54), rgba(3, 12, 22, .78));
  font-size: 18px;
  font-weight: 950;
  line-height: 1.45;
}

.announcement-notice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.announcement-notice-grid article {
  padding: 13px 14px;
  border: 1px solid rgba(111, 181, 255, .18);
  border-radius: 4px;
  background: rgba(2, 10, 18, .38);
}

.announcement-notice-grid h3 {
  margin: 0 0 8px;
  color: #7fd0ff;
  font-size: 15px;
  font-weight: 950;
}

.announcement-notice-grid p {
  margin: 0;
  color: #dcefff;
  font-size: 14px;
  line-height: 1.65;
}

.announcement-notice-grid p + p {
  margin-top: 6px;
}

.announcement-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.announcement-info-line {
  padding: 13px 15px;
  border: 1px solid rgba(111, 181, 255, .2);
  border-radius: 3px;
  background: rgba(2, 10, 18, .35);
}

.announcement-info-line dt {
  margin-bottom: 6px;
  color: #7fd0ff;
  font-size: 13px;
  font-weight: 950;
}

.announcement-info-line dd {
  margin: 0;
}

.announcement-detail-block {
  padding: 16px 18px;
  border: 1px solid rgba(111, 181, 255, .2);
  border-radius: 3px;
  background: rgba(2, 10, 18, .3);
}

.announcement-detail-block h2 {
  margin: 0 0 10px;
  color: #ffe7a6;
  font-size: 19px;
  font-weight: 950;
}

.announcement-event-content p {
  margin: 0;
  color: #e3f3ff;
  font-size: 16px;
  line-height: 1.85;
}

.announcement-event-content p + p {
  margin-top: 8px;
}

.announcement-detail-block ul {
  margin: 0;
  padding-left: 18px;
}

.announcement-detail-block li + li {
  margin-top: 6px;
}

.announcement-related-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.announcement-related-links a {
  padding: 7px 12px;
  border: 1px solid rgba(111, 181, 255, .32);
  border-radius: 3px;
  background: rgba(11, 33, 52, .45);
}

.announcement-detail-footer {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(111, 181, 255, .18);
}

@media (max-width: 768px) {
  .pinned-announcement-grid,
  .announcement-info-grid,
  .announcement-event-info-grid,
  .announcement-highlight-grid,
  .announcement-notice-grid {
    grid-template-columns: 1fr;
  }

  .announcement-event-time strong {
    font-size: 23px;
  }

  .announcement-event-flow {
    flex-direction: column;
  }

  .announcement-flow-step:not(:last-child)::after {
    right: auto;
    left: 50%;
    top: auto;
    bottom: -25px;
    transform: translateX(-50%);
  }

  .announcement-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .history-announcement-box {
    align-items: flex-start;
    flex-direction: column;
  }

  .announcement-section-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .announcement-detail-card {
    padding: 20px 18px;
  }

  .announcement-detail-header h1 {
    font-size: 28px;
  }
}

@media (max-width: 1180px) {
  .basic-summary-grid,
  .basic-overview-grid,
  .blood-flow-steps,
  .basic-compact-grid,
  .basic-note-grid,
  .blood-step-grid,
  .feature-rule-grid,
  .blessing-flow-panel,
  .attribute-scroll-grid,
  .blessing-grid,
  .color-rule-grid,
  .color-type-panel {
    grid-template-columns: 1fr;
  }

  .clan-level-list article {
    grid-template-columns: 74px minmax(0, 1fr);
  }

  .clan-level-list p {
    grid-column: 2;
    text-align: left;
  }

  .color-type-panel > div + div {
    border-left: 0;
    border-top: 1px solid rgba(111, 181, 255, .18);
  }

  .color-ability-row {
    grid-template-columns: 1fr;
  }

  .color-ability-row header {
    border-right: 0;
    border-bottom: 1px solid rgba(111, 181, 255, .18);
  }

  .color-ability-cells {
    grid-template-columns: 1fr;
  }

  .color-cell {
    min-height: auto;
    border-left: 0;
    border-top: 1px solid rgba(111, 181, 255, .12);
  }
}

.tower-statue-list li {
  grid-template-columns: 44px 58px 72px 1fr;
}

@media (max-width: 980px) {
  .basic-title-panel {
    min-height: 92px;
    padding: 18px;
  }

  .basic-title-panel h1 {
    font-size: 30px;
  }

  .basic-summary-grid article,
  .basic-overview-panel,
  .basic-compact-card,
  .basic-note-grid article,
  .blood-step-grid article,
  .blood-flow-panel {
    padding: 14px;
  }

  .basic-summary-grid,
  .basic-overview-grid,
  .basic-compact-grid,
  .basic-note-grid,
  .blood-flow-steps,
  .blood-step-grid,
  .feature-rule-grid,
  .blessing-flow-panel,
  .attribute-scroll-grid,
  .blessing-grid,
  .tower-rule-grid,
  .tower-series-layout {
    grid-template-columns: 1fr;
  }

  .blood-note-card {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .feature-rule-card,
  .attribute-scroll-card,
  .blessing-grid article {
    min-height: 0;
  }

  .blessing-flow-steps {
    flex-direction: column;
    align-items: stretch;
  }

  .attribute-scroll-card b {
    min-width: 0;
    width: 100%;
  }

  .clan-level-list article {
    grid-template-columns: 1fr;
  }

  .clan-level-list b {
    justify-content: flex-start;
    padding: 0 12px;
  }

  .clan-level-list p {
    grid-column: auto;
    text-align: left;
  }

  .tower-level-list li {
    grid-template-columns: 40px 54px 68px 1fr;
  }

  .color-rule-grid,
  .color-final-grid,
  .color-type-panel {
    grid-template-columns: 1fr;
  }

  .color-type-panel > div + div {
    border-left: 0;
    border-top: 1px solid rgba(111, 181, 255, .18);
  }

  .color-ability-row {
    grid-template-columns: 1fr;
  }

  .color-ability-row header {
    border-right: 0;
    border-bottom: 1px solid rgba(111, 181, 255, .18);
  }

  .color-ability-cells {
    grid-template-columns: 1fr;
  }

  .color-cell {
    min-height: auto;
    border-left: 0;
    border-top: 1px solid rgba(111, 181, 255, .12);
  }
}

@media (max-width: 620px) {
  .tower-level-list li {
    grid-template-columns: 38px 54px 1fr;
  }

  .tower-level-list b {
    justify-self: start;
  }

  .tower-level-list li > strong {
    justify-self: stretch;
  }

  .tower-level-list div {
    grid-column: 1 / -1;
  }

  .color-tier-strip {
    grid-template-columns: 1fr;
  }

  .color-mobile-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px;
  }

  .color-mobile-filter button {
    min-height: 36px;
    padding: 6px 14px;
    border: 1px solid rgba(111, 181, 255, .32);
    border-radius: 4px;
    color: #e9f3ff;
    background: rgba(5, 18, 30, .65);
    font: inherit;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
  }

  .color-mobile-filter button.active {
    color: #ffe6a8;
    border-color: rgba(226, 180, 76, .72);
    background: linear-gradient(180deg, rgba(92, 63, 16, .76), rgba(6, 16, 28, .88));
    box-shadow: inset 0 0 12px rgba(226, 180, 76, .12);
  }

  .color-detail-section[data-color-detail="weapon"] .color-ability-row[data-color-category]:not([data-color-category="weapon"]),
  .color-detail-section[data-color-detail="armor"] .color-ability-row[data-color-category]:not([data-color-category="armor"]),
  .color-detail-section[data-color-detail="staff"] .color-ability-row[data-color-category]:not([data-color-category="staff"]) {
    display: none;
  }
}

.promotion-live-page {
  padding-bottom: 58px;
}

.promotion-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr);
  gap: 18px;
  align-items: stretch;
  margin-top: 18px;
  border: 1px solid rgba(111, 181, 255, .24);
  border-radius: 4px;
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 16%, rgba(127, 208, 255, .14), transparent 38%),
    linear-gradient(180deg, rgba(7, 18, 31, .88), rgba(3, 9, 16, .96));
  box-shadow: inset 0 0 22px rgba(80, 160, 255, .045), 0 0 24px rgba(0, 0, 0, .34);
}

.promotion-hero-art {
  min-height: 330px;
  position: relative;
  overflow: hidden;
}

.promotion-hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 62%, rgba(3, 9, 16, .9)),
    linear-gradient(180deg, transparent 62%, rgba(3, 9, 16, .72));
  pointer-events: none;
}

.promotion-hero-art img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.promotion-hero-copy {
  display: grid;
  align-content: center;
  gap: 14px;
  padding: 34px;
}

.promotion-hero-copy > span {
  color: #7fd0ff;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: 1px;
}

.promotion-hero-copy h1 {
  margin: 0;
  color: #f7fbff;
  font-family: "Noto Sans TC", "Source Han Sans TC", "Microsoft JhengHei", sans-serif;
  font-size: 44px;
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1.25;
  text-shadow:
    0 0 8px rgba(80, 190, 255, .55),
    0 0 18px rgba(30, 120, 220, .35),
    0 2px 0 rgba(0, 0, 0, .75);
}

.promotion-hero-copy p {
  margin: 0;
  color: #dce8f4;
  font-size: 15px;
  font-weight: 850;
  line-height: 1.8;
}

.promotion-hero-actions,
.promotion-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.promotion-hero-actions a,
.promotion-cta-panel a,
.promotion-form-actions button,
.promotion-form-actions a,
.promotion-admin-filter button,
.promotion-admin-logout,
.promotion-admin-table button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  border: 1px solid rgba(212, 175, 55, .46);
  border-radius: 4px;
  color: #ffe8a7;
  background: linear-gradient(180deg, rgba(31, 23, 10, .86), rgba(4, 10, 18, .96));
  box-shadow: inset 0 0 12px rgba(212, 175, 55, .06);
  cursor: pointer;
  font-size: 14px;
  font-weight: 950;
}

.promotion-hero-actions a:first-child,
.promotion-form-actions button {
  border-color: rgba(127, 208, 255, .42);
  color: #e9f3ff;
  background: linear-gradient(180deg, rgba(10, 28, 44, .9), rgba(4, 10, 18, .96));
}

.promotion-rule-grid,
.promotion-live-grid,
.promotion-form-grid,
.promotion-admin-stats {
  display: grid;
  gap: 14px;
}

.promotion-rule-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.promotion-live-grid {
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
}

.promotion-rule-card,
.promotion-live-card,
.promotion-reward-card,
.promotion-cta-panel,
.promotion-report-form,
.promotion-admin-panel,
.promotion-admin-stats article {
  border: 1px solid rgba(111, 181, 255, .24);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(8, 20, 33, .88), rgba(3, 9, 16, .94));
  box-shadow: inset 0 0 18px rgba(80, 160, 255, .04), 0 0 20px rgba(0, 0, 0, .28);
}

.promotion-rule-card,
.promotion-live-card,
.promotion-reward-card {
  min-height: 170px;
  padding: 20px;
}

.promotion-rule-card strong,
.promotion-live-card strong,
.promotion-reward-card strong,
.promotion-cta-panel strong {
  display: block;
  color: #f4e1b8;
  font-size: 20px;
  font-weight: 950;
  line-height: 1.45;
  text-shadow: 0 1px 0 #000;
}

.promotion-rule-card ul,
.promotion-live-card ul {
  margin: 12px 0 0;
  padding-left: 18px;
  color: #dce8f4;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.85;
}

.promotion-rule-card p,
.promotion-reward-card p,
.promotion-cta-panel p {
  margin: 9px 0 0;
  color: #dce8f4;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.75;
}

.promotion-line-card {
  border-color: rgba(212, 175, 55, .34);
  background:
    radial-gradient(circle at 16% 18%, rgba(212, 175, 55, .12), transparent 40%),
    linear-gradient(180deg, rgba(18, 18, 14, .88), rgba(3, 9, 16, .94));
}

.promotion-reward-card {
  border-color: rgba(240, 199, 91, .36);
  background:
    radial-gradient(circle at 14% 16%, rgba(240, 199, 91, .14), transparent 38%),
    linear-gradient(180deg, rgba(18, 18, 14, .9), rgba(3, 9, 16, .96));
}

.promotion-reward-card > span {
  display: inline-flex;
  margin-bottom: 8px;
  color: #7fd0ff;
  font-size: 13px;
  font-weight: 950;
}

.promotion-reward-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.promotion-reward-tags em {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 3px 10px;
  border: 1px solid rgba(240, 199, 91, .3);
  border-radius: 4px;
  color: #fff3c7;
  background: rgba(212, 175, 55, .08);
  font-size: 13px;
  font-style: normal;
  font-weight: 950;
}

.promotion-cta-panel {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 22px;
}

.promotion-report-form {
  display: grid;
  gap: 18px;
  padding: 22px;
}

.promotion-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.promotion-report-form label,
.promotion-admin-filter label {
  display: grid;
  gap: 8px;
}

.promotion-report-form label span,
.promotion-admin-filter label span,
.promotion-type-select legend {
  color: #f4e1b8;
  font-size: 14px;
  font-weight: 950;
}

.promotion-report-form input,
.promotion-admin-filter input {
  min-height: 40px;
  width: 100%;
  padding: 0 12px;
  border: 1px solid rgba(111, 181, 255, .28);
  border-radius: 4px;
  outline: 0;
  color: #e9f3ff;
  background: rgba(2, 8, 15, .72);
  font-size: 14px;
  font-weight: 850;
}

.promotion-report-form input:focus,
.promotion-admin-filter input:focus {
  border-color: rgba(127, 208, 255, .62);
  box-shadow: 0 0 14px rgba(98, 194, 255, .14), inset 0 0 14px rgba(80, 160, 255, .08);
}

.promotion-type-select {
  margin: 0;
  padding: 16px;
  border: 1px solid rgba(111, 181, 255, .2);
  border-radius: 4px;
  background: rgba(2, 8, 15, .34);
}

.promotion-type-select legend {
  padding: 0 6px;
}

.promotion-type-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 14px;
}

.promotion-type-select label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 12px 14px;
  border: 1px solid rgba(111, 181, 255, .22);
  border-radius: 4px;
  color: #dce8f4;
  background: rgba(3, 12, 22, .58);
  font-weight: 900;
  cursor: pointer;
}

.promotion-type-select label:has(input:checked) {
  border-color: rgba(84, 190, 255, .58);
  background: linear-gradient(180deg, rgba(8, 31, 50, .72), rgba(3, 12, 20, .82));
  box-shadow: inset 0 0 14px rgba(70, 180, 255, .08);
}

.promotion-type-select input[type="radio"] {
  width: 22px;
  min-height: 22px;
  padding: 0;
}

.promotion-type-select label span {
  display: grid;
  gap: 3px;
}

.promotion-type-select label strong {
  color: #eaf7ff;
  font-size: 16px;
  font-weight: 950;
  line-height: 1.25;
}

.promotion-type-select label em {
  color: #8fdfff;
  font-size: 13px;
  font-style: normal;
  font-weight: 850;
  line-height: 1.35;
}

.promotion-url-panel,
.promotion-form-note {
  padding: 16px;
  border: 1px solid rgba(111, 181, 255, .18);
  border-radius: 4px;
  background: rgba(2, 8, 15, .34);
}

.promotion-url-panel > strong,
.promotion-form-note strong {
  color: #f4e1b8;
  font-size: 16px;
  font-weight: 950;
}

.promotion-url-panel p,
.promotion-form-note p {
  margin: 8px 0 0;
  color: #b8c5d0;
  font-size: 13px;
  font-weight: 850;
}

.promotion-url-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.promotion-form-message {
  min-height: 22px;
  margin: 0;
  color: #b8c5d0;
  font-size: 14px;
  font-weight: 900;
}

.promotion-form-message.is-ok {
  color: #6eff96;
}

.promotion-form-message.is-error {
  color: #ff8d85;
}

.promotion-admin-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
  margin-bottom: 14px;
}

.promotion-admin-bulk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 0 0 14px;
}

.promotion-admin-bulk-actions button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 1px solid rgba(240, 199, 91, .46);
  border-radius: 4px;
  color: #ffe8a7;
  background: linear-gradient(180deg, rgba(29, 26, 13, .86), rgba(8, 10, 13, .94));
  font-weight: 950;
  cursor: pointer;
}

.promotion-admin-bulk-actions button:hover {
  border-color: rgba(127, 208, 255, .58);
  color: #ffffff;
  box-shadow: 0 0 16px rgba(127, 208, 255, .12);
}

.promotion-admin-bulk-actions span {
  margin-left: 4px;
  color: #7fd0ff;
  font-size: 13px;
  font-weight: 950;
}

.promotion-admin-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 18px;
}

.promotion-admin-stats article {
  min-height: 96px;
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 18px;
  text-align: center;
}

.promotion-admin-stats span {
  color: #7fd0ff;
  font-size: 13px;
  font-weight: 950;
}

.promotion-admin-stats strong {
  color: #ffe8a7;
  font-size: 26px;
  font-weight: 950;
}

.promotion-admin-panel {
  overflow: auto;
}

.promotion-admin-table {
  width: 100%;
  min-width: 1060px;
  border-collapse: collapse;
}

.promotion-admin-table th,
.promotion-admin-table td {
  padding: 12px 10px;
  border-bottom: 1px solid rgba(111, 181, 255, .14);
  color: #e9f3ff;
  font-size: 13px;
  font-weight: 850;
  text-align: left;
  vertical-align: top;
}

.promotion-admin-table th {
  color: #f4e1b8;
  background: rgba(3, 9, 16, .54);
  font-weight: 950;
}

.promotion-admin-row-check {
  width: 18px;
  height: 18px;
  accent-color: #7fd0ff;
  cursor: pointer;
}

.drop-toolbar {
  display: grid;
  grid-template-columns: auto minmax(260px, 520px);
  gap: 16px;
  align-items: end;
}

.drop-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.drop-tabs button {
  min-height: 38px;
  padding: 0 18px;
  border: 1px solid rgba(111, 181, 255, .32);
  border-radius: 4px;
  color: #e9f3ff;
  background: linear-gradient(180deg, rgba(8, 20, 33, .88), rgba(3, 9, 16, .94));
  font-size: 15px;
  font-weight: 950;
  cursor: pointer;
}

.drop-tabs button.is-active,
.drop-tabs button:hover {
  border-color: rgba(240, 199, 91, .58);
  color: #ffe8a7;
  box-shadow: 0 0 16px rgba(127, 208, 255, .12);
}

.drop-search {
  display: grid;
  gap: 8px;
}

.drop-search-wrap {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.drop-search span {
  color: #f4e1b8;
  font-size: 14px;
  font-weight: 950;
}

.drop-search input {
  min-height: 42px;
  width: 100%;
  padding: 0 13px;
  border: 1px solid rgba(111, 181, 255, .28);
  border-radius: 4px;
  color: #ffffff;
  background: rgba(2, 8, 14, .78);
  font: inherit;
  font-weight: 850;
  outline: none;
}

.drop-search input:focus {
  border-color: rgba(127, 208, 255, .62);
  box-shadow: 0 0 14px rgba(98, 194, 255, .14), inset 0 0 14px rgba(80, 160, 255, .08);
}

.drop-clear-search,
.drop-filter-bar button,
.drop-expand-button {
  border: 1px solid rgba(111, 181, 255, .28);
  border-radius: 4px;
  color: #e9f3ff;
  background: linear-gradient(180deg, rgba(8, 20, 33, .88), rgba(3, 9, 16, .94));
  font: inherit;
  font-size: 14px;
  font-weight: 950;
  cursor: pointer;
}

.drop-clear-search {
  min-height: 42px;
  padding: 0 14px;
}

.drop-clear-search:disabled {
  cursor: default;
  opacity: .45;
}

.drop-mode-help {
  margin-top: 12px;
  color: #9fdfff;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.6;
}

.drop-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.drop-filter-bar button {
  min-height: 32px;
  padding: 0 13px;
}

.drop-filter-bar button.is-active,
.drop-filter-bar button:hover,
.drop-clear-search:hover,
.drop-expand-button:hover {
  border-color: rgba(240, 199, 91, .58);
  color: #ffe8a7;
  box-shadow: 0 0 14px rgba(127, 208, 255, .12);
}

.drop-note-panel {
  margin-top: 14px;
  padding: 13px 16px;
  border: 1px solid rgba(240, 199, 91, .24);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(29, 26, 13, .36), rgba(8, 10, 13, .5));
}

.drop-note-panel p {
  margin: 0;
  color: #f4e1b8;
  font-size: 14px;
  line-height: 1.7;
  font-weight: 850;
}

.drop-result-heading {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
}

.drop-result-heading h2 {
  margin-bottom: 0;
}

.drop-result-heading span {
  color: #7fd0ff;
  font-size: 14px;
  font-weight: 950;
}

.drop-result-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.drop-card {
  border: 1px solid rgba(111, 181, 255, .24);
  border-radius: 4px;
  background:
    radial-gradient(circle at 14% 10%, rgba(127, 208, 255, .07), transparent 32%),
    linear-gradient(180deg, rgba(7, 18, 30, .9), rgba(3, 9, 16, .96));
  box-shadow: inset 0 0 16px rgba(127, 208, 255, .04), 0 0 18px rgba(0, 0, 0, .22);
  overflow: hidden;
}

.drop-card.is-compact .drop-item-grid {
  padding-bottom: 14px;
}

.drop-card header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 15px 17px;
  border-bottom: 1px solid rgba(111, 181, 255, .16);
}

.drop-card header strong {
  color: #ffe8a7;
  font-size: 18px;
  line-height: 1.45;
  font-weight: 950;
}

.drop-card header small {
  display: block;
  margin-top: 3px;
  color: rgba(127, 208, 255, .82);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 850;
}

.drop-card header span {
  color: #7fd0ff;
  font-size: 13px;
  white-space: nowrap;
  font-weight: 950;
}

.drop-item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 8px;
  padding: 14px 16px 16px;
}

.drop-item {
  min-height: 46px;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 9px;
  align-items: center;
  padding: 6px 8px;
  border: 1px solid rgba(111, 181, 255, .16);
  border-radius: 4px;
  background: rgba(2, 8, 14, .48);
}

.drop-type-equipment {
  border-color: rgba(167, 216, 255, .28);
  background: linear-gradient(180deg, rgba(20, 42, 58, .54), rgba(2, 8, 14, .58));
}

.drop-type-money {
  border-color: rgba(255, 221, 92, .64);
  background:
    radial-gradient(circle at 18% 35%, rgba(255, 221, 92, .18), transparent 34%),
    linear-gradient(180deg, rgba(91, 64, 12, .54), rgba(24, 18, 8, .62));
  box-shadow: inset 0 0 14px rgba(255, 221, 92, .12), 0 0 12px rgba(255, 221, 92, .08);
}

.class-page {
  max-width: 1700px;
}

.class-title-panel {
  min-height: 130px;
}

.class-card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.class-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow: hidden;
  border: 1px solid rgba(92, 166, 226, .34);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(12, 28, 44, .78), rgba(4, 10, 18, .9)),
    radial-gradient(circle at 50% 4%, rgba(105, 185, 255, .16), transparent 42%);
  box-shadow: inset 0 0 22px rgba(80, 170, 255, .07), 0 16px 32px rgba(0, 0, 0, .28);
}

.class-card.class-featured {
  border-color: rgba(210, 173, 78, .72);
  box-shadow: inset 0 0 24px rgba(209, 167, 67, .09), 0 0 18px rgba(70, 165, 255, .1);
}

.class-card figure {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 310px;
  margin: 0;
  padding: 18px 16px 8px;
  background:
    radial-gradient(circle at 50% 54%, rgba(112, 190, 255, .18), transparent 48%),
    linear-gradient(180deg, rgba(7, 16, 28, .34), rgba(2, 6, 12, .66));
}

.class-card figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 0 16px rgba(85, 180, 255, .18));
}

.class-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border-top: 1px solid rgba(92, 166, 226, .18);
}

.class-role {
  color: #6bd7ff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
}

.class-card h3,
.class-profile-info h1 {
  margin: 0;
  color: #ffe5a0;
  font-family: "Noto Serif TC", "Source Han Serif TC", "Noto Sans TC", serif;
  font-weight: 900;
  letter-spacing: 0;
}

.class-card h3 {
  font-size: 24px;
}

.class-card p,
.class-info-panel p {
  margin: 0;
  color: #e8f4ff;
  line-height: 1.75;
}

.class-card dl,
.class-score-list {
  display: grid;
  gap: 8px;
  margin: 0;
}

.class-card dl div,
.class-score-list div,
.class-build-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid rgba(92, 166, 226, .24);
  border-radius: 5px;
  background: rgba(2, 10, 18, .48);
}

.class-card dt,
.class-score-list dt,
.class-build-list b {
  color: #7bdcff;
  font-weight: 800;
}

.class-card dd,
.class-score-list dd,
.class-build-list span {
  margin: 0;
  color: #fff2b9;
  font-weight: 800;
}

.class-detail-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  margin-top: auto;
  border: 1px solid rgba(207, 166, 66, .72);
  border-radius: 5px;
  color: #fff2b9;
  background: linear-gradient(180deg, rgba(89, 65, 19, .62), rgba(16, 15, 13, .72));
  font-weight: 900;
  text-decoration: none;
}

.class-detail-link.is-disabled {
  opacity: .52;
  cursor: default;
}

.class-detail-layout {
  display: grid;
  grid-template-columns: minmax(320px, 430px) minmax(0, 1fr);
  gap: 24px;
}

.class-profile-panel,
.class-info-panel {
  border: 1px solid rgba(92, 166, 226, .34);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(11, 27, 43, .8), rgba(3, 9, 17, .9)),
    radial-gradient(circle at 50% 6%, rgba(107, 195, 255, .14), transparent 45%);
  box-shadow: inset 0 0 22px rgba(82, 174, 255, .07), 0 16px 32px rgba(0, 0, 0, .26);
}

.class-profile-panel {
  align-self: start;
  overflow: hidden;
}

.class-large-figure {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 530px;
  margin: 0;
  padding: 22px;
  background:
    radial-gradient(circle at 50% 52%, rgba(87, 170, 255, .2), transparent 50%),
    linear-gradient(180deg, rgba(6, 14, 24, .4), rgba(2, 6, 12, .74));
}

.class-large-figure img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 0 22px rgba(104, 196, 255, .22));
}

.class-profile-info {
  display: grid;
  gap: 14px;
  padding: 20px;
  border-top: 1px solid rgba(92, 166, 226, .2);
}

.class-profile-info h1 {
  font-size: 34px;
}

.class-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.class-tag-list span {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid rgba(95, 180, 255, .34);
  border-radius: 5px;
  color: #dff5ff;
  background: rgba(4, 18, 30, .68);
  font-weight: 800;
}

.class-tag-list.is-large span {
  min-height: 34px;
  border-color: rgba(207, 166, 66, .45);
}

.class-detail-content {
  display: grid;
  gap: 18px;
}

.class-info-panel {
  padding: 20px;
}

.class-info-panel h2 {
  margin: 0 0 14px;
  color: #ffe5a0;
  font-size: 22px;
}

.class-skill-table {
  display: grid;
  gap: 10px;
}

.class-skill-head,
.class-skill-row {
  display: grid;
  grid-template-columns: 1fr 1fr minmax(240px, 2fr) 100px;
  gap: 10px;
  align-items: center;
}

.class-skill-head span {
  color: #7bdcff;
  font-weight: 900;
}

.class-skill-row {
  padding: 12px;
  border: 1px solid rgba(92, 166, 226, .24);
  border-radius: 6px;
  background: rgba(3, 11, 19, .58);
}

.class-skill-row strong {
  color: #fff0b8;
}

.class-skill-row span,
.class-skill-row p,
.class-skill-row em {
  margin: 0;
  color: #e7f5ff;
  font-style: normal;
}

.class-growth-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.class-growth-grid div {
  padding: 14px;
  border: 1px solid rgba(92, 166, 226, .24);
  border-radius: 6px;
  background: rgba(2, 10, 18, .5);
}

.class-growth-grid strong {
  display: block;
  margin-bottom: 6px;
  color: #ffe5a0;
}

.class-build-list {
  display: grid;
  gap: 10px;
}

.class-simple-page .class-title-panel {
  min-height: 126px;
}

.class-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.class-switcher button {
  min-width: 92px;
  height: 38px;
  border: 1px solid rgba(92, 166, 226, .42);
  border-radius: 5px;
  color: #eaf7ff;
  background: linear-gradient(180deg, rgba(8, 25, 42, .82), rgba(3, 10, 18, .88));
  font-weight: 900;
  cursor: pointer;
}

.class-switcher button.active {
  border-color: rgba(215, 176, 72, .82);
  color: #fff2b9;
  background:
    radial-gradient(circle at 50% 0, rgba(255, 218, 98, .18), transparent 52%),
    linear-gradient(180deg, rgba(72, 52, 13, .72), rgba(8, 18, 28, .92));
  box-shadow: inset 0 0 16px rgba(255, 220, 95, .08), 0 0 14px rgba(95, 190, 255, .12);
}

.class-simple-layout {
  display: grid;
  grid-template-columns: minmax(300px, 390px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.class-portrait-panel,
.class-skill-panel {
  border: 1px solid rgba(92, 166, 226, .34);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(9, 24, 40, .82), rgba(3, 9, 17, .92)),
    radial-gradient(circle at 50% 5%, rgba(95, 185, 255, .14), transparent 48%);
  box-shadow: inset 0 0 22px rgba(82, 174, 255, .07), 0 16px 32px rgba(0, 0, 0, .24);
}

.class-portrait-panel {
  position: sticky;
  top: 18px;
  overflow: hidden;
}

.class-name-block {
  display: grid;
  gap: 6px;
  padding: 18px 18px 12px;
  border-bottom: 1px solid rgba(92, 166, 226, .18);
}

.class-name-block span {
  color: #67d4ff;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .08em;
}

.class-name-block h2 {
  margin: 0;
  color: #ffe5a0;
  font-size: 31px;
  font-family: "Noto Sans TC", "Source Han Sans TC", "Microsoft JhengHei", sans-serif;
  font-weight: 950;
}

.class-name-block p {
  max-width: 360px;
  margin: 0;
  color: #e9f5ff;
  line-height: 1.6;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.class-portrait-panel figure {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 455px;
  margin: 14px;
  padding: 16px;
  border: 1px solid rgba(92, 166, 226, .24);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 60%, rgba(91, 178, 255, .16), transparent 54%),
    linear-gradient(180deg, rgba(3, 10, 18, .36), rgba(1, 5, 10, .78));
  box-shadow: inset 0 0 18px rgba(82, 174, 255, .08), 0 0 16px rgba(54, 160, 255, .08);
}

.class-portrait-panel img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 0 20px rgba(99, 195, 255, .18));
}

.class-skill-panel {
  display: grid;
  gap: 16px;
  padding: 18px;
}

.compact-heading {
  margin-bottom: 0;
}

.class-skill-note {
  margin: 6px 0 0;
  color: #a9bfd0;
  font-size: 14px;
  line-height: 1.6;
}

.class-level-reward {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid rgba(84, 190, 255, .34);
  border-radius: 6px;
  color: #dff7ff;
  background:
    linear-gradient(180deg, rgba(8, 31, 50, .66), rgba(3, 12, 20, .78));
  box-shadow: inset 0 0 14px rgba(70, 180, 255, .07);
  font-size: 14px;
  font-weight: 850;
  line-height: 1.55;
}

.class-level-reward::before {
  content: "52等獎勵";
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  margin-right: 10px;
  padding: 2px 8px;
  border: 1px solid rgba(220, 170, 70, .55);
  border-radius: 4px;
  color: #ffe0a0;
  background: rgba(90, 55, 12, .22);
  font-size: 12px;
  font-weight: 950;
}

.class-reward-panel {
  display: grid;
  gap: 8px;
  padding: 16px 18px;
}

.class-reward-panel p {
  margin: 0;
  color: #dff1ff;
  font-size: 15px;
  font-weight: 850;
  line-height: 1.65;
}

.class-skill-list {
  column-count: 2;
  column-gap: 10px;
}

.simple-skill-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-content: start;
  break-inside: avoid;
  margin: 0 0 10px;
  padding: 12px;
  border: 1px solid rgba(92, 166, 226, .28);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(5, 16, 28, .72), rgba(2, 8, 14, .82));
}

.simple-skill-headline {
  display: grid;
  gap: 8px;
}

.simple-skill-title-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}

.simple-skill-card h3 {
  margin: 0;
  color: #ffe5a0;
  font-size: 18px;
  font-weight: 950;
}

.simple-skill-progress-note {
  color: #8fdcff;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: .04em;
}

.simple-skill-card.is-closed {
  border-color: rgba(190, 76, 76, .42);
  background:
    linear-gradient(180deg, rgba(40, 13, 17, .44), rgba(2, 8, 14, .82));
}

.simple-skill-card.is-closed h3 {
  color: #ffb7b7;
}

.simple-skill-card p {
  margin: 0;
  color: #e9f5ff;
  line-height: 1.55;
  font-size: 13px;
}

.simple-skill-lines {
  display: grid;
  gap: 4px;
  margin: 0;
}

.simple-skill-lines p {
  margin: 0;
}

.simple-skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.simple-skill-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid rgba(95, 180, 255, .34);
  border-radius: 5px;
  color: #dff6ff;
  background: rgba(2, 13, 23, .72);
  font-size: 12px;
  font-weight: 900;
}

.simple-skill-card.is-pending {
  border-color: rgba(92, 166, 226, .2);
  background: rgba(2, 10, 17, .58);
}

.simple-skill-card.is-pending .simple-skill-lines p {
  color: #9fb4c5;
}

.simple-skill-card.is-closed .simple-skill-tags span {
  border-color: rgba(255, 116, 116, .48);
  color: #ffd1d1;
  background: rgba(70, 18, 24, .68);
}

@media (max-width: 1280px) {
  .class-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .class-card-grid,
  .class-detail-layout {
    grid-template-columns: 1fr;
  }

  .class-card figure {
    height: 292px;
    padding: 14px 12px 6px;
  }

  .class-large-figure {
    height: 440px;
  }

  .class-card-body {
    padding: 16px;
  }

  .class-card p,
  .class-info-panel p {
    line-height: 1.65;
  }

  .class-card dl div,
  .class-score-list div,
  .class-build-list div {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    align-items: start;
    justify-content: start;
    min-width: 0;
    padding: 8px;
  }

  .class-card dd,
  .class-score-list dd {
    flex-shrink: 0;
    font-size: 14px;
  }

  .class-card-body p {
    overflow-wrap: anywhere;
  }

  .class-skill-head {
    display: none;
  }

  .class-skill-row,
  .class-growth-grid {
    grid-template-columns: 1fr;
  }

  .class-switcher {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 8px;
    margin-bottom: 14px;
  }

  .class-switcher button {
    flex: 0 0 auto;
  }

  .class-simple-layout {
    grid-template-columns: 1fr;
  }

  .class-portrait-panel {
    position: static;
  }

  .class-name-block {
    padding: 16px;
  }

  .class-name-block h2 {
    font-size: 30px;
  }

  .class-portrait-panel figure {
    height: 430px;
    padding: 16px;
  }

  .class-skill-panel {
    padding: 16px;
  }

  .class-skill-list {
    column-count: 1;
  }

  .simple-skill-card {
    grid-template-columns: minmax(0, 1fr);
    padding: 14px;
  }
}

.drop-type-material {
  border-color: rgba(78, 154, 255, .26);
  background: linear-gradient(180deg, rgba(11, 34, 67, .44), rgba(2, 8, 14, .58));
}

.drop-type-scroll {
  border-color: rgba(240, 199, 91, .32);
  background: linear-gradient(180deg, rgba(62, 49, 18, .38), rgba(2, 8, 14, .58));
}

.drop-type-skillbook {
  border-color: rgba(125, 208, 255, .38);
  background: linear-gradient(180deg, rgba(18, 47, 69, .46), rgba(9, 18, 34, .6));
  box-shadow: inset 0 0 12px rgba(127, 208, 255, .06);
}

.drop-type-potion {
  border-color: rgba(93, 226, 145, .28);
  background: linear-gradient(180deg, rgba(16, 57, 33, .38), rgba(2, 8, 14, .58));
}

.drop-type-proof {
  border-color: rgba(255, 220, 101, .42);
  background: linear-gradient(180deg, rgba(75, 55, 14, .42), rgba(2, 8, 14, .58));
}

.drop-type-boss {
  border-color: rgba(190, 127, 255, .42);
  background: linear-gradient(180deg, rgba(47, 24, 72, .48), rgba(24, 18, 10, .56));
  box-shadow: inset 0 0 12px rgba(190, 127, 255, .08);
}

.drop-item.is-keyword-match {
  border-color: rgba(255, 232, 167, .78);
  box-shadow: 0 0 14px rgba(240, 199, 91, .16), inset 0 0 10px rgba(240, 199, 91, .08);
}

.drop-item img,
.drop-item-fallback {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.drop-item-fallback {
  display: grid;
  place-items: center;
  border: 1px solid rgba(111, 181, 255, .24);
  border-radius: 4px;
  color: #7fd0ff;
  background: rgba(111, 181, 255, .08);
  font-weight: 950;
}

.drop-item span {
  color: #e9f3ff;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 850;
}

.special-drop-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.special-drop-title .drop-item-fallback,
.special-drop-title img {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
}

.special-drop-monster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  padding: 14px 16px 16px;
}

.special-drop-monster {
  min-height: 38px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(111, 181, 255, .28);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(8, 20, 33, .78), rgba(3, 9, 16, .9));
}

.special-drop-monster.is-keyword-match {
  border-color: rgba(255, 232, 167, .78);
  box-shadow: 0 0 14px rgba(240, 199, 91, .14), inset 0 0 10px rgba(240, 199, 91, .08);
}

.special-drop-monster .monster-name {
  color: #e9f3ff;
  font-size: 15px;
  line-height: 1.35;
  font-weight: 950;
}

.special-drop-monster .monster-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.monster-type,
.monster-location {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 8px;
  border-radius: 3px;
  font-size: 12px;
  line-height: 1.2;
  font-weight: 900;
}

.monster-type.boss {
  color: #ffe6a0;
  border: 1px solid rgba(220, 170, 70, .65);
  background: rgba(120, 70, 20, .22);
  box-shadow: inset 0 0 10px rgba(220, 120, 50, .08);
}

.monster-type.mob {
  color: #8fe8ff;
  border: 1px solid rgba(80, 190, 255, .55);
  background: rgba(20, 80, 120, .18);
  box-shadow: inset 0 0 10px rgba(80, 190, 255, .08);
}

.monster-location {
  color: #cfefff;
  border: 1px solid rgba(90, 170, 255, .35);
  background: rgba(20, 50, 80, .22);
}

.monster-location.more {
  color: #f4d78a;
  border-color: rgba(220, 170, 70, .42);
  background: rgba(120, 78, 20, .16);
  cursor: pointer;
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
}

.monster-location.more:hover,
.monster-location.more:focus-visible {
  color: #fff4c9;
  border-color: rgba(255, 210, 105, .72);
  background: rgba(150, 98, 22, .28);
  box-shadow: 0 0 12px rgba(220, 170, 70, .18);
  outline: none;
}

.monster-location.more.is-collapse {
  color: #9fe9ff;
  border-color: rgba(90, 190, 255, .46);
  background: rgba(25, 88, 130, .18);
}


.drop-highlight {
  padding: 0 2px;
  border-radius: 2px;
  color: #07101a;
  background: #ffe48a;
  box-shadow: 0 0 10px rgba(255, 228, 138, .28);
}

.drop-expand-button {
  display: block;
  width: calc(100% - 32px);
  min-height: 36px;
  margin: 0 16px 16px;
}

.drop-empty-state {
  margin: 14px 0 0;
  padding: 18px;
  border: 1px solid rgba(111, 181, 255, .24);
  border-radius: 4px;
  color: #f4e1b8;
  background: rgba(2, 8, 14, .64);
  font-weight: 950;
}

.drop-back-top {
  position: fixed;
  right: 26px;
  bottom: 26px;
  z-index: 20;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid rgba(240, 199, 91, .48);
  border-radius: 4px;
  color: #ffe8a7;
  background: linear-gradient(180deg, rgba(20, 26, 31, .92), rgba(3, 9, 16, .96));
  box-shadow: 0 0 18px rgba(0, 0, 0, .45), 0 0 18px rgba(127, 208, 255, .12);
  font: inherit;
  font-size: 14px;
  font-weight: 950;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
  cursor: pointer;
}

.drop-back-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.promotion-admin-url-list {
  display: grid;
  gap: 6px;
}

.promotion-admin-url-list a {
  color: #7fd0ff;
  word-break: break-all;
}

.promotion-admin-empty-row {
  color: #b8c5d0 !important;
  text-align: center !important;
}

.promotion-admin-logout {
  margin-top: 12px;
}

@keyframes specialSlideDown {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.doll-stage-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.doll-power-list {
  position: relative;
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.doll-power-list::before {
  content: "";
  position: absolute;
  left: 28px;
  top: 16px;
  bottom: 13px;
  width: 1px;
  background: linear-gradient(180deg, rgba(127, 208, 255, .42), rgba(240, 199, 91, .38));
  opacity: .75;
}

.doll-stage-list li {
  position: relative;
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 12px;
  align-items: center;
  padding: 8px 0 0;
}

.doll-stage-list li > span {
  position: relative;
  z-index: 1;
  display: inline-grid;
  place-items: center;
  min-width: 50px;
  height: 24px;
  padding: 0 8px;
  border: 1px solid rgba(127, 208, 255, .24);
  border-radius: 3px;
  color: #d8dce2;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  background: rgba(7, 18, 30, .44);
}

.doll-stage-list b {
  color: #e9f3ff;
  font-size: 13px;
  line-height: 1.55;
  font-weight: 900;
}

.doll-stage-list b span {
  display: block;
  min-width: 0;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.doll-stage-list .doll-stage-1 > span {
  color: #f1f4f8;
  border-color: rgba(216, 220, 226, .48);
  background: linear-gradient(180deg, rgba(216, 220, 226, .16), rgba(24, 30, 38, .42));
}

.doll-stage-list .doll-stage-2 > span {
  color: #66ff99;
  border-color: rgba(102, 255, 153, .55);
  background: linear-gradient(180deg, rgba(35, 118, 62, .38), rgba(8, 40, 22, .48));
}

.doll-stage-list .doll-stage-3 > span {
  color: #7fd0ff;
  border-color: rgba(127, 208, 255, .58);
  background: linear-gradient(180deg, rgba(34, 101, 151, .42), rgba(8, 36, 62, .52));
}

.doll-stage-list .doll-stage-4 > span {
  color: #ff7770;
  border-color: rgba(255, 93, 85, .58);
  background: linear-gradient(180deg, rgba(132, 36, 34, .42), rgba(58, 12, 14, .52));
}

.doll-stage-list .doll-stage-5 > span {
  color: #ffd86a;
  border-color: rgba(240, 199, 91, .66);
  background: linear-gradient(180deg, rgba(126, 88, 18, .48), rgba(48, 32, 6, .58));
}

.doll-stage-list .doll-proc-line {
  margin-top: 2px;
  color: #f0c75b;
}

.doll-refine-panel {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid rgba(212, 175, 55, .34);
  border-radius: 4px;
  background:
    radial-gradient(circle at 12% 10%, rgba(212, 175, 55, .1), transparent 40%),
    rgba(5, 13, 23, .62);
}

.doll-refine-rules {
  display: grid;
  gap: 5px;
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
}

.doll-refine-rules li {
  position: relative;
  padding-left: 15px;
  color: #dbefff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.55;
}

.doll-refine-rules li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #f0c75b;
  box-shadow: 0 0 8px rgba(240, 199, 91, .42);
}

.doll-refine-category-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.doll-refine-category-list span {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 3px 9px;
  border: 1px solid rgba(127, 208, 255, .34);
  border-radius: 3px;
  color: #cfefff;
  background: rgba(7, 20, 34, .62);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
}

.doll-refine-toggle {
  width: 100%;
  min-height: 34px;
  margin-top: 8px;
  border: 1px solid rgba(212, 175, 55, .58);
  border-radius: 3px;
  color: #f7df9e;
  background: linear-gradient(180deg, rgba(86, 58, 12, .72), rgba(24, 17, 7, .88));
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: inset 0 0 12px rgba(240, 199, 91, .08);
}

.doll-refine-toggle:hover,
.doll-refine-toggle[aria-expanded="true"] {
  filter: brightness(1.12);
}

.doll-refine-ability-panel {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.doll-refine-ability-panel[hidden] {
  display: none;
}

.doll-refine-group {
  padding-top: 8px;
  border-top: 1px solid rgba(111, 181, 255, .12);
}

.doll-refine-group h4 {
  margin: 0 0 7px;
  color: #8fe8ff;
  font-size: 13px;
  font-weight: 900;
}

.doll-refine-rows {
  display: grid;
  gap: 7px;
  margin: 0;
}

.doll-refine-rows div {
  display: grid;
  grid-template-columns: minmax(98px, .9fr) 1.2fr;
  gap: 10px;
  align-items: center;
}

.doll-refine-rows dt {
  color: #e9f6ff;
  font-size: 13px;
  font-weight: 900;
}

.doll-refine-rows dd {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0;
}

.doll-refine-rows span {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 2px 8px;
  border: 1px solid rgba(127, 208, 255, .3);
  border-radius: 3px;
  color: #e9f6ff;
  background: rgba(7, 20, 34, .68);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
}

.doll-stage-list .doll-unavailable {
  display: flex;
  min-height: 92px;
  align-items: center;
  justify-content: center;
  padding: 18px 0 0;
}

.doll-stage-list .doll-unavailable b {
  color: #f4e1b8;
  font-size: 24px;
  letter-spacing: .04em;
  text-shadow: 0 0 14px rgba(127, 208, 255, .28);
}

.relic-card em {
  display: inline-grid;
  place-items: center;
  min-width: 54px;
  height: 24px;
  margin: 9px 0;
  border: 1px solid rgba(212, 175, 55, .42);
  border-radius: 3px;
  color: #f1dfb7;
  background: rgba(22, 15, 4, .42);
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
}

.achievement-stage-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.achievement-stage-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid rgba(111, 181, 255, .12);
  border-radius: 4px;
  background: rgba(2, 8, 14, .38);
}

.achievement-stage-medal {
  width: 38px;
  height: 48px;
  position: relative;
  display: grid;
  place-items: start center;
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(135deg, transparent 58%, color-mix(in srgb, currentColor 65%, #241306) 0 74%, transparent 0) 7px 28px / 11px 18px no-repeat,
    linear-gradient(225deg, transparent 58%, color-mix(in srgb, currentColor 65%, #241306) 0 74%, transparent 0) 20px 28px / 11px 18px no-repeat;
  font-size: 11px;
  font-weight: 900;
}

.achievement-stage-medal::before {
  content: "";
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, currentColor 78%, #fff);
  background:
    radial-gradient(circle at 34% 25%, rgba(255, 255, 255, .78), transparent 13%),
    radial-gradient(circle at 50% 50%, transparent 40%, rgba(2, 7, 12, .26) 41% 48%, transparent 49%),
    radial-gradient(circle at 50% 50%, currentColor, color-mix(in srgb, currentColor 64%, #151515) 72%);
  box-shadow:
    inset 0 0 7px rgba(255, 255, 255, .34),
    inset 0 0 0 4px rgba(3, 8, 14, .18),
    0 0 12px color-mix(in srgb, currentColor 38%, transparent);
}

.achievement-stage-medal::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 31px;
  width: 20px;
  height: 15px;
  background:
    linear-gradient(115deg, color-mix(in srgb, currentColor 72%, #211307) 0 42%, transparent 43%) left / 50% 100% no-repeat,
    linear-gradient(245deg, color-mix(in srgb, currentColor 72%, #211307) 0 42%, transparent 43%) right / 50% 100% no-repeat;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55));
}

.achievement-stage-body {
  display: grid;
  gap: 7px;
}

.achievement-stage-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.achievement-stage-top > span {
  color: #7fd0ff;
  font-size: 17px;
  font-weight: 900;
}

.achievement-stage-list b {
  color: rgba(241, 223, 183, .78);
  font-size: 12px;
  font-weight: 900;
}

.achievement-stage-list em {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 7px;
  margin: 0;
  padding: 0;
  border: 0;
  color: #e9f3ff;
  background: transparent;
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
  line-height: 1.55;
  text-align: left;
}

.achievement-stage-list em span {
  display: block;
  padding: 2px 7px;
  border: 1px solid rgba(127, 208, 255, .14);
  border-radius: 3px;
  background: rgba(7, 18, 30, .66);
  font-size: 13px;
}

.achievement-stage-list .achievement-stage-1 .achievement-stage-medal,
.achievement-stage-list .achievement-stage-1 .achievement-stage-top span,
.achievement-stage-list .achievement-stage-1 em {
  color: #c86f3f;
}

.achievement-stage-list .achievement-stage-2 .achievement-stage-medal,
.achievement-stage-list .achievement-stage-2 .achievement-stage-top span,
.achievement-stage-list .achievement-stage-2 em {
  color: #c7cbd0;
}

.achievement-stage-list .achievement-stage-3 .achievement-stage-medal,
.achievement-stage-list .achievement-stage-3 .achievement-stage-top span,
.achievement-stage-list .achievement-stage-3 em {
  color: #f0c75b;
}

.achievement-stage-list .achievement-stage-simple {
  grid-template-columns: minmax(0, 1fr);
}

.achievement-stage-list .achievement-stage-simple b,
.achievement-stage-list .achievement-stage-simple em {
  grid-column: auto;
}

.method-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.method-grid article {
  min-height: 130px;
  padding: 20px;
}

.method-grid strong {
  display: block;
  margin-bottom: 10px;
  color: #f4e1b8;
  font-size: 18px;
  font-weight: 900;
}

.ability-placeholder {
  min-height: 150px;
  display: grid;
  gap: 14px;
  align-content: center;
}

.ability-placeholder span {
  width: 220px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(111, 181, 255, .34);
  color: #7fd0ff;
  font-size: 13px;
  font-weight: 900;
}

@media (max-width: 1100px) {
  body {
    min-width: 0;
    background:
      linear-gradient(180deg, rgba(5, 8, 14, .26), rgba(5, 8, 14, .9)),
      url("./assets/images/reference_hero_mobile.png") center top / cover fixed no-repeat;
  }

  .site-shell {
    width: min(100% - 28px, 430px);
    padding: 14px 0 28px;
  }

  .content-grid {
    display: block;
  }

  .home-card {
    border-radius: 4px;
  }

  .site-header {
    height: 58px;
    padding: 0 12px;
  }

  .site-logo img {
    width: 166px;
  }

  .site-nav {
    display: none;
  }

  .account-actions {
    margin-left: auto;
  }

  .account-actions a {
    display: none;
  }

  .account-actions::after {
    content: "";
    width: 38px;
    height: 34px;
    display: block;
    border: 1px solid rgba(133, 192, 248, .28);
    border-radius: 4px;
    background:
      linear-gradient(#dbe8f5, #dbe8f5) center 10px / 18px 2px no-repeat,
      linear-gradient(#dbe8f5, #dbe8f5) center 16px / 18px 2px no-repeat,
      linear-gradient(#dbe8f5, #dbe8f5) center 22px / 18px 2px no-repeat,
      rgba(3, 9, 17, .75);
  }

  .hero-banner {
    height: 490px;
    background:
      linear-gradient(180deg, rgba(3, 7, 13, 0) 0%, rgba(3, 7, 13, .12) 68%, rgba(3, 7, 13, .78) 100%),
      url("./assets/images/reference_hero_mobile.png") center top / auto 490px no-repeat,
      #03070d;
  }

  .hero-banner img {
    display: none;
  }

  .quick-links {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin: -54px 16px 0;
  }

  .quick-links a {
    height: 74px;
    gap: 9px;
    padding: 9px 10px;
  }

  .quick-links img {
    width: 42px;
    height: 42px;
  }

  .quick-links b {
    font-size: 14px;
  }

  .quick-links small {
    font-size: 9px;
  }

  .news-panel {
    margin: 18px 14px;
  }

  .panel-title {
    height: 48px;
    padding: 0 12px;
  }

  .panel-title h2 {
    font-size: 18px;
  }

  .news-list {
    padding: 0 14px 16px;
  }

  .news-list li {
    min-height: 32px;
    grid-template-columns: 86px 78px 1fr;
  }

  .news-list time,
  .news-list a {
    font-size: 12px;
  }

  .news-list em {
    width: 62px;
    height: 22px;
    font-size: 11px;
  }

  .side-column {
    display: grid;
    gap: 12px;
    margin-top: 14px;
  }

  .info-page {
    padding: 18px 14px 24px;
  }

  .info-title-panel {
    min-height: 120px;
  }

  .info-title-panel h1 {
    font-size: 30px;
    letter-spacing: 5px;
  }

  .info-title-panel p {
    max-width: 320px;
    font-size: 12px;
    line-height: 1.6;
  }

  .category-grid {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 14px;
  }

  .category-card {
    min-height: 120px;
    padding: 16px;
    grid-template-columns: 48px 1fr;
    column-gap: 12px;
  }

  .category-icon {
    width: 42px;
    height: 42px;
  }

  .category-card strong {
    font-size: 17px;
  }

  .category-card p {
    font-size: 12px;
  }


  .breadcrumb {
    margin: 0 0 10px;
    font-size: 12px;
  }

  .info-title-panel {
    min-height: 92px;
  }

  .category-section {
    margin-top: 18px;
  }

  .category-section h2 {
    font-size: 17px;
  }

  .catalog-search {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px;
  }

  .catalog-search label,
  .catalog-search p {
    grid-column: auto;
  }

  .catalog-search button {
    width: 100%;
  }

  .promotion-hero,
  .promotion-rule-grid,
  .promotion-live-grid,
  .promotion-form-grid,
  .promotion-admin-stats {
    grid-template-columns: 1fr;
  }

  .promotion-hero-art {
    min-height: 220px;
  }

  .promotion-hero-art::after {
    background: linear-gradient(180deg, transparent 48%, rgba(3, 9, 16, .82));
  }

  .promotion-hero-copy {
    padding: 20px;
  }

  .promotion-hero-copy h1 {
    font-size: 30px;
  }

  .promotion-cta-panel,
  .promotion-admin-filter {
    align-items: stretch;
    flex-direction: column;
  }

  .promotion-type-options {
    grid-template-columns: 1fr;
  }

  .promotion-cta-panel a,
  .promotion-admin-filter button,
  .promotion-admin-bulk-actions button {
    width: 100%;
  }

  .drop-toolbar,
  .drop-result-grid {
    grid-template-columns: 1fr;
  }

  .drop-search-wrap {
    grid-template-columns: 1fr;
  }

  .drop-clear-search,
  .drop-filter-bar button {
    width: 100%;
  }

  .drop-filter-bar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .drop-result-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .drop-card header {
    align-items: flex-start;
    flex-direction: column;
  }

  .drop-card header span {
    white-space: normal;
  }

  .drop-item-grid {
    grid-template-columns: 1fr;
  }

  .drop-back-top {
    right: 14px;
    bottom: 14px;
  }

  .promotion-admin-bulk-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .promotion-admin-bulk-actions span {
    margin-left: 0;
  }


  .tier-grid,
  .relic-display-grid,
  .achievement-grid,
  .doll-display-grid,
  .poly-display-grid,
  .weapon-grid,
  .hecate-rule-grid,
  .hecate-rune-grid,
  .giltas-rule-grid,
  .giltas-doll-grid,
  .special-layout,
  .special-rule-grid,
  .special-final-grid,
  .special-level-list,
  .method-grid {
    grid-template-columns: 1fr;
  }

  .tier-card {
    min-height: 58px;
  }

  .relic-card {
    grid-template-columns: 60px 1fr;
    min-height: 146px;
    padding: 16px;
  }

  .achievement-card {
    min-height: 128px;
    padding: 16px;
  }

  .achievement-stage-list li {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .achievement-stage-list em {
    grid-column: auto;
  }

  .relic-icon {
    width: 52px;
    height: 66px;
  }

  .detail-panel p,
  .method-grid p,
  .relic-card p {
    font-size: 12px;
  }

  .detail-section h2 {
    font-size: 17px;
  }

  .hecate-rule-card,
  .hecate-material-card,
  .hecate-rune-card {
    padding: 16px;
  }

  .hecate-rune-card header {
    grid-template-columns: 58px 1fr;
    gap: 12px;
  }

  .hecate-rune-icon {
    width: 56px;
    height: 56px;
  }

  .hecate-rune-icon img {
    max-width: 42px;
    max-height: 42px;
  }

  .hecate-level-list li {
    grid-template-columns: 48px 1fr;
  }

  .giltas-rule-card,
  .giltas-doll-card {
    padding: 16px;
  }

  .giltas-doll-card header {
    grid-template-columns: 58px 1fr;
    gap: 12px;
  }

  .giltas-doll-icon {
    width: 54px;
    height: 54px;
  }

  .giltas-doll-icon img {
    max-width: 42px;
    max-height: 42px;
  }

  .special-main-card,
  .special-rule-card,
  .special-ability-panel {
    padding: 16px;
  }

  .special-main-card {
    grid-template-columns: 58px 1fr;
    gap: 12px;
    min-height: 120px;
  }

  .special-item-icon {
    width: 56px;
    height: 56px;
  }

  .special-item-icon img {
    max-width: 42px;
    max-height: 42px;
  }

  .special-level-list .special-max {
    grid-column: auto;
  }

  .special-featured-item {
    grid-template-columns: 76px 1fr;
  }

  .special-featured-item .special-item-icon {
    width: 72px;
    height: 72px;
  }

  .special-featured-item .special-item-icon img {
    max-width: 54px;
    max-height: 54px;
  }

  .special-final-panel {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 18px;
  }

  .special-final-panel strong {
    font-size: 19px;
  }

  .special-rate-card {
    min-height: 118px;
    padding: 16px;
  }

}

/* content page heavy title override */
.page-title,
.page-hero-title,
.hero-title h1,
.info-title-panel h1,
.promotion-hero-copy h1 {
  font-family: "Noto Sans TC", "Source Han Sans TC", "Microsoft JhengHei", sans-serif !important;
  font-size: 46px !important;
  font-weight: 900 !important;
  letter-spacing: .10em !important;
  line-height: 1.2 !important;
  color: #f6fbff !important;
  -webkit-text-stroke: .45px rgba(255, 255, 255, .75);
  text-shadow:
    0 0 6px rgba(120, 220, 255, .65),
    0 0 16px rgba(40, 150, 255, .45),
    0 2px 0 rgba(0, 0, 0, .9) !important;
}

.page-title .accent,
.page-hero-title .accent,
.hero-title h1 .accent,
.info-title-panel h1 .accent,
.promotion-hero-copy h1 .accent {
  color: #22e6ff !important;
  font-weight: 900 !important;
  -webkit-text-stroke: .45px rgba(34, 230, 255, .7);
  text-shadow:
    0 0 8px rgba(34, 230, 255, .85),
    0 0 20px rgba(34, 160, 255, .55),
    0 2px 0 rgba(0, 0, 0, .9) !important;
}

@media (max-width: 768px) {
  .contact-row {
    grid-template-columns: 1fr;
    align-items: start;
    min-height: auto;
    padding: 16px;
  }

  .contact-actions {
    justify-content: stretch;
  }

  .zero-btn {
    width: 100%;
  }

  .download-card {
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .download-card h3 {
    font-size: 23px;
  }

  .download-primary-btn {
    width: 100%;
  }

  .sponsor-package-grid,
  .sponsor-service-grid,
  .sponsor-service-list,
  .sponsor-rate-grid,
  .sponsor-process,
  .sponsor-notice-list {
    grid-template-columns: 1fr;
  }

  .sponsor-process {
    gap: 8px;
  }

  .sponsor-process b {
    display: block;
    text-align: center;
    color: #d4af37;
    font-size: 20px;
    line-height: 1;
  }

  .sponsor-package-card,
  .sponsor-service-grid article {
    min-height: auto;
  }

  .sponsor-service-options li,
  .sponsor-rate-grid article {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .sponsor-pack-items {
    grid-template-columns: 1fr;
  }

  .sponsor-package-main,
  .sponsor-pack-hero {
    grid-template-columns: 1fr;
  }

  .sponsor-ability-list,
  .sponsor-daily-rewards {
    grid-template-columns: 1fr;
  }

  .page-title,
  .page-hero-title,
  .hero-title h1,
  .info-title-panel h1,
  .promotion-hero-copy h1 {
    font-size: 32px !important;
    letter-spacing: .08em !important;
  }
}

/* Boss soul card system */
.boss-soul-page {
  padding-bottom: 56px;
}

.boss-soul-title-panel {
  margin-bottom: 24px;
}

.boss-soul-intro-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.boss-soul-intro-grid article,
.boss-soul-card,
.boss-soul-status,
.boss-soul-empty {
  border: 1px solid rgba(111, 181, 255, .25);
  background:
    linear-gradient(145deg, rgba(9, 24, 40, .9), rgba(2, 9, 17, .96));
  box-shadow:
    inset 0 0 18px rgba(70, 150, 255, .07),
    0 0 24px rgba(0, 0, 0, .28);
}

.boss-soul-intro-grid article {
  padding: 18px;
  min-height: 118px;
}

.boss-soul-intro-grid strong {
  display: block;
  margin-bottom: 10px;
  color: #f4e1b8;
  font-size: 17px;
  font-weight: 900;
}

.boss-soul-intro-grid p {
  margin: 0;
  color: #dceeff;
  line-height: 1.7;
}

.boss-soul-intro-grid-compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.boss-soul-status {
  margin-top: 14px;
  padding: 14px 18px;
  color: #ffe7a8;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: .04em;
  border-color: rgba(220, 170, 70, .5);
  background:
    linear-gradient(135deg, rgba(44, 32, 10, .82), rgba(4, 9, 17, .96));
}

.boss-soul-toolbar {
  margin-bottom: 14px;
}

.boss-soul-search {
  max-width: 720px;
}

.boss-soul-result-count {
  margin: -4px 0 14px;
  color: #7fd0ff;
  font-size: 14px;
  font-weight: 800;
}

.boss-soul-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.boss-soul-card {
  padding: 18px;
  min-height: 260px;
}

.boss-soul-card header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(111, 181, 255, .16);
}

.boss-soul-card header strong {
  display: block;
  color: #f4e1b8;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .03em;
}

.boss-soul-card header span {
  display: inline-block;
  margin-top: 5px;
  color: #7fd0ff;
  font-size: 13px;
  font-weight: 800;
}

.boss-soul-emblem {
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  border-radius: 50%;
  border: 1px solid rgba(127, 208, 255, .45);
  background:
    radial-gradient(circle at 50% 42%, rgba(159, 235, 255, .95), rgba(82, 161, 255, .28) 24%, rgba(12, 21, 42, .78) 58%, rgba(2, 7, 14, .96) 100%);
  box-shadow:
    inset 0 0 18px rgba(127, 208, 255, .18),
    0 0 18px rgba(80, 170, 255, .18);
  position: relative;
}

.boss-soul-emblem::before,
.boss-soul-emblem::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(244, 225, 184, .7);
  transform: rotate(45deg);
}

.boss-soul-emblem::after {
  inset: 19px;
  border-color: rgba(127, 208, 255, .72);
}

.boss-soul-stage-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.boss-soul-stage {
  padding: 12px;
  border: 1px solid rgba(111, 181, 255, .17);
  background: rgba(1, 7, 14, .48);
}

.boss-soul-stage-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 9px;
}

.boss-soul-stage-head b {
  min-width: 48px;
  padding: 4px 10px;
  text-align: center;
  border: 1px solid currentColor;
  font-size: 13px;
  font-weight: 900;
  background: rgba(0, 0, 0, .22);
}

.boss-soul-stage-head strong {
  color: #f8fbff;
  font-size: 15px;
  font-weight: 900;
}

.boss-soul-abilities {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.boss-soul-abilities span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 9px;
  color: #dff5ff;
  font-size: 13px;
  font-weight: 850;
  border: 1px solid rgba(111, 181, 255, .28);
  background: rgba(6, 21, 36, .72);
}

.boss-soul-stage.stage-common { color: #d8dce2; }
.boss-soul-stage.stage-green { color: #6eff96; }
.boss-soul-stage.stage-blue { color: #62c2ff; }
.boss-soul-stage.stage-purple { color: #b47cff; }
.boss-soul-stage.stage-gold { color: #f0c75b; }

.boss-soul-stage.stage-green .boss-soul-abilities span {
  border-color: rgba(110, 255, 150, .28);
}

.boss-soul-stage.stage-blue .boss-soul-abilities span {
  border-color: rgba(98, 194, 255, .32);
}

.boss-soul-stage.stage-purple .boss-soul-abilities span {
  border-color: rgba(180, 124, 255, .32);
}

.boss-soul-stage.stage-gold .boss-soul-abilities span {
  color: #fff0bd;
  border-color: rgba(240, 199, 91, .42);
  background: rgba(42, 29, 8, .48);
}

.boss-soul-empty {
  grid-column: 1 / -1;
  padding: 28px;
  color: #aebdca;
  text-align: center;
}

@media (max-width: 1120px) {
  .boss-soul-intro-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .boss-soul-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .boss-soul-intro-grid {
    grid-template-columns: 1fr;
  }

  .boss-soul-card {
    min-height: auto;
    padding: 14px;
  }

  .boss-soul-card header strong {
    font-size: 20px;
  }
}

/* BOSS魂卡系統 v2 */
.boss-soul-summary-grid,
.boss-soul-group-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.boss-soul-summary-grid article,
.boss-soul-group-overview article,
.boss-soul-rule-panel {
  border: 1px solid rgba(90, 170, 255, .26);
  background:
    linear-gradient(135deg, rgba(10, 24, 40, .88), rgba(3, 8, 15, .94));
  box-shadow:
    inset 0 0 18px rgba(70, 150, 255, .06),
    0 0 18px rgba(0, 0, 0, .28);
}

.boss-soul-summary-grid article {
  min-height: 124px;
  padding: 18px;
}

.boss-soul-summary-grid strong {
  display: block;
  margin-bottom: 10px;
  color: #ffe4a2;
  font-size: 16px;
  font-weight: 900;
}

.boss-soul-summary-grid b {
  display: block;
  margin-bottom: 10px;
  color: #f8fbff;
  font-size: 20px;
  font-weight: 900;
}

.boss-soul-summary-grid span,
.boss-soul-group-overview span {
  color: #b6d2ef;
  font-size: 14px;
  line-height: 1.65;
}

.boss-soul-rule-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .8fr);
  gap: 18px;
  margin-top: 16px;
  padding: 20px 22px;
}

.boss-soul-rule-panel h3 {
  margin: 0 0 8px;
  color: #ffe4a2;
  font-size: 20px;
  font-weight: 900;
}

.boss-soul-rule-panel p {
  margin: 0;
  color: #dcefff;
  line-height: 1.75;
}

.boss-soul-equip-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-content: center;
}

.boss-soul-equip-chips span {
  padding: 7px 12px;
  color: #dff7ff;
  font-weight: 900;
  border: 1px solid rgba(96, 197, 255, .42);
  background: rgba(7, 34, 55, .72);
}

.boss-soul-group-overview {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.boss-soul-group-overview article {
  position: relative;
  min-height: 128px;
  padding: 18px 18px 18px 78px;
  overflow: hidden;
}

.boss-soul-group-overview article b {
  position: absolute;
  left: 18px;
  top: 20px;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: #dff7ff;
  font-weight: 950;
  border-radius: 50%;
  border: 1px solid rgba(120, 200, 255, .5);
  background: radial-gradient(circle, rgba(50, 170, 255, .24), rgba(2, 9, 18, .9));
}

.boss-soul-group-overview article strong {
  display: block;
  margin-bottom: 8px;
  color: #ffe4a2;
  font-size: 21px;
  font-weight: 950;
}

.boss-soul-card {
  padding: 0;
  overflow: hidden;
}

.boss-soul-card header {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(120, 180, 255, .16);
  background: linear-gradient(180deg, rgba(18, 42, 65, .78), rgba(5, 14, 25, .75));
}

.boss-soul-card header em {
  color: #9fd7ff;
  font-size: 13px;
  font-style: normal;
  line-height: 1.55;
}

.boss-soul-card header strong {
  color: #ffe4a2;
  font-size: 24px;
}

.boss-soul-card header span {
  color: #6ddaff;
  font-size: 14px;
}

.boss-soul-stage-list {
  gap: 0;
  padding: 0;
}

.boss-soul-stage-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 13px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(120, 180, 255, .12);
}

.boss-soul-stage-row:last-child {
  border-bottom: 0;
}

.boss-soul-card-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid rgba(120, 190, 255, .34);
  background:
    radial-gradient(circle at 50% 40%, rgba(90, 180, 255, .18), transparent 62%),
    rgba(3, 10, 18, .78);
}

.boss-soul-card-icon img {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
}

.boss-soul-icon-fallback {
  color: #6ddaff;
  font-size: 16px;
  font-weight: 950;
}

.boss-soul-card-title {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  align-items: center;
  margin-bottom: 9px;
}

.boss-soul-card-title b {
  padding: 4px 9px;
  font-size: 13px;
  border: 1px solid currentColor;
  background: rgba(3, 10, 18, .62);
}

.boss-soul-card-title span {
  color: #f8fbff;
  font-size: 16px;
  font-weight: 900;
}

.boss-soul-stage-row.stage-common .boss-soul-card-title b { color: #d8dce2; }
.boss-soul-stage-row.stage-green .boss-soul-card-title b { color: #6eff96; }
.boss-soul-stage-row.stage-blue .boss-soul-card-title b { color: #62c2ff; }
.boss-soul-stage-row.stage-purple .boss-soul-card-title b { color: #b47cff; }
.boss-soul-stage-row.stage-gold .boss-soul-card-title b { color: #f0c75b; }

.boss-soul-ability {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 9px;
  color: #dff5ff;
  font-size: 13px;
  font-weight: 850;
  border: 1px solid rgba(111, 181, 255, .28);
  background: rgba(6, 21, 36, .72);
}

.boss-soul-ability.muted {
  color: #91a8ba;
}

.group-bravery { border-color: rgba(255, 129, 74, .36) !important; }
.group-shooting { border-color: rgba(106, 210, 255, .36) !important; }
.group-magic { border-color: rgba(180, 124, 255, .38) !important; }
.group-guard { border-color: rgba(120, 210, 170, .34) !important; }
.group-spirit { border-color: rgba(110, 255, 180, .34) !important; }
.group-calamity { border-color: rgba(240, 199, 91, .42) !important; }

@media (max-width: 1180px) {
  .boss-soul-summary-grid,
  .boss-soul-group-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .boss-soul-rule-panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .boss-soul-summary-grid,
  .boss-soul-group-overview {
    grid-template-columns: 1fr;
  }

  .boss-soul-stage-row {
    grid-template-columns: 46px minmax(0, 1fr);
    padding: 13px;
  }
}

/* BOSS魂卡系統 v3 - 收合式圖鑑 */
.boss-soul-intro-card {
  padding: 20px 22px;
  border: 1px solid rgba(90, 170, 255, .28);
  background:
    linear-gradient(135deg, rgba(10, 24, 40, .9), rgba(3, 8, 15, .96));
  box-shadow:
    inset 0 0 18px rgba(80, 160, 255, .08),
    0 0 18px rgba(0, 0, 0, .28);
}

.boss-soul-intro-card p {
  margin: 0;
  color: #e8f6ff;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.85;
  letter-spacing: .02em;
}

.boss-soul-group-overview button {
  position: relative;
  min-height: 112px;
  padding: 18px;
  text-align: left;
  cursor: pointer;
  border: 1px solid rgba(90, 170, 255, .26);
  background:
    linear-gradient(135deg, rgba(10, 24, 40, .88), rgba(3, 8, 15, .94));
  box-shadow:
    inset 0 0 18px rgba(80, 160, 255, .08),
    0 0 18px rgba(0, 0, 0, .28);
  transition: border-color .18s ease, transform .18s ease, filter .18s ease;
}

.boss-soul-group-overview button:hover,
.boss-soul-group-overview button.active {
  border-color: rgba(255, 218, 128, .58);
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.boss-soul-group-overview button strong {
  display: block;
  margin-bottom: 8px;
  color: #ffe4a2;
  font-size: 20px;
  font-weight: 950;
}

.boss-soul-group-overview button span {
  display: block;
  color: #b6d2ef;
  font-size: 14px;
  line-height: 1.65;
}

.boss-soul-result-count {
  font-weight: 900;
  letter-spacing: .03em;
}

.boss-soul-grid {
  align-items: start;
}

.boss-soul-card {
  min-height: auto;
}

.boss-soul-card header {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  padding: 13px 16px 9px;
}

.boss-soul-card header strong {
  font-size: 21px;
  line-height: 1.25;
}

.boss-soul-card header em {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  color: #ffe4a2;
  font-size: 13px;
  font-style: normal;
  font-weight: 950;
  white-space: nowrap;
  border: 1px solid rgba(220, 170, 70, .45);
  background: rgba(55, 36, 8, .38);
}

.boss-soul-card-summary {
  display: grid;
  gap: 9px;
  padding: 10px 16px 14px;
}

.boss-soul-source {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  color: #d8f3ff;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: .02em;
}

.boss-soul-source b {
  color: #6ddaff;
  font-weight: 950;
}

.boss-soul-source span {
  color: #f8fbff;
}

.boss-soul-ladder {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.boss-soul-ladder span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  color: #dff7ff;
  font-size: 13px;
  font-weight: 950;
  border: 1px solid rgba(90, 190, 255, .34);
  background: rgba(10, 42, 70, .38);
}

.boss-soul-ladder i {
  color: rgba(255, 228, 162, .72);
  font-style: normal;
  font-weight: 900;
}

.boss-soul-max-panel {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid rgba(90, 170, 255, .22);
  background: rgba(1, 7, 14, .38);
}

.boss-soul-max-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: #ffe4a2;
  font-size: 14px;
  font-weight: 950;
  letter-spacing: .03em;
}

.boss-soul-max-title span {
  color: #6ddaff;
  font-size: 13px;
  font-weight: 950;
}

.boss-soul-abilities {
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
}

.boss-soul-toggle {
  justify-self: start;
  min-height: 32px;
  padding: 6px 14px;
  cursor: pointer;
  color: #f8fbff;
  font-size: 14px;
  font-weight: 950;
  border: 1px solid rgba(220, 170, 70, .62);
  background:
    linear-gradient(180deg, rgba(70, 46, 10, .82), rgba(11, 19, 31, .94));
  box-shadow: inset 0 0 12px rgba(255, 190, 70, .1);
  transition: filter .18s ease, transform .18s ease;
}

.boss-soul-toggle:hover {
  filter: brightness(1.16);
  transform: translateY(-1px);
}

.boss-soul-stage-list[hidden] {
  display: none;
}

.boss-soul-card.expanded .boss-soul-stage-list {
  display: grid;
  gap: 0;
  padding: 0 16px 14px;
}

.boss-soul-card.expanded .boss-soul-stage-row {
  border: 1px solid rgba(111, 181, 255, .16);
  border-bottom: 0;
}

.boss-soul-card.expanded .boss-soul-stage-row:last-child {
  border-bottom: 1px solid rgba(111, 181, 255, .16);
}

.boss-soul-stage-row {
  min-height: auto;
  padding: 9px 10px;
}

.open-stage-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: center;
  padding: 22px 24px;
  background:
    linear-gradient(135deg, rgba(13, 30, 48, .92), rgba(3, 9, 18, .96));
}

.open-stage-card h3 {
  margin: 10px 0 8px;
  color: #ffe6a0;
  font-size: 24px;
  font-weight: 900;
}

.open-stage-card p,
.open-principle-card p {
  margin: 0;
  color: #dce8f4;
  line-height: 1.75;
  font-weight: 800;
}

.open-stage-tags {
  justify-content: flex-end;
  max-width: 420px;
}

.open-status-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.open-status-grid .basic-compact-card,
.open-locked-grid .basic-compact-card {
  display: grid;
  gap: 10px;
  align-content: start;
}

.open-status {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  padding: 5px 11px;
  border-radius: 3px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .04em;
}

.open-status-green {
  color: #88ffb2;
  border: 1px solid rgba(90, 235, 140, .48);
  background: rgba(20, 95, 55, .2);
}

.open-status-blue {
  color: #8fe8ff;
  border: 1px solid rgba(80, 190, 255, .48);
  background: rgba(20, 80, 120, .18);
}

.open-status-muted {
  color: #c6d0da;
  border: 1px solid rgba(160, 175, 190, .35);
  background: rgba(80, 92, 105, .16);
}

.open-status-gold {
  color: #ffe6a0;
  border: 1px solid rgba(220, 170, 70, .62);
  background: rgba(120, 82, 18, .22);
}

.open-content-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.open-content-grid article {
  align-content: start;
}

.open-index-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 34px;
  align-items: start;
}

.open-index-layout > section > strong {
  display: block;
  margin-bottom: 14px;
  color: #ffe8a7;
  font-size: 19px;
  font-weight: 950;
  line-height: 1.35;
}

.open-map-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.open-map-list li {
  padding: 0 0 7px;
  color: #dce8f4;
  font-size: 15px;
  font-weight: 900;
  line-height: 1.55;
  border-bottom: 1px solid rgba(111, 181, 255, .1);
}

.open-map-list li::before {
  content: none;
}

.open-system-index {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.open-system-index li {
  display: grid;
  grid-template-columns: minmax(120px, .75fr) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  min-height: 34px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(111, 181, 255, .12);
}

.open-system-index li::before {
  content: none;
}

.open-system-index b {
  color: #ffe8a7;
  font-size: 15px;
  font-weight: 950;
  line-height: 1.45;
}

.open-system-index span {
  color: #dce8f4;
  font-size: 14px;
  font-weight: 850;
  line-height: 1.45;
}

.open-locked-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.open-locked-grid strong {
  font-size: 20px;
}

.open-locked-grid p {
  margin: 0;
  color: #dce8f4;
  line-height: 1.6;
  font-weight: 800;
}

.open-locked-summary {
  display: grid;
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.open-locked-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 220px));
  gap: 12px;
}

.open-locked-mini-grid article {
  min-height: 56px;
  display: flex;
  align-items: center;
  padding: 12px 16px;
  color: #dce8f4;
  font-size: 16px;
  font-weight: 950;
  border: 1px solid rgba(160, 175, 190, .24);
  background: rgba(6, 16, 28, .62);
  box-shadow: inset 0 0 10px rgba(111, 181, 255, .035);
}

.open-locked-summary ul {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.open-locked-summary li {
  position: relative;
  padding: 0 0 0 15px;
  color: #dce8f4;
  border: 0;
  background: transparent;
  font-size: 15px;
  font-weight: 900;
}

.open-locked-summary li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: #c6d0da;
  font-weight: 950;
}

.open-locked-summary p {
  margin: 0;
  color: #a9c9e8;
  font-size: 15px;
  font-weight: 850;
  line-height: 1.65;
}

.open-principle-card {
  padding: 14px 18px;
}

.open-principle-card p {
  font-size: 15px;
  line-height: 1.6;
}

.open-plan-list {
  padding: 16px 18px;
  border: 1px solid rgba(111, 181, 255, .24);
  background: linear-gradient(180deg, rgba(8, 20, 34, .88), rgba(3, 8, 16, .92));
}

.open-plan-list span b {
  color: #f0c75b;
}

@media (max-width: 900px) {
  .open-stage-card,
  .open-status-grid,
  .open-index-layout,
  .open-content-grid,
  .open-locked-grid {
    grid-template-columns: 1fr;
  }

  .open-map-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .open-locked-mini-grid {
    grid-template-columns: 1fr;
  }

  .open-stage-tags {
    justify-content: flex-start;
    max-width: none;
  }
}

.boss-soul-card-title span mark,
.boss-soul-ability mark {
  color: #07111d;
  background: #ffe477;
  box-shadow: 0 0 10px rgba(255, 228, 119, .35);
}

@media (max-width: 768px) {
  .boss-soul-card header {
    grid-template-columns: 1fr;
  }

  .boss-soul-card header em,
  .boss-soul-toggle {
    justify-self: start;
  }

  .boss-soul-group-overview button {
    min-height: auto;
  }
}

.pattern-current-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 22px;
  align-items: start;
  padding: 24px;
  border: 1px solid rgba(111, 181, 255, .28);
  background:
    linear-gradient(135deg, rgba(12, 28, 44, .9), rgba(3, 8, 16, .94));
  box-shadow:
    inset 0 0 18px rgba(70, 150, 255, .08),
    0 0 22px rgba(0, 0, 0, .32);
}

.pattern-current-panel strong {
  display: block;
  margin: 12px 0 8px;
  color: #ffe6a0;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: .04em;
}

.pattern-current-panel p {
  margin: 0;
  color: #dce8f4;
  line-height: 1.75;
  font-size: 16px;
  font-weight: 800;
}

.pattern-current-tags,
.pattern-tier-locked div,
.pattern-rate-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pattern-current-tags {
  justify-content: flex-end;
  max-width: 430px;
}

.pattern-current-tags span,
.pattern-tier-locked div span,
.pattern-rate-list span {
  display: inline-flex;
  align-items: center;
  padding: 7px 11px;
  color: #dff6ff;
  border: 1px solid rgba(90, 170, 255, .34);
  background: rgba(20, 60, 95, .2);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .03em;
}

.pattern-rule-grid .feature-rule-card p {
  margin: 0;
  color: #dce8f4;
  font-size: 15px;
  line-height: 1.7;
  font-weight: 800;
}

.pattern-tier-status {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 16px;
}

.pattern-tier-open,
.pattern-tier-locked,
.pattern-preview-card,
.pattern-level-card {
  padding: 18px 20px;
  border: 1px solid rgba(111, 181, 255, .26);
  background: linear-gradient(180deg, rgba(8, 20, 34, .88), rgba(3, 8, 16, .94));
  box-shadow: inset 0 0 16px rgba(70, 150, 255, .06);
}

.pattern-tier-open {
  border-color: rgba(90, 235, 140, .34);
}

.pattern-tier-open strong,
.pattern-tier-locked strong,
.pattern-preview-card strong,
.pattern-level-card strong {
  display: block;
  margin-bottom: 12px;
  color: #ffe6a0;
  font-size: 19px;
  font-weight: 900;
}

.pattern-tier-open p,
.pattern-tier-locked p {
  margin: 0;
  color: #dce8f4;
  font-weight: 800;
  line-height: 1.6;
}

.pattern-details {
  margin-top: 0;
}

.pattern-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.pattern-preview-grid .pattern-preview-card:last-child {
  grid-column: 1 / -1;
}

.pattern-level-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(320px, .55fr);
  gap: 16px;
  margin-top: 16px;
}

.pattern-level-table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border: 1px solid rgba(90, 170, 255, .22);
}

.pattern-level-table td {
  padding: 9px 12px;
  color: #eaf6ff;
  border-bottom: 1px solid rgba(90, 170, 255, .14);
  background: rgba(4, 12, 22, .58);
  font-size: 14px;
  font-weight: 850;
}

.pattern-level-table td:nth-child(odd) {
  color: #8fe8ff;
  width: 12%;
}

.pattern-level-table td:nth-child(even) {
  color: #ffe6a0;
  width: 21%;
}

.pattern-rate-list {
  flex-direction: column;
}

.pattern-rate-list span {
  width: fit-content;
}

.pattern-detail-panel {
  margin-top: 16px;
  padding: 18px;
  border: 1px solid rgba(111, 181, 255, .24);
  background: linear-gradient(180deg, rgba(8, 20, 34, .9), rgba(3, 8, 16, .94));
  overflow-x: auto;
}

.pattern-level-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.pattern-level-filter button {
  appearance: none;
  min-height: 38px;
  padding: 8px 15px;
  color: #dff6ff;
  border: 1px solid rgba(90, 170, 255, .42);
  background: linear-gradient(180deg, rgba(10, 32, 52, .92), rgba(3, 10, 20, .96));
  border-radius: 4px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .03em;
  cursor: pointer;
  transition: .16s ease;
}

.pattern-level-filter button:hover {
  color: #fff7ce;
  border-color: rgba(220, 170, 70, .58);
  background: rgba(80, 58, 18, .28);
}

.pattern-level-filter button.active {
  color: #fff3b8;
  border-color: rgba(220, 170, 70, .78);
  background: linear-gradient(180deg, rgba(118, 86, 24, .72), rgba(34, 24, 8, .86));
  box-shadow:
    inset 0 0 12px rgba(255, 200, 90, .1),
    0 0 14px rgba(220, 170, 70, .14);
}

.pattern-detail-table {
  width: 100%;
  min-width: 920px;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid rgba(90, 170, 255, .22);
  background: rgba(3, 9, 17, .7);
}

.pattern-detail-table th,
.pattern-detail-table td {
  border-bottom: 1px solid rgba(90, 170, 255, .16);
  vertical-align: top;
}

.pattern-detail-table th {
  padding: 12px 14px;
  color: #ffe6a0;
  background: linear-gradient(180deg, rgba(18, 48, 74, .78), rgba(7, 20, 34, .86));
  font-size: 14px;
  font-weight: 900;
  text-align: left;
  letter-spacing: .04em;
}

.pattern-detail-table td {
  padding: 12px 14px;
  color: #eaf6ff;
  background: rgba(4, 12, 22, .5);
  font-size: 14px;
  font-weight: 850;
}

.pattern-detail-table tr:nth-child(even) td {
  background: rgba(8, 18, 30, .62);
}

.pattern-detail-table tbody tr:hover td {
  background: rgba(15, 40, 64, .72);
}

.pattern-detail-table th:nth-child(1),
.pattern-detail-table td:nth-child(1) {
  width: 90px;
}

.pattern-detail-table th:nth-child(2),
.pattern-detail-table td:nth-child(2) {
  width: 120px;
}

.pattern-detail-table th:nth-child(3),
.pattern-detail-table td:nth-child(3) {
  width: 90px;
}

.pattern-level-cell {
  color: #8fe8ff;
  font-weight: 900;
  white-space: nowrap;
}

.pattern-point-cell,
.pattern-rate-cell {
  white-space: nowrap;
}

.pattern-point-chip,
.pattern-rate-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 70px;
  padding: 4px 9px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 950;
  line-height: 1.25;
}

.pattern-point-chip {
  color: #ffe6a0;
  border: 1px solid rgba(220, 170, 70, .42);
  background: rgba(86, 60, 18, .22);
}

.pattern-rate-chip {
  border: 1px solid rgba(90, 170, 255, .36);
  background: rgba(18, 55, 86, .22);
}

.pattern-rate-chip.rate-50 {
  color: #9bf0ff;
  border-color: rgba(110, 220, 255, .54);
}

.pattern-rate-chip.rate-40 {
  color: #78b8ff;
  border-color: rgba(80, 145, 255, .5);
}

.pattern-rate-chip.rate-30 {
  color: #ffe18a;
  border-color: rgba(220, 170, 70, .58);
  background: rgba(96, 68, 18, .26);
}

.pattern-rate-chip.rate-20 {
  color: #ffb46a;
  border-color: rgba(255, 150, 65, .58);
  background: rgba(100, 48, 16, .24);
}

.pattern-rate-chip.rate-15 {
  color: #ff805f;
  border-color: rgba(255, 95, 70, .6);
  background: rgba(110, 28, 20, .24);
}

.pattern-ability-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: flex-start;
}

.pattern-ability-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 9px;
  color: #bfefff;
  border: 1px solid rgba(90, 170, 255, .32);
  background: rgba(18, 55, 86, .2);
  border-radius: 3px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.25;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .pattern-current-panel,
  .pattern-tier-status,
  .pattern-level-wrap,
  .pattern-preview-grid {
    grid-template-columns: 1fr;
  }

  .pattern-current-tags {
    justify-content: flex-start;
    max-width: none;
  }

  .pattern-preview-grid .pattern-preview-card:last-child {
    grid-column: auto;
  }
}

@media (max-width: 640px) {
  .pattern-level-table,
  .pattern-level-table tbody,
  .pattern-level-table tr,
  .pattern-level-table td {
    display: block;
    width: 100%;
  }

  .pattern-level-table tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .pattern-level-table td:nth-child(odd),
  .pattern-level-table td:nth-child(even) {
    width: auto;
  }

  .pattern-detail-panel {
    overflow-x: visible;
    padding: 14px;
  }

  .pattern-detail-table {
    min-width: 0;
    border: 0;
    background: transparent;
  }

  .pattern-detail-table thead {
    display: none;
  }

  .pattern-detail-table,
  .pattern-detail-table tbody,
  .pattern-detail-table tr,
  .pattern-detail-table td {
    display: block;
    width: 100%;
  }

  .pattern-detail-table tr {
    margin-bottom: 12px;
    border: 1px solid rgba(90, 170, 255, .22);
    background: rgba(4, 12, 22, .64);
  }

  .pattern-detail-table td {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    border-bottom: 1px solid rgba(90, 170, 255, .12);
    background: transparent !important;
  }

  .pattern-detail-table td::before {
    content: attr(data-label);
    color: #8fe8ff;
    font-size: 12px;
    font-weight: 900;
  }

  .pattern-detail-table td:last-child {
    border-bottom: 0;
  }

  .pattern-detail-table th:nth-child(1),
  .pattern-detail-table td:nth-child(1),
  .pattern-detail-table th:nth-child(2),
  .pattern-detail-table td:nth-child(2),
  .pattern-detail-table th:nth-child(3),
  .pattern-detail-table td:nth-child(3) {
    width: 100%;
  }

  .pattern-ability-tags {
    min-width: 0;
  }
}

.item-system-page .detail-section {
  margin-top: 30px;
}

.item-resource-intro,
.item-resource-card,
.item-source-card,
.item-priority-card,
.item-reminder-grid article {
  background:
    linear-gradient(135deg, rgba(8, 20, 34, 0.92), rgba(3, 8, 16, 0.94));
  border: 1px solid rgba(90, 170, 255, 0.28);
  box-shadow:
    inset 0 0 16px rgba(80, 160, 255, 0.06),
    0 0 18px rgba(0, 0, 0, 0.28);
}

.item-resource-intro {
  padding: 20px 22px;
}

.item-resource-intro p,
.item-resource-card p,
.item-source-card p,
.item-priority-card p,
.item-reminder-grid p {
  margin: 0;
  color: #d9efff;
  font-size: 15px;
  line-height: 1.75;
}

.item-priority-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.item-priority-card {
  padding: 16px;
}

.item-priority-card span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 28px;
  margin-bottom: 12px;
  color: #8fe8ff;
  border: 1px solid rgba(90, 170, 255, 0.44);
  background: rgba(20, 70, 110, 0.18);
  font-weight: 950;
}

.item-priority-card strong,
.item-reminder-grid strong {
  display: block;
  margin-bottom: 8px;
  color: #ffe6a4;
  font-size: 17px;
  font-weight: 950;
}

.item-source-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.item-source-card {
  padding: 18px 20px;
}

.item-source-card h3,
.item-resource-card h3 {
  margin: 0;
  color: #ffe6a4;
  font-size: 20px;
  font-weight: 950;
}

.item-resource-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.item-resource-card {
  min-height: 0;
  padding: 18px 20px;
}

.item-resource-wide {
  grid-column: span 3;
}

.item-resource-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.item-resource-card-head img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  padding: 5px;
  border: 1px solid rgba(90, 170, 255, 0.32);
  background: rgba(4, 12, 22, 0.78);
}

.item-resource-mark {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  color: #9af0ff;
  border: 1px solid rgba(90, 210, 255, 0.42);
  background: rgba(20, 80, 120, 0.18);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .04em;
}

.item-resource-mark.gold {
  color: #ffe6a0;
  border-color: rgba(220, 170, 70, 0.62);
  background: rgba(120, 70, 20, 0.18);
}

.item-resource-mark.boss {
  color: #ffc0a8;
  border-color: rgba(255, 110, 80, 0.48);
  background: rgba(120, 34, 24, 0.18);
}

.item-resource-mark.relic {
  color: #d9c4ff;
  border-color: rgba(170, 120, 255, 0.5);
  background: rgba(60, 32, 110, 0.18);
}

.item-resource-mark.growth {
  color: #9fffd0;
  border-color: rgba(90, 255, 190, 0.44);
  background: rgba(18, 90, 65, 0.18);
}

.item-resource-meta,
.item-chip-list,
.item-flow-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.item-resource-meta {
  margin-top: 13px;
}

.item-resource-meta span,
.item-chip-list span,
.item-flow-line span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 9px;
  color: #cfefff;
  border: 1px solid rgba(90, 170, 255, 0.32);
  background: rgba(20, 50, 80, 0.22);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.35;
}

.item-resource-details {
  margin-top: 14px;
}

.item-resource-details summary {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 13px;
  color: #fff3b8;
  border: 1px solid rgba(220, 170, 70, 0.62);
  background: rgba(80, 58, 18, 0.24);
  cursor: pointer;
  font-size: 13px;
  font-weight: 950;
}

.item-resource-details summary::-webkit-details-marker {
  display: none;
}

.item-resource-details summary::after {
  content: "+";
  margin-left: 8px;
  color: #7fd0ff;
}

.item-resource-details[open] summary::after {
  content: "-";
}

.item-resource-details > div,
.item-resource-details > p {
  margin-top: 12px;
}

.item-flow-line span {
  color: #ffe6a0;
  border-color: rgba(220, 170, 70, 0.38);
  background: rgba(80, 58, 18, 0.18);
}

.item-growth-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.item-growth-columns > div {
  padding: 16px;
  border: 1px solid rgba(90, 170, 255, 0.2);
  background: rgba(3, 8, 16, 0.48);
}

.item-growth-columns strong {
  display: block;
  margin-bottom: 8px;
  color: #ffe6a4;
  font-size: 17px;
  font-weight: 950;
}

.item-reminder-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.item-reminder-grid article {
  padding: 16px 18px;
}

.item-priority-timeline {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  counter-reset: itemPriority;
}

.item-priority-timeline .item-priority-card {
  position: relative;
  min-height: 148px;
  padding: 18px 18px 16px;
  overflow: hidden;
}

.item-priority-timeline .item-priority-card::after {
  content: "";
  position: absolute;
  top: 31px;
  right: -24px;
  width: 48px;
  height: 1px;
  background: linear-gradient(90deg, rgba(90, 170, 255, 0.6), rgba(220, 170, 70, 0.35));
}

.item-priority-timeline .item-priority-card:last-child::after {
  display: none;
}

.item-category-nav {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.item-category-card {
  display: flex;
  flex-direction: column;
  min-height: 190px;
  padding: 18px;
  color: inherit;
  text-decoration: none;
  background:
    linear-gradient(135deg, rgba(8, 20, 34, 0.92), rgba(3, 8, 16, 0.94));
  border: 1px solid rgba(90, 170, 255, 0.28);
  box-shadow:
    inset 0 0 16px rgba(80, 160, 255, 0.06),
    0 0 18px rgba(0, 0, 0, 0.28);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.item-category-card:hover {
  transform: translateY(-2px);
  border-color: rgba(220, 170, 70, 0.62);
  box-shadow:
    inset 0 0 16px rgba(80, 160, 255, 0.08),
    0 0 22px rgba(80, 180, 255, 0.12);
}

.item-category-card p {
  margin: 0;
  color: #d9efff;
  font-size: 14px;
  line-height: 1.65;
}

.item-detail-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 30px;
  margin-top: auto;
  padding: 3px 11px;
  color: #fff3b8;
  border: 1px solid rgba(220, 170, 70, 0.55);
  background: rgba(80, 58, 18, 0.22);
  font-size: 13px;
  font-weight: 950;
}

.item-accordion-list {
  display: grid;
  gap: 14px;
}

.item-resource-accordion {
  background:
    linear-gradient(135deg, rgba(8, 20, 34, 0.92), rgba(3, 8, 16, 0.94));
  border: 1px solid rgba(90, 170, 255, 0.28);
  box-shadow:
    inset 0 0 16px rgba(80, 160, 255, 0.06),
    0 0 18px rgba(0, 0, 0, 0.28);
}

.item-resource-accordion > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 58px;
  padding: 0 20px;
  color: #ffe6a4;
  cursor: pointer;
  font-size: 20px;
  font-weight: 950;
  list-style: none;
}

.item-resource-accordion > summary::-webkit-details-marker {
  display: none;
}

.item-resource-accordion > summary::after {
  content: "+";
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: #8fe8ff;
  border: 1px solid rgba(90, 170, 255, 0.44);
  background: rgba(20, 70, 110, 0.18);
  font-size: 18px;
  line-height: 1;
}

.item-resource-accordion[open] > summary {
  border-bottom: 1px solid rgba(90, 170, 255, 0.18);
}

.item-resource-accordion[open] > summary::after {
  content: "-";
}

.item-resource-accordion > :not(summary) {
  margin: 18px 20px 20px;
}

.item-detail-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.item-detail-card-grid-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.item-two-column {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.item-detail-card {
  padding: 16px 18px;
  background: rgba(3, 8, 16, 0.46);
  border: 1px solid rgba(90, 170, 255, 0.22);
  box-shadow: inset 0 0 14px rgba(80, 160, 255, 0.04);
}

.item-detail-card h3 {
  margin: 0 0 12px;
  color: #ffe6a4;
  font-size: 18px;
  font-weight: 950;
}

.item-detail-card dl {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 8px 12px;
  margin: 0;
}

.item-detail-card dt {
  color: #70ddff;
  font-size: 13px;
  font-weight: 950;
  line-height: 1.65;
}

.item-detail-card dd {
  margin: 0;
  color: #e9f6ff;
  font-size: 14px;
  line-height: 1.65;
}

.item-warning-note {
  margin-top: 14px;
  padding: 13px 15px;
  color: #fff3b8;
  border: 1px solid rgba(220, 170, 70, 0.4);
  background: rgba(80, 58, 18, 0.16);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.7;
}

.item-flow-main {
  margin-bottom: 16px;
}

.item-growth-detail {
  margin-top: 0;
}

.item-faq-list {
  display: grid;
  gap: 10px;
}

.item-faq-list details {
  background:
    linear-gradient(135deg, rgba(8, 20, 34, 0.9), rgba(3, 8, 16, 0.94));
  border: 1px solid rgba(90, 170, 255, 0.24);
}

.item-faq-list summary {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 16px;
  color: #ffe6a4;
  cursor: pointer;
  font-weight: 950;
  list-style: none;
}

.item-faq-list summary::-webkit-details-marker {
  display: none;
}

.item-faq-list p {
  margin: 0;
  padding: 0 16px 15px;
  color: #d9efff;
  font-size: 14px;
  line-height: 1.75;
}

.item-info-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.item-info-card,
.item-guide-card {
  background:
    linear-gradient(135deg, rgba(8, 20, 34, 0.92), rgba(3, 8, 16, 0.94));
  border: 1px solid rgba(90, 170, 255, 0.28);
  box-shadow:
    inset 0 0 16px rgba(80, 160, 255, 0.06),
    0 0 18px rgba(0, 0, 0, 0.28);
}

.item-info-card {
  padding: 18px 20px;
}

.item-info-card h3 {
  margin: 0 0 10px;
  color: #ffe6a4;
  font-size: 18px;
  font-weight: 900;
}

.item-info-card p {
  margin: 0;
  color: #d9efff;
  font-size: 14px;
  line-height: 1.75;
}

.item-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 260px auto;
  gap: 12px;
  align-items: end;
}

.item-search,
.item-merchant-filter {
  display: grid;
  gap: 7px;
  color: #ffe6a4;
  font-size: 14px;
  font-weight: 800;
}

.item-search input,
.item-merchant-filter select {
  min-height: 42px;
  width: 100%;
  color: #f4fbff;
  background: rgba(3, 8, 16, 0.8);
  border: 1px solid rgba(90, 170, 255, 0.38);
  padding: 0 13px;
  outline: none;
}

.item-search input:focus,
.item-merchant-filter select:focus {
  border-color: rgba(120, 220, 255, 0.78);
  box-shadow: 0 0 12px rgba(80, 180, 255, 0.18);
}

.item-clear-search,
.item-filter-bar button {
  min-height: 38px;
  color: #e9f6ff;
  background: rgba(5, 18, 32, 0.78);
  border: 1px solid rgba(90, 170, 255, 0.38);
  padding: 0 16px;
  font-weight: 900;
  cursor: pointer;
}

.item-clear-search:hover,
.item-filter-bar button:hover,
.item-filter-bar button.is-active {
  color: #fff4c6;
  border-color: rgba(220, 170, 70, 0.78);
  box-shadow: inset 0 0 14px rgba(220, 170, 70, 0.08);
}

.item-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 15px;
}

.item-result-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.item-result-heading h2 {
  margin-bottom: 0;
}

.item-result-heading span {
  color: #65dfff;
  font-weight: 900;
}

.item-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.item-guide-card {
  min-height: 0;
  padding: 16px;
}

.item-guide-head {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(90, 170, 255, 0.18);
}

.item-guide-icon {
  position: relative;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  background: rgba(4, 12, 22, 0.86);
  border: 1px solid rgba(90, 170, 255, 0.38);
  box-shadow: inset 0 0 12px rgba(80, 160, 255, 0.08);
}

.item-guide-icon img {
  max-width: 38px;
  max-height: 38px;
  object-fit: contain;
}

.item-guide-fallback {
  display: none;
  color: #8fdfff;
  font-size: 18px;
  font-weight: 900;
}

.item-guide-icon.is-missing .item-guide-fallback {
  display: block;
}

.item-guide-card h3 {
  margin: 0 0 8px;
  color: #ffe8a8;
  font-size: 18px;
  font-weight: 900;
  line-height: 1.35;
}

.item-guide-meta,
.item-price-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.item-guide-meta span,
.item-price-row span,
.item-category-chip {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  color: #cfefff;
  background: rgba(20, 50, 80, 0.22);
  border: 1px solid rgba(90, 170, 255, 0.32);
  font-size: 12px;
  font-weight: 900;
}

.item-category-chip.online { color: #8fffd5; border-color: rgba(90, 255, 190, 0.48); background: rgba(20, 90, 70, 0.18); }
.item-category-chip.promotion { color: #ffe6a0; border-color: rgba(220, 170, 70, 0.62); background: rgba(120, 70, 20, 0.2); }
.item-category-chip.scroll { color: #fff0b8; border-color: rgba(230, 190, 90, 0.5); background: rgba(120, 95, 20, 0.18); }
.item-category-chip.potion { color: #a8ffb0; border-color: rgba(90, 230, 110, 0.45); background: rgba(20, 90, 36, 0.18); }
.item-category-chip.blessing { color: #d9c4ff; border-color: rgba(170, 120, 255, 0.5); background: rgba(60, 32, 110, 0.18); }
.item-category-chip.equipment { color: #dff5ff; border-color: rgba(150, 215, 255, 0.48); background: rgba(40, 80, 110, 0.18); }
.item-category-chip.summon { color: #ffb8ff; border-color: rgba(255, 120, 230, 0.48); background: rgba(105, 35, 100, 0.18); }
.item-category-chip.important { color: #f7fbff; border-color: rgba(180, 200, 220, 0.42); background: rgba(70, 80, 90, 0.18); }

.simple-item-page .detail-section {
  margin-top: 28px;
}

.simple-item-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 10px;
}

.simple-item-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 18px;
  color: #f6fbff;
  text-decoration: none;
  font-size: 15px;
  font-weight: 900;
  border: 1px solid rgba(90, 170, 255, 0.45);
  background: rgba(5, 16, 30, 0.82);
  box-shadow: inset 0 0 14px rgba(80, 160, 255, 0.08);
}

.simple-item-nav a:hover {
  color: #fff3b8;
  border-color: rgba(220, 170, 70, 0.74);
}

.simple-item-note {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  margin-bottom: 16px;
  padding: 16px 18px;
  border: 1px solid rgba(90, 170, 255, 0.3);
  background: rgba(5, 14, 26, 0.72);
}

.simple-item-note strong {
  color: #ffe6a0;
  font-size: 17px;
  font-weight: 950;
}

.simple-item-note p {
  margin: 0;
  color: #dff3ff;
  font-size: 15px;
  line-height: 1.7;
}

.simple-item-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.simple-item-grid-five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.simple-item-card {
  min-height: 142px;
  padding: 16px;
  border: 1px solid rgba(90, 170, 255, 0.3);
  background:
    linear-gradient(135deg, rgba(8, 20, 34, 0.88), rgba(2, 8, 16, 0.92));
  box-shadow: inset 0 0 16px rgba(80, 150, 255, 0.06);
}

.simple-item-card h3 {
  margin: 0 0 12px;
  color: #ffe6a0;
  font-size: 17px;
  font-weight: 950;
  line-height: 1.45;
}

.simple-item-card p {
  margin: 13px 0 0;
  color: #9fdcff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;
}

.simple-item-card .item-chip-list span {
  color: #dff6ff;
  border-color: rgba(90, 190, 255, 0.42);
  background: rgba(20, 68, 104, 0.2);
}

.simple-relic-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.simple-relic-panel article {
  padding: 20px;
  border: 1px solid rgba(220, 170, 70, 0.38);
  background:
    linear-gradient(135deg, rgba(30, 24, 12, 0.74), rgba(3, 10, 18, 0.92));
  box-shadow: inset 0 0 18px rgba(220, 170, 70, 0.06);
}

.simple-relic-panel h3 {
  margin: 0 0 10px;
  color: #ffe6a0;
  font-size: 19px;
  font-weight: 950;
}

.simple-relic-panel p {
  margin: 0;
  color: #e4f5ff;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.75;
}

.item-encyclopedia-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 18px;
}

.item-encyclopedia-filter {
  min-height: 38px;
  padding: 0 18px;
  color: #e8f7ff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 900;
  border: 1px solid rgba(90, 170, 255, 0.42);
  background: rgba(5, 16, 30, 0.82);
  box-shadow: inset 0 0 14px rgba(80, 160, 255, 0.08);
  cursor: pointer;
}

.item-encyclopedia-filter:hover,
.item-encyclopedia-filter.is-active {
  color: #fff3b8;
  border-color: rgba(220, 170, 70, 0.72);
  background: linear-gradient(180deg, rgba(56, 38, 10, 0.64), rgba(5, 16, 30, 0.88));
}

.item-encyclopedia-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.item-encyclopedia-card {
  border: 1px solid rgba(90, 170, 255, 0.28);
  background:
    linear-gradient(135deg, rgba(8, 20, 34, 0.82), rgba(2, 8, 16, 0.92));
  box-shadow: inset 0 0 16px rgba(80, 150, 255, 0.05);
}

.item-encyclopedia-card:hover,
.item-encyclopedia-card.is-open {
  border-color: rgba(220, 170, 70, 0.48);
}

.item-encyclopedia-head {
  width: 100%;
  min-height: 86px;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  color: inherit;
  font-family: inherit;
  text-align: left;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.item-encyclopedia-main {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(120px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.item-encyclopedia-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 62px;
  min-height: 28px;
  padding: 0 10px;
  color: #9ff3ff;
  font-size: 13px;
  font-weight: 950;
  border: 1px solid rgba(80, 190, 255, 0.5);
  background: rgba(20, 80, 120, 0.18);
}

.item-encyclopedia-tag.growth {
  color: #ffe6a0;
  border-color: rgba(220, 170, 70, 0.58);
  background: rgba(120, 70, 20, 0.18);
}

.item-encyclopedia-name {
  color: #ffe6a0;
  font-size: 20px;
  font-weight: 950;
  line-height: 1.35;
  white-space: nowrap;
}

.item-encyclopedia-summary {
  color: #cfe8ff;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.55;
}

.item-encyclopedia-toggle {
  flex: 0 0 auto;
  color: #7de5ff;
  font-size: 14px;
  font-weight: 950;
  white-space: nowrap;
}

.item-encyclopedia-card.is-open .item-encyclopedia-toggle {
  color: #ffe6a0;
}

.item-encyclopedia-body {
  display: none;
  padding: 0 20px 18px;
}

.item-encyclopedia-card.is-open .item-encyclopedia-body {
  display: grid;
  gap: 10px;
}

.item-encyclopedia-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 12px 0;
  border-top: 1px solid rgba(90, 170, 255, 0.16);
}

.item-encyclopedia-row strong {
  color: #7de5ff;
  font-size: 14px;
  font-weight: 950;
}

.item-encyclopedia-row p {
  margin: 0;
  color: #e7f6ff;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.7;
}

.item-encyclopedia-row .item-chip-list {
  margin: 0;
}

.item-encyclopedia-row .item-chip-list span {
  color: #dff6ff;
  border-color: rgba(90, 190, 255, 0.42);
  background: rgba(20, 68, 104, 0.2);
}

.item-encyclopedia-empty {
  padding: 22px;
  color: #9fdcff;
  font-size: 15px;
  font-weight: 900;
  text-align: center;
  border: 1px solid rgba(90, 170, 255, 0.26);
  background: rgba(5, 14, 26, 0.72);
}

.item-catalog-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.item-encyclopedia-card.is-open .item-catalog-grid {
  display: grid;
}

.catalog-item-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 14px;
  border: 1px solid rgba(90, 170, 255, 0.24);
  background: rgba(4, 12, 22, 0.72);
  box-shadow: inset 0 0 12px rgba(80, 160, 255, 0.05);
}

.catalog-item-icon {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(90, 170, 255, 0.42);
  background:
    radial-gradient(circle at 50% 42%, rgba(80, 170, 240, 0.18), transparent 56%),
    rgba(5, 16, 30, 0.9);
  box-shadow: inset 0 0 12px rgba(80, 160, 255, 0.08);
}

.catalog-item-icon img {
  max-width: 44px;
  max-height: 44px;
  object-fit: contain;
  image-rendering: auto;
}

.catalog-item-icon > span {
  display: none;
  color: #8fe8ff;
  font-size: 20px;
  font-weight: 950;
}

.catalog-item-icon.is-missing > span {
  display: inline;
}

.catalog-item-content h3 {
  margin: 0 0 10px;
  color: #ffe6a0;
  font-size: 18px;
  font-weight: 950;
  line-height: 1.4;
}

.catalog-item-content dl {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 8px 10px;
  margin: 0;
}

.catalog-item-content dt,
.catalog-item-content dd {
  margin: 0;
  line-height: 1.55;
}

.catalog-item-content dt {
  color: #7de5ff;
  font-size: 13px;
  font-weight: 950;
}

.catalog-item-content dd {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: #e6f5ff;
  font-size: 14px;
  font-weight: 850;
}

.catalog-item-content dd span {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 2px 8px;
  color: #dff6ff;
  border: 1px solid rgba(90, 190, 255, 0.36);
  background: rgba(20, 68, 104, 0.18);
}

.item-price-row {
  margin-top: 13px;
}

.item-price-row span {
  color: #f7fbff;
}

.item-purpose,
.item-suggestion {
  margin: 12px 0 0;
  color: #d9efff;
  font-size: 14px;
  line-height: 1.7;
}

.item-suggestion {
  color: #a9c9e8;
}

.item-empty-state {
  color: #ffb8b8;
  font-weight: 800;
}

.daily-task-page .detail-section {
  margin-top: 34px;
}

.daily-intro-grid,
.daily-reward-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.daily-intro-grid article,
.daily-rule-panel,
.daily-task-group,
.daily-reward-box,
.daily-merchant-panel {
  border: 1px solid rgba(90, 170, 255, 0.28);
  background:
    linear-gradient(135deg, rgba(9, 24, 40, 0.88), rgba(3, 10, 18, 0.96));
  box-shadow: inset 0 0 18px rgba(80, 160, 255, 0.06);
}

.daily-intro-grid article {
  min-height: 126px;
  padding: 18px 20px;
}

.daily-intro-grid strong,
.daily-task-group header strong,
.daily-reward-box header strong,
.daily-merchant-head strong {
  color: #ffe5a0;
  font-size: 20px;
  font-weight: 950;
  line-height: 1.35;
}

.daily-intro-grid p,
.daily-rule-panel p {
  margin: 10px 0 0;
  color: #dcefff;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.75;
}

.daily-section-note {
  margin: -4px 0 14px;
  color: #cfefff;
  font-size: 15px;
  font-weight: 850;
  line-height: 1.65;
}

.daily-rule-panel {
  padding: 18px 20px;
}

.daily-rule-panel ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 18px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.daily-rule-panel li {
  position: relative;
  padding-left: 15px;
  color: #e9f6ff;
  font-size: 15px;
  font-weight: 850;
  line-height: 1.65;
}

.daily-rule-panel li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.74em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #6fe6ff;
  box-shadow: 0 0 10px rgba(80, 210, 255, 0.55);
}

.daily-task-board {
  display: grid;
  gap: 16px;
}

.daily-task-group {
  overflow: hidden;
}

.daily-task-group header {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 7px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(90, 170, 255, 0.2);
  background: rgba(15, 38, 60, 0.36);
}

.daily-task-group header > span {
  color: #7de5ff;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.5;
}

.daily-task-list {
  display: grid;
}

.daily-task-row {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 16px 18px;
}

.daily-task-row + .daily-task-row {
  border-top: 1px solid rgba(90, 170, 255, 0.14);
}

.daily-task-row > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.daily-task-row strong {
  color: #f8fbff;
  font-size: 17px;
  font-weight: 950;
}

.daily-task-row > div span {
  flex: 0 0 auto;
  padding: 3px 9px;
  color: #ffe6a0;
  border: 1px solid rgba(220, 170, 70, 0.5);
  background: rgba(120, 72, 18, 0.18);
  font-size: 12px;
  font-weight: 950;
}

.daily-task-row p {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
}

.daily-task-row p span,
.daily-reward-list span,
.daily-item-grid article {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  color: #dff6ff;
  border: 1px solid rgba(90, 190, 255, 0.34);
  background: rgba(20, 68, 104, 0.18);
  font-size: 14px;
  font-weight: 850;
  line-height: 1.45;
}

.daily-task-boss {
  border-color: rgba(220, 170, 70, 0.38);
  background:
    linear-gradient(135deg, rgba(26, 20, 10, 0.72), rgba(3, 10, 18, 0.96));
}

.daily-reward-box {
  padding: 16px;
}

.daily-reward-box header {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 14px;
}

.daily-reward-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.daily-merchant-panel {
  padding: 18px;
}

.daily-merchant-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.daily-merchant-head span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #7de5ff;
  font-size: 14px;
  font-weight: 950;
}

.daily-merchant-head img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.daily-exchange-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.daily-exchange-list article {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid rgba(90, 170, 255, 0.22);
  background: rgba(4, 12, 22, 0.62);
}

.daily-exchange-list article > div {
  display: grid;
  gap: 5px;
}

.daily-exchange-list strong {
  color: #f7fbff;
  font-size: 15px;
  font-weight: 900;
}

.daily-exchange-list span {
  color: #ffd166;
  font-size: 15px;
  font-weight: 950;
  text-shadow: 0 0 9px rgba(255, 190, 70, 0.32);
}

.daily-exchange-list em {
  color: #9feaff;
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
}

.daily-exchange-list .catalog-item-icon {
  width: 48px;
  height: 48px;
}

.daily-exchange-list .catalog-item-icon img {
  max-width: 40px;
  max-height: 40px;
}

.daily-item-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.daily-item-grid article {
  position: relative;
  gap: 10px;
  justify-content: flex-start;
  min-height: 62px;
  padding: 8px 10px;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.daily-item-grid article:hover {
  border-color: rgba(220, 170, 70, 0.58);
  background: rgba(20, 42, 58, 0.38);
  transform: translateY(-1px);
}

.daily-item-grid article::after {
  content: attr(data-tip);
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: calc(100% + 8px);
  z-index: 4;
  display: none;
  padding: 8px 10px;
  color: #eaf8ff;
  border: 1px solid rgba(90, 190, 255, 0.42);
  background: rgba(3, 10, 18, 0.96);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.42);
  font-size: 12px;
  font-weight: 850;
  line-height: 1.55;
  pointer-events: none;
}

.daily-item-grid article:hover::after,
.daily-item-grid article:focus-within::after {
  display: block;
}

.daily-item-grid .catalog-item-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
}

.daily-item-grid .catalog-item-icon img {
  max-width: 35px;
  max-height: 35px;
}

.daily-item-grid strong {
  color: #f4fbff;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.45;
}

@media (max-width: 1200px) {
  .starter-grid,
  .simple-item-grid,
  .simple-item-grid-five,
  .simple-relic-panel,
  .item-priority-timeline,
  .item-category-nav,
  .item-detail-card-grid,
  .item-detail-card-grid-three,
  .item-priority-grid,
  .item-source-grid,
  .item-resource-grid,
  .item-reminder-grid,
  .item-info-grid,
  .item-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .daily-intro-grid,
  .daily-reward-grid,
  .daily-item-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .item-resource-wide {
    grid-column: span 2;
  }
}

@media (max-width: 768px) {
  .starter-grid,
  .simple-item-note,
  .simple-item-grid,
  .simple-item-grid-five,
  .simple-relic-panel,
  .item-priority-timeline,
  .item-category-nav,
  .item-detail-card-grid,
  .item-detail-card-grid-three,
  .item-two-column,
  .item-priority-grid,
  .item-source-grid,
  .item-resource-grid,
  .item-growth-columns,
  .item-reminder-grid,
  .item-info-grid,
  .item-card-grid,
  .item-toolbar {
    grid-template-columns: 1fr;
  }

  .daily-intro-grid,
  .daily-reward-grid,
  .daily-rule-panel ul,
  .daily-exchange-list,
  .daily-item-grid {
    grid-template-columns: 1fr;
  }

  .daily-task-group header,
  .daily-merchant-head {
    align-items: flex-start;
  }

  .daily-task-row {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 14px;
  }

  .daily-exchange-list article {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 10px;
  }

  .item-encyclopedia-categories {
    gap: 8px;
  }

  .item-encyclopedia-filter {
    flex: 1 1 calc(50% - 8px);
  }

  .item-encyclopedia-head {
    align-items: flex-start;
    flex-direction: column;
    min-height: auto;
    padding: 16px;
  }

  .item-encyclopedia-main {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .item-encyclopedia-name {
    white-space: normal;
  }

  .item-encyclopedia-body {
    padding: 0 16px 16px;
  }

  .item-encyclopedia-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .item-catalog-grid {
    grid-template-columns: 1fr;
  }

  .catalog-item-card {
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
  }

  .catalog-item-icon {
    width: 46px;
    height: 46px;
  }

  .catalog-item-icon img {
    max-width: 38px;
    max-height: 38px;
  }

  .catalog-item-content dl {
    grid-template-columns: 54px minmax(0, 1fr);
  }

  .item-resource-wide {
    grid-column: span 1;
  }

  .item-result-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .item-priority-timeline .item-priority-card::after {
    display: none;
  }

  .item-category-card {
    min-height: auto;
  }

  .item-detail-card dl {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .starter-section {
    padding: 12px;
  }

  .starter-card {
    min-height: auto;
    padding: 14px;
  }

  .starter-actions {
    flex-direction: column;
    gap: 8px;
  }

  .starter-actions a {
    width: 100%;
    min-height: 40px;
  }

  .category-card {
    min-height: auto;
  }

  .simple-item-nav a {
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* Shared action buttons: keep real actions consistent across pages. */
:where(
  .zero-action-btn,
  .doll-refine-toggle,
  .boss-soul-toggle,
  .drop-expand-button,
  .basic-faq-tools button,
  .special-growth-details summary,
  .tower-growth-details summary,
  .announcement-detail-footer a,
  .download-primary-btn,
  .promotion-form-actions button,
  .promotion-admin-filter button,
  .promotion-admin-bulk-actions button,
  .promotion-admin-table button
) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 9px 18px;
  border: 1px solid rgba(212, 175, 55, .58);
  border-radius: 3px;
  color: #f7df9e;
  background: linear-gradient(180deg, rgba(86, 58, 12, .72), rgba(24, 17, 7, .88));
  box-shadow: inset 0 0 12px rgba(240, 199, 91, .08);
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}

:where(
  .zero-action-btn,
  .doll-refine-toggle,
  .boss-soul-toggle,
  .drop-expand-button,
  .basic-faq-tools button,
  .special-growth-details summary,
  .tower-growth-details summary,
  .announcement-detail-footer a,
  .download-primary-btn,
  .promotion-form-actions button,
  .promotion-admin-filter button,
  .promotion-admin-bulk-actions button,
  .promotion-admin-table button
):hover {
  color: #fff1bd;
  border-color: rgba(255, 214, 126, .82);
  filter: brightness(1.12);
  transform: translateY(-1px);
}

:where(.zero-action-btn-secondary) {
  color: #e8f6ff;
  border-color: rgba(90, 170, 255, .42);
  background: linear-gradient(180deg, rgba(8, 20, 34, .94), rgba(3, 10, 18, .98));
  box-shadow: inset 0 0 10px rgba(90, 170, 255, .08);
}

:where(.zero-action-btn-secondary):hover {
  color: #fff;
  border-color: rgba(126, 208, 255, .62);
}

.zero-action-btn,
.doll-refine-toggle,
.boss-soul-toggle,
.drop-expand-button,
.basic-faq-tools button,
.special-growth-details summary,
.tower-growth-details summary,
.announcement-detail-footer a,
.download-primary-btn,
.promotion-form-actions button,
.promotion-admin-filter button,
.promotion-admin-bulk-actions button,
.promotion-admin-table button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 9px 18px;
  border: 1px solid rgba(212, 175, 55, .58);
  border-radius: 3px;
  color: #f7df9e;
  background: linear-gradient(180deg, rgba(86, 58, 12, .72), rgba(24, 17, 7, .88));
  box-shadow: inset 0 0 12px rgba(240, 199, 91, .08);
  font-size: 14px;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}

.zero-action-btn:hover,
.doll-refine-toggle:hover,
.boss-soul-toggle:hover,
.drop-expand-button:hover,
.basic-faq-tools button:hover,
.special-growth-details summary:hover,
.tower-growth-details summary:hover,
.announcement-detail-footer a:hover,
.download-primary-btn:hover,
.promotion-form-actions button:hover,
.promotion-admin-filter button:hover,
.promotion-admin-bulk-actions button:hover,
.promotion-admin-table button:hover {
  color: #fff1bd;
  border-color: rgba(255, 214, 126, .82);
  filter: brightness(1.12);
  transform: translateY(-1px);
}

.zero-action-btn-secondary {
  color: #e8f6ff;
  border-color: rgba(90, 170, 255, .42);
  background: linear-gradient(180deg, rgba(8, 20, 34, .94), rgba(3, 10, 18, .98));
  box-shadow: inset 0 0 10px rgba(90, 170, 255, .08);
}

.zero-action-btn-secondary:hover {
  color: #fff;
  border-color: rgba(126, 208, 255, .62);
}