/* 锚湾奇旅 Anchorcove — site v2
   Design system: night-sea / parchment alternation, torn-paper seams,
   one display serif (Noto Serif SC Black, self-hosted subset, OFL — see fonts/OFL.txt). */

@font-face {
  font-family: "Anchor Serif";
  src: url("fonts/anchor-serif.woff2") format("woff2");
  font-weight: 900;
  font-display: swap;
}

:root {
  --night: #0d2430;
  --night-2: #15384a;
  --night-line: rgba(233, 241, 238, .14);
  --foam: #e9f1ee;
  --foam-2: #a9c3bd;
  --paper: #f4ead2;
  --paper-2: #e9d9b4;
  --paper-line: #d6c39b;
  --ink: #2a1c10;
  --ink-2: #6b5640;
  --gold: #e7b75a;
  --gold-deep: #9c6a17;
  --ember: #c2502c;
  --glass: #86cbb9;
  --q-green: #5cb85c; --q-blue: #4a90e2; --q-purple: #a05ad8; --q-orange: #f0a030; --q-red: #e04848;

  --display: "Anchor Serif", "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", serif;
  --sans: system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;

  --wrap: 1200px;
  --read: 720px;
  --gutter: 16px;
  --sec-y: clamp(64px, 10vw, 112px);

  /* torn-paper seam, coloured per use via mask */
  --torn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 28' preserveAspectRatio='none'%3E%3Cpath d='M0 28V12l38 5 31-9 44 7 27-6 52 9 33-8 41 4 29-7 46 8 38-5 24 6 49-9 35 7 42-4 30 6 51-8 27 5 44-6 36 8 47-7 29 5 40-6 33 8 52-9 26 6 45-5 37 7 43-8 30 6 48-4 34 6 41-9 28 7V28z'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.8;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold-deep); text-underline-offset: 3px; }
a:hover { color: var(--ember); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--display); font-weight: 900; line-height: 1.2; margin: 0; letter-spacing: .02em; }
p { margin: 0 0 1em; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.read { max-width: var(--read); }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 8px; z-index: 60; background: var(--paper); padding: 8px 12px; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- top bar ---------- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  background: linear-gradient(rgba(8, 24, 32, .82), rgba(8, 24, 32, .62));
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--foam);
}
.bar .wrap { display: flex; align-items: center; gap: 24px; height: 60px; }
.logo { font-family: var(--display); font-weight: 900; font-size: 22px; letter-spacing: .08em; color: var(--foam); text-decoration: none; white-space: nowrap; }
.logo:hover { color: var(--gold); }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a { color: var(--foam); text-decoration: none; font-size: 15px; padding: 18px 12px; position: relative; white-space: nowrap; }
.nav a:hover { color: var(--gold); }
.nav a[aria-current="page"] { color: var(--gold); }
.nav a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 10px; height: 2px; background: var(--gold); }
.lang { font-size: 13px; letter-spacing: .08em; color: var(--foam-2); text-decoration: none; border: 1px solid var(--night-line); border-radius: 999px; padding: 3px 12px; white-space: nowrap; }
.lang:hover { color: var(--gold); border-color: var(--gold); }
@media (max-width: 860px) {
  .bar .wrap { flex-wrap: wrap; height: auto; gap: 0 12px; padding-top: 10px; }
  .logo { font-size: 20px; }
  .lang { margin-left: auto; }
  .nav { order: 3; width: calc(100% + 2 * var(--gutter)); margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); overflow-x: auto; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { padding: 10px 10px 12px; font-size: 14px; }
  .nav a:first-child { padding-left: 0; }
  .nav a[aria-current="page"]::after { bottom: 4px; left: 10px; right: 10px; }
  .nav a:first-child[aria-current="page"]::after { left: 0; }
  html { scroll-padding-top: 100px; }
}

/* ---------- torn seams ---------- */
.seam { position: relative; }
.seam::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 26px; z-index: 3;
  -webkit-mask: var(--torn) bottom / 100% 100% no-repeat; mask: var(--torn) bottom / 100% 100% no-repeat;
  background: var(--paper);
}
.seam.to-night::after { background: var(--night); }

