/* Hallmark · macrostructure: Photographic (H6 full-bleed, caption=corner-phrase) · genre: atmospheric(+kinetic) · nav: N3 side-rail · footer: Ft4 dense colophon
 * theme: custom (brand continuity ・KV2から再採色) · vibe: "電気バイオレットの路地、金の看板、未来、グリッチ" · paper: oklch(14% 0.020 295) · accent: oklch(76% 0.15 80)
 * display: DotGothic16 · body: Noto Sans JP · outlier: Shippori Mincho B1 (詩的リード行のみ・2スロット)
 * enrichment: user-supplied key visual KV2 (テスト版・納品版差し替え予定) · studied: no · context: user-provided
 * motion: rich-mode v3（ユーザー明示要望「ガンガン動く」）= boot glitch / top ticker / waveform / neon dust / portal breathe /
 *         pointer-drift / RGB-split glitch hover — すべて transform+opacity 基本・named easing・reduced-motion で全停止
 * 前回(Map/Diagram · N9 · Ft2)からの回転: 構造/ナビ/フッター全て変更 ✓
 * contrast: pass (46–50) · slop: pass (51–55) · honest: pass (56) · chrome: pass (57) · tokens: pass (58)
 * responsive: pass (59) · icons: pass (60) · mobile: pass (36, 61–69)
 * Hallmark · pre-emit critique: P5 H5 E5 S5 R4 V5
 */

/* ============ base ============ */
* { box-sizing: border-box; margin: 0; }

html { overflow-x: clip; height: 100%; }
body { overflow-x: clip; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  grid-template-rows: auto minmax(20rem, 1fr) auto auto;
  grid-template-areas:
    "ticker ticker"
    "rail   stage"
    "rail   board"
    "rail   colophon";
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  inset-inline-start: var(--space-md);
  inset-block-start: var(--space-md);
  z-index: var(--z-toast);
  background: var(--color-paper-3);
  color: var(--color-ink);
  padding: var(--space-xs) var(--space-md);
  clip-path: var(--px-cut);
  text-decoration: none;
  transform: translateY(-300%);
}
.skip-link:focus-visible { transform: none; }

/* ============ ブート演出（カーテンはJSが生成・JS無効時は出ない） ============ */
.curtain {
  position: fixed;
  inset: 0;
  z-index: var(--z-curtain);
  display: grid;
  place-items: center;
  background: var(--color-night-deep);
  transition: opacity 320ms var(--ease-in);
}
.curtain.is-lift { opacity: 0; pointer-events: none; }

.curtain__line {
  font-family: var(--font-display);
  font-size: var(--text-md);
  letter-spacing: 0.18em;
  color: var(--color-accent);
}

.curtain__caret {
  display: inline-block;
  width: 0.6em;
  height: 1.05em;
  margin-inline-start: var(--space-3xs);
  vertical-align: text-bottom;
  background: var(--color-accent);
  animation: caret-blink 1s steps(2, start) infinite;
}
@keyframes caret-blink { 50% { opacity: 0; } }

/* カーテンが上がるまで舞台は暗転（クラスはJSが管理） */
html.pre-boot .stage__bg,
html.pre-boot .board__item,
html.pre-boot .art-fx,
html.pre-boot .art-fx i,
html.pre-boot .ch {
  animation: none;
  opacity: 0;
}

/* ============ ティッカー（上端の電光ニュース帯） ============ */
.ticker {
  grid-area: ticker;
  overflow: hidden;
  height: 2rem;
  display: flex;
  align-items: center;
  border-bottom: var(--rule-hairline);
}

.ticker__track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  animation: ticker-scroll 38s linear infinite;
}
/* hoverまたはタップ（JSが .is-paused をトグル）で一時停止 */
.ticker:hover .ticker__track,
.ticker.is-paused .ticker__track { animation-play-state: paused; }

.ticker__seg {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  color: var(--color-accent);
  opacity: 0.75;
  padding-inline-end: var(--space-xl);
}

@keyframes ticker-scroll {
  to { transform: translateX(-50%); }
}

