/* =============================================================
   404 CRISIS — about（遊び方・攻略）
   本体（css/main.css）と同じ色・書体。ゲームは固定配色なのでダーク固定
   ============================================================= */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --bg: #04060c;
    --bg2: #080b14;
    --ink: #eef1f7;
    --dim: rgba(238, 241, 247, 0.7);
    --mute: rgba(238, 241, 247, 0.42);
    --line: rgba(238, 241, 247, 0.14);
    --line2: rgba(238, 241, 247, 0.26);
    --red: #ff2a3c;
    --green: #29ff8e;
    --mono: "VT323", ui-monospace, SFMono-Regular, Menlo, monospace;
    --jp: "DotGothic16", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
    --disp: "Press Start 2P", "DotGothic16", monospace;
    --gut: clamp(16px, 4vw, 40px);
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--jp);
    font-size: 15px;
    line-height: 1.95;
    letter-spacing: 0.04em;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/* 走査線（本体のポストFXの雰囲気だけ） */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 90;
    pointer-events: none;
    background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.16) 0 1px, transparent 1px 3px);
    opacity: 0.5;
}

a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
.nw { display: inline-block; }
.red { color: var(--red); }
.green { color: var(--green); }

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 var(--gut); }
.wrap.narrow { max-width: 820px; }

/* ============ 上部バー ============ */
.topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px var(--gut);
    background: rgba(4, 6, 12, 0.82);
    border-bottom: 1px solid var(--line);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.topbar .brand {
    font-family: var(--mono);
    font-size: 18px;
    letter-spacing: 0.24em;
    text-decoration: none;
    color: var(--ink);
    white-space: nowrap;
}

.topbar .brand b { color: var(--red); font-weight: 400; }

.topbar nav { display: flex; align-items: center; gap: 18px; }

.topbar nav a {
    font-family: var(--mono);
    font-size: 16px;
    letter-spacing: 0.16em;
    color: var(--dim);
    text-decoration: none;
    white-space: nowrap;
}

.topbar nav a:hover { color: var(--ink); }

.topbar nav a.play {
    color: #050608;
    background: var(--ink);
    padding: 3px 14px;
}

.topbar nav a.play:hover { background: var(--green); }

/* ============ ヒーロー ============ */
.hero {
    position: relative;
    min-height: min(92svh, 860px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 70px var(--gut) 90px;
    overflow: hidden;
    isolation: isolate;
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 40%;
    opacity: 0.55;
}

.hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 45%, rgba(4, 6, 12, 0.15), rgba(4, 6, 12, 0.85) 72%),
        linear-gradient(180deg, rgba(4, 6, 12, 0) 60%, var(--bg) 100%);
}

.eyebrow {
    font-family: var(--mono);
    font-size: 16px;
    letter-spacing: 0.28em;
    color: var(--red);
    margin-bottom: 22px;
    animation: blinktext 0.8s steps(2) infinite;
}

@keyframes blinktext { 50% { opacity: 0.35; } }

.logo { line-height: 1; user-select: none; font-weight: 400; }

.logo .l404 {
    position: relative;
    display: block;
    font-family: var(--disp);
    font-size: clamp(64px, 17vw, 150px);
    letter-spacing: 0.04em;
    color: var(--ink);
    text-shadow: 0 0 42px rgba(238, 241, 247, 0.35);
}

.logo .l404::before,
.logo .l404::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.logo .l404::before {
    color: #ff2a6a;
    transform: translate(-4px, 0);
    animation: sliceA 1.4s steps(1) infinite;
    opacity: 0.85;
}

.logo .l404::after {
    color: #21e6ff;
    transform: translate(4px, 0);
    animation: sliceB 1.1s steps(1) infinite;
    opacity: 0.85;
}

@keyframes sliceA {
    0%, 68% { clip-path: inset(100% 0 0 0); transform: translate(-4px, 0); }
    72% { clip-path: inset(12% 0 64% 0); transform: translate(-9px, 2px); }
    78% { clip-path: inset(58% 0 18% 0); transform: translate(-5px, -2px); }
    84% { clip-path: inset(100% 0 0 0); }
}

