/* Tales of Valdir トップ（2026-11-03、Claudeの試作 v5 をDevへ反映）。共通の見た目は valdir-base.css。
   選んだ人物・レアリティの「宝石の色」（--gem）が、ページの光の色になる。
   動き：何が変わったかを伝える動きだけにする。演出OFF・動きを減らす設定（.is-calm）では、移動・拡大・粒子を止めて内容はそのまま見せる。 */

/* ---------------------------------------------------------------- 共通の部品との違い（トップの見出しは大きめ・間を詰める） */
.title-en { font-size: clamp(64px, 10.5vw, 176px); }
.section-head__title { margin: 0; display: grid; gap: 16px; }
.section-head__title .title-sub { margin-top: 0; max-width: 44em; }
.mobile-menu nav a { font-size: clamp(26px, 7.4vw, 40px); }
.js [data-reveal] { translate: 0 30px; }
/* 日本語の見出し・短文は文節の途中で折り返さない（対応ブラウザー）。本文は最後の行が1語だけにならないようにする */
:lang(ja) :is(.reel__title, .screen__title, .hero-info__lead, .u-card__title, .game__copy, .screen__desc) { word-break: auto-phrase; }
.hero-info__body, .u-card__text { text-wrap: pretty; }

/* 章の位置（広い画面だけ）。名前はポインターかフォーカスのときだけ出し、本文に重ねない */
.chapters { position: fixed; right: 16px; top: 50%; z-index: 40; display: grid; gap: 6px; transform: translateY(-50%); transition: opacity .6s, visibility .6s; }
/* 冒頭では左右の縦書きの名前が目印を兼ねるので隠し、冒頭を離れたら現す（右端の名前と重ねない） */
.chapters.is-hidden { opacity: 0; visibility: hidden; }
.chapters a { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 10px; height: 26px; text-decoration: none; font: 600 10px/1 var(--font-ui); letter-spacing: .16em; color: var(--text-3); }
.chapters a::after { content: ""; width: 12px; height: 1px; background: currentColor; transition: width .5s var(--ease), background-color .5s; }
/* 名前は幅を取らない位置に置き、番号と線だけが余白に収まるようにする */
.chapters b { position: absolute; right: calc(100% + 8px); top: 50%; padding: 5px 9px; border-radius: 6px; background: rgb(6 7 12 / .86); font-weight: 500; letter-spacing: .08em; white-space: nowrap; opacity: 0; transform: translate(8px, -50%); transition: opacity .3s, transform .4s var(--ease); pointer-events: none; }
.chapters a.is-active { color: var(--text); }
.chapters a.is-active::after { width: 28px; background: var(--gem); box-shadow: 0 0 10px var(--gem); }
.chapters a:hover b, .chapters a:focus-visible b { opacity: 1; transform: translate(0, -50%); }

/* ---------------------------------------------------------------- 冒頭 */
.hero { position: relative; height: 100svh; min-height: 640px; overflow: clip; isolation: isolate; background: var(--ink); --split: 50; --tilt: 6; --light: var(--sapphire); }
.hero__stage { position: absolute; inset: 0; }
.hero__side { position: absolute; inset: 0; margin: 0; overflow: hidden; cursor: pointer; }
.hero__side--jin { clip-path: polygon(0 0, calc((var(--split) + var(--tilt)) * 1%) 0, calc((var(--split) - var(--tilt)) * 1%) 100%, 0 100%); }
.hero__side--luna { clip-path: polygon(calc((var(--split) + var(--tilt)) * 1%) 0, 100% 0, 100% 100%, calc((var(--split) - var(--tilt)) * 1%) 100%); }
.hero__side img {
  position: absolute; top: 0; width: 66%; height: 100%; object-fit: cover;
  transform: translate3d(calc(var(--x, 0) * 1px), calc(var(--y, 0) * 1px), 0) scale(1.05);
  transition: opacity 1.2s var(--ease) .16s, translate 1.8s var(--ease) .16s, scale 2.4s var(--ease) .16s, filter .9s ease;
}
.hero__side--jin img { left: -3%; object-position: 50% 26%; }
.hero__side--luna img { right: -3%; object-position: 58% 26%; }
.hero[data-focus="jin"] .hero__side--luna img, .hero[data-focus="luna"] .hero__side--jin img { filter: brightness(.55) saturate(.75); }
.hero[data-focus="jin"] .hero__side--jin img, .hero[data-focus="luna"] .hero__side--luna img { filter: brightness(1.06) saturate(1.08); }
/* 開幕：斬撃の光を浴びて白く飛んだ絵が、斬り口に沿ってずれた位置から、所定の位置へ滑り込む（斬られた世界がずれて戻る） */
.js .hero:not(.is-ready) .hero__side img { opacity: .004; scale: 1.12; filter: brightness(1.6); } /* 0にしないのは、斬る前に絵を描いておいて、斬った瞬間にコマを止めないため */
.js .hero:not(.is-ready) .hero__side--jin img { translate: -1.4% 5.4%; }
.js .hero:not(.is-ready) .hero__side--luna img { translate: 1.4% -5.4%; }
.js .hero:not(.is-ready) .hero__stage { will-change: transform; } /* 斬った瞬間に重くならないよう、先に準備しておく */
.hero.is-cut .hero__stage { animation: hero-cut .5s ease-out; }
@keyframes hero-cut { 0% { transform: none; } 10% { transform: translate(-8px, 5px); } 26% { transform: translate(6px, -4px); } 44% { transform: translate(-4px, 2px); } 64% { transform: translate(2px, -1px); } 100% { transform: none; } }

