/* ============================================
   THE PERSISTENT CANVAS — Global Rules
   全章共通の骨格。Chapter 固有の色は一切持たない。
   ============================================ */

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ol, ul { list-style: none; }
button { font: inherit; background: none; border: 0; color: inherit; cursor: pointer; }

/* ---- Design Tokens (Canvas 共通のみ) ---- */
:root {
    /* 黒多めのための中核 */
    --ink: #0A0A0A;
    --ink-soft: #141414;

    /* Typography */
    --font-display: 'Anton', 'Impact', 'Arial Narrow', sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;

    /* 極端なジャンプ率(3倍以上) */
    --size-body: clamp(0.9rem, 0.9vw + 0.6rem, 1.05rem);
    --size-meta: 0.72rem;
    --size-display: clamp(8rem, 22vw, 22rem); /* 本文に対し ~20x */

    /* Layout */
    --gutter: clamp(1.25rem, 3vw, 2.5rem);
    --nav-top: clamp(1.25rem, 2.5vw, 2rem);

    /* Motion */
    --ease-cut: cubic-bezier(0.85, 0, 0.15, 1);
}

/* ---- Base ---- */
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font-body);
    font-size: var(--size-body);
    font-weight: 300;
    color: #EFEFEF;
    background: var(--ink);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Focus: 角丸・シャドウ禁止の美学に沿った鋭い黄色アウトライン */
:focus { outline: none; }
:focus-visible {
    outline: 2px solid #FFE600;
    outline-offset: 3px;
}

/* ============================================
   FILM GRAIN — SVG noise overlay
   ============================================ */
.film-grain {
    position: fixed;
    inset: -50%;
    width: 200%;
    height: 200%;
    pointer-events: none;
    z-index: 9000;
    opacity: 0.09;
    mix-blend-mode: overlay;
    background-image: 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='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: 220px 220px;
    animation: grainShift 1.1s steps(6) infinite;
    will-change: transform;
}
@keyframes grainShift {
    0%   { transform: translate(0, 0); }
    20%  { transform: translate(-3%, 2%); }
    40%  { transform: translate(2%, -4%); }
    60%  { transform: translate(-2%, 3%); }
    80%  { transform: translate(4%, 1%); }
    100% { transform: translate(0, 0); }
}

/* ============================================
   SMASH CUT — 将来の章間遷移用オーバーレイ
   ============================================ */
.smash-cut {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 9500;
    pointer-events: none;
    opacity: 0;
    transform: scaleY(0);
    transform-origin: center;
}
.smash-cut.is-firing {
    animation: smashCut 520ms var(--ease-cut) forwards;
}
@keyframes smashCut {
    0%   { opacity: 0; transform: scaleY(0); }
    35%  { opacity: 1; transform: scaleY(1); }
    55%  { opacity: 1; transform: scaleY(1); }
    100% { opacity: 0; transform: scaleY(0); transform-origin: top; }
}

/* ============================================
   THE LIST — Global Navigation
   取消線ではなくカラーで状態表現
   ============================================ */
.the-list {
    position: fixed;
    top: var(--nav-top);
    right: var(--gutter);
    z-index: 8000;
}
.the-list ol {
    display: flex;
    flex-direction: column;
    gap: 0.35em;
    text-align: right;
}
.nav-link {
    display: inline-flex;
    align-items: baseline;
    gap: 0.75em;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    color: #555;                              /* 非選択: くすんだ灰 */
    transition: color 140ms var(--ease-cut),
                transform 240ms var(--ease-cut);
    padding: 0.25em 0;
}
.nav-link .nav-num {
    font-family: var(--font-display);
    font-size: 0.9rem;
    letter-spacing: 0;
    color: inherit;
    opacity: 0.65;
}
.nav-link:hover,
.nav-link:focus-visible {
    color: #FFE600;                           /* ホバー: 電撃のイエロー */
    transform: translateX(-4px);
}
.nav-link.is-current {
    color: #FF4FA3;                           /* 現在地: キャンディーピンク */
}
.nav-link.is-current:hover,
.nav-link.is-current:focus-visible {
    color: #FF4FA3;                           /* 現在地はホバーでも変えない */
    transform: none;
    cursor: default;
}
.nav-link.is-locked {
    cursor: not-allowed;
}

/* ============================================
   STAGE MARK (左上の識別子)
   ============================================ */
.stage-mark {
    position: fixed;
    top: var(--nav-top);
    left: var(--gutter);
    z-index: 8000;
    display: inline-flex;
    align-items: center;
    gap: 0.75em;
    font-size: var(--size-meta);
    letter-spacing: 0.24em;
    color: #777;
    text-transform: uppercase;
}
.mark-dot {
    width: 5px;
    height: 5px;
    background: #FFE600;
    display: inline-block;
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .film-grain { animation: none; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}