/* 式神符陣 遊び方 (/guide) — the rules page. Same night-lacquer-and-gold
   look as the table (play/table.css), but standalone: only the tokens it
   uses are repeated here, so the page never pulls in the table's layout. */

:root {
  --bg: oklch(18% 0.02 260);
  --bg-deep: oklch(12.5% 0.018 262);
  --gold: oklch(80% 0.12 85);
  --gold-hi: oklch(90% 0.09 90);
  --gold-dim: oklch(58% 0.08 80);
  --gold-line: oklch(52% 0.07 80 / 0.55);
  --p0: oklch(62% 0.13 250);
  --p1: oklch(62% 0.16 30);
  --text: oklch(90% 0.02 85);
  --text-dim: oklch(72% 0.02 260);
  --jade: oklch(79% 0.13 165);
  --vermilion: oklch(68% 0.17 32);
  --amber: oklch(80% 0.14 72);
  --lacquer: oklch(16% 0.014 40 / 0.92);
  --lacquer-hi: oklch(21% 0.02 45 / 0.95);
  --washi: #f3eee1;
  --font-mincho: "Shippori Mincho B1", "Zen Old Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  --font-gothic: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, sans-serif;
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .92  0 0 0 0 .86  0 0 0 0 .72  0 0 0 .07 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; color: var(--text); font-family: var(--font-gothic); font-size: 16px; line-height: 1.85;
  background: var(--grain), radial-gradient(120% 1200px at 50% 0%, oklch(24% 0.03 255), var(--bg-deep) 70%) no-repeat, var(--bg-deep);
  -webkit-text-size-adjust: 100%; overflow-wrap: anywhere;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold-hi); text-underline-offset: 3px; }
b { color: var(--gold-hi); font-weight: 700; }

/* ------------------------------------------------------------ header */
.g-head {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px max(16px, calc((100vw - 1180px) / 2)); background: oklch(12% 0.018 262 / 0.88);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--gold-line);
}
.g-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.g-mark {
  display: inline-grid; place-items: center; width: 32px; height: 32px; font-family: var(--font-mincho); font-weight: 800; font-size: 20px;
  color: var(--bg-deep); background: linear-gradient(145deg, var(--gold-hi), var(--gold) 55%, var(--gold-dim));
  border-radius: 3px; transform: rotate(-4deg); box-shadow: 0 2px 10px oklch(0% 0 0 / 0.45);
}
.g-name { font-family: var(--font-mincho); font-weight: 800; font-size: 19px; letter-spacing: 0.08em; }
.g-name small { font-size: 11px; color: var(--text-dim); font-weight: 500; }
.g-links { display: flex; gap: 8px; }
.g-links a {
  font-size: 13px; text-decoration: none; padding: 5px 12px; border: 1px solid var(--gold-line); border-radius: 3px; color: var(--text); white-space: nowrap;
}
.g-links a.is-gold { color: var(--bg-deep); background: linear-gradient(180deg, var(--gold-hi), var(--gold)); border-color: transparent; font-weight: 700; }

/* ------------------------------------------------------------ hero */
.g-hero {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 32px; align-items: center;
  max-width: 1180px; margin: 0 auto; padding: 48px 16px 28px;
}
.g-kicker { margin: 0; color: var(--gold); font-family: var(--font-mincho); letter-spacing: 0.4em; font-size: 14px; }
.g-hero h1 { font-family: var(--font-mincho); font-weight: 800; font-size: clamp(28px, 4.2vw, 44px); line-height: 1.35; margin: 8px 0 16px; letter-spacing: 0.04em; }
.g-lead { margin: 0; color: var(--text-dim); max-width: 36em; }
.g-lead b { color: var(--text); }
.g-hero-cards { position: relative; height: 340px; }
.g-hero-cards img {
  position: absolute; width: 190px; border-radius: 9px; box-shadow: 0 18px 40px oklch(0% 0 0 / 0.55), 0 0 0 1px oklch(100% 0 0 / 0.08);
}
.g-hero-cards img:nth-child(1) { left: 6%; top: 34px; transform: rotate(-9deg); }
.g-hero-cards img:nth-child(2) { left: 34%; top: 0; transform: rotate(2deg); z-index: 2; }
.g-hero-cards img:nth-child(3) { left: 62%; top: 40px; transform: rotate(10deg); }