.hero__light { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .7s; mix-blend-mode: screen;
  background: radial-gradient(560px circle at var(--px, 70%) var(--py, 35%), color-mix(in srgb, var(--light) 30%, transparent), transparent 62%); }
.hero.is-pointer .hero__light { opacity: 1; }
.hero__dust { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }

.hero__blade { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; pointer-events: none; overflow: visible; transition: opacity .7s ease .3s; }
.js .hero:not(.is-ready) .hero__blade { opacity: 0; }
.hero__blade line { fill: none; vector-effect: non-scaling-stroke; stroke: url(#blade-grad); stroke-linecap: round; }
.hero__blade-core { stroke-width: 2.4px; filter: drop-shadow(0 0 3px #fff8e6) drop-shadow(0 0 14px rgb(243 215 156 / .95)); }
.hero__blade-glow { stroke-width: 34px; opacity: .9; filter: blur(14px); }
.hero__blade-spark { stroke: #fffaf0 !important; stroke-width: 3px; stroke-dasharray: .045 1; stroke-dashoffset: .045; filter: drop-shadow(0 0 6px #fff); opacity: 0; }
.hero.is-ready .hero__blade-spark { opacity: 1; animation: spark 3.6s var(--ease-io) 2.6s infinite; }
@keyframes spark { 0% { stroke-dashoffset: .045; } 70%, 100% { stroke-dashoffset: -1; } }
/* 開幕の斬撃（描くのは valdir-top.js）。斬り口の光を、人物の絵の上に足す */
.hero__slash { position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; pointer-events: none; }
.no-js .hero__slash { display: none; }

.hero__veil { position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background:
    linear-gradient(to bottom, rgb(6 7 12 / .82) 0, rgb(6 7 12 / 0) 24%),
    linear-gradient(to top, rgb(6 7 12 / .96) 0, rgb(6 7 12 / .74) 22%, rgb(6 7 12 / 0) 50%),
    radial-gradient(130% 95% at 50% 38%, transparent 55%, rgb(6 7 12 / .6) 100%); }

/* 左右の端の縦書きの名前。キーボードでも人物を選べる入口 */
.hero__pick { position: absolute; z-index: 8; top: 50%; display: flex; align-items: center; gap: 14px; writing-mode: vertical-rl; text-decoration: none; color: var(--text-2); transition: color .4s; }
.hero__pick--jin { left: calc(var(--pad) * .42); transform: translateY(-50%) rotate(180deg); }
.hero__pick--luna { right: calc(var(--pad) * .42); transform: translateY(-50%); }
.hero__pick::before { content: ""; width: 1px; height: 44px; background: currentColor; opacity: .6; transition: height .6s var(--ease), background-color .4s; }
.hero__pick-no { font: 600 13px/1 var(--font-en); letter-spacing: .12em; color: var(--gold); }
.hero__pick-name { font: 600 21px/1 var(--font-en); letter-spacing: .3em; text-transform: uppercase; color: var(--text); }
.hero__pick-title { font: 500 10px/1 var(--font-ui); letter-spacing: .32em; text-transform: uppercase; }
.hero__pick:hover, .hero__pick:focus-visible, .hero[data-focus="jin"] .hero__pick--jin, .hero[data-focus="luna"] .hero__pick--luna { color: var(--text); }
.hero__pick:hover::before, .hero__pick:focus-visible::before, .hero[data-focus="jin"] .hero__pick--jin::before, .hero[data-focus="luna"] .hero__pick--luna::before { height: 80px; background: var(--light); opacity: 1; }

.hero__copy { position: absolute; inset: 0; z-index: 7; pointer-events: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr auto auto; padding: calc(var(--header-h) + 2.4vh) calc(var(--pad) + 28px) clamp(28px, 5vh, 56px); }
.hero__copy a { pointer-events: auto; }
.hero__eyebrow { grid-column: 1 / -1; justify-self: center; margin: 0; font: 700 11px/1 var(--font-ui); letter-spacing: .46em; color: var(--gold-hi); text-shadow: 0 0 18px rgb(0 0 0 / .8); }
.hero__logo { grid-column: 1 / -1; justify-self: center; width: clamp(220px, 23vw, 390px); height: auto; margin-top: 1.4vh;
  filter: drop-shadow(0 8px 26px rgb(0 0 0 / .7)) drop-shadow(0 0 30px rgb(217 181 108 / .22));
  -webkit-mask-image: linear-gradient(105deg, #000 40%, rgb(0 0 0 / .55) 50%, #000 60%); mask-image: linear-gradient(105deg, #000 40%, rgb(0 0 0 / .55) 50%, #000 60%);
  -webkit-mask-size: 260% 100%; mask-size: 260% 100%; -webkit-mask-position: 100% 0; mask-position: 100% 0; }
.hero.is-ready .hero__logo { animation: logo-sheen 7s ease-in-out 2.4s infinite; }
@keyframes logo-sheen { 0%, 70% { -webkit-mask-position: 100% 0; mask-position: 100% 0; } 100% { -webkit-mask-position: 0 0; mask-position: 0 0; } }
/* 日本語の2行は句の途中で折り返さない（列の幅に収まる大きさにする）。英語は単語の間で折り返してよい */
.hero__catch { grid-column: 1 / -1; grid-row: 4; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(36px, 5vw, 96px); margin: 0; font: 800 min(3.25vw, 62px)/1.22 var(--font-ja); letter-spacing: .05em; }
.hero__line { display: block; padding: .04em 0; white-space: nowrap; }
:lang(en) .hero__catch { font: 600 min(4.1vw, 76px)/1.08 var(--font-en); letter-spacing: 0; }
:lang(en) .hero__line { white-space: normal; text-wrap: balance; }
.hero__line--jin { justify-self: end; text-align: right; }
.hero__line--luna { justify-self: start; margin-top: .95em; }
.hero__line > span { display: inline-block; color: var(--text); text-shadow: 0 4px 30px rgb(0 0 0 / .85), 0 1px 3px rgb(0 0 0 / .55); transition: transform 1.3s var(--ease), opacity 1.1s var(--ease); }
/* 行の端に、それぞれの人物の宝石の色の印 */
.hero__line--jin > span::before, .hero__line--luna > span::after { content: ""; display: inline-block; width: .3em; height: .3em; margin: 0 .5em .18em; vertical-align: middle; transform: rotate(45deg); }
.hero__line--jin > span::before { background: var(--crimson); box-shadow: 0 0 16px var(--crimson); }
.hero__line--luna > span::after { background: var(--sapphire); box-shadow: 0 0 16px var(--sapphire); }
.hero__lead { grid-column: 1; grid-row: 5; align-self: end; margin: 2.4vh 0 0; max-width: min(34em, 36vw); white-space: pre-line; font: 500 clamp(14px, 1.05vw, 16px)/1.95 var(--font-ui); color: var(--text-2); text-shadow: 0 1px 12px rgb(0 0 0 / .9); }
.hero__cta { grid-column: 2; grid-row: 5; justify-self: end; align-self: end; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 14px; }
.js .hero:not(.is-ready) .hero__eyebrow, .js .hero:not(.is-ready) .hero__logo, .js .hero:not(.is-ready) .hero__lead, .js .hero:not(.is-ready) .hero__cta, .js .hero:not(.is-ready) .hero__pick, .js .hero:not(.is-ready) .hero__scroll { opacity: 0; }
.hero__eyebrow, .hero__logo, .hero__lead, .hero__cta, .hero__pick, .hero__scroll { transition: opacity 1.1s var(--ease); }
.hero.is-ready .hero__eyebrow { transition-delay: .7s; }
.hero.is-ready .hero__logo { transition-delay: .85s; }
.hero.is-ready .hero__lead, .hero.is-ready .hero__cta { transition-delay: 1.7s; }
.hero.is-ready .hero__pick, .hero.is-ready .hero__scroll { transition-delay: 2s; }
.js .hero:not(.is-ready) .hero__line > span { transform: translateY(36px); opacity: 0; }
.hero.is-ready .hero__line--jin > span { transition-delay: 1.15s; }
.hero.is-ready .hero__line--luna > span { transition-delay: 1.35s; }
.hero__scroll { position: absolute; z-index: 8; left: 50%; bottom: 18px; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; text-decoration: none; font: 600 10px/1 var(--font-ui); letter-spacing: .4em; color: var(--text-3); }
.hero__scroll i { width: 1px; height: 34px; background: linear-gradient(var(--gold), transparent); animation: drip 2.4s var(--ease-io) infinite; transform-origin: top; }
@keyframes drip { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* スクロールで冒頭を離れるとき、文字を少し持ち上げて薄くする（対応ブラウザーだけ） */
@supports (animation-timeline: view()) {
  html:not(.is-calm) .hero__copy { animation: hero-exit linear both; animation-timeline: view(); animation-range: exit 0% exit 80%; }
  @keyframes hero-exit { to { opacity: 0; transform: translateY(-10vh); } }
}

/* ---------------------------------------------------------------- 01 世界観 */
.prologue { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 120px); align-items: center; overflow: clip;
  background: radial-gradient(48% 52% at 74% 52%, rgb(217 181 108 / .09), transparent 70%), radial-gradient(40% 40% at 10% 20%, color-mix(in srgb, var(--gem) 8%, transparent), transparent 70%), var(--ink); }
.orbit { margin: 0; display: grid; justify-items: center; gap: 20px; }
.orbit__stage { position: relative; width: min(100%, 640px); }
.orbit__svg { width: 100%; height: auto; overflow: visible; }
/* 光の粒は図より少し広い範囲に描く（輪の外へこぼれても切れないように） */
.orbit__sparks { position: absolute; left: -8%; top: -8%; width: 116%; height: 116%; pointer-events: none; }
.orbit__ring { fill: none; stroke: rgb(236 228 210 / .16); stroke-width: 1; }
.orbit__ring--outer { stroke-dasharray: 2 7; }
.orbit__ring--core { stroke: rgb(217 181 108 / .38); }
.orbit__core-label { font: 700 10px var(--font-ui); letter-spacing: .42em; fill: var(--gold); }
.orbit__dot { fill: rgb(236 228 210 / .6); animation: twinkle 4.5s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.orbit__hero { cursor: pointer; outline: none; }
.orbit__hero text { font: 700 13px var(--font-en); letter-spacing: .3em; fill: var(--text); }
/* --near：ポインターの近さ（0〜1）。近いほど縁を太く明るくする（大きさは JS で変える） */
.orbit__halo { fill: rgb(6 7 12 / .6); stroke-width: calc(1.5px + var(--near, 0) * 2.5px); transition: stroke-width .3s; }
.orbit__hero[data-gem="sapphire"] .orbit__halo { stroke: var(--sapphire); filter: drop-shadow(0 0 10px var(--sapphire)); }
.orbit__hero[data-gem="crimson"] .orbit__halo { stroke: var(--crimson); filter: drop-shadow(0 0 10px var(--crimson)); }
.orbit__hero[data-gem="verdant"] .orbit__halo { stroke: var(--verdant); filter: drop-shadow(0 0 10px var(--verdant)); }
.orbit__frame { fill: none; stroke: rgb(255 255 255 / .55); stroke-width: 1; }
.orbit__hero:hover .orbit__halo, .orbit__hero:focus-visible .orbit__halo { stroke-width: 4; }
.orbit__hero:focus-visible .orbit__frame { stroke: var(--gold-hi); stroke-width: 3; }
.orbit__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; font: 500 13px/1.6 var(--font-ui); color: var(--text-3); }
.orbit__legend > span { display: inline-flex; align-items: center; gap: 10px; }
.orbit__key { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
.orbit__key--ours { background: conic-gradient(var(--sapphire), var(--crimson), var(--verdant), var(--sapphire)); box-shadow: 0 0 10px rgb(255 255 255 / .35); }
.orbit__key--others { width: 6px; height: 6px; margin: 3px; background: rgb(236 228 210 / .7); }

/* ---------------------------------------------------------------- 02 キャラクター */
.heroes { display: flex; flex-direction: column; overflow: clip;
  background: radial-gradient(52% 58% at 28% 58%, color-mix(in srgb, var(--gem) 18%, transparent), transparent 72%), linear-gradient(180deg, var(--ink), var(--night) 45%, var(--ink)); }
.heroes__bgname { position: absolute; left: 50%; top: 55%; z-index: 0; translate: -50% -50%; white-space: nowrap; pointer-events: none; user-select: none;
  font: 700 clamp(140px, 27vw, 460px)/.8 var(--font-en); letter-spacing: -.01em; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb, var(--gem) 45%, transparent); opacity: .55; transition: opacity .6s; }
.heroes .section-head, .heroes__body, .select { position: relative; z-index: 1; }
.heroes__body { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(40px, 6vw, 120px); align-items: center; margin-top: clamp(44px, 7vh, 90px); }

.card-zone { display: grid; justify-items: center; gap: 18px; }
.card { position: relative; width: clamp(270px, 29vw, 460px); aspect-ratio: 3 / 4; perspective: 1500px; touch-action: pan-y; }
.card::before { content: ""; position: absolute; inset: 10% 8% -8%; z-index: -1; border-radius: 50%; background: var(--gem); filter: blur(64px); opacity: .38; }
.card__tilt { position: absolute; inset: 0; border-radius: 22px; overflow: hidden; background: var(--night-2); view-transition-name: hero-card;
  transform: rotateX(calc(var(--ry, 0) * 1deg)) rotateY(calc(var(--rx, 0) * 1deg)); transition: transform .7s var(--ease);
  box-shadow: 0 46px 90px -34px rgb(0 0 0 / .85), 0 0 0 1px rgb(255 255 255 / .1); }
.card.is-active .card__tilt { transition: transform .12s linear; }
.card__art, .card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card__img { opacity: 0; transition: opacity .8s var(--ease), scale 1.2s var(--ease); scale: 1.04; }
.card__img.is-on { opacity: 1; scale: 1; }
.card__foil { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge; opacity: var(--foil, .07); transition: opacity .6s;
  background: repeating-linear-gradient(115deg, hsl(0 100% 72% / .55) 0%, hsl(55 100% 72% / .55) 4%, hsl(120 100% 72% / .55) 8%, hsl(185 100% 72% / .55) 12%, hsl(240 100% 76% / .55) 16%, hsl(300 100% 74% / .55) 20%, hsl(360 100% 72% / .55) 24%);
  background-size: 400% 400%; background-position: calc(var(--mx) * 1%) calc(var(--my) * 1%); }
.card__glare { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay; opacity: var(--glare, .35); transition: opacity .5s;
  background: radial-gradient(farthest-corner circle at calc(var(--mx) * 1%) calc(var(--my) * 1%), rgb(255 255 255 / .55), rgb(255 255 255 / .08) 34%, transparent 62%); }
.card.is-active { --glare: 1; --foil: .26; }
.card__frame { position: absolute; inset: 10px; border-radius: 15px; border: 1px solid rgb(246 226 176 / .5); pointer-events: none; }
.card__frame::before, .card__frame::after { content: ""; position: absolute; left: 50%; width: 9px; height: 9px; background: var(--gold-hi); transform: translateX(-50%) rotate(45deg); box-shadow: 0 0 10px var(--gold); }
.card__frame::before { top: -5px; } .card__frame::after { bottom: -5px; }
.card__rarity { position: absolute; top: 14px; left: 14px; padding: 7px 11px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--gem) 60%, transparent); background: rgb(6 7 12 / .62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font: 700 10px/1 var(--font-ui); letter-spacing: .3em; color: var(--gem); }
.card__plate { position: absolute; left: -10px; right: -10px; bottom: -10px; display: grid; justify-items: center; gap: 6px; padding: 54px 18px 22px; background: linear-gradient(to top, rgb(6 7 12 / .92), rgb(6 7 12 / .5) 55%, transparent); }
.card__plate b { font: 700 27px/1 var(--font-en); letter-spacing: .34em; padding-left: .34em; }
.card__plate small { font: 700 10px/1 var(--font-ui); letter-spacing: .3em; color: var(--gold-hi); }
.card.is-swap .card__tilt { animation: card-swap .5s var(--ease); }
@keyframes card-swap { from { opacity: .3; transform: translateY(14px) scale(.98); } }
.card-hint { margin: 0; font: 500 12px/1.6 var(--font-ui); letter-spacing: .06em; color: var(--text-3); text-align: center; }
@media (hover: none) {
  .card { --foil: .09; --glare: .4; }
  html:not(.is-calm) .card__tilt { animation: card-idle 7s ease-in-out infinite; }
  @keyframes card-idle { 0%, 100% { --mx: 25; --my: 20; } 50% { --mx: 75; --my: 80; } }
}

/* 人物を切り替えても高さが変わりにくいように（文の長さが人物ごとに違う） */
.hero-info { min-height: 28em; }
.hero-info__class { margin: 0 0 14px; font: 700 12px/1 var(--font-ui); letter-spacing: .3em; text-transform: uppercase; color: var(--gem); }
.hero-info__name { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; font: 600 clamp(68px, 8.2vw, 136px)/.9 var(--font-en); letter-spacing: -.01em; view-transition-name: hero-name; }
.hero-info__kana { font: 500 clamp(14px, 1.15vw, 18px)/1 var(--font-ja); letter-spacing: .32em; color: var(--text-3); }
:lang(en) .hero-info__kana { display: none; }
.hero-info__title { margin: 12px 0 28px; font: italic 500 clamp(21px, 1.8vw, 29px)/1.2 var(--font-en); letter-spacing: .04em; color: var(--gold-hi); }
.hero-info__lead { margin: 0 0 14px; font: 700 clamp(18px, 1.5vw, 24px)/1.75 var(--font-ja); }
.hero-info__body { margin: 0 0 30px; max-width: 33em; font: 400 clamp(15px, 1.05vw, 17px)/2 var(--font-ui); color: var(--text-2); }
/* レアリティの選択（カードのすぐ下、中央そろえ） */
.variants { display: grid; justify-items: center; gap: 12px; width: min(100%, 460px); margin: 4px 0 0; text-align: center; }
.variants[hidden] { display: none; }
.variants__label { margin: 0; font: 700 11px/1 var(--font-ui); letter-spacing: .3em; text-transform: uppercase; color: var(--text-3); }
.variants__list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
/* NFTの一言とコレクションへの入口。本文より控えめにし、販売の案内に見せない */
.nft-note { display: grid; justify-items: center; gap: 2px; margin: 4px 0 0; max-width: 34em; font: 500 12.5px/1.75 var(--font-ui); color: var(--text-3); text-wrap: balance; }
:lang(ja) .nft-note > span { word-break: auto-phrase; }
.nft-note .nw { white-space: nowrap; }
.nft-note[hidden] { display: none; }
.nft-note__link { display: inline-flex; align-items: center; gap: 4px; padding: 6px 0; white-space: nowrap; text-decoration: none; font-weight: 700; letter-spacing: .06em; color: var(--gold-hi); border-bottom: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); transition: color .3s, border-color .3s; }
.nft-note__link svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.nft-note__link:hover { color: #fff; border-color: var(--gold-hi); }
.variant { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px 0 12px; border: 1px solid var(--line); border-radius: 999px; background: rgb(255 255 255 / .03); cursor: pointer; font: 700 12px/1 var(--font-ui); letter-spacing: .14em; color: var(--text-2); transition: border-color .4s, background-color .4s, box-shadow .4s, color .4s; }
.variant__gem { width: 16px; height: 18px; clip-path: polygon(50% 0, 100% 36%, 50% 100%, 0 36%); background: linear-gradient(140deg, #fff 0%, var(--c) 42%, color-mix(in srgb, var(--c) 55%, #000) 100%); }
.variant:hover { border-color: color-mix(in srgb, var(--c) 60%, transparent); color: var(--text); }
.variant[aria-checked="true"] { border-color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); box-shadow: 0 0 26px -8px var(--c); color: var(--text); }
.hero-info__links { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 30px; }

.select { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(52px, 8vh, 96px); border-top: 1px solid var(--line); }
.select__tab { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 16px; row-gap: 6px; align-items: center; padding: 24px 18px 22px 0; border: 0; background: none; cursor: pointer; text-align: left; color: var(--text-3); }
.select__tab::before { content: ""; position: absolute; left: 0; right: 18px; top: -1px; height: 2px; background: var(--tab-gem); box-shadow: 0 0 14px var(--tab-gem); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.select__tab img { grid-row: 1 / 3; width: 58px; height: 58px; border-radius: 50%; object-fit: cover; filter: grayscale(.9) brightness(.7); box-shadow: 0 0 0 1px var(--line); transition: filter .5s, box-shadow .5s; }
.select__no { grid-column: 2; grid-row: 1; align-self: end; display: none; }
.select__name { grid-column: 2; grid-row: 1; align-self: end; font: 600 28px/1 var(--font-en); color: var(--text-2); transition: color .4s; }
.select__title { grid-column: 2; grid-row: 2; align-self: start; font: 700 10px/1.4 var(--font-ui); letter-spacing: .24em; text-transform: uppercase; }
.select__tab:hover img { filter: grayscale(.2) brightness(.95); }
.select__tab:hover .select__name { color: var(--text); }
.select__tab[aria-selected="true"]::before { transform: scaleX(1); }
.select__tab[aria-selected="true"] img { filter: none; box-shadow: 0 0 0 2px var(--tab-gem), 0 0 24px -4px var(--tab-gem); }
.select__tab[aria-selected="true"] .select__name { color: var(--text); }
.select__tab[data-tab="luna"] { --tab-gem: var(--sapphire); }
.select__tab[data-tab="jin"] { --tab-gem: var(--crimson); }
.select__tab[data-tab="erindel"] { --tab-gem: var(--verdant); }

/* 人物の切替（View Transitions 対応ブラウザー）。ページ全体はフェードせず、カードと名前だけ動かす */
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-old(hero-card) { animation: vt-card-out .42s var(--ease-io) both; }
::view-transition-new(hero-card) { animation: vt-card-in .8s var(--ease) both; }
::view-transition-old(hero-name) { animation: vt-fade-out .3s ease both; }
::view-transition-new(hero-name) { animation: vt-name-in .7s var(--ease) both; }
@keyframes vt-card-out { to { opacity: 0; transform: translateX(calc(var(--vt-dir, 1) * -48px)) rotate(calc(var(--vt-dir, 1) * -4deg)) scale(.96); } }
@keyframes vt-card-in { from { opacity: 0; transform: translateX(calc(var(--vt-dir, 1) * 70px)) rotate(calc(var(--vt-dir, 1) * 5deg)) scale(.96); } }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-name-in { from { opacity: 0; transform: translateY(24px); } }

/* ---------------------------------------------------------------- 03 映像 */
.films { background: linear-gradient(180deg, var(--ink), #080a13 40%, var(--ink)); }
.section-head--row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 48px; }
.theater { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .42fr); gap: clamp(24px, 3vw, 52px); align-items: start; margin-top: clamp(44px, 7vh, 80px); }
.screen-wrap { position: relative; isolation: isolate; }
.screen__ambient { position: absolute; inset: 4% 3%; z-index: -1; width: 94%; height: 92%; object-fit: cover; filter: blur(72px) saturate(1.7); opacity: .55; transition: opacity .9s; }
.screen { position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 20px; background: #000; box-shadow: 0 60px 110px -46px rgb(0 0 0 / .95), 0 0 0 1px rgb(255 255 255 / .1); }
.screen__media, .screen__poster, .screen__loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.screen__media { overflow: hidden; }
.screen__poster { transition: opacity .55s var(--ease), scale 1.8s var(--ease); }
/* 無音のループ。読み込めたら絵の上に重ねて見せる（読み込むまでと演出OFFでは絵のまま） */
.screen__loop { opacity: 0; transition: opacity .8s var(--ease); }
.screen__media.is-playing .screen__loop { opacity: 1; }
.screen.is-swapping :is(.screen__poster, .screen__loop) { opacity: 0; scale: 1.05; transition: opacity .24s ease, scale .24s ease; }

.screen__hit { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.screen__hit:focus-visible { outline: 2px solid var(--gem); outline-offset: -6px; border-radius: 18px; }
.screen__cursor { position: absolute; left: var(--cx, 50%); top: var(--cy, 50%); z-index: 5; display: grid; place-items: center; align-content: center; gap: 4px; width: 88px; height: 88px; border-radius: 50%; pointer-events: none;
  border: 1px solid rgb(255 255 255 / .55); background: rgb(6 7 12 / .32); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  translate: -50% -50%; scale: .5; opacity: 0; transition: opacity .35s ease, scale .5s var(--ease); }
.screen__cursor svg { width: 20px; height: 20px; fill: #fff; margin-left: 3px; }
.screen__cursor b { font: 700 9px/1 var(--font-ui); letter-spacing: .3em; padding-left: .3em; }
.screen.is-hover .screen__cursor { opacity: 1; scale: 1; }
.screen-wrap:has(.screen.is-swapping) .screen__ambient { opacity: .15; transition-duration: .24s; }
.screen__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgb(4 5 9 / .94) 0%, rgb(4 5 9 / .6) 32%, transparent 60%), linear-gradient(to right, rgb(4 5 9 / .55), transparent 55%); }
.screen__flash { position: absolute; inset: 0; pointer-events: none; transform: translateX(-110%); background: linear-gradient(100deg, transparent 35%, rgb(255 244 220 / .22) 50%, transparent 65%); }
.screen.is-flash .screen__flash { animation: flash 1.1s var(--ease) forwards; }
@keyframes flash { to { transform: translateX(110%); } }
.screen__caption { position: absolute; left: clamp(20px, 3vw, 46px); right: clamp(20px, 3vw, 46px); bottom: clamp(20px, 3vw, 42px); z-index: 3; display: grid; gap: 10px; max-width: 42em; pointer-events: none; }
.screen__caption a, .screen__caption button { pointer-events: auto; }
.screen__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; font: 700 11px/1 var(--font-ui); letter-spacing: .22em; text-transform: uppercase; color: var(--text-2); }
.screen__title { margin: 0; font: 700 clamp(21px, 2.3vw, 38px)/1.35 var(--font-ja); text-shadow: 0 2px 26px rgb(0 0 0 / .7); }
.screen__desc { margin: 0; max-width: 36em; font: 400 clamp(13px, 1vw, 15px)/1.85 var(--font-ui); color: var(--text-2); }
.screen__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 8px; }
.screen__corner { position: absolute; width: 24px; height: 24px; border: solid var(--gold); opacity: .75; pointer-events: none; }
.screen__corner--tl { top: 16px; left: 16px; border-width: 1px 0 0 1px; }
.screen__corner--br { right: 16px; bottom: 16px; border-width: 0 1px 1px 0; }
.reel { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.reel__item { position: relative; width: 100%; display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 16px; align-items: center; padding: 10px; border: 1px solid transparent; border-radius: 16px; background: none; cursor: pointer; text-align: left; color: var(--text-2); transition: background-color .4s, border-color .4s, opacity .4s; }
.reel__thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 9px; box-shadow: 0 0 0 1px rgb(255 255 255 / .08); }
.reel__thumb img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.72) saturate(.8); transition: filter .5s, scale .9s var(--ease); }
.reel__text { display: grid; gap: 4px; min-width: 0; }
.reel__no { font: 600 13px/1 var(--font-en); letter-spacing: .12em; color: var(--text-3); }
.reel__title { font: 700 14px/1.55 var(--font-ja); color: var(--text-2); }
.reel__meta { font: 700 10px/1.4 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.reel__item:hover { background: rgb(255 255 255 / .04); }
.reel__item:hover .reel__thumb img { filter: brightness(.95); scale: 1.05; }
.reel__item[aria-pressed="true"] { border-color: color-mix(in srgb, var(--gold) 38%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 13%, transparent), transparent 85%); }
.reel__item[aria-pressed="true"]::before { content: ""; position: absolute; left: -1px; top: 20%; bottom: 20%; width: 2px; background: var(--gold); box-shadow: 0 0 12px var(--gold); }
.reel__item[aria-pressed="true"] .reel__thumb img { filter: none; }
.reel__item[aria-pressed="true"] .reel__title { color: var(--text); }
.reel__item.is-match .reel__thumb { box-shadow: 0 0 0 2px var(--gem), 0 0 22px -4px var(--gem); }

/* ---------------------------------------------------------------- 04 ゲーム */
.games { background: radial-gradient(50% 50% at 50% 60%, rgb(217 181 108 / .06), transparent 70%), var(--ink); }
.games__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 40px); margin-top: clamp(44px, 7vh, 80px); }
.game { perspective: 1400px; }
.game__link { position: relative; display: grid; height: 100%; overflow: hidden; border-radius: 24px; text-decoration: none; background: var(--night); box-shadow: 0 0 0 1px var(--line);
  transform: rotateX(calc(var(--ry, 0) * 1deg)) rotateY(calc(var(--rx, 0) * 1deg)); transition: transform .7s var(--ease), box-shadow .5s; }
.game__media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.game__media > img:first-child { width: 100%; height: 100%; object-fit: cover; transition: scale 1.4s var(--ease); }
/* ロゴはどちらのカバーにも同じように重ね、ポインターを重ねたときの動きもそろえる（絵は寄り、ロゴは少し浮く） */
.game__logo { position: absolute; left: 50%; top: 7%; z-index: 1; width: 40%; height: auto; translate: -50% 0; filter: drop-shadow(0 10px 22px rgb(0 0 0 / .65)); transition: translate .9s var(--ease), filter .6s ease; }
.game:not(.game--rush) .game__logo { width: 48%; top: 9%; }
.game__link:hover .game__logo { translate: -50% -6px; filter: drop-shadow(0 16px 28px rgb(0 0 0 / .7)) drop-shadow(0 0 18px rgb(246 226 176 / .35)); }
.game__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--night) 0%, transparent 38%); }
.game__body { display: grid; gap: 10px; align-content: start; padding: 6px clamp(22px, 2.4vw, 34px) clamp(26px, 3vw, 36px); }
.game__genre { font: 700 11px/1 var(--font-ui); letter-spacing: .32em; color: var(--gold); }
.game__name { font: 600 clamp(28px, 2.5vw, 40px)/1.1 var(--font-en); }
.game__copy { font: 500 clamp(14px, 1.05vw, 16px)/1.85 var(--font-ui); color: var(--text-2); }
.game__cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; font: 700 13px/1 var(--font-ui); letter-spacing: .12em; color: var(--gold-hi); }
.game__cta svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .45s var(--ease); }
.game__link:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 65%, transparent), 0 34px 90px -36px color-mix(in srgb, var(--gold) 50%, transparent); }
.game__link:hover .game__media > img:first-child { scale: 1.05; }
.game__link:hover .game__cta svg { transform: translateX(4px); }
.game__link:focus-visible { outline-offset: 6px; border-radius: 24px; }