/* ---------- home hero ---------- */
.hero { position: relative; min-height: min(100svh, 920px); display: grid; place-items: center; color: var(--foam); overflow: hidden; background: var(--night); }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(10, 26, 36, .55) 0%, rgba(10, 26, 36, 0) 34%, rgba(10, 26, 36, 0) 58%, rgba(10, 26, 36, .78) 100%); }
.hero-in { position: relative; z-index: 2; text-align: center; padding: 120px var(--gutter) 64px; align-self: start; margin-top: 4vh; }
.wordmark {
  font-size: clamp(60px, 15vw, 140px); letter-spacing: .06em; line-height: 1;
  color: #fff3d6;
  text-shadow: 0 2px 0 #7a4a12, 0 4px 0 #3a2208, 0 10px 28px rgba(10, 20, 30, .55);
}
.wordmark-en { font-family: var(--display); font-size: clamp(18px, 3vw, 26px); letter-spacing: .42em; text-indent: .42em; margin: 14px 0 0; color: #ffe9b8; text-shadow: 0 2px 10px rgba(0, 0, 0, .6); text-transform: uppercase; }
.hero-tag { font-family: var(--display); font-size: clamp(18px, 2.6vw, 24px); letter-spacing: .3em; text-indent: .3em; margin: 28px 0 0; text-shadow: 0 2px 12px rgba(0, 0, 0, .7); }
.dock { position: absolute; left: 0; right: 0; bottom: 56px; z-index: 2; display: flex; justify-content: center; padding: 0 var(--gutter); }
.dock-plate {
  display: flex; align-items: center; gap: 0; border: 1px solid rgba(231, 183, 90, .65);
  background: rgba(10, 26, 36, .78); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .35);
}
.dock-status { font-family: var(--display); font-size: clamp(18px, 2.4vw, 22px); letter-spacing: .12em; color: var(--gold); padding: 14px 24px; white-space: nowrap; }
.dock-status small { font-family: var(--sans); font-size: 14px; letter-spacing: .04em; color: var(--foam); margin-left: 10px; }
.dock a { align-self: stretch; display: flex; align-items: center; padding: 0 22px; background: var(--gold); color: var(--night); text-decoration: none; font-weight: 700; letter-spacing: .06em; white-space: nowrap; }
.dock a:hover { background: #f3cd7c; color: var(--night); }
@media (max-width: 560px) {
  .dock { bottom: 44px; }
  .dock-plate { flex-direction: column; width: 100%; max-width: 340px; }
  .dock-status { text-align: center; padding: 12px 16px; }
  .dock-status small { display: block; margin: 2px 0 0; }
  .dock a { justify-content: center; padding: 12px; }
}

/* ---------- sections ---------- */
.sec { padding: var(--sec-y) 0; position: relative; }
.night { background: var(--night); color: var(--foam); }
.night a { color: var(--glass); }
.night a:hover { color: var(--gold); }
.title { text-align: center; margin-bottom: clamp(36px, 6vw, 64px); }
.title h2 { font-size: clamp(36px, 7vw, 64px); letter-spacing: .14em; text-indent: .14em; }
.title::before {
  content: ""; display: block; width: 28px; height: 28px; margin: 0 auto 14px;
  background: currentColor; opacity: .55;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='5' r='2'/%3E%3Cpath d='M12 7v14M7 11h10M4 15a8 8 0 0 0 16 0'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='5' r='2'/%3E%3Cpath d='M12 7v14M7 11h10M4 15a8 8 0 0 0 16 0'/%3E%3C/svg%3E") center / contain no-repeat;
}
.title.left { text-align: left; }
.title.left h2 { text-indent: 0; }
.title.left::before { margin-left: 0; }

/* ---------- news ---------- */
.news { display: grid; grid-template-columns: 7fr 5fr; gap: 0; background: var(--night-2); border: 1px solid var(--night-line); }
.news-art { position: relative; min-height: 300px; }
.news-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.news-art span { position: absolute; left: 0; bottom: 0; z-index: 1; padding: 10px 18px; background: var(--ember); color: #fff; font-family: var(--display); letter-spacing: .1em; }
.news-list { list-style: none; margin: 0; padding: 18px 28px 22px; }
.news-list li { display: grid; grid-template-columns: 4.6em 1fr auto; gap: 12px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--night-line); }
.news-list li:last-child { border-bottom: 0; }
.news-list .k { font-size: 13px; color: var(--gold); letter-spacing: .08em; }
.news-list .d { font-size: 13px; color: var(--foam-2); font-variant-numeric: tabular-nums; }
.news-list b { display: block; font-weight: 600; }
.news-list b a { color: var(--foam); text-decoration: none; }
.news-list b a:hover { color: var(--gold); }
.news-list p { margin: 4px 0 0; font-size: 14px; color: var(--foam-2); line-height: 1.6; }
@media (max-width: 800px) {
  .news { grid-template-columns: 1fr; }
  .news-art { min-height: 0; aspect-ratio: 16 / 7; }
  .news-list { padding: 8px 16px 12px; }
}

/* ---------- world (story) ---------- */
.story { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.story-art { position: relative; }
.story-art img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 32%; box-shadow: 0 24px 60px rgba(42, 28, 16, .28); }
.story-text .lead { font-family: var(--display); font-size: clamp(22px, 3vw, 30px); line-height: 1.6; margin-bottom: 28px; }
.story-text p { max-width: 36em; }
@media (max-width: 800px) {
  .story { grid-template-columns: 1fr; }
  .story-art img { aspect-ratio: 3 / 2; }
}

/* ---------- character picker (CSS radios) ---------- */
.picker { position: relative; }
.picker input { position: absolute; opacity: 0; pointer-events: none; }
.pk-tabs { display: flex; justify-content: center; gap: 10px; margin-bottom: 0; position: relative; z-index: 2; flex-wrap: wrap; }
.pk-tabs label {
  width: 92px; height: 104px; cursor: pointer; background: var(--paper-2); border: 2px solid transparent; border-bottom: 0;
  overflow: hidden; display: flex; align-items: flex-end; justify-content: center; filter: saturate(.55); opacity: .82; transition: filter .2s, opacity .2s;
}
.pk-tabs label img { width: 96px; height: auto; transform: translateY(14%); }
.pk-tabs label:hover { filter: none; opacity: 1; }
.pk-panels { background: #fbf5e6; border: 2px solid var(--paper-line); padding: clamp(24px, 4vw, 48px); position: relative; }
.pk-panel { display: none; grid-template-columns: 5fr 7fr; gap: clamp(24px, 5vw, 64px); align-items: center; }
.pk-panel img { width: 100%; max-width: 380px; margin: 0 auto; }
.pk-panel h3 { font-size: clamp(32px, 5vw, 48px); letter-spacing: .1em; }
.pk-panel .role { color: var(--gold-deep); letter-spacing: .14em; margin: 8px 0 20px; font-size: 15px; }
.pk-panel blockquote { margin: 24px 0 0; padding: 0; font-family: var(--display); font-size: clamp(20px, 2.6vw, 26px); color: var(--ink-2); }
#pk-1:checked ~ .pk-panels .p1, #pk-2:checked ~ .pk-panels .p2, #pk-3:checked ~ .pk-panels .p3,
#pk-4:checked ~ .pk-panels .p4, #pk-5:checked ~ .pk-panels .p5, #pk-6:checked ~ .pk-panels .p6 { display: grid; }
#pk-1:checked ~ .pk-tabs [for="pk-1"], #pk-2:checked ~ .pk-tabs [for="pk-2"], #pk-3:checked ~ .pk-tabs [for="pk-3"],
#pk-4:checked ~ .pk-tabs [for="pk-4"], #pk-5:checked ~ .pk-tabs [for="pk-5"], #pk-6:checked ~ .pk-tabs [for="pk-6"] {
  filter: none; opacity: 1; background: #fbf5e6; border-color: var(--paper-line); margin-bottom: -2px; height: 106px;
}
#pk-1:focus-visible ~ .pk-tabs [for="pk-1"], #pk-2:focus-visible ~ .pk-tabs [for="pk-2"], #pk-3:focus-visible ~ .pk-tabs [for="pk-3"],
#pk-4:focus-visible ~ .pk-tabs [for="pk-4"], #pk-5:focus-visible ~ .pk-tabs [for="pk-5"], #pk-6:focus-visible ~ .pk-tabs [for="pk-6"] { outline: 3px solid var(--gold); }
@media (max-width: 640px) {
  .pk-tabs { gap: 6px; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .pk-tabs label { flex: 0 0 64px; width: 64px; height: 76px; }
  .pk-tabs label img { width: 70px; }
  #pk-1:checked ~ .pk-tabs [for="pk-1"], #pk-2:checked ~ .pk-tabs [for="pk-2"], #pk-3:checked ~ .pk-tabs [for="pk-3"],
  #pk-4:checked ~ .pk-tabs [for="pk-4"], #pk-5:checked ~ .pk-tabs [for="pk-5"], #pk-6:checked ~ .pk-tabs [for="pk-6"] { height: 78px; }
  .pk-panel { grid-template-columns: 1fr; text-align: center; }
  .pk-panel img { max-width: 220px; }
}

/* ---------- route list (home: where to read next) ---------- */
.routes { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--night-line); }
.routes a { display: block; padding: 28px 24px 30px 0; color: var(--foam); text-decoration: none; border-bottom: 1px solid var(--night-line); }
.routes a + a { padding-left: 24px; border-left: 1px solid var(--night-line); }
.routes a b { display: block; font-family: var(--display); font-size: 24px; letter-spacing: .08em; margin-bottom: 6px; }
.routes a span { color: var(--foam-2); font-size: 14px; }
.routes a:hover b { color: var(--gold); }
.routes a::after { content: "→"; display: block; margin-top: 14px; color: var(--gold); }
@media (max-width: 800px) {
  .routes { grid-template-columns: 1fr 1fr; }
  .routes a, .routes a + a { padding: 22px 16px; border-left: 0; }
  .routes a:nth-child(even) { border-left: 1px solid var(--night-line); }
}

/* ---------- page hero (inner pages) ---------- */
.phero { position: relative; min-height: clamp(360px, 52vw, 560px); display: flex; align-items: flex-end; color: var(--foam); background: var(--night); overflow: hidden; }
.phero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(10, 26, 36, .5) 0%, rgba(10, 26, 36, .1) 40%, rgba(10, 26, 36, .86) 100%); }
.phero .wrap { position: relative; z-index: 2; width: 100%; padding-top: 120px; padding-bottom: clamp(56px, 8vw, 88px); }
.phero h1 { font-size: clamp(44px, 9vw, 96px); letter-spacing: .1em; text-shadow: 0 4px 24px rgba(0, 0, 0, .5); }
.phero p { max-width: 34em; margin: 18px 0 0; font-size: 17px; color: #eef3ef; text-shadow: 0 1px 8px rgba(0, 0, 0, .7); }

/* ---------- region bands ---------- */
.region { position: relative; color: var(--foam); background: var(--night); overflow: hidden; }
.region > img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.region::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(10, 26, 36, .96) 0%, rgba(10, 26, 36, .8) 46%, rgba(10, 26, 36, .25) 100%); }
.region.flip::before { background: linear-gradient(270deg, rgba(10, 26, 36, .96) 0%, rgba(10, 26, 36, .8) 46%, rgba(10, 26, 36, .25) 100%); }
.region .wrap { position: relative; z-index: 2; display: grid; grid-template-columns: 7fr 5fr; gap: 40px; align-items: center; padding-top: clamp(56px, 8vw, 96px); padding-bottom: clamp(56px, 8vw, 96px); }
.region.flip .wrap { grid-template-columns: 5fr 7fr; }
.region.flip .r-text { order: 2; }
.region + .region { border-top: 1px solid var(--night-line); }
.r-lv { font-family: var(--display); color: var(--gold); font-size: 18px; letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.r-text h2 { font-size: clamp(32px, 5.4vw, 52px); letter-spacing: .08em; margin: 6px 0 20px; }
.r-text p { max-width: 32em; color: #e3ece8; }
.r-elite { font-size: 15px; color: var(--foam-2); }
.boss { text-align: center; }
.boss img { width: min(100%, 340px); margin: 0 auto; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .55)); }
.boss b { display: block; font-family: var(--display); font-size: 26px; letter-spacing: .1em; margin-top: 8px; }
.boss .tag { display: inline-block; background: var(--ember); color: #fff; font-size: 12px; letter-spacing: .14em; padding: 1px 10px; margin-right: 8px; vertical-align: 3px; font-family: var(--sans); font-weight: 700; }
.boss .tag.elite { background: #7a5a2c; }
.boss small { display: block; color: var(--foam-2); font-size: 14px; margin-top: 2px; }
.boss q { display: block; margin-top: 6px; color: #e3ece8; font-size: 15px; }
.boss-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.boss-pair .boss { border: 1px solid var(--night-line); padding: 24px 12px; background: rgba(13, 36, 48, .55); }
@media (max-width: 800px) {
  .region .wrap, .region.flip .wrap { grid-template-columns: 1fr; gap: 24px; }
  .region.flip .r-text { order: 0; }
  .region::before, .region.flip::before { background: linear-gradient(180deg, rgba(10, 26, 36, .7) 0%, rgba(10, 26, 36, .94) 55%); }
  .boss img { width: min(70%, 260px); }
}

/* ---------- dungeons strip ---------- */
.dungeons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--paper-line); border: 2px solid var(--paper-line); }
.dg { background: #fbf5e6; display: grid; grid-template-rows: auto 1fr; }
.dg-art { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--night); }
.dg-art > img:first-child { width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.dg-art .dg-boss { position: absolute; right: 6%; bottom: 4%; width: 46%; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .6)); }
.dg-body { padding: 20px 22px 24px; }
.dg-body h3 { font-size: 26px; letter-spacing: .08em; }
.dg-body .r-lv { color: var(--gold-deep); font-size: 15px; }
.dg-body p { margin: 8px 0 0; color: var(--ink-2); font-size: 15px; }
@media (max-width: 800px) { .dungeons { grid-template-columns: 1fr; } }

