/* =========================================================== CHARACTER DETAIL — shared template for the 9-unit dossier. Faction color is set via [data-faction="brs"|"fw"] on . =========================================================== */ [data-faction="brs"] { --acc: var(--brs-primary); --acc-2: var(--brs-secondary); --acc-line: var(--brs-line); --acc-glow: rgba(217, 70, 239, 0.55); --acc-soft: rgba(217, 70, 239, 0.08); --stamp-color: var(--danger); --stamp-label: 'DANGER'; } [data-faction="fw"] { --acc: var(--fw-primary); --acc-2: var(--fw-secondary); --acc-line: var(--fw-line); --acc-glow: rgba(6, 182, 212, 0.55); --acc-soft: rgba(6, 182, 212, 0.08); --stamp-color: var(--fw-primary); --stamp-label: 'HERESY'; } html, body { background: #050507; } body { min-height: 100vh; background: radial-gradient(ellipse 50% 30% at 50% 0%, var(--acc-soft), transparent 60%), radial-gradient(ellipse 40% 30% at 0% 50%, var(--acc-soft), transparent 60%), var(--bg-primary); background-attachment: fixed; } /* global texture */ .global-fx { position: fixed; inset: 0; pointer-events: none; z-index: 200; } .global-fx .scanlines { position: absolute; inset: 0; background-image: repeating-linear-gradient(to bottom, rgba(255,255,255,0.03) 0px, rgba(255,255,255,0.03) 1px, transparent 1px, transparent 3px); mix-blend-mode: overlay; } .global-fx .noise { position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,"); opacity: 0.06; mix-blend-mode: overlay; } .shell { position: relative; max-width: 1480px; margin: 0 auto; padding: 22px 32px 80px; z-index: 1; } /* ===================== TOP HUD ===================== */ .doc-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-bottom: 1px solid var(--hairline); padding: 14px 8px; } .doc-top .group { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .back-link { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.22em; color: var(--text-muted); text-transform: uppercase; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; } .back-link:hover { color: var(--text-primary); } .back-link svg { width: 18px; height: 10px; } .id-block { font-family: var(--font-mono); font-size: 11px; line-height: 1.55; letter-spacing: 0.16em; color: var(--text-primary); } .id-block .k { color: var(--text-muted); } .live-pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.22em; color: var(--danger); text-transform: uppercase; } .live-pill::before { content:''; width:6px; height:6px; background: var(--danger); animation: blink 1s steps(2) infinite; } /* ===================== HERO ===================== */ .hero { position: relative; margin-top: 18px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; border: 1px solid var(--hairline); background: linear-gradient(135deg, var(--acc-soft), transparent 50%), rgba(13, 14, 26, 0.55); overflow: hidden; isolation: isolate; } .hero::before, .hero::after { content: ''; position: absolute; width: 22px; height: 22px; border: 1px solid var(--warning); pointer-events: none; z-index: 5; } .hero::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; } .hero::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; } /* backdrop sigil */ .hero .sigil-bg { position: absolute; left: -8%; top: 8%; width: 50%; color: var(--acc); opacity: 0.05; pointer-events: none; transform: rotate(-6deg); } .hero-left { position: relative; z-index: 2; padding: 44px 44px 44px 48px; display: grid; gap: 24px; align-content: center; min-width: 0; } .eyebrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .h-code { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.36em; color: var(--acc); text-transform: uppercase; } .h-code .pipe { color: var(--text-muted); } .h-name-block { display: grid; gap: 8px; } .h-kr { font-family: var(--font-kr); font-weight: 900; font-size: clamp(96px, 12vw, 200px); line-height: 0.88; letter-spacing: 0.02em; color: var(--text-primary); text-shadow: 0 0 30px var(--acc-glow); } .h-en { font-family: var(--font-display); font-size: clamp(40px, 4.5vw, 76px); line-height: 0.9; letter-spacing: 0.06em; color: var(--text-muted); text-transform: uppercase; } .h-alias { font-family: var(--font-kr); font-weight: 800; font-size: clamp(20px, 2vw, 30px); letter-spacing: 0.06em; color: var(--text-primary); margin-top: 8px; border-left: 2px solid var(--acc); padding: 4px 0 4px 16px; max-width: 28ch; } .h-alias .small { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.22em; color: var(--text-muted); text-transform: uppercase; } .h-stats { margin-top: 8px; display: grid; grid-template-columns: repeat(4, auto); gap: 22px; justify-content: start; border-top: 1px solid var(--hairline); padding-top: 18px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: var(--text-muted); text-transform: uppercase; } .h-stats .cell { display: grid; gap: 4px; } .h-stats .v { font-family: var(--font-display); font-size: 26px; line-height: 1; letter-spacing: 0.04em; color: var(--text-primary); } .h-stats .v.acc { color: var(--acc); } .h-stats .v.warn { color: var(--warning); } .h-stats .v.dang { color: var(--danger); } .h-quote { margin-top: 12px; font-family: var(--font-kr); font-weight: 500; font-size: clamp(16px, 1.5vw, 20px); line-height: 1.55; color: var(--text-primary); padding: 14px 18px; background: var(--acc-soft); border: 1px solid var(--acc-line); position: relative; } .h-quote::before { content: '＂'; color: var(--acc); font-weight: 800; margin-right: 6px; } .h-quote::after { content: '＂'; color: var(--acc); font-weight: 800; margin-left: 4px; } .h-quote .em { color: var(--acc); font-weight: 800; } /* portrait */ .hero-right { position: relative; overflow: hidden; } .hero-right img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 8%; filter: contrast(1.05) saturate(1.05); } .hero-right::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 3px), linear-gradient(to left, rgba(5,5,7,0.0), rgba(5,5,7,0.3) 92%); pointer-events: none; } .hero-right .photo-meta { position: absolute; left: 18px; bottom: 18px; background: rgba(5,5,7,0.75); border: 1px solid var(--acc-line); padding: 8px 14px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.22em; color: var(--text-primary); text-transform: uppercase; line-height: 1.65; } .hero-right .photo-meta b { color: var(--acc); } .hero-right .photo-bracket { position: absolute; pointer-events: none; border: 1px solid var(--acc); width: 22px; height: 22px; } .hero-right .photo-bracket.tl { top: 18px; left: 18px; border-right: 0; border-bottom: 0; } .hero-right .photo-bracket.tr { top: 18px; right: 18px; border-left: 0; border-bottom: 0; } .hero-right .photo-bracket.bl { bottom: 18px; left: 18px; border-right: 0; border-top: 0; display: none; } .hero-right .photo-bracket.br { bottom: 18px; right: 18px; border-left: 0; border-top: 0; } /* big DANGER/HERESY stamp behind nameplate */ .h-stamp-big { position: absolute; top: 38%; right: 6%; transform: rotate(-12deg); z-index: 1; border: 5px double var(--stamp-color); padding: 14px 28px; font-family: var(--font-header); font-weight: 800; font-size: clamp(40px, 5vw, 72px); letter-spacing: 0.18em; color: var(--stamp-color); text-transform: uppercase; background: rgba(5,5,7,0.4); opacity: 0.85; pointer-events: none; } .h-stamp-big::before { content: var(--stamp-label); } /* ===================== CHAPTER (shared) ===================== */ .chap { margin-top: 72px; display: grid; grid-template-columns: 220px 1fr; gap: 36px; min-width: 0; } .chap > * { min-width: 0; } .chap-head { position: sticky; top: 22px; align-self: start; border-top: 1px solid var(--hairline-hot); padding-top: 14px; } .chap-head .num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.32em; color: var(--warning); } .chap-head .name { font-family: var(--font-display); font-size: 36px; line-height: 0.95; letter-spacing: 0.02em; text-transform: uppercase; margin-top: 8px; } .chap-head .kr { font-family: var(--font-kr); font-weight: 800; font-size: 13px; letter-spacing: 0.16em; color: var(--text-muted); margin-top: 6px; } .chap-head .mini { display: inline-block; margin-top: 14px; } /* ===================== VITALS GRID ===================== */ .vitals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--hairline); background: rgba(13, 14, 26, 0.5); } .vitals .v-cell { padding: 18px 20px; border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); } .vitals .v-cell:nth-child(4n) { border-right: 0; } .vitals .v-cell:nth-last-child(-n+4) { border-bottom: 0; } .vitals .v-cell .k { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.28em; color: var(--text-muted); text-transform: uppercase; } .vitals .v-cell .v { display: block; margin-top: 8px; font-family: var(--font-display); font-size: 30px; line-height: 1; letter-spacing: 0.04em; color: var(--text-primary); } .vitals .v-cell .v.acc { color: var(--acc); } .vitals .v-cell .v.warn { color: var(--warning); } .vitals .v-cell .v.dang { color: var(--danger); } .vitals .v-cell .v.kr { font-family: var(--font-kr); font-weight: 800; font-size: 22px; letter-spacing: 0.04em; } /* ===================== COMBAT PROFILE ===================== */ .combat { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } .combat .radar-block { border: 1px solid var(--hairline); background: rgba(13, 14, 26, 0.5); padding: 24px; display: grid; place-items: center; min-height: 380px; position: relative; } .combat .radar-block::before { content: 'COMBAT PROFILE — STATUS'; position: absolute; top: -1px; left: 14px; transform: translateY(-50%); background: var(--bg-primary); padding: 0 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.32em; color: var(--acc); } .radar { width: 100%; max-width: 380px; aspect-ratio: 1 / 1; } .combat .threat-block { border: 1px solid var(--hairline); background: rgba(13, 14, 26, 0.5); padding: 24px; display: grid; gap: 14px; align-content: start; position: relative; } .combat .threat-block::before { content: 'THREAT ASSESSMENT'; position: absolute; top: -1px; left: 14px; transform: translateY(-50%); background: var(--bg-primary); padding: 0 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.32em; color: var(--acc); } .threat-block .big { font-family: var(--font-display); font-size: clamp(64px, 7vw, 96px); line-height: 0.85; letter-spacing: 0.04em; color: var(--acc); text-shadow: 0 0 24px var(--acc-glow); } .threat-block .row { display: grid; grid-template-columns: 120px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--hairline); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--text-primary); line-height: 1.55; } .threat-block .row .k { font-family: var(--font-header); font-weight: 600; font-size: 11px; letter-spacing: 0.22em; color: var(--text-muted); text-transform: uppercase; } .threat-block .row b { color: var(--acc); font-weight: 500; } .threat-block .row .danger { color: var(--danger); font-weight: 500; } /* ===================== WEAPON ===================== */ .weapon { border: 1px solid var(--hairline); background: radial-gradient(ellipse 50% 80% at 0% 0%, var(--acc-soft), transparent 60%), rgba(13, 14, 26, 0.55); padding: 32px 36px; position: relative; overflow: hidden; } .weapon::before { content: attr(data-label); position: absolute; top: -1px; left: 18px; transform: translateY(-50%); background: var(--bg-primary); padding: 0 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.32em; color: var(--acc); } .weapon-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; align-items: start; } .weapon h3 { font-family: var(--font-display); font-size: clamp(56px, 6vw, 88px); line-height: 0.9; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-primary); text-shadow: 0 0 24px rgba(139, 92, 246, 0.4); } .weapon .w-kr { font-family: var(--font-kr); font-weight: 800; font-size: 18px; letter-spacing: 0.18em; color: var(--text-muted); margin-top: 6px; } .weapon .w-tag { display: inline-block; margin-top: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; color: var(--prism-core); border: 1px solid var(--prism-core); padding: 4px 10px; text-transform: uppercase; } .weapon .w-parts { margin-top: 22px; display: grid; gap: 12px; } .weapon .w-parts .part { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--text-primary); line-height: 1.6; padding: 10px 12px; border: 1px solid var(--hairline); background: rgba(10, 10, 15, 0.6); } .weapon .w-parts .part .n { font-family: var(--font-display); font-size: 20px; line-height: 1; letter-spacing: 0.04em; color: var(--acc); } .weapon .w-parts .part .name { font-family: var(--font-header); font-weight: 600; font-size: 12.5px; letter-spacing: 0.22em; color: var(--text-primary); text-transform: uppercase; } .weapon .w-parts .part .desc { font-family: var(--font-kr); font-weight: 500; font-size: 13px; line-height: 1.55; color: var(--text-muted); margin-top: 4px; } /* hidden-truth callout */ .hidden-truth { margin-top: 22px; padding: 22px 24px; border: 1px solid var(--prism-core); background: linear-gradient(135deg, rgba(139,92,246,0.10), rgba(139,92,246,0.02) 50%), rgba(10, 10, 15, 0.65); position: relative; } .hidden-truth::before { content: 'CLASSIFIED // EYES ONLY — HIDDEN PROPERTY'; position: absolute; top: -1px; left: 14px; transform: translateY(-50%); background: var(--bg-primary); padding: 0 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.32em; color: var(--prism-core); } .hidden-truth h4 { font-family: var(--font-display); font-size: 28px; line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-primary); text-shadow: 0 0 18px rgba(139, 92, 246, 0.5); } .hidden-truth h4 .core { color: var(--prism-core); } .hidden-truth p { margin-top: 10px; font-family: var(--font-kr); font-weight: 500; font-size: 14px; line-height: 1.85; color: var(--text-primary); } .hidden-truth p .core { color: var(--prism-core); font-weight: 800; } .hidden-truth p .dim { color: var(--text-muted); } /* ===================== NARRATIVE ===================== */ .story { display: grid; gap: 36px; } .story-block { display: grid; grid-template-columns: 80px 1fr; gap: 28px; align-items: start; } .story-block .sb-num { font-family: var(--font-display); font-size: 72px; line-height: 0.85; letter-spacing: 0.02em; color: var(--text-dim); border-right: 1px solid var(--hairline); padding-right: 18px; text-align: right; } .story-block .sb-body { min-width: 0; } .story-block h3 { font-family: var(--font-display); font-size: 36px; line-height: 0.95; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text-primary); } .story-block .sb-kr { font-family: var(--font-kr); font-weight: 800; font-size: 14px; letter-spacing: 0.18em; color: var(--acc); margin-top: 6px; text-transform: uppercase; } .story-block p { margin-top: 14px; font-family: var(--font-kr); font-weight: 500; font-size: 15px; line-height: 1.95; letter-spacing: 0.01em; color: var(--text-primary); max-width: 64ch; } .story-block p b { color: var(--text-primary); font-weight: 800; } .story-block p .acc { color: var(--acc); font-weight: 800; } .story-block p .core { color: var(--prism-core); font-weight: 800; } .story-block p .dim { color: var(--text-muted); } .story-block .quote-line { margin-top: 18px; padding: 14px 22px; border-left: 2px solid var(--acc); font-family: var(--font-kr); font-weight: 500; font-size: 16px; line-height: 1.7; letter-spacing: 0.02em; color: var(--text-primary); font-style: italic; max-width: 56ch; background: var(--acc-soft); } .story-block .quote-line cite { display: block; margin-top: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; color: var(--text-muted); text-transform: uppercase; font-style: normal; } .story-block .quote-line.prism { border-color: var(--prism-core); background: rgba(139,92,246,0.08); } .story-block .quote-line.prism cite { color: var(--prism-core); } /* ===================== PERSONAL ITEMS ===================== */ .items { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .item { border: 1px solid var(--hairline); background: rgba(13, 14, 26, 0.5); padding: 20px 18px; display: grid; gap: 8px; position: relative; } .item::before, .item::after { content: ''; position: absolute; width: 10px; height: 10px; border: 1px solid var(--acc-line); } .item::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; } .item::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; } .item .ico { width: 44px; height: 44px; color: var(--acc); filter: drop-shadow(0 0 6px var(--acc-glow)); margin-bottom: 4px; } .item .name { font-family: var(--font-kr); font-weight: 800; font-size: 15px; letter-spacing: 0.04em; color: var(--text-primary); } .item .en { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.22em; color: var(--text-muted); text-transform: uppercase; } .item .desc { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--text-muted); line-height: 1.65; margin-top: 8px; border-top: 1px dashed var(--hairline); padding-top: 8px; } /* ===================== DIARY / WHISPER ===================== */ .diary { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } .diary .page { border: 1px solid var(--hairline); padding: 28px 32px; background: rgba(13, 14, 26, 0.4); position: relative; } .diary .page.diary-page::before { content: attr(data-label); position: absolute; top: -1px; left: 18px; transform: translateY(-50%); background: var(--bg-primary); padding: 0 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.32em; color: var(--text-muted); } .diary .page.whisper::before { content: attr(data-label); position: absolute; top: -1px; left: 18px; transform: translateY(-50%); background: var(--bg-primary); padding: 0 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.32em; color: var(--prism-core); } .diary .page .text { font-family: var(--font-kr); font-weight: 500; font-size: 18px; line-height: 1.85; color: var(--text-primary); font-style: italic; } .diary .page.diary-page .text { text-decoration: underline; text-decoration-color: var(--hairline-hot); text-decoration-thickness: 1px; text-underline-offset: 6px; } .diary .page .meta { margin-top: 14px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; color: var(--text-muted); text-transform: uppercase; } .diary .page .meta .acc { color: var(--acc); } .diary .page.whisper { border-color: var(--prism-core); } .diary .page.whisper .text { color: var(--text-primary); } .diary .page.whisper .text .core { color: var(--prism-core); font-weight: 800; } .diary .page.whisper .meta { color: var(--prism-core); } /* ===================== MIRROR ===================== */ .mirror { border: 1px solid var(--hairline); background: rgba(13, 14, 26, 0.5); padding: 28px 32px; position: relative; display: grid; grid-template-columns: 1fr 80px 1fr; gap: 22px; align-items: center; } .mirror::before { content: 'MIRROR PAIR — 거울 구도'; position: absolute; top: -1px; left: 18px; transform: translateY(-50%); background: var(--bg-primary); padding: 0 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.32em; color: var(--prism-core); } .mirror .m-side { display: grid; gap: 8px; } .mirror .m-side .lbl { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.32em; color: var(--text-muted); text-transform: uppercase; } .mirror .m-side .name { font-family: var(--font-display); font-size: 42px; line-height: 0.9; letter-spacing: 0.04em; text-transform: uppercase; } .mirror .m-side .kr { font-family: var(--font-kr); font-weight: 800; font-size: 14px; letter-spacing: 0.16em; color: var(--text-muted); } .mirror .m-side .role { margin-top: 8px; font-family: var(--font-kr); font-weight: 500; font-size: 15px; line-height: 1.6; color: var(--text-primary); border-top: 1px dashed var(--hairline); padding-top: 10px; } .mirror .m-side .role .em { color: var(--text-primary); font-weight: 800; } .mirror.brs .m-side.left .name { color: var(--brs-primary); text-shadow: 0 0 18px rgba(217,70,239,0.45); } .mirror.brs .m-side.right .name { color: var(--fw-primary); text-shadow: 0 0 18px rgba(6,182,212,0.45); } .mirror.brs .m-side.left .role .em { color: var(--brs-primary); } .mirror.brs .m-side.right .role .em { color: var(--fw-primary); } .mirror.fw .m-side.left .name { color: var(--fw-primary); text-shadow: 0 0 18px rgba(6,182,212,0.45); } .mirror.fw .m-side.right .name { color: var(--brs-primary); text-shadow: 0 0 18px rgba(217,70,239,0.45); } .mirror.fw .m-side.left .role .em { color: var(--fw-primary); } .mirror.fw .m-side.right .role .em { color: var(--brs-primary); } .mirror .m-divider { position: relative; display: flex; align-items: center; justify-content: center; } .mirror .m-divider::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: linear-gradient(to bottom, transparent, var(--prism-core), transparent); transform: translateX(-50%); box-shadow: 0 0 10px rgba(139,92,246,0.4); } .mirror .m-divider .sigil { width: 36px; height: 36px; color: var(--prism-core); background: var(--bg-primary); padding: 6px; position: relative; z-index: 1; filter: drop-shadow(0 0 10px rgba(139,92,246,0.55)); } /* ===================== CONTAINMENT ===================== */ .containment { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } .cont-card { border: 1px solid var(--hairline); background: rgba(13, 14, 26, 0.5); padding: 24px; position: relative; } .cont-card .lbl { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.32em; color: var(--text-muted); text-transform: uppercase; display: block; } .cont-card .lbl.warn { color: var(--warning); } .cont-card h4 { margin-top: 6px; font-family: var(--font-display); font-size: 28px; line-height: 0.95; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-primary); } .cont-card p { margin-top: 12px; font-family: var(--font-kr); font-weight: 500; font-size: 14px; line-height: 1.85; color: var(--text-primary); } .cont-card p b { color: var(--warning); font-weight: 800; } .cont-card p .acc { color: var(--acc); font-weight: 800; } .cont-card.alert { border-color: var(--danger); background: linear-gradient(135deg, rgba(239, 68, 68, 0.10), transparent 50%), rgba(13, 14, 26, 0.5); } .cont-card.alert .lbl { color: var(--danger); } .cont-card.alert h4 { color: var(--danger); text-shadow: 0 0 18px rgba(239, 68, 68, 0.4); } .cont-card.alert p b { color: var(--danger); } /* ===================== FINAL STAMP + NAV ===================== */ .final-stamp-row { margin-top: 96px; display: flex; align-items: center; justify-content: center; position: relative; padding: 40px 0; } .final-stamp-row::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: linear-gradient(to right, transparent, var(--stamp-color), transparent); transform: translateY(-50%); opacity: 0.4; } .final-stamp { position: relative; z-index: 1; border: 6px double var(--stamp-color); padding: 18px 56px; font-family: var(--font-header); font-weight: 800; font-size: clamp(56px, 7vw, 96px); letter-spacing: 0.22em; color: var(--stamp-color); text-transform: uppercase; transform: rotate(-4deg); background: rgba(5,5,7,0.65); box-shadow: 0 0 40px rgba(239, 68, 68, 0.2); } .final-stamp::before { content: var(--stamp-label); } .final-stamp::after { content: '— EXECUTION PROTOCOL —'; display: block; font-size: 0.18em; letter-spacing: 0.42em; margin-top: 8px; color: var(--stamp-color); opacity: 0.85; } .next-row { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--hairline); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 18px; } .next-row .meta { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.22em; color: var(--text-dim); text-transform: uppercase; } .next-row .meta b { color: var(--text-muted); } .nav-strip { display: flex; gap: 10px; align-items: center; } .nav-btn { display: inline-flex; align-items: center; gap: 12px; padding: 12px 18px; background: rgba(10, 10, 15, 0.55); border: 1px solid var(--hairline-hot); color: var(--text-primary); font-family: var(--font-header); font-weight: 600; font-size: 12.5px; letter-spacing: 0.28em; text-transform: uppercase; text-decoration: none; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .nav-btn:hover { background: var(--acc); color: var(--bg-primary); border-color: var(--acc); } .nav-btn:hover svg path { stroke: var(--bg-primary); } .nav-btn.next { border-color: var(--acc); color: var(--acc); } .nav-btn svg { width: 22px; height: 10px; } @media (max-width: 1180px) { .hero { grid-template-columns: 1fr; } .hero-right { min-height: 460px; } .hero-right img { object-position: 50% 12%; } .chap { grid-template-columns: 1fr; } .chap-head { position: static; } .vitals { grid-template-columns: repeat(2, 1fr); } .vitals .v-cell:nth-child(2n) { border-right: 0; } .vitals .v-cell:nth-child(odd) { border-right: 1px solid var(--hairline); } .vitals .v-cell:nth-last-child(-n+2) { border-bottom: 0; } .combat, .diary, .containment { grid-template-columns: 1fr; } .weapon-grid { grid-template-columns: 1fr; } .mirror { grid-template-columns: 1fr; } .mirror .m-divider { height: 26px; } .mirror .m-divider::before { top: 50%; bottom: auto; left: 0; right: 0; width: auto; height: 1px; background: linear-gradient(to right, transparent, var(--prism-core), transparent); } .story-block { grid-template-columns: 56px 1fr; gap: 18px; } .story-block .sb-num { font-size: 48px; } .items { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 720px) { .vitals { grid-template-columns: 1fr; } .vitals .v-cell { border-right: 0 !important; } .items { grid-template-columns: 1fr; } .h-stats { grid-template-columns: repeat(2, auto); gap: 14px; } }