/* ---------------------------------------------------------------- 05 About */
.universe { background: radial-gradient(46% 56% at 72% 32%, rgb(217 181 108 / .08), transparent 70%), var(--ink); }
.universe__intro { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(32px, 5vw, 100px); align-items: center; }
.universe__copy .title-ja { margin-bottom: 16px; }
/* 世界の絵はロゴ入りの1枚絵なので、背景に敷かず額装して見せる（文字を重ねない・引き伸ばさない） */
.universe__poster { position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 22px; box-shadow: 0 54px 110px -44px rgb(0 0 0 / .95), 0 0 0 1px rgb(246 226 176 / .28), 0 0 80px -30px rgb(217 181 108 / .45); }
.universe__poster img { width: 100%; height: 100%; object-fit: cover; scale: 1.04; transition: scale 1.8s var(--ease); }
.universe__poster:hover img { scale: 1.09; }
.universe__poster::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgb(6 7 12 / .6), transparent 34%); }
.universe__poster figcaption { position: absolute; left: 22px; bottom: 18px; z-index: 1; font: 700 10px/1 var(--font-ui); letter-spacing: .32em; color: var(--gold-hi); }
@supports (animation-timeline: view()) {
  html:not(.is-calm) .universe__poster img { animation: drift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  @keyframes drift { from { translate: 0 -3%; } to { translate: 0 3%; } }
}
.universe__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin-top: clamp(48px, 8vh, 96px); }
.u-card { display: grid; gap: 14px; align-content: start; padding: 32px 30px 26px; border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(180deg, rgb(255 255 255 / .05), rgb(255 255 255 / .015)); }
.u-card__eyebrow { margin: 0; font: 700 11px/1 var(--font-ui); letter-spacing: .32em; color: var(--gold); }
.u-card__title { margin: 0; font: 600 clamp(24px, 2vw, 32px)/1.35 var(--font-en); }
.u-card__text { margin: 0 0 4px; font: 400 15px/1.95 var(--font-ui); color: var(--text-2); }
.u-card .link-arrow { justify-self: start; }