/* ------------------------------------------------------------ layout + toc */
.g-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; max-width: 1180px; margin: 0 auto; padding: 0 16px 64px; }
.g-toc { position: sticky; top: 70px; align-self: start; max-height: calc(100vh - 90px); overflow: auto; }
.g-toc summary { font-family: var(--font-mincho); font-weight: 700; color: var(--gold); letter-spacing: 0.3em; cursor: pointer; list-style: none; padding: 4px 0 8px; }
.g-toc summary::-webkit-details-marker { display: none; }
.g-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--gold-line); counter-reset: toc; }
.g-toc li { counter-increment: toc; }
.g-toc a { display: block; padding: 5px 0 5px 14px; font-size: 14px; color: var(--text-dim); text-decoration: none; border-left: 2px solid transparent; margin-left: -1px; line-height: 1.5; }
.g-toc a:hover { color: var(--text); }
.g-toc a.is-on { color: var(--gold-hi); border-left-color: var(--gold); }

.g-main { min-width: 0; max-width: 820px; }
.g-sec { padding: 40px 0 8px; border-top: 1px solid oklch(100% 0 0 / 0.06); }
.g-sec:first-child { border-top: 0; padding-top: 8px; }
.g-sec h2 { font-family: var(--font-mincho); font-weight: 800; font-size: 26px; margin: 0 0 16px; letter-spacing: 0.06em; display: flex; align-items: center; gap: 14px; }
.g-num {
  display: inline-grid; place-items: center; min-width: 42px; height: 42px; padding: 0 6px; font-size: 16px; color: var(--gold);
  border: 1px solid var(--gold-line); border-radius: 50%; background: var(--lacquer);
}
.g-sec h3 { font-family: var(--font-mincho); font-weight: 700; font-size: 19px; margin: 28px 0 8px; color: var(--gold-hi); letter-spacing: 0.05em; }
.g-sec p { margin: 0 0 12px; }

/* ------------------------------------------------------------ text blocks */
.g-steps { margin: 0 0 20px; padding: 0; list-style: none; counter-reset: st; display: grid; gap: 10px; }
.g-steps li {
  counter-increment: st; position: relative; padding: 12px 16px 12px 56px; background: var(--lacquer); border: 1px solid oklch(100% 0 0 / 0.07); border-radius: 6px;
}
.g-steps li::before {
  content: counter(st); position: absolute; left: 14px; top: 12px; width: 28px; height: 28px; display: grid; place-items: center;
  font-family: var(--font-mincho); font-weight: 800; color: var(--bg-deep); background: linear-gradient(145deg, var(--gold-hi), var(--gold)); border-radius: 50%; font-size: 15px; line-height: 1;
}
.g-steps.is-plain li { background: transparent; border: 0; border-bottom: 1px dashed oklch(100% 0 0 / 0.1); border-radius: 0; padding: 8px 0 10px 44px; }
.g-steps.is-plain li::before { left: 0; top: 9px; width: 26px; height: 26px; font-size: 13px; }
.g-list { margin: 0 0 14px; padding-left: 1.3em; }
.g-list li { margin: 4px 0; }
.g-list li::marker { color: var(--gold); }
.g-list.is-small { font-size: 15px; color: var(--text-dim); }
.g-list.is-small b { color: var(--text); }
.g-check { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 6px; }
.g-check li { padding: 8px 12px 8px 40px; position: relative; background: oklch(25% 0.04 165 / 0.25); border-radius: 5px; border: 1px solid oklch(79% 0.13 165 / 0.25); }
.g-check li::before { content: "✓"; position: absolute; left: 14px; top: 8px; color: var(--jade); font-weight: 700; }

