/* ゆうしゃの砦 攻略の書: 暗い紺＋金。雑誌の攻略本のような誌面。スマホ幅375pxが主・左右の余白16px。 */
@import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');
:root {
  --win: #0d1530; --win2: #18244a; --win3: #223163; --line: #f4f1e6; --gold: #f2c14e; --gold2: #c98b1c; --gold3: #6b2a00;
  --blue: #3b78d8; --red: #e0483e; --green: #4cc46a; --soul: #8fd6ff; --text: #fffbea; --dim: #aab6d6; --edge: #34437a;
  --r1: #9aa3ad; --r2: #5cc25c; --r3: #4a8fe7; --r4: #b45ce7; --r5: #f2b630; --r6: #75fff1; --r7: #ffd7f5;
  --tS: #ff6b5e; --tA: #ffb347; --tB: #f2e04e; --tC: #6fd36f; --tD: #6fb1ff;
  --head: 'DotGothic16', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Meiryo', sans-serif;
  --gut: 16px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* 10-17 itch: ゲームは scrolling="no" の枠の中で開かれ、wiki も同じ枠で開くので、ページ全体のスクロールが効かなかった。
   なので wiki は #app 自体をスクロールの箱にする（ゲーム本体の画面と同じ作り。枠の有無で動きを変えない）。 */
html, body { margin: 0; height: 100%; overflow: hidden; background: #070b18; color: var(--text); }
#app { height: 100%; overflow-y: auto; overflow-x: hidden; scroll-behavior: smooth; overscroll-behavior: contain; touch-action: pan-y; }
body {
  font-family: 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Yu Gothic', 'Meiryo', sans-serif; font-size: 15px; line-height: 1.75;
  background: radial-gradient(ellipse at 50% 0%, #243665 0%, #0e1630 45%, #070b18 85%) fixed;
  overflow-x: hidden; overflow-wrap: anywhere;
}
a { color: var(--soul); }
img { image-rendering: auto; max-width: 100%; }
h1, h2, h3, h4 { font-weight: normal; margin: 0; }
p { margin: 8px 0; }
b { font-weight: bold; }
.gold { color: var(--gold); }
.wrap { max-width: 820px; margin: 0 auto; padding: 0 var(--gut) 110px; }

/* ---- 上の帯と、下の章タブ ---- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px var(--gut); max-width: 820px; margin: 0 auto; }
.logo { font-family: var(--head); font-size: 18px; color: #fff; text-decoration: none; letter-spacing: 1px; text-shadow: 0 2px 0 #b5500f, 0 0 2px #000, 2px 2px 0 var(--gold3); white-space: nowrap; }
.logo small { color: var(--gold); font-size: 14px; margin-left: 6px; }
.back { font-size: 13px; color: #3a2200; background: linear-gradient(#ffd767, var(--gold2)); border: 2px solid var(--line); border-radius: 8px; padding: 2px 10px; text-decoration: none; white-space: nowrap; box-shadow: 0 3px 0 #0007; }
.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(7, 1fr); background: linear-gradient(#0b1229f2, #070b18); border-top: 3px solid var(--gold); padding: 4px 6px calc(4px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 12px #000a; }
.tabs a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 3px 0 2px; color: var(--dim); text-decoration: none; font-size: 11.5px; line-height: 1.25; border-radius: 8px; min-height: 44px; }
.tabs a i { font-style: normal; font-family: var(--head); font-size: 13px; line-height: 1; width: 20px; height: 20px; display: grid; place-items: center; border: 1.5px solid currentColor; border-radius: 50%; margin-bottom: 2px; }
.tabs a.gal::before { content: ''; width: 20px; height: 20px; margin-bottom: 2px; box-sizing: border-box; border: 2px solid currentColor; border-radius: 3px;
  background: linear-gradient(currentColor, currentColor) 50% 78% / 70% 30% no-repeat, radial-gradient(circle at 70% 30%, currentColor 2.5px, transparent 3px); clip-path: none; }
.tabs a:first-child::before { content: ''; width: 20px; height: 20px; margin-bottom: 2px; background: currentColor; clip-path: polygon(50% 5%, 95% 45%, 82% 45%, 82% 90%, 18% 90%, 18% 45%, 5% 45%); }
.tabs a.on { color: #3a2200; background: linear-gradient(#ffd767, var(--gold2)); }
.tabs a.on i { border-color: #3a2200; }

/* ---- 見出し・部品 ---- */
.sec { margin-top: 26px; }
h2.pix { font-family: var(--head); font-size: 21px; margin: 0 0 10px; color: var(--gold); text-shadow: 0 2px 0 #000, 2px 2px 0 var(--gold3); letter-spacing: 2px; display: flex; align-items: center; gap: 10px; }
h2.pix::before { content: ''; width: 12px; height: 12px; background: var(--gold); box-shadow: 4px 4px 0 var(--gold3); transform: rotate(45deg); flex: none; margin-right: 2px; }
h2.pix::after { content: ''; flex: 1 1 0; height: 3px; border-top: 1px solid var(--gold2); border-bottom: 1px solid var(--gold2); min-width: 10px; }
h3 { font-family: var(--head); font-size: 17px; color: var(--soul); margin: 16px 0 6px; }
h3.first { margin-top: 0; }
h4 { font-size: 15.5px; color: var(--gold); margin: 14px 0 4px; font-weight: bold; }
.win { background: var(--win); border: 3px solid var(--line); border-radius: 8px; box-shadow: 0 0 0 2px var(--win), 0 4px 10px #0008; padding: 12px; margin: 12px 0; }
.win.gold { border-color: var(--gold); background: linear-gradient(#18244a, #0d1530); }
.lead { color: var(--dim); font-size: 14.5px; margin: 6px 0 10px; }
.note { color: var(--dim); font-size: 12.5px; line-height: 1.65; }
.mk { width: 20px; height: 20px; vertical-align: -4px; flex: none; }
.links2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 18px 0 4px; }
.links2 a { text-align: center; padding: 9px 6px; text-decoration: none; color: var(--text); background: linear-gradient(#223163, #141d3f); border: 2px solid var(--line); border-radius: 10px; font-size: 14px; box-shadow: 0 3px 0 #0007; }
.jumps { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 0; }
.jumps button { font-family: inherit; font-size: 13px; color: var(--text); background: var(--win2); border: 2px solid var(--edge); border-radius: 16px; padding: 3px 14px; cursor: pointer; }
.try { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0; padding: 10px 12px; background: linear-gradient(#2e2610, #1f1a0c); border: 2px solid var(--gold); border-radius: 10px; }
.try .mk { width: 28px; height: 28px; margin-top: 2px; }
.try b { color: var(--gold); font-family: var(--head); font-size: 15px; font-weight: normal; letter-spacing: 1px; }
.try p { margin: 2px 0 0; font-size: 14px; color: #fff0c0; }
.warnbox { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0; padding: 10px 12px; background: #20141a; border: 2px solid #c25a4e; border-radius: 10px; font-size: 14px; }
.warnbox .mk { width: 26px; height: 26px; margin-top: 1px; }
.warnbox div { flex: 1; min-width: 0; }
.quote { margin: 12px 0; padding: 10px 14px 8px 16px; border-left: 5px solid var(--gold); background: #111a38; border-radius: 0 10px 10px 0; position: relative; }
.quote p { margin: 0; font-size: 15.5px; color: #fff3c9; line-height: 1.6; }
.quote p::before { content: '「'; color: var(--gold); }
.quote p::after { content: '」'; color: var(--gold); }
.quote cite { display: block; margin-top: 4px; font-style: normal; font-size: 11.5px; color: var(--dim); }
.quote.hitokoto { border-left-color: var(--rc, var(--gold)); }
.quote.hitokoto p { font-family: var(--head); font-size: 17px; }
.empty-note { text-align: center; padding: 26px 10px; color: var(--dim); }
.up { color: #5dff8a; } .down { color: #ff7a7a; }
footer.foot { margin-top: 34px; text-align: center; color: var(--dim); font-size: 12px; }
.colophon { margin-top: 22px; }

/* ---- 章の見出し ---- */
.chap { display: flex; align-items: center; gap: 14px; margin: 6px 0 14px; padding: 14px 0; border-top: 4px double var(--gold); border-bottom: 4px double var(--gold); }
.chap-txt { flex: 1; min-width: 0; }
.chap .no { display: block; font-family: var(--head); font-size: 13px; letter-spacing: .3em; color: var(--gold); }
.chap h1 { word-break: keep-all; font-family: var(--head); font-size: 25px; line-height: 1.25; color: #fff; text-shadow: 0 2px 0 var(--gold3), 2px 2px 0 #000; margin: 2px 0; }
.chap p { margin: 2px 0 0; font-size: 13px; color: var(--dim); line-height: 1.55; }
.chap-img { flex: none; max-width: 112px; }
.chap-img > img { width: 96px; height: 96px; object-fit: contain; display: block; filter: drop-shadow(0 4px 6px #000a); }
.chap-img > img.stg-img, .chap-img > img[src*="thumb/"] { width: 112px; height: 80px; object-fit: cover; border: 2px solid var(--gold); border-radius: 8px; }
.faces { display: grid; grid-template-columns: repeat(2, auto); gap: 4px; justify-content: end; }
.faces .ic { --s: 48px !important; }
.faces .ic:nth-child(n+5) { display: none; }

/* ---- 表紙 ---- */
.cover { position: relative; margin-top: 4px; min-height: 560px; border: 4px double var(--gold); border-radius: 14px; overflow: hidden; display: flex; align-items: flex-end; box-shadow: 0 8px 22px #000a; background: #0a1230; }
.cover-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 34%; }
.cover-shade { position: absolute; inset: 0; background: linear-gradient(180deg, #070b1899 0%, #070b1833 28%, #070b18cc 62%, #070b18f5 100%); }
.cover-txt { position: relative; padding: 20px 18px 22px; width: 100%; text-align: center; }
.issue { display: inline-block; font-size: 12px; letter-spacing: .12em; color: #3a2200; background: linear-gradient(#ffd767, var(--gold2)); border-radius: 12px; padding: 0 12px; }
.cover h1 { font-family: var(--head); font-size: 44px; line-height: 1.12; color: #fff; letter-spacing: 4px; margin: 12px 0 8px; text-shadow: 0 3px 0 #b5500f, 0 0 3px #000, 3px 3px 0 var(--gold3), -2px -2px 0 var(--gold3), 2px -2px 0 var(--gold3), -2px 2px 0 var(--gold3); }
.cover h1 small { display: block; font-size: 19px; color: var(--gold); letter-spacing: 8px; margin-bottom: 4px; }
.catch { color: #fff3c9; font-size: 15px; margin: 6px 0 14px; text-shadow: 0 1px 3px #000; }
.cover-cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.btn-gold, .btn-line { text-decoration: none; padding: 9px 18px; border-radius: 12px; font-size: 15px; border: 3px solid var(--line); box-shadow: 0 4px 0 #0007; }
.btn-gold { color: #3a2200; background: linear-gradient(#ffd767, var(--gold2)); }
.btn-line { color: var(--text); background: #0d1530cc; }
.btn-gold:active, .btn-line:active { transform: translateY(3px); box-shadow: 0 1px 0 #0007; }
.special { margin-top: 26px; }
.teasers { display: grid; gap: 10px; }
.teaser { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; align-content: start; text-decoration: none; color: var(--text); background: linear-gradient(#18244a, #0d1530); border: 3px solid var(--line); border-radius: 10px; padding: 10px 12px; box-shadow: 0 4px 0 #0007; }
.teaser .tk { grid-column: 1 / -1; font-size: 12px; color: #3a2200; background: var(--gold); border-radius: 8px; padding: 0 8px; justify-self: start; margin-bottom: 4px; }
.teaser b { font-family: var(--head); font-size: 16.5px; font-weight: normal; line-height: 1.4; color: #fff; }
.teaser .tfaces { display: flex; gap: 3px; align-self: center; grid-row: 2; grid-column: 2; }
.teaser .tn { grid-column: 1 / -1; font-size: 12.5px; color: var(--dim); margin-top: 4px; line-height: 1.5; }
.toc { margin-top: 28px; }
.tocrow { display: grid; grid-template-columns: 38px 62px 1fr; gap: 10px; align-items: center; text-decoration: none; color: var(--text); padding: 10px 6px; border-bottom: 1px dashed var(--edge); }
.tocrow:active { background: #18244a88; }
.tno { font-family: var(--head); font-size: 28px; color: var(--gold); text-align: center; line-height: 1; text-shadow: 2px 2px 0 var(--gold3); }
.tth { width: 62px; height: 62px; border-radius: 10px; background: radial-gradient(circle at 50% 40%, #33447a, #121a38); border: 2px solid var(--gold2); overflow: hidden; display: grid; place-items: center; }
.tth img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tth img.tocthumb { object-fit: cover; }
.tth .ic { --s: 58px !important; border: 0; background: none; }
.tt b { display: block; font-family: var(--head); font-size: 18px; font-weight: normal; color: #fff; line-height: 1.3; }
.tt em { display: block; font-style: normal; font-size: 12.5px; color: var(--dim); line-height: 1.5; margin-top: 2px; }

/* ---- キャラの絵 ---- */
.ic { position: relative; display: inline-block; width: var(--s, 56px); height: var(--s, 56px); border-radius: 9px; border: 2px solid var(--rc, #9aa3ad); background: radial-gradient(circle at 50% 40%, #33447a, #121a38); overflow: hidden; flex: none; vertical-align: middle; }
.ic img { width: 100%; height: 100%; object-fit: contain; display: block; }
.ic i { position: absolute; left: 1px; bottom: 0; font-style: normal; font-size: calc(var(--s, 56px) * .2 + 1px); line-height: 1; color: var(--rc, #fff); text-shadow: 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000; padding: 1px 2px; }
a.ic { text-decoration: none; }
.tile { display: flex; flex-direction: column; align-items: center; width: 62px; text-decoration: none; color: var(--text); }
.tile span.nm { font-size: 10.5px; line-height: 1.2; margin-top: 2px; text-align: center; word-break: break-all; max-width: 62px; color: var(--text); }
.tile span.rl { font-size: 10px; line-height: 1.4; margin-top: 2px; padding: 0 6px; border-radius: 8px; color: #111; background: var(--bc); }
.tile:active { transform: scale(.94); }
.deckrow { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.deckrow.roomy { gap: 6px 8px; align-items: flex-start; }
.chips.tight { gap: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; align-items: center; }
.chip { font-family: inherit; font-size: 13px; color: var(--text); background: var(--win2); border: 2px solid var(--edge); border-radius: 16px; padding: 3px 11px; cursor: pointer; line-height: 1.5; }
.chip.on { background: linear-gradient(#ffd767, var(--gold2)); color: #3a2200; border-color: var(--line); }
.chiplab { font-size: 12px; color: var(--dim); }
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 0 8px 0 3px; border-radius: 10px; border: 2px solid #0008; color: #111; background: var(--bc, #ccc); line-height: 1.5; }
.badge b { display: inline-grid; place-items: center; width: 18px; height: 18px; font-size: 11px; background: #0003; border-radius: 50%; }
.tbadge { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; font-family: var(--head); font-size: 22px; color: #1a1a1a; background: var(--tc); border: 3px solid var(--line); border-radius: 8px; text-shadow: 0 1px 0 #fff8; flex: none; }
.tbadge.none { background: #36406a; color: var(--dim); text-shadow: none; border-color: var(--edge); }

/* ---- 図鑑 ---- */
.filters { margin: 4px 0 6px; }
.zgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.zcard { display: flex; flex-direction: column; text-decoration: none; color: var(--text); background: linear-gradient(#18244a, #0d1530); border: 3px solid var(--rc, var(--line)); border-radius: 12px; overflow: hidden; box-shadow: 0 4px 0 #0008; }
.zcard:active { transform: translateY(2px); }
.zart { position: relative; aspect-ratio: 1 / 1; background: radial-gradient(circle at 50% 42%, #3a4d8c, #121a38 75%); display: grid; place-items: center; }
.zart img { width: 88%; height: 88%; object-fit: contain; filter: drop-shadow(0 4px 5px #000a); }
.zart .zstar { position: absolute; left: 6px; top: 6px; font-size: 12.5px; color: var(--rc); text-shadow: 0 1px 0 #000, 1px 0 0 #000, -1px 0 0 #000, 0 -1px 0 #000; background: #070b18aa; border-radius: 8px; padding: 0 6px; }
.zart .tbadge { position: absolute; right: 6px; top: 6px; width: 30px; height: 30px; font-size: 19px; border-width: 2px; }
.zbody { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.zbody > b { font-family: var(--head); font-size: 16px; font-weight: normal; line-height: 1.3; }
.zsub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.zsub em { font-style: normal; font-size: 11.5px; color: var(--dim); }
.zbody p { margin: 0; font-size: 12.5px; color: #dfe6ff; line-height: 1.55; flex: 1; }
.zpart { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--dim); margin-top: 2px; }
.zpart em { font-style: normal; color: var(--gold); }
.zpart .ic { --s: 26px !important; border-width: 1px; }
.zpart .ic i { display: none; }

/* ---- キャラのページ ---- */
.ufeature { display: flex; gap: 14px; align-items: center; padding: 10px; margin-top: 4px; border: 3px solid var(--rc); border-radius: 14px; background: linear-gradient(#18244a, #0d1530); box-shadow: 0 0 0 2px var(--win), 0 0 18px color-mix(in srgb, var(--rc) 45%, transparent), 0 4px 10px #0008; }
.uart { flex: none; width: 128px; height: 140px; border-radius: 10px; background: radial-gradient(circle at 50% 42%, #3a4d8c, #121a38 78%); display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; overflow: hidden; }
.uart img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 5px 6px #000a); }
.uinfo { flex: 1; min-width: 0; }
.uinfo h1 { font-family: var(--head); font-size: 26px; line-height: 1.2; }
.ustar { color: var(--rc); font-size: 15px; letter-spacing: 1px; text-shadow: 0 1px 0 #000; }
.uinfo .sub { color: var(--dim); font-size: 13px; margin-top: 2px; }
.uinfo .row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
/* 場面ごとの強さ（ステージ・対戦・輝く場面）: 幅がせまいときは折り返す。はみ出さない */
.scene { margin: 10px 0 4px; padding: 8px 10px; border: 2px solid #3b4a80; border-radius: 10px; background: var(--win2); }
.sline { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.sc { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 3px 10px; border-radius: 8px; background: var(--win); border: 1px solid var(--edge); }
.sc.wide { flex: 1 1 100%; }
.sc .sl { font-size: 12px; color: var(--dim); white-space: nowrap; }
.sc .sv { font-size: 15px; color: var(--gold); letter-spacing: 1px; min-width: 0; overflow-wrap: anywhere; }
.sc.wide .sv { color: var(--text); letter-spacing: 0; font-size: 14px; }
.sshape { margin: 6px 2px 0; font-size: 14px; color: #dfe6ff; }
.sbasis { margin: 4px 2px 0; font-size: 11.5px; line-height: 1.5; }
.desc { margin: 10px 2px; color: #dfe6ff; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
.stats div { background: var(--win2); border: 2px solid #3b4a80; border-radius: 6px; padding: 3px 2px; text-align: center; }
.stats b { display: block; font-size: 15px; font-weight: normal; color: var(--gold); }
.stats span { font-size: 11px; color: var(--dim); }
.memo { border: 3px dashed var(--gold); border-radius: 10px; padding: 10px 12px; background: #2a2210; color: #fff0c0; margin: 12px 0; font-size: 14px; }
.memo b { color: var(--gold); }
.points { list-style: none; padding: 0; margin: 4px 0; }
.points li { position: relative; padding: 2px 0 2px 22px; }
.points li::before { content: attr(data-m); position: absolute; left: 0; top: 2px; font-size: 14px; }
.evopair { display: flex; align-items: center; justify-content: center; gap: 10px; }
.evopair figure { margin: 0; text-align: center; width: 128px; }
.evopair img { width: 128px; height: 128px; object-fit: contain; display: block; background: radial-gradient(circle at 50% 42%, #3a4d8c, #121a38 78%); border-radius: 10px; filter: drop-shadow(0 4px 5px #000a); }
.evopair figcaption { font-size: 12.5px; margin-top: 4px; line-height: 1.3; }
.evofig figcaption { color: var(--gold); }
.evopair .arrow { font-size: 24px; color: var(--gold); }
.evopair.noevo .evofig, .evopair.noevo .arrow { display: none; }
.mgrid { flex: none; display: grid; justify-items: center; gap: 3px; }
.mgrid .lbl { font-size: 11px; color: var(--dim); letter-spacing: .1em; }
.mgrid .lbl.top::before { content: ''; display: inline-block; border: 5px solid transparent; border-top: 7px solid var(--red); margin-right: 3px; vertical-align: -3px; }
.mgrid .cells { display: grid; grid-template-columns: repeat(5, 26px); gap: 3px; padding: 5px; background: #0a0f24; border: 2px solid var(--edge); border-radius: 8px; }
.mgrid.big .cells { grid-template-columns: repeat(5, 30px); }
.mgrid .cells i { display: block; width: 100%; aspect-ratio: 1 / 1; background: #161f40; border-radius: 4px; position: relative; }
.mgrid .cells i.on { background: #5b4511; box-shadow: inset 0 0 0 1.5px var(--gold); }
.mgrid .cells i.me { background: #7a5a14; }
.mgrid .cells i img { position: absolute; left: -4px; top: -4px; width: calc(100% + 8px); height: calc(100% + 8px); object-fit: contain; }
.place { display: flex; gap: 14px; align-items: center; }
.ptxt { flex: 1; min-width: 0; }
.ptxt p { margin: 4px 0; font-size: 14px; }
.partners { display: grid; gap: 8px; }
.partner { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); background: var(--win2); border: 2px solid #3b4a80; border-radius: 10px; padding: 6px 8px; }
.partner .pn { flex: 1; min-width: 0; line-height: 1.4; }
.partner .pn b { font-weight: normal; font-size: 15px; }
.partner .pn span { display: block; font-size: 12px; color: var(--dim); }
.lift { font-size: 15px; color: var(--green); white-space: nowrap; }
.lift.neg { color: #ff8a80; }
.bars { display: grid; gap: 7px; margin: 8px 0; }
.bar-row { display: grid; grid-template-columns: 104px 1fr 46px; gap: 6px; align-items: center; font-size: 12.5px; }
.bar-row .lb { color: var(--dim); line-height: 1.25; }
.bar-row .tr { height: 16px; background: #060a1a; border: 2px solid var(--edge); border-radius: 8px; overflow: hidden; }
.bar-row .tr i { display: block; height: 100%; width: var(--w); background: linear-gradient(#ffe68a, var(--gold2)); border-radius: 6px; transition: width .5s; }
.bar-row.v1 .tr i { background: linear-gradient(#9fe0ff, #3b78d8); }
.bar-row.v2 .tr i { background: linear-gradient(#c8ffa8, #3aa84f); }
.bar-row.v3 .tr i { background: linear-gradient(#ffc8f0, #b45ce7); }
.bar-row .n { text-align: right; color: var(--text); }
.ratio { text-align: center; padding: 6px; }
.ratio .big { font-family: var(--head); font-size: 38px; color: var(--gold); text-shadow: 0 2px 0 var(--gold3); line-height: 1.1; }
.nav2 { display: flex; justify-content: space-between; gap: 8px; margin: 18px 0; }
.nav2 a { flex: 1; min-width: 0; text-align: center; padding: 7px 4px; text-decoration: none; color: var(--text); background: var(--win2); border: 2px solid #5b6aa0; border-radius: 8px; font-size: 13px; line-height: 1.4; }

/* ---- ティア・シナジー ---- */
.tierrow { display: grid; grid-template-columns: 46px 1fr; margin: 8px 0; border: 3px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--win); box-shadow: 0 3px 0 #0008; }
.tierrow .lab { display: flex; align-items: center; justify-content: center; font-family: var(--head); font-size: 30px; color: #1a1a1a; text-shadow: 0 1px 0 #fff8; background: var(--tc); border-right: 3px solid var(--line); }
.tierrow .box { display: flex; flex-wrap: wrap; gap: 6px 4px; padding: 7px 6px; align-content: flex-start; min-height: 72px; }
.tierrow .box .empty { color: var(--dim); font-size: 12px; align-self: center; }
.olist { margin: 4px 0 4px 18px; padding: 0; }
.pair { display: flex; align-items: center; gap: 6px; background: var(--win2); border: 2px solid #3b4a80; border-radius: 10px; padding: 6px 8px; margin: 6px 0; text-decoration: none; color: var(--text); }
.pair .plus { font-size: 20px; color: var(--gold); }
.pair .pt { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.4; }
.pair .pt b { font-weight: normal; font-size: 14px; display: block; }
.pair .pt span { color: var(--dim); }
select.pick { font-family: inherit; font-size: 15px; color: var(--text); background: var(--win2); border: 2px solid var(--line); border-radius: 8px; padding: 6px 8px; width: 100%; }
table.heat { border-collapse: collapse; width: 100%; table-layout: fixed; font-size: 9px; }
table.heat th, table.heat td { padding: 0; text-align: center; }
table.heat th { width: 22px; }
table.heat th .ic { width: 100%; height: auto; aspect-ratio: 1 / 1; border-width: 1px; border-radius: 3px; display: block; }
table.heat th .ic i { display: none; }
table.heat td { height: 21px; font-size: 7px; overflow: hidden; border: 1px solid #0d1530; color: #fff; }
table.heat th:first-child { width: 20px; }
.win:has(> table.heat) { overflow-x: auto; }
@media (min-width: 640px) { table.heat { font-size: 11px; } table.heat td { font-size: 10px; height: 26px; } }

/* ---- グラフ・メタ ---- */
.chart { width: 100%; height: auto; display: block; background: #060a1a; border: 2px solid var(--edge); border-radius: 8px; }
.chart text { fill: var(--dim); font-size: 9px; font-family: inherit; }
.chart .grid { stroke: #24315e; stroke-width: .6; }
.chart .ln { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; transition: opacity .2s, stroke-width .2s; }
.chart .ln.dim { opacity: .18; }
.chart .ln.hot { stroke-width: 3.6; }
.chart .cursor { stroke: var(--gold); stroke-width: 1; stroke-dasharray: 3 2; }
.legend { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; }
.legend button { font-family: inherit; font-size: 12px; color: var(--text); background: var(--win2); border: 2px solid var(--edge); border-radius: 14px; padding: 1px 9px 1px 6px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.legend button.on { border-color: var(--line); background: var(--win3); }
.legend button i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); display: inline-block; }
input[type=range] { width: 100%; accent-color: var(--gold); margin: 6px 0; }
.rank { display: grid; grid-template-columns: 26px 1fr 54px; gap: 6px; align-items: center; margin: 7px 0; }
.rank .no { font-family: var(--head); font-size: 20px; color: var(--gold); text-align: center; }
.rank .pc { text-align: right; font-size: 14px; color: var(--gold); }
.mini { height: 8px; background: #060a1a; border: 1px solid var(--edge); border-radius: 4px; margin-top: 3px; overflow: hidden; }
.mini i { display: block; height: 100%; width: var(--w); background: linear-gradient(#ffe68a, var(--gold2)); }
.pickbars { display: grid; gap: 6px; }
.pb { display: grid; grid-template-columns: 36px 84px 1fr 42px; gap: 6px; align-items: center; font-size: 13px; }
.pb b { font-weight: normal; line-height: 1.25; }
.pb .tr { height: 12px; background: #060a1a; border: 1px solid var(--edge); border-radius: 6px; overflow: hidden; }
.pb .tr i { display: block; height: 100%; width: var(--w); background: linear-gradient(#ffe68a, var(--gold2)); }
.pb span { text-align: right; color: var(--gold); }
.story { position: relative; border-left: 4px solid var(--gold); padding: 2px 0 2px 12px; margin: 12px 0 12px 6px; }
.story h3 { margin: 0 0 3px; color: var(--gold); }
.story::before { content: ''; position: absolute; left: -10px; top: 4px; width: 12px; height: 12px; background: var(--gold); border: 2px solid var(--gold3); transform: rotate(45deg); }
.vs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.vs .ar { font-size: 15px; color: var(--gold); }
.big2 { font-size: 20px; }
.counter p { margin: 6px 0; }
.patch { display: grid; grid-template-columns: 48px 1fr; gap: 8px; align-items: start; padding: 7px 0; border-top: 1px dashed var(--edge); }
.patch:first-of-type { border-top: 0; }
.patch .ic { --s: 44px; }
.patch .what { font-size: 13.5px; line-height: 1.5; }
.era { display: inline-block; background: linear-gradient(#ffd767, var(--gold2)); color: #3a2200; border-radius: 8px; padding: 0 8px; font-size: 13px; border: 2px solid var(--line); }

/* ---- 面 ---- */
.stages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.stg { display: block; position: relative; text-decoration: none; color: var(--text); border: 3px solid var(--line); border-radius: 10px; overflow: hidden; background: #000; aspect-ratio: 3 / 2.3; box-shadow: 0 3px 0 #0008; }
.stg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.stg .stgno { position: absolute; top: 0; left: 0; font-family: var(--head); font-size: 12.5px; color: #3a2200; background: linear-gradient(#ffd767, var(--gold2)); padding: 0 8px; border-radius: 0 0 8px 0; }
.stg .cap { position: absolute; inset: auto 0 0 0; padding: 22px 8px 6px; background: linear-gradient(transparent, #000d); line-height: 1.3; }
.stg .cap b { display: block; font-family: var(--head); font-weight: normal; font-size: 14px; color: #fff; }
.stg .cap small { display: block; font-size: 11px; color: #d6defa; }
.stg .tags { display: flex; gap: 3px; flex-wrap: wrap; margin-top: 2px; }
.stg .tags em { font-style: normal; font-size: 10px; line-height: 1.5; background: #c25a4ecc; border-radius: 6px; padding: 0 5px; }
.stagehead { position: relative; height: 150px; border: 3px solid var(--gold); border-radius: 12px; overflow: hidden; margin-top: 4px; box-shadow: 0 4px 10px #0008; }
.stagehead img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sh-txt { position: absolute; inset: auto 0 0 0; padding: 26px 14px 10px; background: linear-gradient(transparent, #070b18f0); }
.sh-txt .no { font-family: var(--head); font-size: 13px; letter-spacing: .3em; color: var(--gold); }
.sh-txt h1 { font-family: var(--head); font-size: 24px; line-height: 1.25; text-shadow: 0 2px 0 var(--gold3), 2px 2px 0 #000; }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; }
.facts div { background: var(--win2); border: 2px solid #3b4a80; border-radius: 6px; padding: 4px 2px; text-align: center; }
.facts b { display: block; font-family: var(--head); font-size: 18px; font-weight: normal; color: var(--gold); line-height: 1.3; }
.facts span { font-size: 10.5px; color: var(--dim); line-height: 1.3; display: block; }
.wchart { display: flex; align-items: stretch; gap: 3px; height: 120px; padding: 6px 4px 0; background: #060a1a; border: 2px solid var(--edge); border-radius: 8px; }
.wc { flex: 1; min-width: 0; display: grid; grid-template-rows: 1fr 14px; justify-items: center; }
.wc i { align-self: end; display: block; width: 100%; height: var(--h); background: linear-gradient(#9fe0ff, #3b78d8); border-radius: 3px 3px 0 0; }
.wc.hi i { background: linear-gradient(#ffe68a, var(--gold2)); }
.wc.boss i { background: linear-gradient(#ff9a8e, var(--red)); }
.wc span { font-size: 9px; color: var(--dim); line-height: 14px; }
.wlist { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.wlist li { display: grid; grid-template-columns: 62px 1fr; gap: 8px; font-size: 13.5px; line-height: 1.55; padding: 6px 8px; background: var(--win2); border-radius: 8px; border-left: 4px solid var(--gold); }
.wlist li.boss { border-left-color: var(--red); }
.wlist b { color: var(--gold); font-weight: normal; }
.enemies { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.en { display: flex; flex-direction: column; align-items: center; font-size: 11px; text-align: center; line-height: 1.25; }
.en .ic { --s: 56px; --rc: #6a7aa8; }
.en.boss .ic { --rc: var(--red); }
.en b { font-weight: normal; margin-top: 3px; }
.en .bt, .en .nt { font-size: 10px; border-radius: 6px; padding: 0 6px; margin-top: 2px; color: #111; }
.en .bt { background: var(--red); color: #fff; }
.en .nt { background: var(--gold); }
.bossnotes p { margin: 8px 0 0; font-size: 13.5px; color: #dfe6ff; }
.elist { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 4px; font-size: 12.5px; color: var(--dim); line-height: 1.55; }
.elist b { color: var(--text); font-weight: normal; margin-right: 6px; }

/* ---- 対戦・ランク・観戦 ---- */
.tablewrap { overflow-x: auto; margin: 8px 0; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.5; }
.tbl th, .tbl td { padding: 6px 4px; border-bottom: 1px solid var(--edge); text-align: center; vertical-align: middle; }
.tbl thead th { white-space: nowrap; color: var(--gold); font-weight: normal; font-size: 12px; border-bottom: 2px solid var(--gold2); }
.tbl tbody th { text-align: left; font-weight: normal; color: var(--text); white-space: nowrap; }
.tbl td.l { text-align: left; }
.tbl .emb { vertical-align: middle; margin-right: 4px; }
.emb { display: block; object-fit: contain; filter: drop-shadow(0 3px 4px #000a); }
.seasonbox { display: flex; flex-direction: column; gap: 2px; text-align: center; border-color: var(--gold); }
.seasonbox b { font-family: var(--head); font-weight: normal; font-size: 17px; color: var(--gold); }
.seasonbox span { font-size: 13px; color: var(--dim); }
.ladder { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 10px 0; }
.rk { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; padding: 8px 12px; background: linear-gradient(#18244a, #0d1530); border: 2px solid var(--edge); border-radius: 12px; }
.rk .emb { width: 64px; height: 64px; }
.rk .rt { display: flex; flex-direction: column; line-height: 1.45; }
.rk .rt b { font-family: var(--head); font-weight: normal; font-size: 18px; color: #fff; }
.rk .rt span { font-size: 12.5px; color: var(--dim); }
.rk .rt .rw { color: var(--gold); }
.rk.b6 { border-color: var(--gold); }
.metadeck { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }

/* ---- 最初の1時間 ---- */
.timeline { list-style: none; margin: 8px 0 0; padding: 0; }
.tstep { position: relative; margin: 0 0 18px 8px; padding: 0 0 4px 18px; border-left: 3px solid var(--gold2); }
.tstep::before { content: ''; position: absolute; left: -9px; top: 2px; width: 14px; height: 14px; background: var(--gold); border: 2px solid var(--gold3); transform: rotate(45deg); }
.tm { display: inline-block; margin-left: 4px; font-family: var(--head); font-size: 13px; color: #3a2200; background: linear-gradient(#ffd767, var(--gold2)); border-radius: 12px; padding: 0 12px; }
.tbody h3 { margin-top: 6px; font-size: 20px; color: #fff; text-shadow: 0 2px 0 var(--gold3); }
.rates { display: flex; flex-wrap: wrap; gap: 5px; }
.rate { font-size: 12.5px; background: var(--win2); border: 2px solid var(--edge); border-left: 5px solid var(--rc); border-radius: 8px; padding: 0 8px; line-height: 1.7; }
.rate b { font-weight: normal; color: var(--text); margin-left: 6px; }
.roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 8px 0; }
.role { display: grid; grid-template-columns: 30px 1fr; column-gap: 8px; align-items: center; background: var(--win2); border: 2px solid var(--bc); border-radius: 10px; padding: 5px 8px; }
.role b { grid-row: 1 / 3; display: grid; place-items: center; width: 30px; height: 30px; font-family: var(--head); font-size: 16px; color: #111; background: var(--bc); border-radius: 50%; }
.role span { font-size: 14px; line-height: 1.3; }
.role em { font-style: normal; font-size: 11.5px; color: var(--dim); line-height: 1.3; }

/* ---- PC ---- */
@media (min-width: 640px) {
  .cover { min-height: 600px; }
  .cover h1 { font-size: 56px; }
  .teasers { grid-template-columns: repeat(3, 1fr); }
  .teaser { grid-template-columns: 1fr; }
  .teaser .tfaces { grid-row: auto; grid-column: auto; margin-top: 6px; }
  .zgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ladder { grid-template-columns: 1fr 1fr; }
  .tile { width: 72px; } .tile span.nm { max-width: 72px; font-size: 11.5px; }
  .tierrow { grid-template-columns: 64px 1fr; } .tierrow .lab { font-size: 40px; }
  .bar-row { grid-template-columns: 130px 1fr 72px; font-size: 14px; }
  .chap h1 { font-size: 32px; }
  .stagehead { height: 220px; }
  .uart { width: 170px; height: 184px; }
  .mgrid .cells { grid-template-columns: repeat(5, 34px); } .mgrid.big .cells { grid-template-columns: repeat(5, 40px); }
}
@media (min-width: 900px) {
  .tabs { left: 50%; right: auto; transform: translateX(-50%); bottom: 12px; width: 640px; border: 3px solid var(--gold); border-radius: 16px; }
}
@media (max-width: 480px) { h2.pix { font-size: 19px; letter-spacing: 1px; gap: 8px; } h2.pix::after { min-width: 0; } }
@media (max-width: 360px) { .cover h1 { font-size: 38px; } .tabs a { font-size: 10.5px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
/* 測りなおし待ちの札（js/wiki-inputs.js）: 金ではなく注意の色。長いので折り返す */
.issue.stale { background: #3a2a1a; color: #ffd9a0; border: 1px solid #c99a2e; letter-spacing: .02em; line-height: 1.6; padding: 2px 10px; white-space: normal; max-width: 100%; }
.terms dt { margin-top: 14px; font-weight: bold; color: #ffe36b; }
.terms dd { margin: 4px 0 0; line-height: 1.8; }

/* ---- 絵をタップで大きく（js/art-viewer.js）。拡大できる絵には右下に小さな印 ---- */
.zoomable { position: relative; cursor: zoom-in; }
.zoomable::after { content: ''; position: absolute; right: 5px; bottom: 5px; width: 22px; height: 22px; border-radius: 50%; pointer-events: none;
  background: #0b1229cc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2c14e' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='6'/%3E%3Cpath d='M15 15l5 5M10 7v6M7 10h6'/%3E%3C/svg%3E") center / 15px no-repeat; border: 1px solid #f2c14e88; }
.evopair figure.zoomable::after { bottom: 26px; }