/* ---------------------------------------------------------------- 演出OFF・動きを減らす設定 */
.is-calm .hero__side img { transform: none !important; translate: none !important; scale: 1 !important; opacity: 1 !important; transition: filter .3s ease; }
.is-calm .hero__line > span { transform: none !important; opacity: 1 !important; }
.is-calm .hero__eyebrow, .is-calm .hero__logo, .is-calm .hero__lead, .is-calm .hero__cta, .is-calm .hero__pick, .is-calm .hero__scroll { opacity: 1 !important; transition: none !important; }
.is-calm .hero__blade { opacity: 1 !important; transition: none !important; }
.is-calm .hero__blade-spark, .is-calm .hero__dust, .is-calm .hero__light, .is-calm .hero__scroll i, .is-calm .hero__slash { display: none; }
.is-calm .card__tilt, .is-calm .game__link { transform: none !important; }
.is-calm .screen__cursor, .is-calm .screen__loop { display: none; }
.is-calm .orbit__sparks { display: none; }
.is-calm .card__img, .is-calm .screen__poster { transition: opacity .25s ease; scale: 1 !important; }
/* ---------------------------------------------------------------- 画面幅 */
@media (max-width: 1199px) { .chapters { display: none; } }
@media (max-width: 1080px) {
  .hero__copy { padding-inline: calc(var(--pad) + 20px); }
  .hero__catch { font-size: clamp(28px, 4.6vw, 56px); }
  .heroes__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .theater { grid-template-columns: minmax(0, 1fr); }
  .reel { grid-auto-flow: column; grid-auto-columns: minmax(250px, 32%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; }
  .reel > li { scroll-snap-align: start; }
  .reel__item { grid-template-columns: 1fr; gap: 10px; align-content: start; }
  .universe__cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .hero { --tilt: 5; min-height: 600px; }
  .hero__side img { width: 76%; }
  .hero__side--jin img { left: -12%; object-position: 50% 22%; }
  .hero__side--luna img { right: -12%; object-position: 58% 22%; }
  /* スマホでは、ロゴも下の文字のまとまりに入れて、上半分の2人の顔を隠さない */
  .hero__copy { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto auto auto auto auto; padding: calc(var(--header-h) + 14px) 22px 26px; }
  .hero__eyebrow { grid-row: 2; justify-self: start; font-size: 10px; letter-spacing: .34em; }
  .hero__logo { grid-row: 3; justify-self: start; width: min(50vw, 210px); margin: 10px 0 6px -6px; }
  .hero__catch { grid-row: 4; grid-template-columns: minmax(0, 1fr); font-size: clamp(22px, 6.6vw, 32px); }
  :lang(en) .hero__catch { font-size: clamp(30px, 9.4vw, 42px); }
  .hero__line--jin, .hero__line--luna { justify-self: start; text-align: left; margin: 0; }
  .hero__line--luna { padding-left: 1.1em; }
  .hero__lead { grid-column: 1; grid-row: 5; max-width: none; margin-top: 12px; font-size: 14px; line-height: 1.85; }
  .hero__veil { background: linear-gradient(to bottom, rgb(6 7 12 / .7) 0, rgb(6 7 12 / 0) 16%), linear-gradient(to top, rgb(6 7 12 / .97) 0, rgb(6 7 12 / .82) 34%, rgb(6 7 12 / 0) 62%); }
  .hero__cta { grid-column: 1; grid-row: 6; justify-self: stretch; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 18px; }
  .hero__cta .btn { height: 52px; }
  .hero__pick { top: 40%; gap: 10px; }
  .hero__pick--jin { left: 6px; } .hero__pick--luna { right: 6px; }
  .hero__pick-title { display: none; }
  .hero__pick-name { font-size: 16px; }
  .hero__pick::before { height: 30px; }
  .hero__scroll { display: none; }
  .prologue { grid-template-columns: minmax(0, 1fr); }
  .heroes__body { grid-template-columns: minmax(0, 1fr); gap: 36px; margin-top: 28px; }
  .heroes .select { order: 2; margin-top: 30px; }
  .heroes .heroes__body { order: 3; }
  .heroes .section-head { order: 1; }
  .select { border-top: 0; gap: 8px; }
  .select__tab { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; justify-items: center; text-align: center; padding: 10px 4px 14px; border-radius: 14px; background: rgb(255 255 255 / .03); }
  .select__tab::before { left: 22%; right: 22%; top: auto; bottom: 0; }
  .select__tab img { grid-row: 1; width: 52px; height: 52px; }
  .select__name { grid-column: 1; grid-row: 2; font-size: 21px; margin-top: 8px; }
  .select__title { display: none; }
  .card { width: min(76vw, 340px); }
  /* レアリティの3つのボタンを1行に収める */
  .variants__list { gap: 8px; }
  .variant { height: 40px; gap: 8px; padding: 0 13px 0 10px; letter-spacing: .08em; }
  .hero-info { min-height: 0; }
  .hero-info__name { font-size: clamp(58px, 17vw, 76px); }
  .screen-wrap { margin-inline: -20px; }
  .screen { border-radius: 0; }
  .screen__caption { position: static; padding: 20px 20px 4px; max-width: none; }
  .screen__shade { background: linear-gradient(to top, rgb(4 5 9 / .45), transparent 40%); }
  .screen-wrap figure.screen { overflow: visible; aspect-ratio: auto; display: grid; background: none; box-shadow: none; }
  .screen__media { position: relative; aspect-ratio: 16 / 9; }
  .screen__shade, .screen__flash { inset: 0 0 auto 0; aspect-ratio: 16 / 9; height: auto; }
  .screen__corner { display: none; }
  .reel { grid-auto-columns: 72%; }
  .games__grid { grid-template-columns: minmax(0, 1fr); }
  .universe__intro { grid-template-columns: minmax(0, 1fr); }
  .universe__poster { border-radius: 16px; }
}
@media (max-width: 359px) { .hero__line { white-space: normal; } }