.g-tip, .g-key, .g-warn {
  padding: 12px 16px; border-radius: 6px; margin: 14px 0; font-size: 15px;
}
.g-tip { background: oklch(30% 0.05 85 / 0.18); border-left: 3px solid var(--gold); }
.g-tip b:first-child { display: inline-block; margin-right: 10px; padding: 0 8px; font-size: 12px; letter-spacing: 0.2em; color: var(--bg-deep); background: var(--gold); border-radius: 2px; }
.g-key { background: var(--lacquer-hi); border: 1px solid var(--gold-line); font-size: 16px; }
.g-warn { background: oklch(32% 0.08 32 / 0.25); border-left: 3px solid var(--vermilion); }
.g-warn b { color: oklch(85% 0.1 40); }

.g-example { margin: 16px 0; padding: 14px 18px 4px; border: 1px dashed var(--gold-line); border-radius: 6px; background: oklch(14% 0.015 260 / 0.6); }
.g-ex-h { margin: 0 0 6px !important; font-family: var(--font-mincho); color: var(--gold); letter-spacing: 0.3em; font-size: 14px; }

.g-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: var(--gold-line); border: 1px solid var(--gold-line); border-radius: 6px; overflow: hidden; }
.g-quick div { display: flex; flex-direction: column; padding: 10px 14px; background: var(--bg-deep); }
.g-quick span { font-size: 12.5px; color: var(--text-dim); letter-spacing: 0.08em; }
.g-quick b { font-family: var(--font-mincho); font-size: 17px; color: var(--text); }

.g-table { width: 100%; border-collapse: collapse; margin: 8px 0 16px; font-size: 15px; }
.g-table th, .g-table td { padding: 8px 10px; border-bottom: 1px solid oklch(100% 0 0 / 0.08); text-align: center; }
.g-table thead th { color: var(--gold); font-weight: 700; font-family: var(--font-mincho); border-bottom-color: var(--gold-line); }
.g-table tbody th { text-align: left; font-weight: 500; color: var(--text-dim); white-space: nowrap; }
.g-table td.up { color: var(--jade); font-weight: 700; }
.g-table td.down { color: var(--vermilion); font-weight: 700; }
.g-table.is-steps td { text-align: left; }
.g-table.is-steps th { color: var(--gold-hi); font-family: var(--font-mincho); vertical-align: top; }

.g-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.g-card-box { padding: 6px 18px 8px; background: var(--lacquer); border: 1px solid var(--gold-line); border-radius: 8px; }
.g-card-box h3 { margin-top: 10px; }

/* ------------------------------------------------------------ card anatomy */
.g-anatomy { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 28px; margin: 16px 0; align-items: start; }
.g-anat-img { position: relative; }
.g-anat-img img { border-radius: 10px; box-shadow: 0 14px 34px oklch(0% 0 0 / 0.5); }
.pin, .g-pins li::before {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 12.5px; font-weight: 700; line-height: 1;
  color: var(--bg-deep); background: var(--gold-hi); box-shadow: 0 0 0 2px var(--bg-deep), 0 2px 6px oklch(0% 0 0 / 0.6);
}
.pin { position: absolute; transform: translate(-50%, -50%); }
.g-pins { list-style: none; margin: 0; padding: 0; counter-reset: pin; display: grid; gap: 7px; font-size: 15px; line-height: 1.6; }
.g-pins li { counter-increment: pin; position: relative; padding-left: 34px; color: var(--text-dim); }
.g-pins li::before { content: counter(pin); position: absolute; left: 0; top: 1px; }
.g-pins b { color: var(--text); margin-right: 4px; }