/* ============ サイドレール (N3) ============ */
.rail {
  grid-area: rail;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  padding-block: var(--space-lg) var(--space-md);
  border-inline-end: var(--rule-hairline);
  position: relative;
  z-index: var(--z-raised);
}

.rail__brand {
  writing-mode: vertical-rl;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-brand);
  letter-spacing: 0.18em;
  line-height: 1;
  color: var(--color-ink);
  user-select: none;
}

.rail__sub {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  letter-spacing: 0.3em;
  color: var(--color-muted);
  margin-block-start: var(--space-sm);
}

.rail__status {
  writing-mode: vertical-rl;
  font-size: var(--text-xs);
  letter-spacing: 0.26em;
  color: var(--color-muted);
}

.rail__dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-block-end: var(--space-xs);
  background: var(--color-accent);
  border-radius: 50%;
}
@keyframes dot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: no-preference) {
  .rail__dot { animation: dot-pulse 2.4s var(--ease-in-out) infinite; }
}
html.force-motion .rail__dot { animation: dot-pulse 2.4s var(--ease-in-out) infinite; }

.rail__cta {
  margin-block-start: auto;
  writing-mode: vertical-rl;
  font-size: var(--text-sm);
  letter-spacing: 0.22em;
  color: var(--color-ink-2);
  background: var(--color-paper-2);
  border: 1px solid var(--color-rule);
  clip-path: var(--px-cut);
  padding: var(--space-md) var(--space-xs);
  min-width: 44px;
  white-space: nowrap;
  transition: color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out);
}
.rail__cta:hover { color: var(--color-accent); border-color: var(--color-accent); }
.rail__cta:active { transform: translateY(1px); }

/* ============ ステージ（ポスター＝Photographic fold） ============ */
.stage {
  grid-area: stage;
  position: relative;
  overflow: hidden;
  min-height: 0;
  isolation: isolate; /* art-fxのブレンド合成をステージ内に閉じる */
}

/* アートボックス: object-fit cover と同じ見え方を「実寸の箱」で再現する。
 * 中のFXレイヤーを%座標で置くと、どの画面サイズでも絵の同じ場所に重なる */
.stage__art {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -42%);
  aspect-ratio: 1672 / 941;
  min-width: 100%;
  min-height: 100%;
}

.stage__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: kv-in 560ms var(--ease-out) forwards;
}
@keyframes kv-in { to { opacity: 1; } }

/* ブート直後のグリッチ・スライス出現（JSがクラスを一時付与） */
@keyframes kv-glitch {
  0%   { opacity: 1; clip-path: inset(0 0 66% 0); transform: translateX(-16px); }
  20%  { opacity: 1; clip-path: inset(33% 0 33% 0); transform: translateX(12px); }
  40%  { opacity: 1; clip-path: inset(66% 0 0 0); transform: translateX(-8px); }
  60%  { opacity: 1; clip-path: inset(18% 0 42% 0); transform: translateX(6px); }
  80%  { opacity: 1; clip-path: inset(0 0 0 0); transform: translateX(-3px); }
  100% { opacity: 1; clip-path: inset(0); transform: none; }
}
.stage__bg.glitch-in { animation: kv-glitch 460ms steps(1, end) both; }

/* ポータルの呼吸（絵の中央の光のゲートに重ねる） */
.stage__portal {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 45%;
  width: 22%;
  aspect-ratio: 1;
  translate: -50% -50%;
  background: radial-gradient(closest-side, var(--glow-portal), transparent 70%);
  mix-blend-mode: screen;
  opacity: 0.5;
  pointer-events: none;
}
.stage__portal::after {
  content: "";
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: radial-gradient(closest-side, transparent 55%, var(--glow-portal) 72%, transparent 88%);
  opacity: 0;
}