@keyframes sliceB {
    0%, 60% { clip-path: inset(100% 0 0 0); transform: translate(4px, 0); }
    64% { clip-path: inset(64% 0 8% 0); transform: translate(10px, -2px); }
    72% { clip-path: inset(6% 0 76% 0); transform: translate(6px, 3px); }
    78% { clip-path: inset(100% 0 0 0); }
}

.logo .lcrisis {
    display: block;
    font-family: var(--disp);
    font-size: clamp(17px, 4.4vw, 34px);
    letter-spacing: 0.6em;
    text-indent: 0.6em;
    color: transparent;
    -webkit-text-stroke: 1px var(--ink);
    margin-top: 22px;
}

.hero .catch {
    font-size: clamp(17px, 2.6vw, 22px);
    letter-spacing: 0.12em;
    line-height: 1.8;
    margin-top: 34px;
    text-wrap: balance;
}

.hero .sub {
    max-width: 620px;
    margin: 16px auto 0;
    font-size: 14px;
    color: var(--dim);
}

.cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 34px;
}

.btn {
    display: inline-block;
    font-family: var(--jp);
    font-size: 16px;
    letter-spacing: 0.2em;
    text-indent: 0.2em;
    text-decoration: none;
    padding: 14px 40px;
    border: 1px solid var(--ink);
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.btn.main { color: #050608; background: var(--ink); }
.btn.main:hover { background: var(--green); border-color: var(--green); }
.btn.ghost { color: var(--ink); background: transparent; border-color: var(--line2); }
.btn.ghost:hover { border-color: var(--ink); }

.spec {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 22px;
    margin-top: 30px;
    font-family: var(--mono);
    font-size: 17px;
    letter-spacing: 0.14em;
    color: var(--mute);
    list-style: none;
}

.spec li { white-space: nowrap; }
.spec li::before { content: "■ "; color: var(--green); font-size: 12px; vertical-align: 2px; }

.log {
    max-width: 520px;
    margin: 36px auto 0;
    text-align: left;
    font-family: var(--mono);
    font-size: 17px;
    line-height: 1.5;
    letter-spacing: 0.06em;
    color: var(--red);
    background: rgba(4, 6, 12, 0.6);
    border: 1px solid rgba(255, 42, 60, 0.3);
    padding: 12px 16px;
}

.log .ok { color: var(--green); }
.log .caret::after { content: "▌"; animation: blinktext 0.8s steps(2) infinite; }

/* ============ 節 ============ */
section { padding: 96px 0; position: relative; }
section.band { background: var(--bg2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.sec-tag {
    font-family: var(--mono);
    font-size: 17px;
    letter-spacing: 0.26em;
    color: var(--mute);
    margin-bottom: 10px;
}

.sec-tag span { color: var(--red); margin-right: 0.8em; }

h2 {
    font-weight: 400;
    font-size: clamp(24px, 4vw, 36px);
    line-height: 1.5;
    letter-spacing: 0.08em;
    margin-bottom: 26px;
    text-wrap: balance;
}

h3 {
    font-weight: 400;
    font-size: 18px;
    letter-spacing: 0.08em;
    line-height: 1.6;
    margin-bottom: 8px;
}

p + p { margin-top: 1em; }
.lead { font-size: 16px; color: var(--dim); max-width: 760px; text-wrap: wrap; }
.lead strong, .card strong, td strong { color: var(--ink); font-weight: 400; border-bottom: 1px solid var(--red); }

kbd {
    display: inline-block;
    min-width: 1.9em;
    font-family: var(--mono);
    font-size: 17px;
    line-height: 1.3;
    letter-spacing: 0.06em;
    text-align: center;
    color: var(--ink);
    border: 1px solid var(--line2);
    border-bottom-width: 2px;
    padding: 0 6px;
    margin: 0 2px;
}

/* スクリーンショット */
.shot { margin-top: 34px; }
.shot img { width: 100%; border: 1px solid var(--line2); background: #000; }
.shot figcaption {
    margin-top: 10px;
    font-size: 13px;
    color: var(--mute);
    letter-spacing: 0.06em;
}

.shot figcaption::before { content: "▲ "; color: var(--red); font-family: var(--mono); }

.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.split .shot { margin-top: 0; }
.split.rev > :first-child { order: 2; }

.shots2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 34px; }
.shots2 .shot { margin-top: 0; }

/* カード */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 34px; }
.cards.two { grid-template-columns: repeat(2, 1fr); }

.card {
    border: 1px solid var(--line);
    background: rgba(238, 241, 247, 0.025);
    padding: 22px 22px 20px;
}

.card .no {
    display: block;
    font-family: var(--disp);
    font-size: 12px;
    letter-spacing: 0.1em;
    color: var(--red);
    margin-bottom: 12px;
}

.card p { font-size: 14px; color: var(--dim); }

/* 表 */
.table-wrap { overflow-x: auto; margin-top: 30px; -webkit-overflow-scrolling: touch; }

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    min-width: 520px;
}

th, td {
    text-align: left;
    vertical-align: middle;
    padding: 12px 14px;
    border: 1px solid var(--line);
}

thead th {
    font-family: var(--jp);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.14em;
    color: var(--mute);
    background: rgba(238, 241, 247, 0.03);
}

tbody th { font-weight: 400; color: var(--ink); white-space: nowrap; }
td { color: var(--dim); }
td.num { font-family: var(--mono); font-size: 18px; color: var(--ink); white-space: nowrap; }
.mono { font-family: var(--mono); font-size: 1.15em; letter-spacing: 0.08em; }

/* 画面の見方 */
.hudlist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 30px; margin-top: 26px; }

.hudlist div {
    display: grid;
    grid-template-columns: 9.5em 1fr;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
}

.hudlist dt { font-family: var(--mono); font-size: 17px; letter-spacing: 0.14em; color: var(--ink); }
.hudlist dd { color: var(--dim); }

/* 段階リスト */
.steps { list-style: none; margin-top: 26px; counter-reset: st; }

.steps li {
    display: grid;
    grid-template-columns: 7.4em 1fr;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
    color: var(--dim);
}

.steps li b { font-family: var(--mono); font-size: 17px; font-weight: 400; letter-spacing: 0.12em; color: var(--green); }

/* 敵図鑑 */
.dex { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin-top: 34px; }
.dex .card { display: flex; flex-direction: column; }

.dex .glyph {
    font-family: var(--disp);
    font-size: 30px;
    line-height: 1;
    letter-spacing: 0.06em;
    color: var(--ink);
    text-shadow: 0 0 18px rgba(238, 241, 247, 0.35);
    margin-bottom: 16px;
}

.dex .glyph.elite { color: #ff4455; text-shadow: 0 0 18px rgba(255, 68, 85, 0.45); }
.dex .glyph.boss { font-size: 40px; }

.dex dl { margin-top: auto; padding-top: 14px; display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; font-size: 13px; }
.dex dt { font-family: var(--mono); font-size: 15px; letter-spacing: 0.14em; color: var(--mute); }
.dex dd { color: var(--ink); }

.tag {
    display: inline-block;
    font-family: var(--mono);
    font-size: 14px;
    letter-spacing: 0.14em;
    color: var(--red);
    border: 1px solid rgba(255, 42, 60, 0.5);
    padding: 0 8px;
    margin-left: 8px;
    vertical-align: 3px;
}

/* 用語 */
.terms { margin-top: 30px; border-top: 1px solid var(--line); }
.terms div { display: grid; grid-template-columns: 13em 1fr; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.terms dt { font-family: var(--mono); font-size: 19px; letter-spacing: 0.12em; color: var(--ink); line-height: 1.5; }
.terms dt small { display: block; font-family: var(--jp); font-size: 12px; letter-spacing: 0.06em; color: var(--mute); }
.terms dd { font-size: 14px; color: var(--dim); }

/* ステータスコード */
.codes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 34px; }
.code-card { border: 1px solid var(--line); padding: 24px 22px; background: rgba(238, 241, 247, 0.025); }
.code-card .code { font-family: var(--disp); font-size: 34px; line-height: 1; letter-spacing: 0.04em; }
.code-card .code small { font-size: 12px; margin-left: 10px; letter-spacing: 0.1em; }
.code-card.c404 .code { color: var(--ink); }
.code-card.c410 .code { color: var(--red); }
.code-card.c200 .code { color: var(--green); }
.code-card .ingame { font-family: var(--mono); font-size: 16px; letter-spacing: 0.14em; color: var(--mute); margin: 14px 0 10px; }
.code-card p { font-size: 14px; color: var(--dim); }

/* コツ */
.tips { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 30px; margin-top: 26px; }
.tips li { display: grid; grid-template-columns: 2.6em 1fr; gap: 10px; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--dim); }
.tips li span { font-family: var(--disp); font-size: 12px; color: var(--red); padding-top: 5px; }

/* FAQ */
.faq { margin-top: 26px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }

.faq summary {
    list-style: none;
    cursor: pointer;
    display: grid;
    grid-template-columns: 2em 1fr 1.4em;
    gap: 8px;
    padding: 18px 0;
    font-size: 15px;
    letter-spacing: 0.06em;
}

.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "Q."; font-family: var(--mono); font-size: 19px; color: var(--red); line-height: 1.5; }
.faq summary::after { content: "+"; font-family: var(--mono); font-size: 22px; color: var(--mute); text-align: right; line-height: 1.3; }
.faq details[open] summary::after { content: "−"; }
.faq .ans { padding: 0 0 20px 2.5em; font-size: 14px; color: var(--dim); }
.faq summary:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