/* ---------- facts list (plain, ruled) ---------- */
.rules { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.rules li { padding: 16px 0; border-bottom: 1px solid var(--paper-line); }
.rules li b { font-weight: 700; margin-right: 6px; }
.night .rules { border-top-color: var(--gold); }
.night .rules li { border-bottom-color: var(--night-line); }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); }
.cols h3 { font-size: 26px; letter-spacing: .08em; margin-bottom: 16px; }
@media (max-width: 800px) { .cols { grid-template-columns: 1fr; } }

/* ---------- classes (tabbed, weapons) ---------- */
.cls-pick { position: relative; }
.cls-pick > input { position: absolute; opacity: 0; pointer-events: none; }
.cls-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-bottom: 2px solid var(--ink); }
.cls-tabs label { cursor: pointer; text-align: center; padding: 8px 4px 14px; position: relative; color: var(--ink-2); }
.cls-tabs label img { width: clamp(72px, 14vw, 150px); margin: 0 auto; filter: grayscale(.7) opacity(.6); transition: filter .2s, transform .2s; }
.cls-tabs label span { display: block; font-family: var(--display); font-size: clamp(18px, 3vw, 26px); letter-spacing: .14em; }
.cls-tabs label:hover img { filter: none; }
.cls-panel { display: none; grid-template-columns: 5fr 7fr; gap: clamp(24px, 6vw, 80px); padding-top: clamp(32px, 5vw, 56px); }
.cls-panel h3 { font-size: clamp(40px, 7vw, 72px); letter-spacing: .14em; }
.cls-panel .role { color: var(--gold-deep); letter-spacing: .12em; margin: 10px 0 20px; }
.cls-panel .say { font-family: var(--display); font-size: clamp(20px, 2.6vw, 26px); line-height: 1.6; }
.adv { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.adv li { display: grid; grid-template-columns: 7.5em 4em 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--paper-line); align-items: baseline; }
.adv li b { font-family: var(--display); font-size: 20px; letter-spacing: .06em; }
.adv li em { font-style: normal; color: var(--ink-2); font-size: 14px; }
.adv-head { font-size: 13px; letter-spacing: .14em; color: var(--ink-2); margin: 0 0 8px; }
#c-1:checked ~ .cls-tabs [for="c-1"], #c-2:checked ~ .cls-tabs [for="c-2"], #c-3:checked ~ .cls-tabs [for="c-3"], #c-4:checked ~ .cls-tabs [for="c-4"] { color: var(--ink); }
#c-1:checked ~ .cls-tabs [for="c-1"] img, #c-2:checked ~ .cls-tabs [for="c-2"] img, #c-3:checked ~ .cls-tabs [for="c-3"] img, #c-4:checked ~ .cls-tabs [for="c-4"] img { filter: drop-shadow(0 8px 14px rgba(42, 28, 16, .35)); transform: translateY(-4px); }
#c-1:checked ~ .cls-tabs [for="c-1"]::after, #c-2:checked ~ .cls-tabs [for="c-2"]::after, #c-3:checked ~ .cls-tabs [for="c-3"]::after, #c-4:checked ~ .cls-tabs [for="c-4"]::after {
  content: ""; position: absolute; left: 20%; right: 20%; bottom: -2px; height: 5px; background: var(--gold-deep); }