@keyframes portal-breathe {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.7; }
}
@keyframes portal-ripple {
  0%   { opacity: 0; transform: scale(0.55); }
  25%  { opacity: 0.5; }
  100% { opacity: 0; transform: scale(1.25); }
}
@media (prefers-reduced-motion: no-preference) {
  .stage__portal { animation: portal-breathe 5.5s var(--ease-in-out) infinite; }
  .stage__portal::after { animation: portal-ripple 4.2s var(--ease-out) 1.6s infinite; }
}
html.force-motion .stage__portal { animation: portal-breathe 5.5s var(--ease-in-out) infinite; }
html.force-motion .stage__portal::after { animation: portal-ripple 4.2s var(--ease-out) 1.6s infinite; }

.stage__dust {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ---- 絵の中の光源を生かす照明レイヤー ----
 * glow層(screen)=光を足す / dim層(multiply)=一瞬消灯させる(見えるフリッカーの主役)
 * 動かすのは opacity / transform のみ。タイミングはネオンらしく steps 多用 */
.art-fx {
  position: absolute;
  pointer-events: none;
}

/* === 路地全体の電圧ゆらぎ(ごく浅い明滅が全体を生かす) === */
.art-fx--power {
  inset: 0;
  background: var(--color-night-deep);
  mix-blend-mode: multiply;
  opacity: 0;
  animation: fx-power 9s steps(1, end) infinite;
}
@keyframes fx-power {
  0%, 100% { opacity: 0; }
  37%      { opacity: 0.1; }
  38%      { opacity: 0; }
  39%      { opacity: 0.14; }
  41%      { opacity: 0; }
  73%      { opacity: 0.08; }
  75%      { opacity: 0; }
}

/* === SAKISO看板(金) === */
.art-fx--sakiso {
  left: 70.5%; top: 17%;
  width: 20.5%; height: 72%;
  background: radial-gradient(ellipse 58% 48% at 50% 50%, oklch(82% 0.15 80 / 0.8), transparent 72%);
  filter: blur(8px);
  rotate: 2deg;
  mix-blend-mode: screen;
  opacity: 0.15;
  animation: fx-sakiso-glow 7.5s var(--ease-in-out) infinite;
}
@keyframes fx-sakiso-glow {
  0%, 100% { opacity: 0.15; transform: scale(1); }
  50%      { opacity: 0.75; transform: scale(1.03); }
}
/* 消灯フリッカー: 数秒ごとに「ジ、ジジッ」と暗転する */
.art-fx--sakiso-dim {
  left: 71.5%; top: 19%;
  width: 18.5%; height: 68%;
  background: radial-gradient(ellipse 62% 50% at 50% 50%, oklch(20% 0.06 80 / 0.95), transparent 78%);
  filter: blur(4px);
  rotate: 2deg;
  mix-blend-mode: multiply;
  opacity: 0;
  animation: fx-sakiso-dim 7.5s steps(1, end) infinite;
}
@keyframes fx-sakiso-dim {
  0%, 100% { opacity: 0; }
  62%      { opacity: 0.75; }
  63.2%    { opacity: 0; }
  64.6%    { opacity: 0.85; }
  66%      { opacity: 0.15; }
  67%      { opacity: 0.6; }
  68.5%    { opacity: 0; }
}

/* === ROJIURA HACK プレート === */
.art-fx--rojiura {
  left: 71.5%; top: 11%;
  width: 18.5%; height: 10%;
  background: radial-gradient(ellipse 65% 70% at 50% 50%, oklch(75% 0.16 50 / 0.7), transparent 80%);
  filter: blur(6px);
  rotate: 2deg;
  mix-blend-mode: screen;
  opacity: 0.1;
  animation: fx-breathe-strong 6s var(--ease-in-out) 1.2s infinite;
}

/* === 「未来はここにある」(左・ピンク) === */
.art-fx--mirai {
  left: 5.5%; top: 5%;
  width: 9.5%; height: 37%;
  background: radial-gradient(ellipse 62% 52% at 50% 50%, oklch(74% 0.21 340 / 0.8), transparent 76%);
  filter: blur(7px);
  mix-blend-mode: screen;
  opacity: 0.12;
  animation: fx-breathe-strong 5.2s var(--ease-in-out) 0.6s infinite;
}
.art-fx--mirai-dim {
  left: 6.5%; top: 6%;
  width: 7.5%; height: 35%;
  background: radial-gradient(ellipse 70% 55% at 50% 50%, oklch(22% 0.08 340 / 0.95), transparent 80%);
  filter: blur(3px);
  mix-blend-mode: multiply;
  opacity: 0;
  animation: fx-mirai-dim 11s steps(1, end) 2s infinite;
}
@keyframes fx-mirai-dim {
  0%, 100% { opacity: 0; }
  28%      { opacity: 0.8; }
  29.5%    { opacity: 0; }
  31%      { opacity: 0.9; }
  33%      { opacity: 0; }
  34%      { opacity: 0.5; }
  35.5%    { opacity: 0; }
}

/* === 右壁のネオン群 === */
.art-fx--neon-r {
  left: 58%; top: 2%;
  width: 14%; height: 30%;
  background: radial-gradient(ellipse 60% 60% at 50% 40%, oklch(72% 0.22 320 / 0.75), transparent 78%);
  filter: blur(9px);
  mix-blend-mode: screen;
  opacity: 0.12;
  animation: fx-breathe-strong 4.6s var(--ease-in-out) 0.3s infinite;
}
.art-fx--neon-r-dim {
  left: 60%; top: 3%;
  width: 11%; height: 26%;
  background: radial-gradient(ellipse 65% 60% at 50% 40%, oklch(22% 0.08 320 / 0.9), transparent 80%);
  filter: blur(4px);
  mix-blend-mode: multiply;
  opacity: 0;
  animation: fx-neon-r-dim 13s steps(1, end) 5s infinite;
}
@keyframes fx-neon-r-dim {
  0%, 100% { opacity: 0; }
  46%      { opacity: 0.7; }
  47.5%    { opacity: 0; }
  49%      { opacity: 0.8; }
  51%      { opacity: 0; }
}

/* === 左壁のネオン群(上部) === */
.art-fx--neon-l {
  left: 0%; top: 0%;
  width: 15%; height: 32%;
  background: radial-gradient(ellipse 70% 60% at 40% 40%, oklch(72% 0.17 300 / 0.65), transparent 78%);
  filter: blur(10px);
  mix-blend-mode: screen;
  opacity: 0.1;
  animation: fx-breathe-strong 7.8s var(--ease-in-out) 3s infinite;
}

/* === 立て看板(あたたかい白) === */
.art-fx--board {
  left: 51%; top: 61%;
  width: 15%; height: 28%;
  background: radial-gradient(ellipse 52% 52% at 50% 45%, oklch(88% 0.07 80 / 0.55), transparent 76%);
  filter: blur(7px);
  mix-blend-mode: screen;
  opacity: 0.1;
  animation: fx-breathe-strong 5.6s var(--ease-in-out) 1.8s infinite;
}

/* 共通: はっきり見える呼吸(振幅大+鼓動) */
@keyframes fx-breathe-strong {
  0%, 100% { opacity: 0.1; transform: scale(1); }
  50%      { opacity: 0.7; transform: scale(1.04); }
}

/* === 水たまり: 下へ流れる揺らめき === */
.art-fx--puddle {
  left: 12%; top: 74%;
  width: 76%; height: 26%;
  overflow: hidden;
  mix-blend-mode: screen;
  opacity: 0.5;
}
.art-fx--puddle i {
  position: absolute;
  inset: -100% 0 0 0;
  background: repeating-linear-gradient(
    175deg,
    transparent 0 6%,
    oklch(78% 0.17 320 / 0.18) 8% 10%,
    transparent 12% 22%
  );
  filter: blur(2px);
  animation: fx-puddle-flow 9s linear infinite;
}
@keyframes fx-puddle-flow {
  to { transform: translateY(50%); }
}

/* === 壁の波形: 流れる光の帯 === */
.art-fx--wave {
  overflow: hidden;
  mix-blend-mode: screen;
  opacity: 0.55;
}
.art-fx--wave i {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 35%, oklch(88% 0.1 320 / 0.45) 50%, transparent 65%);
  transform: translateX(-100%);
  animation: fx-wave 5.5s linear infinite;
}
.art-fx--wave-l { left: 0%; top: 51%; width: 37%; height: 13%; }
.art-fx--wave-r { left: 62%; top: 52%; width: 27%; height: 13%; }
.art-fx--wave-r i { animation-delay: 2.2s; }
@keyframes fx-wave {
  to { transform: translateX(100%); }
}

