:root {
  color-scheme: light;
  --ink: #17212c;
  --muted: #667280;
  --line: #dde6ee;
  --panel: rgba(255, 255, 255, 0.94);
  --paper: #f3f6f8;
  --gold: #c49a55;
  --teal: #347f89;
  --deep: #101922;
  --button: #243240;
  --shadow: 0 20px 52px rgba(18, 28, 38, 0.13);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: #fff;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

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

button,
input {
  font: inherit;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-header {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px clamp(20px, 5vw, 72px);
  color: #fff;
  transition:
    background 180ms ease,
    box-shadow 180ms ease,
    padding 180ms ease;
}

.site-header.is-scrolled {
  position: fixed;
  padding-block: 12px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 12px 28px rgba(16, 24, 33, 0.08);
  backdrop-filter: blur(18px);
}

.brand {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0;
}

.header-actions {
  order: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.header-action {
  position: relative;
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 7px;
  border: 0;
  border-radius: 4px;
  color: #fff;
  background: transparent;
  font-size: 13px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}

.header-action svg {
  width: 17px;
  height: 17px;
  flex: none;
}

.header-action:hover,
.header-action:focus-visible {
  background: rgba(255, 255, 255, 0.12);
}

.message-dot {
  position: absolute;
  top: 7px;
  left: 22px;
  width: 5px;
  height: 5px;
  border: 1px solid rgba(20, 25, 29, 0.38);
  border-radius: 50%;
  background: #ff4a51;
}

.site-header.is-scrolled .header-action {
  color: #3e474d;
  background: transparent;
  backdrop-filter: none;
}

.site-header.is-scrolled .header-action:hover,
.site-header.is-scrolled .header-action:focus-visible {
  color: #f33d45;
  background: #f4f4f4;
}

.header-user-avatar{width:24px;height:24px;border-radius:50%;object-fit:cover}
.profile-action.has-avatar>svg{display:none}
#wiki-login-dialog{width:min(390px,calc(100% - 32px));padding:30px;border:0;border-radius:12px;color:#333;box-shadow:0 24px 80px #0003}
#wiki-login-dialog::backdrop{background:#17202988}
#wiki-login-dialog>p{margin:0;color:#a04e54;font-size:11px;letter-spacing:.2em}
#wiki-login-dialog h2{margin:10px 0 24px;font-size:24px}
#wiki-login-form{display:grid;gap:10px}
#wiki-login-form label{font-size:13px;color:#777}
#wiki-login-form input{height:44px;padding:0 12px;border:1px solid #ddd;border-radius:6px}
#wiki-login-form button{height:44px;margin-top:6px;border:0;border-radius:6px;background:#303030;color:#fff;cursor:pointer}
#wiki-login-dialog small{display:block;margin-top:18px;color:#999;font-size:11px;line-height:1.7}
.wiki-login-close{position:absolute;top:12px;right:12px;width:32px;height:32px;border:0;border-radius:50%;background:#f3f3f3;color:#777;font-size:20px;cursor:pointer}
#wiki-quick-dialog{inset:0 0 0 auto;width:min(580px,100%);height:100dvh;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:#f7f7f4;color:#30302e;box-shadow:-22px 0 70px #1112}
#wiki-quick-dialog[open]{animation:quick-panel-in .2s ease-out}
#wiki-quick-dialog::backdrop{background:#20242170;backdrop-filter:blur(5px)}
@keyframes quick-panel-in{from{transform:translateX(24px);opacity:.6}to{transform:none;opacity:1}}
.wiki-quick-close{position:absolute;z-index:2;top:14px;right:16px;width:34px;height:34px;border:0;border-radius:50%;background:transparent;color:#777;font-size:23px;cursor:pointer}
.wiki-quick-close:hover{background:#e9e9e5;color:#222}
.wiki-quick-scroll{height:100%;overflow:auto;padding:34px 48px 28px}
.wiki-quick-user{min-height:70px;display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:14px;border-bottom:1px solid #deded8;padding-bottom:18px}
.wiki-quick-avatar{grid-row:1;width:52px;height:52px;display:grid;place-items:center;border:1px solid #d7d7d1;border-radius:50%;background:#ecece8;color:#666;overflow:hidden}
.wiki-quick-avatar img{width:100%;height:100%;object-fit:cover}.wiki-quick-avatar svg{width:23px;height:23px}.wiki-quick-user strong{font-size:16px}.wiki-quick-user p{margin:6px 0 0;color:#888;font-size:13px}.wiki-quick-user p span{margin-left:7px;padding:3px 6px;border-radius:4px;background:#e8e8e4;font-size:11px}.wiki-quick-user>a{display:flex;align-items:center;gap:8px;padding:10px 13px;border:1px solid #d8d8d2;border-radius:7px;font-size:14px}.wiki-quick-user>a:hover{background:#eaeae6}
.wiki-quick-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:10px 0 20px;border-bottom:1px solid #deded8}.wiki-quick-nav button{min-height:46px;border:0;border-radius:7px;background:transparent;color:#777;font-size:14px;cursor:pointer}.wiki-quick-nav button span{margin-right:7px;font-size:18px}.wiki-quick-nav button:hover,.wiki-quick-nav button.is-active{background:#e2e2de;color:#252523}
.wiki-quick-panel{min-height:360px;padding-top:24px}.wiki-quick-panel>header{display:flex;align-items:center;justify-content:space-between}.wiki-quick-panel h2{margin:0;font-size:18px;font-weight:500}.wiki-quick-panel header span{color:#92928d;font-size:12px}.wiki-quick-subtabs{display:flex;gap:28px;margin-top:18px;border-bottom:1px solid #deded8}.wiki-quick-subtabs button{padding:10px 0;border:0;border-bottom:2px solid transparent;background:transparent;color:#777}.wiki-quick-subtabs button.is-active{border-color:#333;color:#222}.wiki-quick-subtabs b{margin-left:4px;color:#999;font-weight:400}.wiki-quick-empty{min-height:250px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#aaa;text-align:center}.wiki-quick-empty>span{font-size:27px}.wiki-quick-empty strong{margin-top:14px;color:#6f6f6b;font-size:14px;font-weight:500}.wiki-quick-empty p{margin:10px 0;color:#aaa;font-size:13px}.wiki-quick-note{margin:26px 0;color:#aaa;font-size:11px}
@media(max-width:600px){.wiki-quick-scroll{padding:54px 20px 24px}.wiki-quick-user{grid-template-columns:46px minmax(0,1fr)}.wiki-quick-avatar{width:46px;height:46px}.wiki-quick-user>a{grid-column:1/-1;justify-content:center}.wiki-quick-nav button{font-size:12px}.wiki-quick-nav button span{display:block;margin:0 0 3px}}

.compact-controls {
  order: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 36px;
  flex: 1;
  min-width: 0;
}

.compact-controls[hidden] { display: none; }
.compact-nav { display: flex; gap: 28px; align-items: center; }
.compact-nav a { padding: 10px 0; font-size: 14px; white-space: nowrap; }
.compact-nav a.is-current, .compact-nav a:hover { color: #f33d45; }
.compact-search { display: flex; width: 260px; min-width: 0; height: 38px; background: #f2f3f4; border-radius: 22px; padding: 0 5px 0 14px; }
.compact-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 13px; }
.compact-search button { display: grid; place-items: center; width: 34px; flex-shrink: 0; border: 0; background: transparent; border-radius: 50%; cursor: pointer; }
.compact-search img { width: 18px; height: 18px; opacity: 0.6; }
.compact-search:focus-within { outline: 2px solid #d9a0a3; }

@media (max-width: 900px) {
  .compact-controls { gap: 20px; }
  .compact-nav { gap: 16px; }
  .compact-search { width: 180px; }
  .header-action { width: 36px; padding: 0; }
  .header-action .action-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .message-dot { left: 21px; }
}
@media (max-width: 680px) {
  .site-header.has-compact-nav { flex-wrap: wrap; gap: 8px 14px; }
  .has-compact-nav .brand { position: absolute; top: 12px; left: 18px; }
  .has-compact-nav .brand span:last-child { display: none; }
  .compact-controls { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; gap: 8px; }
  .compact-search { grid-row: 1; margin-left: 48px; width: calc(100% - 136px); }
  .compact-nav { justify-content: space-between; gap: 12px; }
  .has-compact-nav .header-actions { position: absolute; top: 13px; right: 18px; }
}

.brand-mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.14);
  font-size: 12px;
}

.site-header.is-scrolled .brand-mark {
  border-color: rgba(23, 32, 43, 0.14);
  background: #fff;
}

.top-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
  color: rgba(255, 255, 255, 0.86);
  font-size: 14px;
}

.site-header.is-scrolled .top-nav {
  color: #44515f;
}

.top-nav a {
  padding: 8px 2px;
}

.top-nav a:hover,
.top-nav a:focus-visible {
  color: var(--gold);
}

.hero {
  position: relative;
  min-height: 480px;
  display: grid;
  place-items: center;
  padding: 116px 20px 40px;
  overflow: hidden;
  color: #fff;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(9, 15, 23, 0.58), rgba(9, 15, 23, 0.24) 42%, rgba(243, 246, 248, 0.96) 96%),
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.22), transparent 30%),
    url("./assets/wiki-hero.png") center / cover no-repeat;
  transform: scale(1.02);
}

.hero-panel {
  position: relative;
  z-index: 1;
  width: min(100%, 920px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.eyebrow {
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.78);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

h1 {
  max-width: 100%;
  margin: 0;
  font-size: 56px;
  line-height: 1.04;
  font-weight: 850;
  letter-spacing: 0;
  white-space: nowrap;
  text-shadow: 0 16px 44px rgba(0, 0, 0, 0.28);
}

.search-form {
  width: min(100%, 760px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0;
  margin-top: 38px;
  padding: 0 8px 0 0;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(20, 30, 38, 0.12);
  transition: box-shadow 160ms ease;
}

.search-form:focus-within {
  box-shadow: 0 0 0 3px rgba(52, 127, 137, 0.2), 0 4px 16px rgba(20, 30, 38, 0.12);
}

.search-form input {
  min-width: 0;
  width: 100%;
  min-height: 56px;
  padding: 0 24px;
  border: 0;
  outline: 0;
  border-radius: 30px;
  color: var(--ink);
  background: transparent;
  font-size: 16px;
}

.search-form input::placeholder {
  color: #8a96a3;
}

.search-form button {
  display: grid;
  place-items: center;
  align-self: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition:
    transform 160ms ease,
    background 160ms ease;
}

.search-form button:hover,
.search-form button:focus-visible {
  background: #edf3f2;
}

.search-form button img {
  opacity: 0.6;
}

.hot-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 12px;
  margin-top: 12px;
}

.hot-tags button {
  border: 0;
  border-radius: 3px;
  padding: 6px 4px;
  color: #48545b;
  background: transparent;
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
  transition: color 160ms ease;
}

.hot-tags button:hover,
.hot-tags button:focus-visible,
.hot-tags button.is-active {
  color: #182c36;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.category-nav {
  width: 100%;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin-top: 0;
  padding: 0 max(20px, calc((100% - 1180px) / 2));
  border: 0;
  border-bottom: 1px solid #f0f0f0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

.category-nav a {
  position: relative;
  display: grid;
  min-height: 58px;
  place-items: center;
  padding: 14px 12px;
  border-radius: 0;
  color: #333;
  background: transparent;
  font-size: 17px;
  font-weight: 500;
  text-shadow: none;
  transition:
    transform 160ms ease,
    background 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease;
}

.category-nav a::after {
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 24px;
  height: 2px;
  border-radius: 999px;
  background: #ff4148;
  content: "";
  opacity: 0;
  transform: translateX(-50%) scaleX(0.5);
  transition:
    opacity 160ms ease,
    transform 160ms ease;
}

.category-nav a:hover,
.category-nav a:focus-visible,
.category-nav a.is-current {
  color: #f33d45;
  background: transparent;
  box-shadow: none;
}

.category-nav a:hover,
.category-nav a:focus-visible {
  transform: none;
}

.category-nav a:hover::after,
.category-nav a:focus-visible::after,
.category-nav a.is-current::after {
  opacity: 1;
  transform: translateX(-50%) scaleX(1);
}

.content-shell {
  --wiki-surface: #f7f7f7;
  --ink: #262626;
  --muted: #888;
  --teal: #f33d45;
  --line: #efefef;
  width: 100%;
  padding: 18px max(20px, calc((100% - 1180px) / 2)) 48px;
  background: #fff;
  display: grid;
  grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr);
  gap: 40px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.left-column {
  display: grid;
  align-content: start;
  gap: 24px;
}

.section-block,
.guide-panel {
  border: 0;
  border-radius: 4px;
  background: #fff;
  box-shadow: none;
}

.section-block + .section-block,
.guide-panel + .guide-panel {
  border-top: 0;
}

.section-block {
  padding: 24px;
}

.left-column .section-block:first-child {
  background: #fafafa;
}

.left-column .section-block + .section-block {
  background: #fff;
  border-top: 1px solid #eee;
}

.side-column {
  display: grid;
  align-content: start;
  border-left: 0;
  gap: 24px;
}

.guide-panel {
  align-self: start;
  padding: 8px 0 16px;
}

.clock-panel {
  padding: 20px;
  background: var(--wiki-surface);
}

.content-shell .section-title span {
  color: #262626;
  font-size: 18px;
  font-weight: 600;
}

.content-shell .section-title a {
  color: #999;
}

.content-shell a:hover {
  color: #f33d45;
}

.content-shell .guide-item span {
  color: #ee555b;
}

.content-shell .quick-grid a {
  background: transparent;
}

.content-shell .notice-item,
.content-shell .guide-item {
  border-color: #efefef;
}

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

.clock-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  color: var(--muted);
}

.clock-heading span:last-child {
  font-size: 12px;
}

#current-date {
  display: block;
  margin: 16px 0 22px;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.6;
  font-weight: 600;
}

.server-age {
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 14px;
}

.server-age strong {
  margin: 0 6px;
  color: var(--teal);
  font-size: 24px;
  font-variant-numeric: tabular-nums;
}

.launch-date {
  display: inline-block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
}

.section-title span {
  font-size: 20px;
  font-weight: 700;
  color: #152230;
}

.section-title a {
  color: var(--teal);
  font-size: 13px;
  font-weight: 500;
}

.character-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 128px));
  gap: 24px;
}

.character-card {
  display: grid;
  align-content: start;
  gap: 18px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  transition:
    border-color 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}

.character-card:hover {
  border-color: rgba(52, 127, 137, 0.36);
  transform: translateY(-2px);
  box-shadow: none;
}

.role-icon {
  object-fit: contain;
  flex: 0 0 auto;
  display: grid;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 4px;
  background: #f6f8f7;
  color: #fff;
  font-weight: 850;
}

.role-warrior {
  background: linear-gradient(135deg, #293744, #886b38);
}

.role-mage {
  background: linear-gradient(135deg, #2a5760, #c89f5a);
}

.role-guard {
  background: linear-gradient(135deg, #304454, #6f8997);
}

.character-card h2,
.guide-item h2,
.notice-item h2 {
  margin: 0;
  font-size: 16px;
  line-height: 1.35;
}

.character-card p,
.guide-item p,
.notice-item p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

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

.quick-grid a {
  position: relative;
  display: grid;
  gap: 8px;
  min-height: 88px;
  padding: 18px 28px 18px 0;
  border: 0;
  border-bottom: 0;
  border-radius: 0;
  background: #fff;
  transition:
    border-color 160ms ease,
    background 160ms ease;
}

.quick-grid a:hover,
.quick-grid a:focus-visible {
  border-color: rgba(52, 127, 137, 0.32);
  background: #fbfdfd;
}

.quick-grid strong {
  font-size: 16px;
}

.quick-grid a::after {
  content: "\2192";
  position: absolute;
  right: 2px;
  top: 20px;
  color: var(--muted);
  font-size: 18px;
}

.quick-grid span {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.guide-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 12px;
  padding: 18px 0;
  border-top: 1px solid #e6edf3;
}

.guide-item:first-of-type {
  border-top: 0;
  padding-top: 0;
}

.guide-item span {
  display: inline-flex;
  margin-bottom: 0;
  align-self: center;
  padding: 0;
  border-radius: 0;
  color: #2a6870;
  background: transparent;
  font-size: 12px;
  font-weight: 800;
}

.guide-item p {
  grid-column: 1 / -1;
  margin: 0;
}

.character-card:focus-visible,
.notice-item a:focus-visible,
.guide-item a:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 5px;
}

.notice-panel {
  background: #fff;
}

.notice-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-top: 0;
}

.notice-item:first-of-type {
  border-top: 0;
  padding-top: 2px;
}

.notice-type { font-size: 12px; white-space: nowrap; }
.notice-type.is-info { color: #16a34a; }
.notice-type.is-update { color: #e2694f; }
.notice-item h2 { min-width: 0; }
.notice-item h2 a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.site-footer {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 42px clamp(20px, 5vw, 72px);
  color: rgba(255, 255, 255, 0.74);
  background: var(--deep);
}

.site-footer strong {
  display: block;
  color: #fff;
  font-size: 18px;
}

.site-footer p {
  max-width: 460px;
  margin: 10px 0 0;
  line-height: 1.7;
}

.footer-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 14px;
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: #fff;
}

.toast {
  position: fixed;
  z-index: 40;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%) translateY(20px);
  max-width: min(92vw, 420px);
  padding: 12px 16px;
  border-radius: 8px;
  color: #fff;
  background: rgba(16, 24, 33, 0.92);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.24);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 180ms ease,
    transform 180ms ease;
}

.toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.content-shell .section-title .section-caption {
  font-size: 12px;
  font-weight: 400;
  color: #888;
}

.content-shell {
  padding-top: 28px;
  column-gap: 44px;
}

.section-title {
  margin-bottom: 24px;
}

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

.version-grid > a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 4px 0;
}

.entry-kicker {
  color: #ab5960;
  font-size: 12px;
  margin-bottom: 14px;
}

.version-grid h2 {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}

.version-grid p,
.benefit-link p,
.update-list p {
  margin: 8px 0 0;
  color: #777;
  font-size: 13px;
  line-height: 1.7;
}

.entry-action {
  display: block;
  margin-top: 24px;
  color: #888;
  font-size: 12px;
}

.benefit-link {
  display: block;
  padding: 16px 0;
  border-top: 0;
}

.benefit-link strong {
  display: flex;
  justify-content: space-between;
  font-size: 15px;
}

.benefit-link strong span {
  color: #999;
}

.benefit-code-list { display: grid; gap: 5px; }
.benefit-code-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; min-height: 34px; padding: 4px 5px 4px 9px; border-radius: 4px; background: #f0f0ef; color: #555; font-size: 12px; }
.benefit-code-row time { padding-right: 10px; border-right: 1px solid #d8d8d5; color: #666; white-space: nowrap; }
.benefit-code-row > span { overflow: hidden; padding: 0 10px; text-overflow: ellipsis; white-space: nowrap; }
.benefit-code-row button { min-width: 42px; height: 25px; padding: 0 8px; border: 0; border-radius: 2px; background: #8b8781; color: #fff; font-size: 12px; cursor: pointer; }
.benefit-code-row button:hover,.benefit-code-row button:focus-visible { background: #6f6b66; }
.benefit-code-row button.is-copied { background: #3f7c5a; }

.hot-post-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.hot-post-list li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  padding: 15px 0;
  border-top: 1px solid #efefef;
}

.hot-post-list li:first-child {
  padding-top: 2px;
  border-top: 0;
}

.hot-post-rank {
  padding-top: 2px;
  color: #c7c7c7;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.hot-post-list li:first-child .hot-post-rank {
  color: #f33d45;
}

.hot-post-list a {
  display: grid;
  min-width: 0;
  gap: 8px;
}

.hot-post-list strong {
  display: -webkit-box;
  overflow: hidden;
  color: #333;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.hot-post-list a > span {
  color: #aaa;
  font-size: 12px;
}

.hot-post-list b {
  color: #bd5960;
  font-weight: 500;
}

.update-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.update-list li {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  padding: 12px 0;
}

.update-list time {
  color: #999;
  font-size: 12px;
  padding-top: 3px;
  font-variant-numeric: tabular-nums;
}

.update-list strong {
  font-size: 14px;
  font-weight: 500;
}

.content-shell {
  grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr);
  column-gap: 28px;
  padding-top: 32px;
}

.left-column {
  gap: 36px;
}

.left-column .up-section:first-child {
  padding: 28px 28px 30px;
  background: var(--wiki-surface);
  border-top: 0;
}

.content-shell .left-column .section-title > span:first-child {
  font-size: 22px;
  font-weight: 700;
}

.up-section .character-grid {
  gap: 32px;
}

.left-column .version-section,
.left-column .beginner-section {
  padding: 0 0 28px;
  border-top: 0;
}

.version-section .section-title,
.beginner-section .section-title {
  padding-bottom: 0;
  border-bottom: 0;
}

.version-grid {
  grid-template-columns: minmax(0, 2.2fr) repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 14px 18px;
}

.version-grid > a:first-child {
  grid-row: span 2;
  background: var(--wiki-surface);
  border-left: 3px solid #ed635c;
  padding: 24px;
  border-radius: 4px;
}

.version-grid > a:first-child h2 {
  font-size: 22px;
}

.version-grid > a:first-child .entry-action {
  margin-top: auto;
  padding-top: 28px;
  color: #bd4945;
}

.version-grid > a:not(:first-child) {
  padding: 14px 0;
}

.version-grid > a:last-child {
  border-top: 0;
}

.version-grid > a:not(:first-child) .entry-kicker {
  margin-bottom: 6px;
}

.version-grid > a:not(:first-child) .entry-action {
  display: none;
}

.beginner-section .quick-grid {
  counter-reset: entry;
}

.beginner-section .quick-grid a {
  counter-increment: entry;
  padding-left: 36px;
}

.beginner-section .quick-grid a::before {
  content: "0" counter(entry);
  position: absolute;
  left: 0;
  top: 20px;
  font-size: 13px;
  color: #b0a5a1;
  font-variant-numeric: tabular-nums;
}

.left-column .home-catalog-section {
  padding: 0 0 28px;
  border-top: 0;
}

.left-column .home-hot-section { padding: 0 0 28px; border-top: 0; }
.home-tool-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.home-tool-grid a { min-width: 0; min-height: 66px; display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid #ececec; border-radius: 4px; }
.home-tool-grid a:hover { border-color: #efc6c8; }
.home-tool-grid span { color: #c2a3a5; font-size: 10px; }
.home-tool-grid strong { overflow: hidden; color: #333; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.home-tool-grid i { color: #bbb; font-size: 15px; font-style: normal; }
.home-guide-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 32px; }
.home-guide-grid a { min-width: 0; display: grid; gap: 6px; padding: 14px 0; border-bottom: 1px solid #ededed; }
.home-guide-grid small { color: #b15a5f; font-size: 11px; }
.home-guide-grid strong { overflow: hidden; color: #292929; font-size: 14px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.home-guide-grid span { color: #9b9b9b; font-size: 11px; }
@media(max-width:680px){.home-tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.home-guide-grid{grid-template-columns:1fr}.home-guide-grid a{padding:12px 0}}

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

.home-catalog-grid a {
  position: relative;
  display: flex;
  gap: 11px;
  align-items: center;
  min-width: 0;
  min-height: 68px;
  padding: 10px 13px;
  overflow: hidden;
  border: 1px solid #ececec;
  border-radius: 4px;
  background: #fff;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.home-catalog-grid a:hover,
.home-catalog-grid a:focus-visible {
  border-color: #efc6c8;
  box-shadow: 0 8px 22px rgba(65, 34, 36, 0.08);
  transform: translateY(-2px);
}

.home-catalog-icon {
  display: grid;
  width: 40px;
  height: 40px;
  flex: none;
  place-items: center;
  border-radius: 3px;
  color: #bd4b51;
  background: #faf3f3;
}

.home-catalog-icon svg {
  width: 24px;
  height: 24px;
}

.home-catalog-copy {
  display: grid;
  min-width: 0;
  gap: 7px;
}

.home-catalog-copy strong {
  color: #292929;
  font-size: 15px;
  font-weight: 600;
}

.home-catalog-copy small {
  display: none;
}

.home-catalog-arrow {
  margin-left: auto;
  color: #bbb;
  font-size: 17px;
  transition: color 160ms ease, transform 160ms ease;
}

.home-catalog-grid a:hover .home-catalog-arrow,
.home-catalog-grid a:focus-visible .home-catalog-arrow {
  color: #f33d45;
  transform: translateX(3px);
}

@media (max-width: 680px) {
  .home-catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .home-catalog-grid a {
    min-height: 64px;
    padding: 10px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-catalog-grid a { transition: none; }
}

.side-column {
  padding-left: 28px;
  border-left: 0;
  gap: 20px;
}

.content-shell .side-column .section-title span:first-child {
  font-size: 16px;
}

.side-column .section-title {
  margin-bottom: 16px;
}

.side-column .guide-panel + .guide-panel {
  border-top: 0;
  padding-top: 24px;
}

.notice-item h2 {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
}

@media (max-width: 920px) {
  h1 {
    font-size: 40px;
  }

  .hero {
    min-height: 460px;
  }

  .content-shell {
    grid-template-columns: 1fr;
  }

  .side-column {
    padding-left: 0;
    border-left: 0;
    border-top: 0;
  }

  .character-grid {
    grid-template-columns: repeat(3, minmax(0, 128px));
  }

  .guide-panel {
    align-self: stretch;
  }
}

@media (max-width: 680px) {
  h1 {
    font-size: 28px;
  }

  .site-header {
    padding: 14px 18px;
  }

  .top-nav {
    gap: 12px;
    font-size: 13px;
  }

  .top-nav a:nth-child(4) {
    display: none;
  }

  .hero {
    min-height: 440px;
    padding-top: 96px;
  }

  .search-form {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0;
    padding: 0 6px 0 0;
  }

  .search-form button {
    min-width: 44px;
    white-space: nowrap;
  }

  .search-form input {
    padding-inline: 18px 6px;
    font-size: 16px;
  }

  .category-nav {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding-inline: 14px;
  }

  .category-nav a {
    min-height: 58px;
    font-size: 16px;
  }

  .content-shell {
    padding: 24px 14px 32px;
  }

  .section-block,
  .guide-panel {
    padding: 22px 18px;
  }

  .character-grid {
    gap: 12px;
  }

  .role-icon {
    height: auto;
  }

  .quick-grid {
    grid-template-columns: 1fr;
  }

  .version-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .version-grid > a:first-child {
    grid-row: auto;
  }

  .left-column .up-section:first-child {
    padding: 22px 18px;
  }

  .up-section .character-grid {
    gap: 12px;
  }

  .version-grid > a {
    border-bottom: 0;
    padding-bottom: 18px;
  }

  .entry-kicker {
    margin-bottom: 6px;
  }

  .entry-action {
    margin-top: 12px;
  }

  .site-footer {
    display: grid;
  }
}

@media (max-width: 440px) {
  .brand span:last-child {
    display: none;
  }

  .hero {
    min-height: 420px;
  }

  h1 {
    font-size: 20px;
  }
}
:root {
  --wiki-surface: #f7f7f7;
  --wiki-accent: #f33d45;
}

/* Hero collection */
.catalog-layout { max-width: 1280px; margin: 0 auto; padding: 36px clamp(20px, 4vw, 48px) 56px; }
.catalog-layout[hidden], .catalog-card[hidden] { display: none; }
.catalog-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 26px; }
.catalog-eyebrow { color: var(--teal); letter-spacing: .18em; font-size: 11px; font-weight: 700; margin: 0 0 9px; }
.catalog-heading h1 { font-size: 28px; margin: 0 0 10px; }
.catalog-description, .catalog-credit { color: var(--muted); font-size: 13px; line-height: 1.7; margin: 0; }
.catalog-total { color: var(--teal); font-size: 36px; font-weight: 700; white-space: nowrap; }
.catalog-total small { font-size: 12px; color: var(--muted); font-weight: 400; }
.catalog-toolbar { display: flex; align-items: center; gap: 9px; padding: 16px 0 20px; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.catalog-toolbar input, .catalog-toolbar select, .catalog-toolbar button { min-height: 42px; border: 1px solid var(--line); border-radius: 7px; background: white; padding: 0 13px; font: inherit; font-size: 13px; color: var(--ink); }
.catalog-toolbar input { order: 5; flex: 1; min-width: 240px; margin-left: 4px; }
.catalog-toolbar button { cursor: pointer; color: var(--teal); }
.catalog-status { display: flex; justify-content: space-between; gap: 16px; margin: 22px 0 16px; color: var(--muted); font-size: 12px; }
.catalog-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 16px; }
.catalog-card { overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: white; transition: transform .18s, box-shadow .18s; }
.catalog-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px #17212c14; border-color: var(--teal); }
.catalog-card:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.catalog-art { display: flex; align-items: center; justify-content: center; height: 216px; padding: 16px 10px; background: radial-gradient(ellipse at center, #e5eef0, #f3f6f8 75%); }
.catalog-art img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 7px #13293320); }
.catalog-card-info { padding: 13px 12px; }
.catalog-stars { color: #b08a40; font-size: 11px; letter-spacing: 1px; }
.catalog-card h2 { margin: 6px 0; font-size: 16px; }
.catalog-card p { color: var(--muted); font-size: 11px; margin: 0 0 14px; }
.catalog-id { display: flex; justify-content: space-between; font-size: 10px; color: #7a8792; border-top: 1px solid #edf1f4; padding-top: 10px; }
.catalog-id span { color: var(--teal); }
.catalog-credit { margin-top: 26px; }
#catalog-empty { text-align: center; padding: 60px 10px; color: var(--muted); }
@media (max-width: 1050px) { .catalog-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } .catalog-toolbar { flex-wrap: wrap; } }
@media (max-width: 600px) { .catalog-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; } .catalog-art { height: 200px; } .catalog-toolbar input { flex-basis: 100%; min-width: 100%; margin-left: 0; } .catalog-toolbar select { flex: 1; min-width: 90px; } .catalog-total { display: none; } .catalog-status { font-size: 11px; } }

@media (max-width: 600px) {
  .catalog-layout { padding-left: 12px; padding-right: 12px; }
  .catalog-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .catalog-card { border-radius: 8px; }
  .catalog-art { height: auto; aspect-ratio: 3 / 5; padding: 6px 3px; }
  .catalog-card-info { padding: 7px 5px; }
  .catalog-stars { font-size: 8px; letter-spacing: 0; }
  .catalog-card h2 { font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
  .catalog-card p { font-size: 9px; line-height: 1.5; margin-bottom: 7px; }
  .catalog-id { font-size: 8px; padding-top: 6px; }
  .catalog-id span { display: none; }
}

/* Quiet gallery treatment: artwork and a single understated caption. */
.catalog-grid { gap: 24px 16px; }
.catalog-card { border: 0; border-radius: 0; background: transparent; overflow: visible; }
.catalog-card:hover { transform: none; box-shadow: none; }
.catalog-art { border-radius: 12px; background: #f5f6f7; padding: 12px 8px; transition: background .2s ease; }
.catalog-art img { filter: drop-shadow(0 3px 4px #18232d12); transition: transform .2s ease; }
.catalog-card:hover .catalog-art { background: #edf0f2; }
.catalog-card:hover .catalog-art img { transform: translateY(-3px); }
.catalog-card-info { padding: 11px 2px 0; text-align: center; }
.catalog-card h2 { margin: 0; color: #48515b; font-size: 13px; font-weight: 500; line-height: 1.5; letter-spacing: .02em; overflow-wrap: anywhere; }
.catalog-card:hover h2 { color: #17212c; }
@media (max-width: 600px) {
  .catalog-grid { gap: 17px 8px; }
  .catalog-art { border-radius: 8px; padding: 5px 2px; }
  .catalog-card-info { padding: 7px 0 0; }
  .catalog-card h2 { font-size: 10px; line-height: 1.5; letter-spacing: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .catalog-art, .catalog-art img { transition: none; }
  .catalog-card:hover .catalog-art img { transform: none; }
}

/* Strategy journal */
.guides-layout { max-width:1280px; margin:auto; padding:46px 48px 60px; }
.guides-layout[hidden] { display:none; }
.guides-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:34px; gap:24px; }
.guides-kicker { margin:0 0 14px; font-size:10px; letter-spacing:.17em; color:#608079; font-weight:600; }
.guides-heading h1 { font-size:32px; font-weight:600; letter-spacing:-.04em; margin:0 0 14px; }
.guides-heading>div>p:last-child { color:#7a8288; font-size:13px; margin:0; line-height:1.8; }
.guides-edition { font-size:10px; line-height:2; color:#8a9297; letter-spacing:.08em; text-align:right; }
.guides-edition b { font-weight:400; }
.guides-featured { display:grid; grid-template-columns:1.15fr 1fr; gap:36px; margin-bottom:48px; }
.guides-layout button { font:inherit; cursor:pointer; text-align:left; }
.guide-cover { position:relative; overflow:hidden; min-height:300px; padding:27px 32px; display:flex; flex-direction:column; justify-content:space-between; border:0; border-radius:12px; color:#f6f8f5; background:radial-gradient(ellipse at 110% 110%,#667b69 0,transparent 60%),#233d38; }
.guide-cover::after { content:''; position:absolute; width:260px; height:260px; border:1px solid #cadbca20; border-radius:50%; right:-130px; top:25px; box-shadow:0 0 0 35px #cadbca08,0 0 0 70px #cadbca06; pointer-events:none; }
.guide-cover-top { display:flex; justify-content:space-between; color:#b7c8c0; font-size:10px; letter-spacing:.08em; }
.guide-pill { font-size:10px; color:#c6d4cb; }
.guide-cover h2 { font-weight:500; font-size:29px; line-height:1.5; margin:12px 0; letter-spacing:.02em; }
.guide-cover p { max-width:360px; font-size:12px; color:#b9c9c1; line-height:1.8; margin:0 0 24px; }
.guide-cover-link { font-size:11px; display:flex; justify-content:space-between; padding-top:15px; border-top:1px solid #ffffff25; }
.guide-carousel { position:relative; min-height:300px; overflow:hidden; border-radius:12px; touch-action:pan-y; }
.guide-carousel-track { position:absolute; inset:0; }
.guide-carousel .guide-cover { position:absolute; inset:0; width:100%; height:100%; padding-bottom:58px; opacity:0; pointer-events:none; transform:translateX(18px); transition:opacity .3s ease,transform .3s ease; }
.guide-carousel .guide-cover.is-active { z-index:1; opacity:1; pointer-events:auto; transform:translateX(0); }
.guide-cover-alt-1 { background:radial-gradient(ellipse at 105% 105%,#81745e 0,transparent 60%),#3e382d; }
.guide-cover-alt-2 { background:radial-gradient(ellipse at 105% 105%,#506c78 0,transparent 60%),#253d47; }
.guide-cover-alt-3 { background:radial-gradient(ellipse at 105% 105%,#765b5a 0,transparent 60%),#402f31; }
.guide-carousel-controls { position:absolute; z-index:3; right:20px; bottom:18px; display:flex; align-items:center; gap:10px; }
.guide-carousel-controls>button { width:28px; height:28px; padding:0; display:grid; place-items:center; border:1px solid #ffffff38; border-radius:50%; background:#10251f66; color:#fff; text-align:center; }
.guide-carousel-dots { display:flex; align-items:center; gap:6px; }
.guide-carousel-dots button { width:6px; height:6px; min-width:0; padding:0; border:0; border-radius:50%; background:#ffffff66; }
.guide-carousel-dots button[aria-pressed=true] { width:18px; border-radius:4px; background:#fff; }
.guides-picks { padding:15px 0 0; }
.guides-picks>button { display:flex; align-items:center; gap:20px; padding:25px 0; border:0; border-bottom:1px solid #e7ebea; background:none; width:100%; }
.pick-number { font-size:23px; font-weight:300; color:#b7c1bd; align-self:flex-start; }
.guides-picks button>div { flex:1; }
.guides-picks small { font-size:10px; color:#7f8e87; }
.guides-picks h3 { font-size:17px; font-weight:500; margin:10px 0; line-height:1.5; }
.guides-picks button p { font-size:12px; color:#919795; line-height:1.7; margin:0; }
.guides-picks button>span:last-child { color:#8e9a94; }
.guides-picks>button { padding:12px 0; opacity:.62; transition:opacity .2s,padding-left .2s; }
.guides-picks>button[aria-pressed=true] { padding-left:8px; opacity:1; }
.guides-picks>button[aria-pressed=true] .pick-number { color:#355844; }
.guides-picks h3 { margin:5px 0; font-size:15px; }
.guides-library-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:21px; }
.guides-library-heading h2 { font-size:21px; font-weight:500; margin:0; }
.guides-create { display:inline-flex; align-items:center; justify-content:center; min-width:104px; height:38px; padding:0 17px; border-radius:6px; background:#355844; color:#fff; font-size:13px; font-weight:600; text-decoration:none; }
.guides-create:hover { background:#294b38; }
.guides-search { display:flex; align-items:center; gap:10px; background:#f5f6f6; padding:11px 15px; border-radius:7px; width:290px; }
.guides-search img { opacity:.5; }
.guides-search input { min-width:0; width:100%; border:0; outline:0; background:none; font-size:12px; }
.guides-search:focus-within { outline:2px solid #6b8980; outline-offset:2px; }
.guides-filter-row { display:flex; align-items:flex-end; gap:24px; border-bottom:1px solid #e6eae8; }
.guides-filters { display:flex; flex:1; gap:25px; overflow-x:auto; }
.guides-filters button { flex-shrink:0; border:0; border-bottom:2px solid transparent; padding:13px 0; color:#89908b; background:none; font-size:12px; }
.guides-filters button[aria-pressed=true] { color:#294d42; border-bottom-color:#294d42; font-weight:600; }
.guides-sort { display:flex; align-items:center; gap:8px; flex:none; padding-bottom:9px; color:#8d9690; font-size:12px; }
.guides-sort select { min-height:32px; padding:0 28px 0 10px; border:1px solid #dfe4e1; border-radius:5px; background:#fff; color:#526159; font:inherit; cursor:pointer; }
.guides-sort:focus-within { color:#294d42; }
.guides-list-meta { display:flex; justify-content:flex-end; gap:16px; font-size:10px; color:#939a96; padding:24px 0 0; }
.guides-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:44px; }
.guide-entry { padding:27px 0 22px; border:0; border-bottom:1px solid #e8ece9; background:none; }
.guide-entry-category { color:#648073; font-size:10px; }
.guide-entry-category>span { color:#b4bbb6; padding-left:7px; }
.guide-entry h3 { font-size:17px; font-weight:500; margin:13px 0 9px; line-height:1.6; color:#28362f; }
.guide-entry>p { font-size:12px; line-height:1.8; color:#8b938e; margin:0; }
.guide-entry-footer { display:flex; justify-content:space-between; align-items:center; color:#a1a7a3; font-size:10px; margin-top:22px; }
.guide-arrow { font-size:17px; color:#7b8c82; transition:transform .2s; }
.guide-entry:hover h3,.guides-picks button:hover h3 { color:#3e7d67; }
.guide-entry:hover .guide-arrow { transform:translate(2px,-2px); }
.guides-layout button:focus-visible { outline:2px solid #6b8980; outline-offset:4px; }
.guides-bottom { display:flex; justify-content:space-between; gap:20px; color:#a1aaa4; font-size:10px; padding-top:35px; }
.guides-bottom>span:last-child { letter-spacing:.1em; }
.guides-empty { text-align:center; padding:50px 20px; color:#818e86; }
.guides-empty[hidden] { display:none; }
.guides-empty h3 { font-size:18px; font-weight:500; }
.guides-empty p { font-size:13px; }
.guides-empty button { border:1px solid #dbe3df; background:white; border-radius:6px; padding:10px 16px; font-size:12px; }
#guide-dialog { width:min(700px,calc(100% - 32px)); max-height:85vh; border:0; border-radius:15px; padding:0; box-shadow:0 24px 100px #172f2940; color:#25382e; }
#guide-dialog::backdrop { background:#172a2466; backdrop-filter:blur(5px); }
#guide-dialog form { position:sticky; top:0; display:flex; justify-content:flex-end; margin:0; padding:14px 16px 0; }
#guide-dialog form button { border:0; border-radius:50%; background:#edf1ee; color:#48594e; width:32px; height:32px; cursor:pointer; }
.guide-dialog-body { padding:8px 42px 40px; }
.guide-dialog-body h1 { font-size:27px; font-weight:500; line-height:1.5; }
.guide-dialog-intro { color:#7f8b82; font-size:14px; line-height:1.9; }
.guide-draft-note { background:#f3f5f3; padding:15px; border-radius:7px; font-size:12px; line-height:1.8; color:#77867b; margin:25px 0; }
.guide-dialog-body section h2 { font-size:18px; margin:25px 0 12px; font-weight:500; }
.guide-dialog-body section h2 span { font-size:13px; color:#a4b1a6; margin-right:14px; }
.guide-dialog-body section p { font-size:14px; line-height:2; color:#69766c; }
.guide-dialog-end { text-align:center; color:#a0aba2; font-size:10px; margin-top:35px; }
@media(max-width:800px) { .guides-layout { padding:30px 24px; } .guides-featured { gap:24px; } .guide-cover { padding:23px; } .guide-cover h2 { font-size:25px; } .guides-picks h3 { font-size:15px; } .guides-picks>button { gap:12px; } .guides-list { grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:26px; } }
@media(max-width:600px) { .guides-layout { padding:28px 20px 40px; } .guides-heading h1 { font-size:26px; } .guides-edition { display:none; } .guides-featured { grid-template-columns:1fr; gap:20px; margin-bottom:35px; } .guide-cover { min-height:280px; } .guides-picks { padding-top:0; } .guides-picks>button { padding:18px 0; } .guides-picks>.guides-kicker { margin-bottom:0; } .guides-library-heading { align-items:stretch; flex-direction:column; gap:17px; } .guides-search { width:100%; } .guides-filters { gap:23px; } .guides-list { grid-template-columns:1fr; } .guide-entry h3 { font-size:16px; } .guides-list-meta { font-size:9px; } .guides-bottom { line-height:1.8; } .guides-bottom>span:last-child { display:none; } .guide-dialog-body { padding:8px 23px 30px; } .guide-dialog-body h1 { font-size:23px; } }
@media(max-width:600px) { .guide-carousel { min-height:280px; } .guide-carousel-controls { right:14px; bottom:14px; } .guides-picks { display:none; } }
@media(prefers-reduced-motion:reduce) { .guide-carousel .guide-cover { transition:none; } }

/* Compact title-only guide index. */
.guides-list { column-gap: 44px; }
.guide-entry { padding: 17px 0; min-height: 58px; display: flex; align-items: center; }
.guide-entry h3 { margin: 0; font-size: 14px; line-height: 1.65; font-weight: 500; }
@media (max-width: 600px) {
  .guides-filter-row { align-items:stretch; flex-direction:column; gap:10px; border-bottom:0; }
  .guides-filters { border-bottom:1px solid #e6eae8; }
  .guides-sort { align-self:flex-end; padding:0; }
  .guide-entry { padding: 15px 0; min-height: 54px; }
  .guide-entry h3 { font-size: 14px; }
}

.guide-entry { flex-direction: column; align-items: stretch; justify-content: center; gap: 5px; padding: 16px 0; }
.guide-row-meta { color: #9aa19c; font-size: 11px; line-height: 1.55; font-weight: 400; }
.guides-list-meta > span:last-child { text-align: right; line-height: 1.6; }
.guides-library-body { display:grid; grid-template-columns:minmax(0,1fr) 230px; gap:38px; align-items:start; }
.guides-library-main { min-width:0; }
.guides-library-body .guides-list { column-gap:32px; }
.guides-library-body .guide-entry { min-height:48px; padding:10px 0; gap:2px; }
.guides-library-body .guide-entry h3 { font-size:13px; line-height:1.45; }
.guides-library-body .guide-row-meta { font-size:10px; line-height:1.35; }
.guide-authors { position:sticky; top:86px; margin-top:10px; padding-left:22px; border-left:1px solid #e6eae8; }
.guide-authors-heading { display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding-bottom:12px; border-bottom:1px solid #e6eae8; }
.guide-authors-heading span { color:#293a31; font-size:16px; font-weight:600; }
.guide-authors-heading small { color:#a0a8a3; font-size:9px; letter-spacing:.1em; }
.guide-author-list { display:grid; }
.guide-author-list article { min-width:0; padding:15px 0; display:grid; grid-template-columns:36px minmax(0,1fr) auto; align-items:center; gap:10px; border-bottom:1px solid #edf0ee; }
.guide-author-avatar { width:36px; height:36px; display:grid; place-items:center; border-radius:50%; background:#edf2ee; color:#587064; font-size:12px; }
.guide-author-list article>div { min-width:0; display:grid; gap:4px; }
.guide-author-list b { overflow:hidden; color:#34463c; font-size:13px; font-weight:500; text-overflow:ellipsis; white-space:nowrap; }
.guide-author-list small { overflow:hidden; color:#949c97; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.guide-author-list em { color:#89948e; font-size:10px; font-style:normal; white-space:nowrap; }
@media(max-width:900px) { .guides-library-body { grid-template-columns:1fr; gap:30px; } .guide-authors { position:static; margin:0; padding:0; border-left:0; } .guide-author-list { grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:24px; } }
@media (max-width: 600px) {
  .guide-row-meta { font-size: 11px; }
  .guides-list-meta > span:last-child { max-width: 190px; }
  .guides-library-body .guides-list { grid-template-columns:1fr; }
  .guide-author-list { grid-template-columns:1fr; }
}

/* Player toolkit */
.tools-layout { max-width:1280px; margin:auto; padding:46px 48px 60px; }
.tools-layout[hidden] { display:none; }
.tools-heading { display:flex; justify-content:space-between; align-items:center; gap:30px; margin-bottom:34px; }
.tools-heading h1 { font-size:30px; font-weight:500; letter-spacing:-.03em; margin:0 0 15px; }
.tools-heading>div>p:last-child { color:#849087; font-size:13px; line-height:1.8; margin:0; }
.tools-edition { font-size:10px; line-height:2; letter-spacing:.08em; color:#929d95; text-align:right; white-space:nowrap; }
.tools-intro { display:flex; justify-content:space-between; gap:16px; padding:19px 0; border-top:1px solid #e3e9e5; color:#677b6e; font-size:12px; }
.tools-intro>span:last-child { color:#9aa59d; font-size:10px; }
.tools-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.tool-entry { display:flex; flex-direction:column; min-height:250px; text-align:left; padding:26px; border:1px solid #e5ebe7; border-radius:10px; background:#fafbf9; font:inherit; cursor:pointer; transition:background .2s,border-color .2s,transform .2s; }
.tool-entry-top { display:flex; justify-content:space-between; align-items:center; color:#8d9b90; font-size:10px; }
.tool-entry-top>span:first-child { font-size:20px; font-weight:300; color:#a6b4a8; letter-spacing:.04em; }
.tool-entry h2 { font-size:20px; font-weight:500; color:#2b4436; margin:24px 0 12px; }
.tool-entry p { color:#89968d; font-size:12px; line-height:1.9; margin:0 0 25px; max-width:270px; }
.tool-entry-bottom { margin-top:auto; display:flex; justify-content:space-between; align-items:center; color:#728779; font-size:10px; }
.tool-entry-bottom>span:last-child { font-size:18px; }
.tool-entry:hover { background:#f0f4ef; border-color:#adbdaf; transform:translateY(-2px); }
.tool-entry:focus-visible { outline:2px solid #547b66; outline-offset:4px; }
.tools-note { display:flex; gap:10px; align-items:center; padding:22px 0; border-bottom:1px solid #e5ebe7; }
.tools-note-dot { width:5px; height:5px; border-radius:50%; background:#9bad9c; flex-shrink:0; }
.tools-note p { margin:0; color:#949e96; font-size:11px; line-height:1.8; }
#tool-dialog { width:min(530px,calc(100% - 32px)); max-height:85vh; border:0; border-radius:14px; padding:0; color:#2a4234; box-shadow:0 24px 100px #172f2940; }
#tool-dialog::backdrop { background:#172a2466; backdrop-filter:blur(5px); }
#tool-dialog form { display:flex; justify-content:flex-end; margin:0; padding:14px 16px 0; }
#tool-dialog form button { border:0; border-radius:50%; background:#edf1ee; width:32px; height:32px; color:#48594e; cursor:pointer; }
.tool-dialog-body { padding:8px 34px 34px; }
.tool-dialog-body h1 { font-size:27px; font-weight:500; margin:0 0 16px; }
.tool-dialog-subtitle { font-size:15px; line-height:1.8; }
.tool-dialog-description { font-size:13px; line-height:1.9; color:#859187; }
.tool-dialog-body h2 { font-size:11px; font-weight:500; margin-top:28px; color:#8d9b90; }
.tool-dialog-body ol { padding-left:20px; font-size:13px; line-height:2.6; }
.tool-preview-status { border-radius:6px; background:#f0f4ef; padding:14px; text-align:center; font-size:11px; color:#7f9383; margin-top:22px; }
@media(max-width:900px) { .tools-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .tools-layout { padding:28px 20px 40px; } .tools-heading h1 { font-size:25px; line-height:1.5; } .tools-edition { display:none; } .tools-grid { grid-template-columns:1fr; gap:12px; } .tool-entry { min-height:210px; padding:22px; } .tool-entry h2 { margin-top:17px; } .tool-entry p { max-width:none; } .tools-intro { align-items:center; font-size:11px; } .tools-intro>span:last-child { font-size:9px; } }
@media(prefers-reduced-motion:reduce) { .tool-entry { transition:none; } .tool-entry:hover { transform:none; } }

.catalog-types { display:flex; gap:34px; border-bottom:1px solid #e6eae8; margin:0 0 26px; }
.catalog-types button { background:none; border:0; border-bottom:2px solid transparent; padding:0 2px 15px; font:inherit; font-size:14px; color:#919b94; cursor:pointer; }
.catalog-types button[aria-pressed=true] { border-bottom-color:#365b47; color:#365b47; font-weight:600; }
#catalog-heroes-panel[hidden],#catalog-other-panel[hidden],.catalog-total[hidden] { display:none; }
.catalog-subnav { display:flex; gap:10px; overflow:auto; margin-bottom:36px; }
.catalog-subnav button { border:0; border-radius:5px; padding:9px 18px; font:inherit; font-size:12px; white-space:nowrap; background:transparent; color:#87958b; cursor:pointer; }
.catalog-subnav button[aria-pressed=true] { background:#edf2ed; color:#3f614a; }
.catalog-browse-heading { display:flex; justify-content:space-between; gap:20px; align-items:center; }
.catalog-breadcrumb { font-size:10px; color:#9ca69e; margin:0 0 9px; }
.catalog-browse-heading h2 { font-size:22px; font-weight:500; margin:0; color:#344a3b; }
.catalog-type-search { display:flex; align-items:center; gap:10px; padding:12px 15px; background:#f5f7f5; border-radius:6px; }
.catalog-type-search img { opacity:.5; }
.catalog-type-search input { font:inherit; font-size:12px; border:0; outline:none; background:none; width:180px; }
.catalog-type-search:focus-within { outline:2px solid #839988; }
.catalog-preview-note { color:#9ca79f; font-size:11px; margin:18px 0 26px; }
.catalog-preview-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; }
.catalog-placeholder-art { height:210px; border-radius:10px; background:#f5f7f4; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:16px; }
.catalog-placeholder-art>span { font-size:54px; color:#b4c3b4; font-weight:200; }
.catalog-placeholder-art small { font-size:10px; color:#adb8ae; letter-spacing:.1em; }
.catalog-placeholder h3 { font-size:13px; font-weight:500; text-align:center; color:#647669; margin:14px 0 7px; }
.catalog-placeholder>p { text-align:center; font-size:10px; color:#a1ada3; margin:0; }
.catalog-browse-note { display:flex; justify-content:space-between; gap:20px; border-top:1px solid #e9eee9; padding-top:23px; margin-top:40px; font-size:10px; color:#a0aba2; }
.catalog-type-empty { text-align:center; padding:60px 0; color:#87978a; font-size:13px; }
.catalog-types button:focus-visible,.catalog-subnav button:focus-visible { outline:2px solid #839988; outline-offset:3px; }
@media(max-width:600px) { .catalog-types { gap:30px; } .catalog-subnav { margin-bottom:25px; gap:4px; } .catalog-subnav button { padding:8px 14px; } .catalog-browse-heading { align-items:stretch; flex-direction:column; } .catalog-type-search input { width:100%; min-width:0; } .catalog-preview-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px 12px; } .catalog-placeholder-art { height:170px; } .catalog-browse-note { line-height:1.8; } }

.up-section .character-grid { grid-template-columns:repeat(5,minmax(0,1fr)); gap:20px; }
.up-section .character-card { gap:12px; text-align:center; }
.up-section .character-card h2 { font-size:13px; font-weight:500; overflow-wrap:anywhere; }
.up-section .role-icon { background:transparent; }
@media(max-width:600px) { .up-section .character-grid { gap:9px; } .up-section .character-card h2 { font-size:10px; } }

/* Share the catalog card design with homepage featured heroes. */
.left-column .up-section:first-child { background: #fff; padding: 0 0 28px; }
.featured-hero-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
.featured-hero-grid .catalog-art { height: auto; aspect-ratio: 3 / 5; }
@media (max-width: 600px) {
  .featured-hero-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 17px 8px; }
}

/* Collection portals and the directly browsable hero library. */
.collection-entries { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:0 0 36px; }
.collection-entry { display:flex; align-items:center; gap:20px; min-width:0; min-height:100px; padding:20px 24px; border:1px solid transparent; border-radius:12px; background:#f5f7f7; color:#34494d; font:inherit; font-size:16px; font-weight:500; text-align:left; cursor:pointer; transition:background .18s,border-color .18s; }
.collection-icon { display:grid; place-items:center; width:48px; height:48px; flex:none; color:#548086; }
.collection-icon svg { width:36px; height:36px; }
.collection-arrow { margin-left:auto; color:#7c9093; font-size:20px; font-weight:400; transition:transform .18s; }
.collection-entry:hover { background:#edf3f3; border-color:#dce7e7; }
.collection-entry:hover .collection-arrow { transform:translateX(3px); }
.collection-entry:focus-visible { outline:2px solid #32818b; outline-offset:4px; }
.hero-library-heading { margin:0 0 20px; }
.hero-library-heading h2 { margin:0; font-size:20px; font-weight:600; }
.hero-library-heading h2 span { color:#89969c; font-size:15px; font-weight:400; margin-left:6px; }
@media(max-width:600px) {
 .collection-entries { gap:8px; margin-bottom:28px; }
 .collection-entry { flex-direction:column; justify-content:center; gap:8px; min-height:108px; padding:12px 4px; border-radius:9px; font-size:13px; }
 .collection-icon { width:36px; height:36px; }
 .collection-icon svg { width:30px; height:30px; }
 .collection-arrow { display:none; }
 .hero-library-heading h2 { font-size:18px; }
}
@media(prefers-reduced-motion:reduce) { .collection-entry,.collection-arrow { transition:none; } }

/* Image-led newcomer entrances. */
.beginner-section .quick-grid.newcomer-card-grid { grid-template-columns: repeat(6,minmax(0,1fr)); gap: 12px; counter-reset: none; }
.beginner-section .quick-grid.newcomer-card-grid a { display: flex; flex-direction: column; align-items: stretch; gap: 0; min-height: 0; padding: 0 0 8px; overflow: hidden; border: 1px solid #ececec; border-radius: 4px; background: #fff; }
.beginner-section .quick-grid.newcomer-card-grid a::before,.beginner-section .quick-grid.newcomer-card-grid a::after { display: none; }
.newcomer-card-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 24%; background: #f4f5f5; }
.beginner-section .newcomer-card-grid strong { margin: 4px 10px 0; overflow: hidden; font-size: 13px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.beginner-section .newcomer-card-grid span { display: none; }
@media(max-width:900px){.beginner-section .quick-grid.newcomer-card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:520px){.beginner-section .quick-grid.newcomer-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Tighter rhythm between homepage modules. */
.content-shell .left-column { gap: 18px; }
.left-column .up-section:first-child,
.left-column .version-section,
.left-column .beginner-section,
.left-column .home-catalog-section,
.left-column .home-hot-section { padding-bottom: 16px; }