#c-1:focus-visible ~ .cls-tabs [for="c-1"], #c-2:focus-visible ~ .cls-tabs [for="c-2"], #c-3:focus-visible ~ .cls-tabs [for="c-3"], #c-4:focus-visible ~ .cls-tabs [for="c-4"] { outline: 3px solid var(--gold); }
#c-1:checked ~ .c1, #c-2:checked ~ .c2, #c-3:checked ~ .c3, #c-4:checked ~ .c4 { display: grid; }
@media (max-width: 800px) {
  .cls-panel { grid-template-columns: 1fr; }
  .adv li { grid-template-columns: 6.5em 3.5em 1fr; gap: 8px; }
}

/* advancement path strip */
.path { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: none; border-top: 1px solid var(--night-line); border-bottom: 1px solid var(--night-line); }
.path div { padding: 24px 20px 26px 0; }
.path div + div { padding-left: 20px; border-left: 1px solid var(--night-line); }
.path b { display: block; font-family: var(--display); color: var(--gold); font-size: 30px; font-variant-numeric: tabular-nums; }
.path span { color: #e3ece8; font-size: 15px; }
@media (max-width: 800px) {
  .path { grid-template-columns: 1fr 1fr; }
  .path div, .path div + div { padding: 18px 14px; border-left: 0; }
  .path div:nth-child(even) { border-left: 1px solid var(--night-line); }
  .path div:nth-child(-n+2) { border-bottom: 1px solid var(--night-line); }
}

/* ---------- pets ---------- */
.band { position: relative; color: var(--foam); background: var(--night); }
.band > img { width: 100%; aspect-ratio: 1312 / 492; object-fit: cover; min-height: 280px; }
.band::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(10, 26, 36, .9) 0%, rgba(10, 26, 36, 0) 55%); }
.band .wrap { position: absolute; left: 0; right: 0; bottom: 40px; z-index: 2; }
.band h2 { font-size: clamp(36px, 7vw, 64px); letter-spacing: .14em; text-shadow: 0 4px 20px rgba(0, 0, 0, .6); }
.tiers { display: grid; gap: 0; }
.tier { display: grid; grid-template-columns: 7em 1fr; gap: 16px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--paper-line); }
.tier:first-child { border-top: 2px solid var(--ink); }
.tier > h3 { font-size: 24px; letter-spacing: .12em; padding-left: 14px; border-left: 5px solid var(--t); }
.tier ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 28px; }
.tier li { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tier li img { width: 72px; height: 72px; object-fit: contain; }
.tier li b { display: block; font-weight: 700; font-size: 16px; line-height: 1.3; }
.tier li small { color: var(--ink-2); font-size: 13px; }
@media (max-width: 640px) {
  .tier { grid-template-columns: 1fr; gap: 12px; }
  .tier ul { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
  .tier li img { width: 56px; height: 56px; }
}

/* ---------- guide ---------- */
.guide { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.toc { position: sticky; top: 88px; list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--paper-line); }
.toc a { display: block; padding: 7px 0 7px 16px; color: var(--ink-2); text-decoration: none; font-size: 15px; margin-left: -2px; border-left: 2px solid transparent; }
.toc a:hover { color: var(--ink); border-left-color: var(--gold-deep); }
.g-sec { padding-bottom: clamp(48px, 7vw, 80px); margin-bottom: clamp(48px, 7vw, 80px); border-bottom: 1px solid var(--paper-line); }
.g-sec:last-child { border-bottom: 0; margin-bottom: 0; }
.g-sec > h2 { font-size: clamp(32px, 5vw, 48px); letter-spacing: .1em; margin-bottom: 20px; }
.g-sec h3 { font-size: 22px; letter-spacing: .06em; margin: 40px 0 14px; }
.g-sec .lead { font-size: 18px; max-width: 36em; }
.g-sec p, .g-sec li { max-width: 40em; }
.note { border-left: 4px solid var(--gold-deep); background: #fbf5e6; padding: 14px 18px; margin: 20px 0; max-width: 40em; }
.note p:last-child { margin: 0; }
.fine { font-size: 14px; color: var(--ink-2); }
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
@media (max-width: 960px) {
  .guide { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; display: flex; flex-wrap: wrap; gap: 8px; border: 0; }
  .toc a { border: 1px solid var(--paper-line); padding: 4px 12px; margin: 0; font-size: 14px; background: #fbf5e6; }
  .toc a:hover { border-color: var(--gold-deep); }
}
@media (max-width: 800px) { .g2 { grid-template-columns: 1fr; gap: 0; } }

.tscroll { overflow-x: auto; margin: 16px 0; max-width: 100%; }
.t { border-collapse: collapse; width: 100%; font-size: 15px; min-width: 300px; }
.t th { background: var(--ink); color: var(--gold); font-weight: 600; text-align: left; padding: 10px 12px; letter-spacing: .04em; white-space: nowrap; }
.t td { padding: 10px 12px; border-bottom: 1px solid var(--paper-line); }
.t tbody tr:nth-child(even) td { background: rgba(233, 217, 180, .35); }
.t .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.t th.n { text-align: right; }
.t td small { display: block; color: var(--ink-2); font-size: 13px; }

/* potential grade ladder */
.grades { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border-top: 2px solid var(--ink); margin: 8px 0 16px; }
.grade { padding: 16px 14px 18px; border-right: 1px solid var(--paper-line); border-bottom: 1px solid var(--paper-line); }
.grade:first-child { padding-left: 0; }
.grade:last-child { border-right: 0; }
.grade h4 { margin: 0 0 10px; font-family: var(--display); font-weight: 900; font-size: 20px; color: var(--g); letter-spacing: .06em; display: flex; align-items: center; gap: 8px; }
.grade h4::before { content: ""; width: 12px; height: 12px; background: var(--g); transform: rotate(45deg); flex: none; }
.grade.shine h4::before { box-shadow: 0 0 0 3px rgba(224, 72, 72, .25), 0 0 12px var(--g); }
.grade dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 14px; }
.grade dt { color: var(--ink-2); }
.grade dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
@media (max-width: 800px) {
  .grades { grid-template-columns: 1fr; }
  .grade, .grade:first-child { padding: 12px 0; border-right: 0; display: grid; grid-template-columns: 7em 1fr; align-items: center; }
  .grade h4 { margin: 0; font-size: 18px; }
}

/* potential block mock (matches in-game) */
.potdemo { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 32px; align-items: start; margin-top: 8px; }
.potblock { background: #1b2f38; color: #eef3ef; border: 1px solid #3c5a66; padding: 12px 14px 8px; font-size: 15px; }
.potblock header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.potblock .chip { color: #efbd55; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.potblock .cube-btn { font-size: 13px; border: 1px solid #efbd55; color: #efbd55; padding: 1px 10px; }
.pline { display: grid; grid-template-columns: 14px 1fr auto auto; gap: 10px; align-items: center; padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, .08); }
.gem { width: 10px; height: 10px; background: #efbd55; transform: rotate(45deg); display: inline-block; }
.gem.low { width: 7px; height: 7px; background: #a05ad8; opacity: .7; margin-left: 2px; }
.tag-n { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--gold); color: var(--night); font-size: 11px; font-weight: 700; margin-left: 6px; vertical-align: 1px; }
.pline .val { font-variant-numeric: tabular-nums; font-weight: 600; }
.pips { display: flex; gap: 3px; }
.pips i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.pips i.on { background: #efbd55; }
.pips i.glow { background: #ffe39a; box-shadow: 0 0 6px 2px rgba(255, 210, 110, .8); }
.keyed { list-style: none; margin: 0; padding: 0; counter-reset: k; }
.keyed li { counter-increment: k; position: relative; padding: 0 0 18px 34px; }
.keyed li::before { content: counter(k); position: absolute; left: 0; top: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--gold); color: var(--night); display: grid; place-items: center; font-size: 12px; font-weight: 700; }
@media (max-width: 800px) { .potdemo { grid-template-columns: 1fr; } }

.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 12px 0 20px; padding: 0; }
.chips li { border: 2px solid var(--c, var(--paper-line)); color: var(--c, var(--ink)); background: #fbf5e6; padding: 4px 14px; font-weight: 700; }

/* ---------- test page ---------- */
.notice { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.notice .big { font-family: var(--display); font-size: clamp(26px, 3.6vw, 36px); line-height: 1.5; }
.faq details { border-bottom: 1px solid var(--night-line); }
.faq details:first-child { border-top: 2px solid var(--gold); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative; font-family: var(--display); font-size: clamp(18px, 2.4vw, 22px); letter-spacing: .04em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 16px; font-size: 26px; color: var(--gold); font-family: var(--sans); }
.faq details[open] summary::after { content: "−"; }
.faq details > div { padding: 0 0 20px; color: #e3ece8; max-width: 44em; }
.faq details > div p:last-child { margin: 0; }
@media (max-width: 800px) { .notice { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.foot { background: #08171f; color: var(--foam-2); padding: 56px 0 40px; font-size: 14px; }
.foot .wrap { display: grid; grid-template-columns: 1fr auto; gap: 24px 40px; align-items: end; }
.foot .logo { font-size: 28px; display: inline-block; margin-bottom: 14px; }
.foot p { margin: 0 0 4px; }
.foot a { color: var(--foam); }
.foot nav { display: flex; gap: 24px; flex-wrap: wrap; }
@media (max-width: 640px) { .foot .wrap { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- English pages ---------- */
.en .wordmark { font-size: clamp(46px, 12.5vw, 128px); letter-spacing: .02em; }
.en .wordmark-en { letter-spacing: .3em; text-indent: .3em; }
.en .hero-tag { letter-spacing: .16em; text-indent: .16em; }
.en .title h2, .en .band h2, .en .phero h1, .en .r-text h2, .en .cls-panel h3, .en .pk-panel h3, .en .g-sec > h2 { letter-spacing: .01em; text-indent: 0; }
.en .logo { letter-spacing: .02em; }
.en .cls-tabs label span { letter-spacing: .02em; }
.en .tier > h3 { letter-spacing: .02em; font-size: 20px; }

/* ---------- phone refinements ---------- */
@media (max-width: 640px) {
  .band > img { min-height: 0; aspect-ratio: 16 / 9; }
  .band::before { display: none; }
  .band .wrap { position: static; padding-top: 24px; padding-bottom: 48px; }
  .pk-tabs { overflow: visible; gap: 4px; }
  .pk-tabs label { flex: 1 1 0; width: auto; min-width: 0; height: 68px; }
  .pk-tabs label img { width: 64px; max-width: none; }
  #pk-1:checked ~ .pk-tabs [for="pk-1"], #pk-2:checked ~ .pk-tabs [for="pk-2"], #pk-3:checked ~ .pk-tabs [for="pk-3"],
  #pk-4:checked ~ .pk-tabs [for="pk-4"], #pk-5:checked ~ .pk-tabs [for="pk-5"], #pk-6:checked ~ .pk-tabs [for="pk-6"] { height: 70px; }
  .routes a b { font-size: 19px; letter-spacing: .04em; }
  .news-list li { grid-template-columns: 1fr auto; grid-template-areas: "k d" "t t"; gap: 2px 12px; }
  .news-list li > .k { grid-area: k; }
  .news-list li > .d { grid-area: d; }
  .news-list li > div { grid-area: t; }
}
.boss-pair .boss .tag { display: table; margin: 0 auto 8px; }
.boss-pair .boss b { font-size: 24px; }
.boss .note-line { display: block; margin-top: 6px; color: #e3ece8; font-size: 15px; }
@media (max-width: 800px) {
  .region::before, .region.flip::before { background: linear-gradient(180deg, rgba(10, 26, 36, .5) 0%, rgba(10, 26, 36, .9) 60%); }
  .region > img.bg { opacity: .7; }
}
.t td:first-child { white-space: nowrap; }
@media (min-width: 801px) {
  .region > img.bg { opacity: .78; }
  .tier li img { width: 88px; height: 88px; }
}
.en .adv li { grid-template-columns: 9.6em 5em 1fr; }
.en .adv li b { font-size: 18px; letter-spacing: 0; }
.en .tier { grid-template-columns: 9.5em 1fr; }
@media (max-width: 800px) { .en .adv li { grid-template-columns: 8.4em 4.4em 1fr; } .en .adv li b { font-size: 16px; } .en .tier { grid-template-columns: 1fr; } }

/* title theme toggle (music.js): off = note struck through; on = gold note */
.music { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; color: var(--foam-2); background: transparent; border: 1px solid var(--night-line); border-radius: 999px; cursor: pointer; }
.music:hover, .music:focus-visible { color: var(--gold); border-color: var(--gold); }
.music.on { color: var(--gold); border-color: var(--gold); }
.music .m-off { display: inline; }
.music.on .m-off { display: none; }
@media (max-width: 860px) { .music { margin-left: auto; } .music + .lang { margin-left: 0; } }