/* === ゲートの渦(回転・transformのみ) === */
.art-fx--swirl {
  left: 50%; top: 45%;
  width: 17%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg 40deg, oklch(85% 0.09 300 / 0.5) 55deg,
    transparent 70deg 160deg, oklch(80% 0.12 320 / 0.4) 175deg,
    transparent 190deg 300deg, oklch(88% 0.06 280 / 0.45) 315deg,
    transparent 330deg 360deg
  );
  -webkit-mask-image: radial-gradient(closest-side, transparent 30%, black 55%, transparent 78%);
  mask-image: radial-gradient(closest-side, transparent 30%, black 55%, transparent 78%);
  filter: blur(3px);
  mix-blend-mode: screen;
  opacity: 0.55;
  animation: fx-swirl 16s linear infinite;
}
@keyframes fx-swirl {
  to { transform: rotate(360deg); }
}

.stage__scrim {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 24%;
  background: linear-gradient(to top, var(--color-scrim), transparent);
  pointer-events: none;
}

.stage__wave {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  width: 100%;
  height: 56px;
  pointer-events: none;
}

/* ---- 詩の一行（明朝・一文字ずつ灯る） ---- */
.stage__phrase {
  position: absolute;
  inset-inline-start: var(--page-gutter);
  inset-block-end: calc(56px + var(--space-md));
  font-family: var(--font-poetry);
  font-weight: 700;
  font-size: var(--text-phrase);
  letter-spacing: 0.26em;
  color: var(--color-ink);
  text-shadow: 0 1px 10px var(--shadow-night);
}