.g-range { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; margin: 10px 0 14px; }
.g-range.is-turn { justify-content: flex-start; }
.g-range-fig { text-align: center; }
.g-cap { font-size: 12.5px; color: var(--text-dim); margin: 6px 0 0 !important; }
.rg { display: block; border-radius: 8px; background: #3a3630; padding: 4px; box-sizing: content-box; }
.g-arrow { color: var(--gold); font-family: var(--font-mincho); font-size: 14px; }
.g-legend { margin: 0; display: grid; gap: 6px; flex: 1 1 260px; }
.g-legend div { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 10px; }
.g-legend dt { margin: 0; }
.g-legend dd { margin: 0; font-size: 15px; color: var(--text-dim); }
.g-legend dd b { color: var(--text); }
.g-legend i { display: block; width: 30px; height: 30px; border-radius: 4px; background: #23222a; border: 1px solid #6b6458; position: relative; }
.g-legend i.lg-self { background: var(--washi); }
.g-legend i.lg-self::after { content: ""; position: absolute; inset: 8px 8px 9px; background: #26262b; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.g-legend i.lg-atk::after, .g-legend i.lg-both::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: #e0674f; }
.g-legend i.lg-ctr::before, .g-legend i.lg-both::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 3px solid #5fc49b; }
.g-legend i.lg-blind { background: repeating-linear-gradient(45deg, #e0b13a 0 4px, #1d1c22 4px 8px); }

/* ------------------------------------------------------------ board */
.g-boardrow { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 28px; align-items: start; }
.g-board, .g-xb {
  display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; padding: 6px; gap: 0; border-radius: 6px;
  background: #17110d; border: 1px solid #c9a45c; box-shadow: 0 0 0 3px #17110d, 0 0 0 4px oklch(80% 0.12 85 / 0.5), 0 16px 36px oklch(0% 0 0 / 0.5);
}
.g-board figcaption { grid-column: 1 / -1; font-size: 12.5px; color: var(--text-dim); text-align: center; padding-top: 8px; }
.g-cell { position: relative; aspect-ratio: 1; background-size: cover; background-position: center; outline: 0.5px solid #b8934f; }
.c-void { background-image: url("/play/art/board/void.webp"); }
.c-yin { background-image: url("/play/art/board/yin.webp"); }
.c-yang { background-image: url("/play/art/board/yang.webp"); }
.c-taiji { background-image: url("/play/art/board/taiji.webp"); }
.g-board .g-cell span {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); font-family: var(--font-mincho); font-weight: 800; font-size: 13px;
  padding: 0 8px; border-radius: 10px; background: oklch(10% 0.01 260 / 0.75); color: var(--text); white-space: nowrap;
}

.g-exboard { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: 24px; align-items: start; margin: 12px 0; }
.g-xb .g-cell { display: grid; place-items: center; }
.tok { width: 58%; transform: rotate(var(--r)); border-radius: 5px; box-shadow: 0 0 0 2px var(--side), 0 6px 14px oklch(0% 0 0 / 0.6); }
.tok img { border-radius: 4px; }
.tok.is-p0 { --side: var(--p0); }
.tok.is-p1 { --side: var(--p1); }
.g-xb .hp {
  position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 11.5px; font-weight: 700;
  padding: 0 7px; border-radius: 9px; background: oklch(10% 0.01 260 / 0.85); color: var(--text-dim); z-index: 2;
}
.g-xb .hp b { color: var(--vermilion); }
.g-xb-legend { font-size: 13px; color: var(--text-dim); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sw { display: inline-block; width: 14px; height: 14px; border-radius: 3px; }
.sw.is-p0 { background: var(--p0); }
.sw.is-p1 { background: var(--p1); margin-left: 8px; }

/* ------------------------------------------------------------ turn flow */
.g-flow { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 0; margin: 16px 0; }
.g-flow-step { position: relative; padding: 14px 18px 10px; background: var(--lacquer); border: 1px solid var(--gold-line); font-size: 15px; }
.g-flow-step + .g-flow-step { border-left: 0; }
.g-flow-step:first-child { border-radius: 8px 0 0 8px; }
.g-flow-step:last-child { border-radius: 0 8px 8px 0; }
.g-flow-step.is-main { background: var(--lacquer-hi); }
.g-flow-step + .g-flow-step::before {
  content: ""; position: absolute; left: -9px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%) rotate(45deg);
  background: inherit; border-top: 1px solid var(--gold-line); border-right: 1px solid var(--gold-line);
}
.g-flow-h { font-family: var(--font-mincho); font-weight: 800; color: var(--gold); letter-spacing: 0.3em; margin: 0 0 6px !important; font-size: 17px; }
.g-flow ol, .g-flow ul { margin: 0 0 6px; padding-left: 1.2em; }
.g-flow li { margin: 3px 0; }

/* ------------------------------------------------------------ control */
.g-power { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0 16px; }
.g-power div { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--lacquer); border-radius: 6px; border: 1px solid oklch(100% 0 0 / 0.07); font-size: 14.5px; }
.pw { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-family: var(--font-mincho); font-size: 22px; color: var(--bg-deep) !important; background: var(--text-dim); }
.pw.is-2 { background: linear-gradient(145deg, var(--gold-hi), var(--gold)); }
.pw.is-0 { background: oklch(40% 0.02 260); color: var(--text) !important; }
.g-wins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0 16px; }
.g-win { padding: 14px 16px 6px; background: var(--lacquer); border: 1px solid var(--gold-line); border-radius: 8px; font-size: 15px; }
.g-win.is-goal { background: linear-gradient(160deg, oklch(30% 0.06 85 / 0.6), var(--lacquer)); border-color: var(--gold); }
.g-win-n { font-family: var(--font-mincho); font-weight: 800; font-size: 28px; color: var(--gold); line-height: 1; }

.g-income { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0 16px; }
.g-income div { display: flex; flex-direction: column; align-items: center; padding: 12px; background: var(--lacquer); border: 1px solid oklch(100% 0 0 / 0.08); border-radius: 8px; }
.g-income span { font-size: 13.5px; color: var(--text-dim); }
.g-income b { font-family: var(--font-mincho); font-size: 34px; line-height: 1.2; }
.g-income .is-top { border-color: var(--gold); }

.g-reigu { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin: 14px 0; }
.g-reigu img { border-radius: 6px; box-shadow: 0 8px 18px oklch(0% 0 0 / 0.5); }

/* ------------------------------------------------------------ faq */
.g-faq { display: grid; gap: 8px; }
.g-faq details { background: var(--lacquer); border: 1px solid oklch(100% 0 0 / 0.08); border-radius: 6px; }
.g-faq summary { cursor: pointer; padding: 12px 44px 12px 16px; font-weight: 700; position: relative; list-style: none; }
.g-faq summary::-webkit-details-marker { display: none; }
.g-faq summary::before { content: "問"; margin-right: 10px; font-family: var(--font-mincho); color: var(--gold); }
.g-faq summary::after { content: "+"; position: absolute; right: 16px; top: 10px; color: var(--gold); font-size: 20px; }
.g-faq details[open] summary::after { content: "−"; }
.g-faq details p { margin: 0; padding: 0 16px 14px 42px; color: var(--text-dim); font-size: 15px; }

/* ------------------------------------------------------------ card list */
.g-clan { display: flex; align-items: baseline; gap: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--gold-line); }
.g-clan small { font-size: 13px; color: var(--text-dim); font-family: var(--font-gothic); font-weight: 400; }
.g-cardlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 14px; margin: 14px 0 24px; }
.cl-card { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 14px; padding: 12px; background: var(--lacquer); border: 1px solid oklch(100% 0 0 / 0.08); border-radius: 8px; }
.cl-card img { border-radius: 6px; cursor: zoom-in; }
.cl-body h4 { margin: 0 0 6px; font-family: var(--font-mincho); font-size: 18px; font-weight: 800; }
.cl-body h4 small { display: block; font-size: 11px; color: var(--text-dim); font-family: var(--font-gothic); font-weight: 400; letter-spacing: 0.1em; }
.cl-stat { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 6px; }
.cl-stat div { display: flex; align-items: baseline; gap: 4px; padding: 1px 7px; border-radius: 3px; background: oklch(100% 0 0 / 0.05); font-size: 12.5px; }
.cl-stat dt { color: var(--text-dim); }
.cl-stat dd { margin: 0; font-weight: 700; }
.cl-range { font-size: 12.5px; line-height: 1.7; color: var(--text); margin: 0 0 6px !important; }
.cl-range span { display: inline-block; min-width: 5em; color: var(--text-dim); }
.cl-note { font-size: 13.5px; line-height: 1.7; color: var(--text-dim); margin: 0 !important; }

/* zoomed card (guide.ts) */
.g-zoom { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; background: oklch(5% 0.01 260 / 0.85); cursor: zoom-out; border: 0; }
.g-zoom img { max-height: 92vh; width: auto; border-radius: 12px; box-shadow: 0 20px 60px oklch(0% 0 0 / 0.7); }

/* ------------------------------------------------------------ footer */
.g-foot { margin-top: 40px; padding: 28px 20px; text-align: center; border: 1px solid var(--gold-line); border-radius: 10px; background: var(--lacquer); }
.g-foot p { margin: 0 0 12px; }
.g-foot-links { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.btn-gold, .btn-quiet { display: inline-block; padding: 10px 22px; border-radius: 4px; text-decoration: none; font-weight: 700; }
.btn-gold { color: var(--bg-deep); background: linear-gradient(180deg, var(--gold-hi), var(--gold)); }
.btn-quiet { color: var(--text); border: 1px solid var(--gold-line); }
.g-small { font-size: 12.5px; color: var(--text-dim); margin: 0 !important; }

/* ------------------------------------------------------------ narrow */
@media (max-width: 920px) {
  .g-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .g-toc { position: sticky; top: 53px; z-index: 5; max-height: none; margin: 0 -16px; padding: 0 16px; background: oklch(12% 0.018 262 / 0.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--gold-line); }
  .g-toc summary { padding: 10px 0; }
  .g-toc summary::after { content: "▾"; margin-left: 8px; }
  .g-toc details[open] summary::after { content: "▴"; }
  .g-toc details[open] ol { max-height: 60vh; overflow: auto; margin-bottom: 10px; column-count: 2; column-gap: 10px; border-left: 0; }
  .g-toc details[open] a { border-left: 0; padding-left: 0; }
  .g-hero { grid-template-columns: minmax(0, 1fr); padding-top: 28px; gap: 12px; }
  .g-hero-cards { height: 230px; max-width: 420px; }
  .g-hero-cards img { width: 128px; }
  html { scroll-padding-top: 110px; }
}
@media (max-width: 680px) {
  body { font-size: 15.5px; }
  .g-name { font-size: 16px; }
  .g-links a { padding: 4px 9px; font-size: 12px; }
  .g-sec h2 { font-size: 22px; }
  .g-num { min-width: 36px; height: 36px; font-size: 14px; }
  .g-anatomy, .g-boardrow, .g-exboard { grid-template-columns: minmax(0, 1fr); }
  .g-anat-img, .g-board, .g-xb { max-width: 340px; width: 100%; margin-inline: auto; }
  .g-two, .g-power, .g-wins { grid-template-columns: minmax(0, 1fr); }
  .g-flow { grid-template-columns: minmax(0, 1fr); }
  .g-flow-step + .g-flow-step { border-left: 1px solid var(--gold-line); border-top: 0; }
  .g-flow-step:first-child { border-radius: 8px 8px 0 0; }
  .g-flow-step:last-child { border-radius: 0 0 8px 8px; }
  .g-flow-step + .g-flow-step::before { left: 50%; top: -9px; transform: translateX(-50%) rotate(135deg); }
  .g-reigu { grid-template-columns: repeat(3, 1fr); }
  .g-cardlist { grid-template-columns: minmax(0, 1fr); }
  .cl-card { grid-template-columns: 104px minmax(0, 1fr); }
  .g-income b { font-size: 28px; }
  .g-income span { font-size: 12px; text-align: center; }
  .g-head { padding-inline: 12px; }
}
@media (max-width: 400px) {
  .g-name small { display: none; }
  .g-mark { width: 28px; height: 28px; font-size: 17px; }
}

/* 「クラウドファンディング実施中 ▶ 支援ページへ」 (href="#cf"): hidden here; play/site-public.css shows it
   once the public server is given --cf-url. */
.cf-link { display: none; }

/* the header's title logo (11/08) in place of 符 + 式神符陣 */
.g-logo { display: block; height: 42px; width: auto; }
@media (max-width: 680px) { .g-logo { height: 34px; } }