/* 最後 */
.final { text-align: center; padding: 110px 0 100px; }
.final .code-big { font-family: var(--disp); font-size: clamp(44px, 10vw, 84px); color: var(--green); text-shadow: 0 0 46px rgba(41, 255, 142, 0.4); line-height: 1; }
.final .code-big span { font-size: 0.32em; margin-left: 0.3em; }
.final p { color: var(--dim); margin-top: 22px; }

.related { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 760px; margin: 50px auto 0; text-align: left; }

.related a {
    display: block;
    text-decoration: none;
    border: 1px solid var(--line);
    padding: 18px 20px;
    transition: border-color 0.2s, background 0.2s;
}

.related a:hover { border-color: var(--ink); background: rgba(238, 241, 247, 0.04); }
.related .rt { font-family: var(--mono); font-size: 18px; letter-spacing: 0.16em; color: var(--ink); }
.related .rd { font-size: 13px; color: var(--mute); margin-top: 4px; }

footer {
    border-top: 1px solid var(--line);
    padding: 30px var(--gut) 40px;
    text-align: center;
    font-size: 12px;
    letter-spacing: 0.1em;
    color: var(--mute);
}

footer a { color: var(--mute); text-decoration: none; border-bottom: 1px solid transparent; }
footer a:hover { color: var(--ink); border-color: var(--ink); }
footer .sep { margin: 0 0.8em; opacity: 0.5; }

a:focus-visible, .btn:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }

/* ============ レスポンシブ ============ */
@media (max-width: 860px) {
    .split, .shots2, .cards, .cards.two, .codes, .tips, .hudlist, .related { grid-template-columns: 1fr; }
    .split { gap: 26px; }
    .split.rev > :first-child { order: 0; }
    section { padding: 72px 0; }
}

@media (max-width: 560px) {
    body { font-size: 14px; }
    .topbar nav a:not(.play) { display: none; }
    .hero { padding-top: 50px; }
    .eyebrow { font-size: 13px; letter-spacing: 0.16em; }
    .spec { font-size: 15px; gap: 6px 14px; }
    .log { font-size: 15px; }
    .btn { padding: 13px 28px; font-size: 15px; }
    .terms div { grid-template-columns: 1fr; gap: 4px; }
    .steps li { grid-template-columns: 1fr; gap: 2px; }
    .hudlist div { grid-template-columns: 8em 1fr; }
    .faq .ans { padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .eyebrow, .log .caret::after, .logo .l404::before, .logo .l404::after { animation: none; }
}