.ch {
  display: inline-block;
  opacity: 0;
  animation: ch-in 460ms var(--ease-out) forwards;
}
@keyframes ch-in {
  from { opacity: 0; transform: translateY(0.35em); }
  to   { opacity: 1; transform: none; }
}
.phrase__chars .ch:nth-child(1)  { animation-delay: 1600ms; }
.phrase__chars .ch:nth-child(2)  { animation-delay: 1645ms; }
.phrase__chars .ch:nth-child(3)  { animation-delay: 1690ms; }
.phrase__chars .ch:nth-child(4)  { animation-delay: 1735ms; }
.phrase__chars .ch:nth-child(5)  { animation-delay: 1780ms; }
.phrase__chars .ch:nth-child(6)  { animation-delay: 1825ms; }
.phrase__chars .ch:nth-child(7)  { animation-delay: 1870ms; }
.phrase__chars .ch:nth-child(8)  { animation-delay: 1915ms; }
.phrase__chars .ch:nth-child(9)  { animation-delay: 1960ms; }
.phrase__chars .ch:nth-child(10) { animation-delay: 2005ms; }
.phrase__chars .ch:nth-child(11) { animation-delay: 2050ms; }
.phrase__chars .ch:nth-child(12) { animation-delay: 2095ms; }

/* ============ 電光掲示板メニュー ============ */
.board {
  grid-area: board;
  display: flex;
  border-top: var(--rule-hairline);
  background: var(--color-paper-2);
  position: relative;
  z-index: var(--z-raised);
}

.board__item {
  flex: 1;
  min-width: 0; /* 文字拡大時のあふれ防止 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3xs);
  min-height: 4.5rem;
  padding: var(--space-sm) var(--space-xs);
  opacity: 0;
  animation: item-rise 420ms var(--ease-out) forwards;
  transition: background-color var(--dur-short) var(--ease-out);
}
.board__item + .board__item { border-inline-start: var(--rule-hairline); }

.board__item:nth-child(1) { animation-delay: 950ms; }
.board__item:nth-child(2) { animation-delay: 1020ms; }
.board__item:nth-child(3) { animation-delay: 1090ms; }
.board__item:nth-child(4) { animation-delay: 1160ms; }
.board__item:nth-child(5) { animation-delay: 1230ms; }

@keyframes item-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.board__item:active { transform: translateY(1px); }

@media (hover: hover) and (pointer: fine) {
  .board__item:hover { background: var(--color-paper-3); }
}
.board__item:focus-visible { background: var(--color-paper-3); }

.b-en {
  position: relative;
  font-family: var(--font-display);
  font-size: clamp(1rem, 0.55rem + 0.9vw, var(--text-lg)); /* 狭幅・拡大時も1行を守る */
  letter-spacing: 0.14em;
  line-height: 1.1;
  color: var(--color-ink);
  white-space: nowrap;
}

