:root {
  --void: #050203;
  --ink: #0c0507;
  --blood: #b3001b;
  --blood-hi: #e0112e;
  --ember: #ff3b1f;
  --bone: #e8dcc8;
  --dim: #8a7a72;
  --line: rgba(179, 0, 27, 0.28);
  --panel: rgba(10, 4, 6, 0.78);
  --f-title: 'Cinzel', 'Times New Roman', serif;
  --f-type: 'Special Elite', 'Courier New', monospace;
  --f-mono: 'Share Tech Mono', ui-monospace, monospace;
  --f-paint: 'Rubik Wet Paint', Impact, sans-serif;
  --mx: 50vw;
  --my: 50vh;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--void); }
body {
  color: var(--bone);
  font: 15px/1.6 var(--f-mono);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }
::selection { background: var(--blood); color: #fff; }
[hidden] { display: none !important; }

#world { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
body.no-webgl #world { display: none; }
body.no-webgl { background: radial-gradient(ellipse at 50% 30%, #3a0508 0%, #0a0204 50%, #000 100%); }

#darkness {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(circle at var(--mx) var(--my), transparent 0, transparent 12vmax, rgba(0, 0, 0, 0.35) 34vmax, rgba(0, 0, 0, 0.6) 70vmax);
  opacity: 0; transition: opacity 2s;
}
body.is-world #darkness { opacity: 1; }

/* ---------------- glitch text ---------------- */
.glitch { position: relative; display: inline-block; }
.glitch::before, .glitch::after {
  content: attr(data-text); position: absolute; inset: 0; pointer-events: none;
  clip-path: inset(0 0 0 0); opacity: 0.8;
}
.glitch::before { color: #ff0033; transform: translate(-2px, 0); mix-blend-mode: screen; animation: glitch-a 3.2s infinite steps(1); }
.glitch::after { color: #00e5ff; transform: translate(2px, 0); mix-blend-mode: screen; opacity: 0.5; animation: glitch-b 2.7s infinite steps(1); }
@keyframes glitch-a {
  0%, 86%, 100% { clip-path: inset(0 0 100% 0); }
  87% { clip-path: inset(10% 0 60% 0); transform: translate(-6px, 1px); }
  90% { clip-path: inset(55% 0 20% 0); transform: translate(5px, -1px); }
  93% { clip-path: inset(30% 0 45% 0); transform: translate(-3px, 0); }
  96% { clip-path: inset(80% 0 5% 0); transform: translate(4px, 0); }
}
@keyframes glitch-b {
  0%, 80%, 100% { clip-path: inset(0 0 100% 0); }
  81% { clip-path: inset(70% 0 10% 0); transform: translate(6px, 0); }
  84% { clip-path: inset(15% 0 70% 0); transform: translate(-5px, 1px); }
  88% { clip-path: inset(40% 0 40% 0); transform: translate(3px, -1px); }
}

/* ---------------- buttons ---------------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none;
  padding: 13px 26px; font: 13px/1 var(--f-mono); letter-spacing: 0.22em; text-transform: uppercase;
  border: 1px solid var(--blood); overflow: hidden; isolation: isolate;
  transition: color 0.4s var(--ease), border-color 0.4s, box-shadow 0.4s;
}
.btn span { position: relative; z-index: 1; }
.btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, var(--blood-hi), #6d0010);
  transform: scaleY(0); transform-origin: top; transition: transform 0.55s var(--ease);
}
.btn::after {
  content: ''; position: absolute; left: 12%; top: 100%; width: 3px; height: 0; background: var(--blood-hi);
  border-radius: 0 0 3px 3px; transition: height 0.6s var(--ease) 0.2s; box-shadow: 40px 0 0 -0.5px var(--blood-hi), 110px 0 0 0 var(--blood-hi);
}
.btn-blood { background: rgba(179, 0, 27, 0.2); color: #fff; box-shadow: 0 0 24px rgba(224, 17, 46, 0.25), inset 0 0 20px rgba(224, 17, 46, 0.15); }
.btn-blood:hover { box-shadow: 0 0 40px rgba(224, 17, 46, 0.55); }
.btn:hover::before { transform: scaleY(1); }
.btn:hover::after { height: 16px; }
.btn-ghost { border-color: rgba(232, 220, 200, 0.28); color: var(--bone); }
.btn-ghost::before { background: linear-gradient(180deg, rgba(232, 220, 200, 0.95), rgba(232, 220, 200, 0.75)); }
.btn-ghost:hover { color: #0a0406; border-color: var(--bone); }
.btn-lg { padding: 18px 36px; font-size: 14px; }
.btn-full { width: 100%; }
.btn:disabled { opacity: 0.6; pointer-events: none; }
.btn.is-loading span { animation: pulse 0.8s infinite alternate; }
@keyframes pulse { to { opacity: 0.3; } }
.link-btn { color: var(--dim); font-size: 12px; letter-spacing: 0.2em; text-decoration: underline; text-underline-offset: 4px; }
.link-btn:hover { color: var(--bone); }

.kicker { font: 11px/1.4 var(--f-mono); letter-spacing: 0.32em; color: var(--ember); margin: 0 0 10px; text-transform: uppercase; }
.dim { color: var(--dim); }

/* ---------------- gate ---------------- */
#gate {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(ellipse at 50% 60%, rgba(60, 0, 8, 0.35), transparent 60%), #000;
}
#gate::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.12;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px 3px);
  animation: scan 8s linear infinite;
}
@keyframes scan { to { background-position: 0 100vh; } }
.gate-inner { position: relative; z-index: 1; width: min(760px, 100%); text-align: center; }
.boot {
  text-align: left; margin: 0 auto 38px; width: min(560px, 100%); min-height: 11.5em;
  font: 12px/1.6 var(--f-mono); color: #7dffb0; opacity: 0.8; white-space: pre-wrap; text-shadow: 0 0 8px rgba(125, 255, 176, 0.5);
}
.boot::after { content: '█'; animation: blink 0.9s steps(1) infinite; }
.boot.is-done::after { color: var(--ember); }
@keyframes blink { 50% { opacity: 0; } }
.gate-title { margin: 0; font: 900 clamp(48px, 11vw, 132px)/0.9 var(--f-title); letter-spacing: 0.14em; text-shadow: 0 0 40px rgba(224, 17, 46, 0.5); }
.gate-sub { margin: 18px 0 40px; font: 13px var(--f-mono); letter-spacing: 0.5em; color: var(--dim); }
.gate-actions { display: flex; flex-direction: column; align-items: center; gap: 20px; opacity: 0; transform: translateY(10px); transition: all 1s var(--ease) 0.4s; }
body.is-ready .gate-actions { opacity: 1; transform: none; }
.warn { margin-top: 44px; font-size: 10px; letter-spacing: 0.24em; color: rgba(232, 220, 200, 0.4); }

/* ---------------- cinematic layers ---------------- */
.letterbox { position: fixed; left: 0; right: 0; height: 0; background: #000; z-index: 30; pointer-events: none; }
.letterbox-top { top: 0; }
.letterbox-bottom { bottom: 0; }
#subtitles { position: fixed; left: 0; right: 0; bottom: 13vh; z-index: 35; display: flex; justify-content: center; pointer-events: none; padding: 0 20px; }
.sub {
  position: absolute; bottom: 0; max-width: 900px; text-align: center;
  font: clamp(16px, 2vw, 22px)/1.5 var(--f-type); color: #f3ead8; letter-spacing: 0.04em;
  text-shadow: 0 2px 12px #000, 0 0 2px #000;
}
.sub span { display: inline-block; }
.sub-kicker { font: clamp(12px, 1.4vw, 15px) var(--f-mono); letter-spacing: 0.45em; color: var(--ember); }
.sub-whisper { font-style: italic; color: #ffb3a8; letter-spacing: 0.3em; animation: tremble 0.12s infinite; }
@keyframes tremble { 50% { transform: translate(1px, -1px); } }
#bigtext {
  position: fixed; inset: 0; z-index: 36; display: none; align-items: center; justify-content: center; pointer-events: none;
  font: 900 clamp(28px, 6vw, 84px)/1 var(--f-title); color: var(--bone); letter-spacing: 0.2em; text-align: center; padding: 0 20px;
  text-shadow: 0 0 30px rgba(255, 0, 40, 0.8);
}
#bigtext::before, #bigtext::after { display: flex; align-items: center; justify-content: center; }
.terminal {
  position: fixed; inset: 0; z-index: 36; display: flex; align-items: center; justify-content: center; pointer-events: none;
  padding: 0 24px; text-align: center; white-space: pre-line;
  font: clamp(16px, 2.2vw, 28px)/1.6 var(--f-mono); letter-spacing: 0.18em; color: #e9f5ee;
  text-shadow: 0 0 12px rgba(157, 255, 196, 0.45);
}
.crack { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 34; pointer-events: none; }
.crack path { fill: none; stroke: rgba(235, 240, 245, 0.55); stroke-width: 1.2; filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.6)); }
.vhs {
  position: fixed; inset: calc(11vh + 16px) 30px calc(11vh + 16px); z-index: 33; pointer-events: none;
  font: clamp(14px, 1.6vw, 22px)/1 var(--f-mono); letter-spacing: 0.12em; color: #f2f2ea;
  text-shadow: 2px 0 rgba(255, 0, 60, 0.6), -2px 0 rgba(0, 200, 255, 0.5), 0 0 6px rgba(255, 255, 255, 0.4);
}
.vhs-state { position: absolute; left: 0; top: 0; }
.vhs-tape { position: absolute; right: 0; top: 0; }
.vhs-stamp { position: absolute; left: 0; bottom: 0; display: grid; gap: 8px; }
.vhs-stamp b { font-weight: 400; }
.skip {
  position: fixed; right: 26px; bottom: calc(11vh + 18px); z-index: 40;
  font: 11px var(--f-mono); letter-spacing: 0.3em; color: rgba(232, 220, 200, 0.55);
  padding: 10px 14px; border: 1px solid rgba(232, 220, 200, 0.18); background: rgba(0, 0, 0, 0.4);
}
.skip:hover { color: #fff; border-color: var(--blood); }
.skip span { color: var(--ember); }

/* ---------------- HUD ---------------- */
.hud { position: fixed; left: 0; right: 0; z-index: 25; display: flex; align-items: center; justify-content: space-between; padding: 22px 30px; pointer-events: none; opacity: 0; }
.hud > * { pointer-events: auto; }
body:not(.is-world) .hud { visibility: hidden; }
.hud-top { top: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.65), transparent); }
.hud-bottom { bottom: 0; padding: 16px 30px; font-size: 10px; letter-spacing: 0.24em; color: rgba(232, 220, 200, 0.45); background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), transparent); }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; font: 700 18px var(--f-title); letter-spacing: 0.3em; }
.logo svg { width: 38px; height: 24px; fill: none; stroke: var(--ember); stroke-width: 3; filter: drop-shadow(0 0 6px var(--blood)); }
.logo svg circle { fill: var(--ember); stroke: none; animation: look 6s infinite var(--ease); }
@keyframes look { 0%, 40%, 100% { transform: translateX(0); } 50%, 60% { transform: translateX(-6px); } 70%, 80% { transform: translateX(6px); } }
.nav { display: flex; gap: 6px; }
.nav a {
  position: relative; display: flex; align-items: baseline; gap: 8px; padding: 10px 16px; text-decoration: none;
  font-size: 12px; letter-spacing: 0.28em; color: rgba(232, 220, 200, 0.6); transition: color 0.3s;
}
.nav a i { font-style: normal; font-size: 9px; color: var(--blood-hi); opacity: 0.8; }
.nav a::after {
  content: ''; position: absolute; left: 16px; right: 16px; bottom: 4px; height: 1px; background: var(--ember);
  transform: scaleX(0); transform-origin: left; transition: transform 0.5s var(--ease); box-shadow: 0 0 8px var(--ember);
}
.nav a:hover, .nav a.is-active { color: #fff; }
.nav a.is-active::after, .nav a:hover::after { transform: scaleX(1); }
.hud-right { display: flex; align-items: center; gap: 18px; font-size: 11px; letter-spacing: 0.2em; }
.rec { display: flex; align-items: center; gap: 7px; color: #ff4a3a; }
.rec b { width: 9px; height: 9px; border-radius: 50%; background: #ff2a14; box-shadow: 0 0 10px #ff2a14; animation: blink 1.2s steps(1) infinite; }
.timecode { color: rgba(232, 220, 200, 0.6); font-variant-numeric: tabular-nums; min-width: 11ch; }
.sound { display: flex; align-items: flex-end; gap: 3px; height: 18px; padding: 0 4px; }
.sound i { width: 2px; background: var(--bone); height: 100%; animation: eq 1s infinite ease-in-out alternate; }
.sound i:nth-child(2) { animation-delay: -0.3s; } .sound i:nth-child(3) { animation-delay: -0.6s; }
.sound i:nth-child(4) { animation-delay: -0.15s; } .sound i:nth-child(5) { animation-delay: -0.8s; }
.sound.is-muted i { animation: none; height: 2px; opacity: 0.6; }
@keyframes eq { 0% { height: 20%; } 100% { height: 100%; } }
.signal { display: flex; align-items: flex-end; gap: 3px; }
.signal i { width: 3px; background: var(--ember); animation: sig 2.4s infinite steps(1); }
.signal i:nth-child(1) { height: 4px; } .signal i:nth-child(2) { height: 7px; animation-delay: 0.3s; }
.signal i:nth-child(3) { height: 10px; animation-delay: 0.6s; } .signal i:nth-child(4) { height: 13px; animation-delay: 0.9s; }
@keyframes sig { 70% { opacity: 1; } 85% { opacity: 0.15; } }

/* ---------------- panels ---------------- */
.panel { position: fixed; z-index: 20; opacity: 0; visibility: hidden; pointer-events: none; }
.panel.is-active { visibility: visible; pointer-events: auto; }

.panel-home { left: 50%; bottom: 64px; transform: translateX(-50%); width: min(980px, calc(100% - 40px)); text-align: center; pointer-events: none; }
.panel-home.is-active > * { pointer-events: auto; }
.hero-title {
  margin: 0; font: 900 clamp(50px, 8vw, 124px)/0.9 var(--f-title); letter-spacing: 0.16em; margin-right: -0.16em;
  background: linear-gradient(180deg, #fff3e6 10%, #e8dcc8 45%, #7a1010 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 30px rgba(224, 17, 46, 0.45));
}
.hero-title::before, .hero-title::after { -webkit-text-fill-color: currentColor; }
.hero-sub { margin: 10px 0 0; font: 500 clamp(14px, 1.8vw, 20px) var(--f-title); letter-spacing: 1.1em; margin-right: -1.1em; color: var(--ember); }
.hero-sub em { font-style: normal; color: var(--bone); }
.lede { margin: 18px auto 26px; max-width: 560px; font: 16px/1.7 var(--f-type); color: rgba(232, 220, 200, 0.82); text-shadow: 0 2px 10px #000; }
.cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.countdown {
  margin: 24px auto 0; display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 18px; border: 1px solid rgba(179, 0, 27, 0.25); background: rgba(0, 0, 0, 0.35);
}
.cd-label { font-size: 10px; letter-spacing: 0.3em; color: var(--dim); }
.cd-label span { color: var(--bone); }
.cd-time { font-size: 20px; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; }
.cd-time b { font-weight: 400; color: #fff; }
.cd-time i { font-style: normal; font-size: 10px; color: var(--ember); margin: 0 10px 0 3px; }

.panel-side {
  top: 92px; bottom: 58px; width: min(580px, 46vw); overflow-y: auto; overflow-x: hidden;
  padding: 34px 36px 40px; background: linear-gradient(160deg, rgba(14, 5, 8, 0.86), rgba(8, 3, 5, 0.72));
  border: 1px solid var(--line); backdrop-filter: blur(8px) saturate(1.2); -webkit-backdrop-filter: blur(8px) saturate(1.2);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), inset 0 0 60px rgba(120, 0, 20, 0.08);
  scrollbar-width: thin; scrollbar-color: var(--blood) transparent;
}
.panel-side::-webkit-scrollbar { width: 4px; }
.panel-side::-webkit-scrollbar-thumb { background: var(--blood); }
.panel-right { right: 30px; }
.panel-left { left: 30px; }
.panel-side::before {
  content: ''; position: fixed; width: 18px; height: 18px; pointer-events: none;
  border-top: 2px solid var(--ember); border-left: 2px solid var(--ember); margin: -35px 0 0 -37px;
}
.panel-head { margin-bottom: 22px; }
.panel-title { margin: 0 0 12px; font: 900 clamp(30px, 3.4vw, 46px)/1 var(--f-title); letter-spacing: 0.1em; min-height: 1em; }
.h3 { font: 700 13px var(--f-title); letter-spacing: 0.3em; color: var(--ember); margin: 0 0 12px; }

.filters { display: flex; gap: 8px; margin-top: 18px; }
.chip { padding: 7px 14px; font-size: 11px; letter-spacing: 0.24em; border: 1px solid rgba(232, 220, 200, 0.18); color: var(--dim); transition: all 0.3s; }
.chip:hover { color: var(--bone); border-color: rgba(232, 220, 200, 0.4); }
.chip.is-on { color: #fff; border-color: var(--blood); background: rgba(179, 0, 27, 0.25); }

/* ---------------- event case files ---------------- */
.events-list { display: grid; gap: 18px; perspective: 900px; }
.empty { padding: 40px 0; text-align: center; font-family: var(--f-type); }
.case {
  --rx: 0deg; --ry: 0deg; --gx: 50%; --gy: 50%;
  position: relative; padding: 22px 22px 20px; border: 1px solid rgba(232, 220, 200, 0.12);
  background: linear-gradient(135deg, rgba(30, 10, 12, 0.7), rgba(10, 4, 6, 0.8));
  transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d;
  transition: transform 0.4s var(--ease), border-color 0.4s, box-shadow 0.4s;
}
.case:hover { border-color: rgba(224, 17, 46, 0.55); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 40px rgba(179, 0, 27, 0.2); }
.case-glare { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.4s; background: radial-gradient(circle at var(--gx) var(--gy), rgba(255, 60, 40, 0.16), transparent 50%); }
.case:hover .case-glare { opacity: 1; }
.case-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.case-no { font-size: 10px; letter-spacing: 0.26em; color: var(--dim); }
.stamp { font: 11px var(--f-mono); letter-spacing: 0.3em; padding: 4px 10px; border: 2px solid currentColor; transform: rotate(-4deg); }
.stamp-open { color: #7dffb0; text-shadow: 0 0 8px rgba(125, 255, 176, 0.6); }
.stamp-sealed, .stamp-full { color: var(--blood-hi); }
.case-title { margin: 0 0 6px; font: 900 24px/1.15 var(--f-title); letter-spacing: 0.08em; }
.case-tag { margin: 0 0 14px; font: 14px/1.5 var(--f-type); color: rgba(232, 220, 200, 0.75); }
.case-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin: 0 0 14px; }
.case-meta dt { font-size: 9px; letter-spacing: 0.3em; color: var(--ember); }
.case-meta dd { margin: 2px 0 0; font-size: 13px; color: var(--bone); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.tags span { font-size: 10px; letter-spacing: 0.14em; padding: 3px 8px; background: rgba(232, 220, 200, 0.06); color: var(--dim); }
.seats { margin-bottom: 16px; font-size: 11px; letter-spacing: 0.1em; color: var(--dim); }
.seats-bar { height: 3px; background: rgba(232, 220, 200, 0.1); margin-bottom: 6px; overflow: hidden; }
.seats-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--blood), var(--ember)); box-shadow: 0 0 10px var(--ember); }
.case-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.case-actions .btn { padding: 11px 18px; font-size: 11px; }

/* ---------------- about ---------------- */
.story { font: 16px/1.8 var(--f-type); color: rgba(232, 220, 200, 0.88); margin-bottom: 26px; }
.story p { margin: 0 0 14px; }
.story em { color: var(--ember); }
.drop { float: left; font: 900 58px/0.8 var(--f-title); color: var(--blood-hi); margin: 6px 10px 0 0; text-shadow: 0 0 20px rgba(224, 17, 46, 0.6); }
.about-real { padding: 18px 20px; border-left: 2px solid var(--blood); background: rgba(179, 0, 27, 0.06); margin-bottom: 26px; }
.about-real p { margin: 0; color: rgba(232, 220, 200, 0.8); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); margin-bottom: 28px; }
.stats div { background: rgba(8, 3, 5, 0.9); padding: 18px 10px; text-align: center; }
.stats b { display: block; font: 900 30px var(--f-title); color: #fff; text-shadow: 0 0 20px rgba(224, 17, 46, 0.6); }
.stats span { font-size: 9px; letter-spacing: 0.26em; color: var(--dim); }
.faq-item { border-bottom: 1px solid rgba(232, 220, 200, 0.1); }
.faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 14px 0; text-align: left; font-size: 14px; letter-spacing: 0.06em; }
.faq-q i { font-style: normal; color: var(--ember); transition: transform 0.4s var(--ease); }
.faq-q:hover { color: #fff; }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--ease); }
.faq-a > p { overflow: hidden; margin: 0; color: var(--dim); font-size: 14px; }
.faq-item.is-open .faq-a { grid-template-rows: 1fr; }
.faq-item.is-open .faq-a > p { padding-bottom: 14px; }
.faq-item.is-open .faq-q i { transform: rotate(45deg); }

/* ---------------- forms ---------------- */
.form { display: grid; gap: 16px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.field { display: grid; gap: 6px; }
.field > span { font-size: 10px; letter-spacing: 0.3em; color: var(--ember); }
.field input, .field textarea {
  width: 100%; padding: 12px 2px 10px; font: 15px var(--f-mono); color: var(--bone); background: transparent;
  border: 0; border-bottom: 1px solid rgba(232, 220, 200, 0.2); outline: none; border-radius: 0; resize: vertical;
  transition: border-color 0.3s, background 0.3s;
}
.field input::placeholder, .field textarea::placeholder { color: rgba(232, 220, 200, 0.25); }
.field input:focus, .field textarea:focus { border-color: var(--ember); background: linear-gradient(0deg, rgba(255, 59, 31, 0.08), transparent 70%); }
.field em, .check em { font-style: normal; font-size: 11px; color: #ff5a4a; min-height: 0; }
.field.has-error input, .field.has-error textarea { border-color: #ff2a2a; }
.check { display: flex; align-items: center; gap: 12px; font-size: 13px; color: rgba(232, 220, 200, 0.75); flex-wrap: wrap; }
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check i { width: 18px; height: 18px; border: 1px solid rgba(232, 220, 200, 0.35); display: grid; place-items: center; flex: none; transition: all 0.3s; }
.check input:checked + i { background: var(--blood); border-color: var(--ember); box-shadow: 0 0 12px var(--blood); }
.check input:checked + i::after { content: '✕'; font-size: 11px; color: #fff; }
.check input:focus-visible + i { outline: 1px solid var(--ember); outline-offset: 2px; }
.check em { width: 100%; }
.check.has-error i { border-color: #ff2a2a; }
.form-error { margin: 0; min-height: 1em; color: #ff5a4a; font-size: 13px; }
.direct { margin-top: 30px; padding-top: 22px; border-top: 1px solid rgba(232, 220, 200, 0.1); }
.mail-link { font: 700 clamp(18px, 2vw, 24px) var(--f-title); letter-spacing: 0.06em; text-decoration: none; background: linear-gradient(var(--ember), var(--ember)) 0 100% / 0 1px no-repeat; transition: background-size 0.5s var(--ease); }
.mail-link:hover { background-size: 100% 1px; color: #fff; }

/* ---------------- modal ---------------- */
.modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 20px; }
.modal-backdrop { position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(40, 0, 6, 0.7), rgba(0, 0, 0, 0.92)); backdrop-filter: blur(4px); }
.modal-card {
  position: relative; width: min(1040px, 100%); max-height: calc(100vh - 40px); overflow: auto;
  background: linear-gradient(160deg, #12060a, #070305); border: 1px solid rgba(224, 17, 46, 0.4);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.8), 0 40px 120px rgba(0, 0, 0, 0.8), 0 0 80px rgba(179, 0, 27, 0.25);
  scrollbar-width: thin; scrollbar-color: var(--blood) transparent;
}
.modal-x { position: absolute; top: 14px; right: 16px; z-index: 2; width: 38px; height: 38px; font-size: 16px; color: var(--dim); border: 1px solid rgba(232, 220, 200, 0.15); transition: all 0.3s; }
.modal-x:hover { color: #fff; border-color: var(--ember); transform: rotate(90deg); }
.pact { display: grid; grid-template-columns: 1.1fr 1fr; }
.pact-info { padding: 44px 40px; border-right: 1px solid rgba(179, 0, 27, 0.2); }
.pact-title { margin: 0 0 10px; font: 900 clamp(28px, 3.4vw, 42px)/1.05 var(--f-title); letter-spacing: 0.08em; }
.pact-tag { margin: 0 0 22px; font: 16px/1.5 var(--f-type); color: var(--ember); }
.pact-desc { font-size: 14px; line-height: 1.75; color: rgba(232, 220, 200, 0.78); }
.pact-desc p { margin: 0 0 12px; }
.pact-form-wrap { padding: 44px 40px; background: radial-gradient(ellipse at 50% 0%, rgba(179, 0, 27, 0.12), transparent 70%); }
.form-title { margin: 0 0 6px; font: 700 20px var(--f-title); letter-spacing: 0.06em; }
.sealed-note h3 { font: 900 24px var(--f-title); letter-spacing: 0.08em; margin: 0 0 10px; }
.sealed { text-align: center; display: grid; justify-items: center; gap: 10px; }
.seal-svg { width: 150px; height: 150px; fill: none; stroke: var(--ember); stroke-width: 2.5; filter: drop-shadow(0 0 14px var(--blood-hi)); animation: spin 30s linear infinite; }
.seal-svg .fill { fill: var(--ember); stroke: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.sealed-title { margin: 0; font: 900 38px var(--f-title); letter-spacing: 0.14em; color: #fff; }
.sealed p { margin: 0; max-width: 380px; }
.ticket { margin: 10px 0; padding: 14px 28px; border: 1px dashed var(--blood-hi); display: grid; gap: 4px; }
.ticket span { font-size: 10px; letter-spacing: 0.36em; color: var(--dim); }
.ticket b { font: 400 28px var(--f-mono); letter-spacing: 0.2em; color: var(--ember); text-shadow: 0 0 14px rgba(255, 59, 31, 0.6); }
.sealed .btn { margin-top: 12px; }

.toast {
  position: fixed; left: 50%; bottom: 70px; transform: translateX(-50%); z-index: 80; opacity: 0; pointer-events: none;
  padding: 14px 22px; font-size: 13px; letter-spacing: 0.08em; background: rgba(10, 4, 6, 0.95); border: 1px solid var(--line);
}
.toast.is-ok { border-color: rgba(125, 255, 176, 0.4); color: #cfffe0; }
.toast.is-error { border-color: #ff2a2a; color: #ffb3a8; }

/* ---------------- cursor ---------------- */
body.has-cursor, body.has-cursor * { cursor: none !important; }
.cursor-trail { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 998; pointer-events: none; }
.cursor-dot, .cursor-ring { position: fixed; left: 0; top: 0; z-index: 999; pointer-events: none; border-radius: 50%; }
.cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--ember); box-shadow: 0 0 10px var(--ember), 0 0 20px var(--blood); }
.cursor-ring {
  width: 38px; height: 38px; margin: -19px 0 0 -19px; border: 1px solid rgba(255, 90, 60, 0.6);
  display: grid; place-items: center; transition: width 0.35s var(--ease), height 0.35s var(--ease), margin 0.35s var(--ease), background 0.35s, border-color 0.35s;
}
.cursor-ring.is-hover { width: 74px; height: 74px; margin: -37px 0 0 -37px; background: rgba(179, 0, 27, 0.18); border-color: var(--ember); backdrop-filter: invert(0.08); }
.cursor-ring.is-down { width: 26px; height: 26px; margin: -13px 0 0 -13px; }
.cursor-label { font: 9px var(--f-mono); letter-spacing: 0.24em; color: #fff; opacity: 0; transition: opacity 0.3s; padding-left: 0.24em; }
.cursor-ring.is-hover .cursor-label { opacity: 1; }
body.cursor-hidden .cursor-dot, body.cursor-hidden .cursor-ring { opacity: 0; }

/* ---------------- responsive ---------------- */
@media (max-width: 900px) {
  body { font-size: 14px; }
  .hud-top { padding: 14px 16px; flex-wrap: wrap; gap: 8px; }
  .nav { order: 3; width: 100%; justify-content: space-between; gap: 0; }
  .nav a { padding: 8px 6px; font-size: 10px; letter-spacing: 0.16em; }
  .nav a::after { left: 6px; right: 6px; }
  .nav a i { display: none; }
  .timecode, .hud-bottom .hint { display: none; }
  .hud-bottom { padding: 10px 16px; }
  .panel-side { left: 12px; right: 12px; width: auto; top: auto; bottom: 40px; max-height: 58vh; padding: 24px 20px 28px; }
  .panel-side::before { display: none; }
  .panel-home { bottom: 44px; }
  .lede { font-size: 14px; }
  .pact { grid-template-columns: 1fr; }
  .pact-info { border-right: 0; border-bottom: 1px solid rgba(179, 0, 27, 0.2); padding: 36px 22px 24px; }
  .pact-form-wrap { padding: 28px 22px 34px; }
  .case-meta { grid-template-columns: 1fr; }
  .skip { right: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .glitch::before, .glitch::after, .sub-whisper { animation: none; }
}