.b-ja {
  font-size: var(--text-xs);
  letter-spacing: 0.2em;
  color: var(--color-muted);
  white-space: nowrap;
}

.board__item--fc .b-en { color: var(--color-accent-2); }

/* RGBスプリット・グリッチ（金とマゼンタの分版＝ブランド2色） */
.b-en::before,
.b-en::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.b-en::before { color: var(--color-accent-2); }
.b-en::after  { color: var(--color-accent); }

@keyframes glitch-a {
  0%   { opacity: 0.8; transform: translate(-2px, 1px); }
  50%  { opacity: 0.5; transform: translate(2px, -1px); }
  100% { opacity: 0; transform: none; }
}
@keyframes glitch-b {
  0%   { opacity: 0.8; transform: translate(2px, -1px); }
  50%  { opacity: 0.5; transform: translate(-2px, 1px); }
  100% { opacity: 0; transform: none; }
}

@media (hover: hover) and (pointer: fine) {
  .board__item:hover .b-en::before { animation: glitch-a 200ms steps(2) 1; }
  .board__item:hover .b-en::after  { animation: glitch-b 200ms steps(2) 1; }
}
.board__item:focus-visible .b-en::before { animation: glitch-a 200ms steps(2) 1; }
.board__item:focus-visible .b-en::after  { animation: glitch-b 200ms steps(2) 1; }
.board__item.is-glitch .b-en::before { animation: glitch-a 220ms steps(3) 1; }
.board__item.is-glitch .b-en::after  { animation: glitch-b 220ms steps(3) 1; }

/* ============ はっくモード（隠しコマンド） ============ */
.hack-on .stage__bg { animation: kv-glitch 460ms steps(1, end) 2; filter: saturate(1.3) brightness(1.08); }
.hack-on .art-fx { animation: none; opacity: 0.7; }
.hack-on .art-fx--power,
.hack-on .art-fx--sakiso-dim,
.hack-on .art-fx--mirai-dim,
.hack-on .art-fx--neon-r-dim { opacity: 0; }
.hack-on .board__item .b-en::before { animation: glitch-a 220ms steps(3) 3; }
.hack-on .board__item .b-en::after  { animation: glitch-b 220ms steps(3) 3; }

.hack-toast {
  position: fixed;
  inset-inline: 0;
  inset-block-end: max(var(--space-2xl), env(safe-area-inset-bottom));
  margin-inline: auto;
  width: fit-content;
  z-index: var(--z-toast);
  font-family: var(--font-display);
  font-size: var(--text-md);
  letter-spacing: 0.2em;
  color: var(--color-accent);
  background: var(--color-toast-bg);
  border: 1px solid var(--color-accent);
  clip-path: var(--px-cut);
  padding: var(--space-sm) var(--space-lg);
  animation: kv-in var(--dur-long) var(--ease-out);
}

/* ============ panels (dialog) ============ */
.panel {
  /* `* { margin: 0 }` で消える UA の中央寄せを戻す */
  margin: auto;
  border: 1px solid var(--color-rule);
  clip-path: var(--px-cut);
  background: var(--color-paper-3);
  color: var(--color-ink);
  padding: 0;
  width: min(92vw, 36rem);
  max-height: min(82dvh, 42rem);
}

.panel[open] { animation: panel-in var(--dur-long) var(--ease-out); }
.panel.is-closing { animation: panel-out 170ms var(--ease-in) forwards; }

@keyframes panel-in {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes panel-out {
  to { opacity: 0; transform: scale(0.98); }
}

.panel::backdrop {
  background: var(--color-backdrop);
  -webkit-backdrop-filter: blur(5px) saturate(1.05);
  backdrop-filter: blur(5px) saturate(1.05);
}

.panel[open] .panel__head { animation: rise 240ms var(--ease-out) 40ms backwards; }
.panel[open] .panel__body { animation: rise 300ms var(--ease-out) 100ms backwards; }
@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-xl) var(--space-sm);
  border-bottom: var(--rule-hairline);
}

.panel__title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.26em;
  color: var(--color-muted);
}

.panel__title .panel__en {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-xl);
  letter-spacing: 0.1em;
  line-height: 1.15;
  color: var(--color-ink);
  margin-bottom: var(--space-3xs);
  overflow-wrap: anywhere;
  min-width: 0;
}

.panel__close {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-rule);
  clip-path: var(--px-cut);
  color: var(--color-ink-2);
  transition: color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out);
}
.panel__close:hover { color: var(--color-accent); border-color: var(--color-accent); }
.panel__close:active { transform: translateY(1px); }
.panel__close svg { width: 14px; height: 14px; }

.panel__body {
  padding: var(--space-lg) var(--space-xl) var(--space-xl);
  overflow-y: auto;
  max-height: calc(min(82dvh, 42rem) - 7rem);
}

.panel__body > p + p { margin-top: var(--space-md); }

/* 詩的リード行（明朝・このサイトの「声」） */
.panel__lead {
  font-family: var(--font-poetry);
  font-weight: 400;
  font-size: var(--text-lg);
  letter-spacing: 0.14em;
  line-height: 1.4;
  color: var(--color-ink);
  margin-bottom: var(--space-lg);
}

.panel__note {
  margin-top: var(--space-lg);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

@media (max-width: 40rem) {
  .panel__lead { font-size: var(--text-md); letter-spacing: 0.12em; }
}

/* ---- NEWS リスト（日付の段組み＋罫線） ---- */
.news { list-style: none; padding: 0; }

.news__item {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: var(--space-md);
  padding-block: var(--space-md);
  border-top: var(--rule-hairline);
}
.news__item:first-child { border-top: 0; padding-top: 0; }

.news__date {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  color: var(--color-accent);
  padding-top: var(--space-3xs);
}

.news__title {
  font-size: var(--text-md);
  font-weight: 700;
  line-height: 1.45;
}

.news__body {
  margin-top: var(--space-2xs);
  color: var(--color-ink-2);
  max-width: 65ch;
}

@media (max-width: 40rem) {
  .news__item { grid-template-columns: 1fr; gap: var(--space-2xs); }
}

/* ---- 準備中の行（正直なプレースホルダー） ---- */
.pending {
  list-style: none;
  padding: 0;
  margin-top: var(--space-md);
  display: grid;
  gap: var(--space-xs);
}

.pending li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-paper-2);
  clip-path: var(--px-cut);
  color: var(--color-ink-2);
}

.pending .tag {
  flex: none;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  color: var(--color-muted);
  border: 1px solid var(--color-rule);
  clip-path: var(--px-cut);
  padding: var(--space-3xs) var(--space-xs);
  white-space: nowrap;
}

/* ============ コロフォン (Ft4) ============ */
.colophon {
  grid-area: colophon;
  border-top: var(--rule-hairline);
  padding: var(--space-sm) var(--page-gutter) max(var(--space-sm), env(safe-area-inset-bottom));
  font-family: var(--font-display);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  line-height: 2;
  color: var(--color-muted);
}

.colophon .sep { margin-inline: var(--space-xs); color: var(--color-rule); }

.foot-link {
  font-family: inherit;
  color: var(--color-ink-2);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
  transition: color var(--dur-short) var(--ease-out);
}
.foot-link:hover { color: var(--color-accent); }

/* デスクトップ＋マウス環境: ドリフトの余白として背景を少し拡大しておく */
@media (min-width: 60rem) and (pointer: fine) {
  .stage__art { scale: 1.04; }
}

/* ============ モバイル（~60rem 未満） ============ */
@media (max-width: 59.999rem) {
  body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(17rem, 46dvh) auto auto;
    grid-template-areas:
      "rail"
      "ticker"
      "stage"
      "board"
      "colophon";
  }

  .rail {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-sm) var(--page-gutter);
    border-inline-end: 0;
    border-bottom: var(--rule-hairline);
  }

  .rail__brand,
  .rail__status,
  .rail__cta { writing-mode: horizontal-tb; }

  .rail__brand { letter-spacing: 0.1em; }
  .rail__sub { display: block; margin-block-start: var(--space-3xs); letter-spacing: 0.24em; }

  .rail__status { display: none; }

  .rail__cta {
    margin-block-start: 0;
    padding: var(--space-xs) var(--space-md);
    min-height: 44px;
    min-width: 0;
  }

  .ticker { border-bottom: var(--rule-hairline); }

  .stage__phrase {
    inset-block-end: calc(44px + var(--space-sm));
    letter-spacing: 0.18em;
  }

  .stage__wave { height: 44px; }

  .board {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .board__item { min-height: 56px; }
  .board__item + .board__item { border-inline-start: 0; }
  .board__item:nth-child(even) { border-inline-start: var(--rule-hairline); }
  .board__item:nth-child(n + 3) { border-top: var(--rule-hairline); }

  .board__item--fc { grid-column: 1 / -1; border-inline-start: 0; }

  .b-en { font-size: var(--text-md); }

  /* 画角外・低優先のFXは省く（電池配慮） */
  .art-fx--neon-l,
  .art-fx--puddle { display: none; }
}

/* ============ 演出の静止 ============
 * OSの省モーション設定（ただし html.force-motion=本人が演出ONを選択 なら尊重して動かす）
 * html.calm-motion = 本人が演出OFFを選択（OS設定に関係なく静止） */
@media (prefers-reduced-motion: reduce) {
  html:not(.force-motion) *,
  html:not(.force-motion) *::before,
  html:not(.force-motion) *::after {
    animation-duration: 150ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 100ms !important;
  }
  html:not(.force-motion) .stage__bg,
  html:not(.force-motion) .board__item,
  html:not(.force-motion) .ch { animation: kv-in 150ms linear forwards !important; }
  html:not(.force-motion) .stage__art { scale: none; }
  html:not(.force-motion) .art-fx { animation: none !important; opacity: 0.3; }
  html:not(.force-motion) .art-fx i { animation: none !important; opacity: 0; }
  html:not(.force-motion) .art-fx--power,
  html:not(.force-motion) .art-fx--swirl,
  html:not(.force-motion) .art-fx--sakiso-dim,
  html:not(.force-motion) .art-fx--mirai-dim,
  html:not(.force-motion) .art-fx--neon-r-dim { opacity: 0; }
  html:not(.force-motion) .stage__portal::after { animation: none !important; opacity: 0; }
  html:not(.force-motion) .ticker__track { animation: none !important; transform: none; }
  html:not(.force-motion) .stage__portal { animation: none !important; opacity: 0.4; }
}

html.calm-motion *,
html.calm-motion *::before,
html.calm-motion *::after {
  animation-duration: 150ms !important;
  animation-delay: 0ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 100ms !important;
}
html.calm-motion .stage__bg,
html.calm-motion .board__item,
html.calm-motion .ch { animation: kv-in 150ms linear forwards !important; }
html.calm-motion .stage__art { scale: none; }
html.calm-motion .art-fx { animation: none !important; opacity: 0.3; }
html.calm-motion .art-fx i { animation: none !important; opacity: 0; }
html.calm-motion .art-fx--power,
html.calm-motion .art-fx--swirl,
html.calm-motion .art-fx--sakiso-dim,
html.calm-motion .art-fx--mirai-dim,
html.calm-motion .art-fx--neon-r-dim { opacity: 0; }
html.calm-motion .stage__portal::after { animation: none !important; opacity: 0; }
html.calm-motion .ticker__track { animation: none !important; transform: none; }
html.calm-motion .stage__portal { animation: none !important; opacity: 0.4; }