/* =========================================================
   みてるよ、みてる。 v4
   平成入口 → ホラー → ポップアップ嵐 → モダン変貌
========================================================= */

:root {
  --bg: #030304;
  --bg2: #0a0a0d;
  --ink: #eee9dd;
  --muted: rgba(238, 233, 221, .62);
  --faint: rgba(238, 233, 221, .28);
  --red: #a10f24;
  --red2: #d21b36;
  --green: #6ef49c;
  --line: rgba(238, 233, 221, .14);
  --glass: rgba(255, 255, 255, .055);
  --mx: 50vw;
  --my: 50vh;
  --light-size: 20rem;
  --light-falloff: 58rem;
  --modern-bg: #f6f6f3;
  --modern-ink: #111315;
  --modern-muted: rgba(17, 19, 21, .62);
  --modern-card: rgba(255,255,255,.8);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: #fff7d6;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif;
}

a { color: inherit; }
button { font: inherit; }

/* ========== 平成入口 ========== */

.mode-heisei {
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .9), transparent 16rem),
    linear-gradient(45deg, #fff7d6 25%, #ffeec1 25%, #ffeec1 50%, #fff7d6 50%, #fff7d6 75%, #ffeec1 75%);
  background-size: auto, 32px 32px;
  color: #4b2f00;
}

.heisei-gate {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
  position: relative;
  overflow: hidden;
}

.heisei-clouds {
  position: fixed;
  inset: 0;
  pointer-events: none;
  color: rgba(255, 110, 170, .44);
  font-size: clamp(24px, 5vw, 70px);
}

.heisei-clouds span { position: absolute; animation: floatHeisei 5.4s ease-in-out infinite; }
.heisei-clouds span:nth-child(1) { left: 7%; top: 15%; }
.heisei-clouds span:nth-child(2) { right: 12%; top: 18%; animation-delay: -1s; }
.heisei-clouds span:nth-child(3) { left: 14%; bottom: 18%; animation-delay: -2s; }
.heisei-clouds span:nth-child(4) { right: 16%; bottom: 16%; animation-delay: -3s; }
.heisei-clouds span:nth-child(5) { left: 48%; top: 8%; animation-delay: -4s; }

@keyframes floatHeisei {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-12px) rotate(5deg); }
}

.heisei-window {
  width: min(900px, 96vw);
  border: 3px ridge #ff9bd2;
  background: #fffde8;
  box-shadow: 10px 10px 0 rgba(70, 30, 0, .22);
  position: relative;
  z-index: 2;
}

.heisei-titlebar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(90deg, #ff69b4, #8bdcff);
  color: #fff;
  font-family: "MS PGothic", "Osaka", sans-serif;
  font-weight: 900;
  padding: 7px 10px;
  text-shadow: 1px 1px #9a2b68;
}

.window-buttons { letter-spacing: .18em; }

.heisei-body {
  padding: clamp(18px, 4vw, 34px);
  text-align: center;
  font-family: "MS PGothic", "Yu Gothic", sans-serif;
}

.counter-box {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #000;
  color: #00ff66;
  border: 2px inset #d8d8d8;
  padding: 8px 12px;
  font-family: "Courier New", monospace;
  margin-bottom: 18px;
}

.counter-box b { color: #ffea00; letter-spacing: .14em; }

.heisei-logo {
  margin: 0 auto;
  max-width: 720px;
  font-size: clamp(44px, 10vw, 104px);
  line-height: .95;
  color: #ff66aa;
  letter-spacing: -.05em;
  text-shadow: 3px 3px #fff, 5px 5px #8bdcff, 7px 7px rgba(0,0,0,.14);
}

.heisei-logo span { display: block; white-space: nowrap; }

.heisei-sub { font-size: clamp(16px, 2.4vw, 22px); color: #5b4a00; margin: 18px 0; }

.marquee-wrap {
  overflow: hidden; border: 2px dashed #ff99cc; background: #fff; color: #ff3399;
  padding: 8px 0; margin: 20px auto;
}

.marquee {
  white-space: nowrap; display: inline-block; animation: marquee 18s linear infinite;
  min-width: 100%; font-weight: 900;
}

@keyframes marquee {
  from { transform: translateX(100%); }
  to { transform: translateX(-100%); }
}

.heisei-table { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; text-align: left; margin: 20px 0; }

.heisei-card { background: #ffffff; border: 2px ridge #8bdcff; padding: 14px; min-height: 150px; }
.heisei-card h2 { margin: 0 0 10px; color: #0048b8; font-size: 20px; border-bottom: 2px dotted #ff99cc; }
.heisei-card p { margin: 9px 0; }
.heisei-card a { color: #0000ee; font-size: 22px; font-weight: 900; text-decoration: underline; }
.heisei-card a:visited { color: #551a8b; }
.heisei-card a:hover { background: #ffff00; color: #ff0000; }

.heisei-badges { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; }
.heisei-badges span { border: 2px outset #ddd; background: linear-gradient(#fff, #ddd); padding: 4px 8px; font-size: 12px; color: #333; }
.heisei-note { margin: 18px 0 0; font-size: 12px; color: #7b6b39; }

/* ========== Exit popup ========== */

.exit-popup {
  position: fixed; z-index: 300; left: 50%; top: 50%; width: min(440px, 90vw);
  transform: translate(-50%, -50%) scale(.96); opacity: 0; pointer-events: none;
  background: #c0c0c0; border: 2px outset #fff; box-shadow: 12px 12px 0 rgba(0,0,0,.32);
  font-family: "MS PGothic", "Yu Gothic", sans-serif;
}
.exit-popup.is-show {
  opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1);
  animation: popupGlitch .12s steps(2) 12;
}
.popup-title { background: #000080; color: #fff; padding: 6px 8px; font-weight: 900; }
.popup-body { display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: start; padding: 18px 16px 10px; color: #111; }
.popup-icon { width: 38px; height: 38px; display: grid; place-items: center; background: #ffd400; border: 2px solid #000; font-weight: 900; font-size: 28px; }
.mojibake { margin: 0 0 8px; color: #111; word-break: break-all; }
.trap-message { margin: 0; font-size: 22px; font-weight: 900; color: #9b0016; }
.exit-popup button {
  display: block; margin: 10px auto 16px; min-width: 88px; padding: 5px 18px;
  border: 2px outset #fff; background: #c0c0c0; cursor: pointer;
}

body.exit-trap { animation: fullGlitch .11s steps(2) 20; }

@keyframes popupGlitch {
  from { filter: hue-rotate(0deg); transform: translate(calc(-50% - 4px), calc(-50% + 2px)); }
  to { filter: hue-rotate(45deg); transform: translate(calc(-50% + 5px), calc(-50% - 2px)); }
}
@keyframes fullGlitch { from { filter: none; } to { filter: contrast(1.3) saturate(1.4); transform: translateX(2px); } }

/* ========== Horror common ========== */

.horror-site {
  display: none;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% 0%, rgba(161,15,36,.20), transparent 34rem),
    radial-gradient(circle at 15% 85%, rgba(255,255,255,.05), transparent 22rem),
    linear-gradient(180deg, var(--bg), var(--bg2) 55%, #050507);
  overflow-x: hidden;
  cursor: crosshair;
}

body.mode-horror,
body.mode-modern {
  color: var(--ink);
  cursor: crosshair;
}

body.mode-horror .heisei-gate,
body.mode-modern .heisei-gate { display: none; }

body.mode-horror .horror-site,
body.mode-modern .horror-site {
  display: block;
  animation: enterDarkness 1.2s cubic-bezier(.2,.85,.12,1) both;
}

@keyframes enterDarkness {
  0% { opacity: 0; filter: brightness(4) contrast(.4) blur(12px); }
  18% { opacity: 1; filter: brightness(6) contrast(2) blur(2px); }
  24% { opacity: .35; }
  31% { opacity: 1; }
  100% { opacity: 1; filter: brightness(1) contrast(1) blur(0); }
}

.global-noise,
.global-scanline,
.vignette {
  position: fixed; inset: 0; pointer-events: none;
}

.global-noise {
  z-index: 90; opacity: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.18) 0 1px, transparent 1px),
    radial-gradient(circle at 80% 60%, rgba(255,255,255,.14) 0 1px, transparent 1px),
    radial-gradient(circle at 40% 80%, rgba(255,255,255,.10) 0 1px, transparent 1px);
  background-size: 13px 17px, 19px 23px, 29px 31px;
  animation: grain .42s steps(2) infinite;
}

.global-scanline {
  z-index: 91; opacity: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.035) 0,
    rgba(255,255,255,.035) 1px,
    transparent 2px,
    transparent 6px
  );
  mix-blend-mode: screen;
}

body.mode-horror .global-noise,
body.mode-modern .global-noise { opacity: .14; }

body.mode-horror .global-scanline,
body.mode-modern .global-scanline { opacity: .38; }

.vignette {
  z-index: 39;
  background: radial-gradient(circle at var(--mx) var(--my),
    transparent 0 var(--light-size),
    rgba(0,0,0,.20) calc(var(--light-size) + 9rem),
    rgba(0,0,0,.88) var(--light-falloff));
}

body.mode-modern .vignette { display: none; }

@keyframes grain {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-1%, 1%); }
  50% { transform: translate(1%, -1%); }
  75% { transform: translate(-1%, -1%); }
  100% { transform: translate(1%, 1%); }
}

.cursor-orb {
  position: fixed; z-index: 120; left: var(--mx); top: var(--my);
  width: 22px; height: 22px; border: 1px solid rgba(210, 27, 54, .88);
  border-radius: 999px; pointer-events: none; transform: translate(-50%, -50%);
  box-shadow: 0 0 28px rgba(210, 27, 54, .5); mix-blend-mode: screen; opacity: 0;
}

body.mode-horror .cursor-orb,
body.mode-modern .cursor-orb { opacity: 1; }

body.mode-modern .cursor-orb {
  border-color: rgba(0,0,0,.35);
  box-shadow: 0 0 18px rgba(0,0,0,.15);
}

.photo-layer {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.horror-photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; filter: brightness(.42) contrast(1.14) saturate(.75);
  transform: scale(1.04); transition: opacity 1.4s ease, transform 9s linear;
}
.horror-photo.active { opacity: .40; transform: scale(1.09); }

body.mode-modern .photo-layer::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(246,246,243,.94), rgba(246,246,243,.98));
  z-index: 2;
}
body.mode-modern .horror-photo {
  filter: grayscale(.2) contrast(1.1) brightness(1.05);
}
body.mode-modern .horror-photo.active { opacity: .11; transform: scale(1.04); }

.site-header {
  position: fixed; z-index: 80; top: 18px; left: 18px; right: 18px;
  display: grid; grid-template-columns: 1fr auto auto; gap: 18px; align-items: center;
  padding: 12px 14px; border: 1px solid var(--line); background: rgba(3,3,4,.64);
  backdrop-filter: blur(18px); box-shadow: 0 0 40px rgba(0,0,0,.32);
}

body.mode-modern .site-header {
  background: rgba(255,255,255,.72);
  border-color: rgba(17,19,21,.10);
  color: var(--modern-ink);
  box-shadow: 0 20px 60px rgba(0,0,0,.06);
}

.brand {
  display: inline-flex; align-items: center; gap: 10px; letter-spacing: .12em;
  font-weight: 900; text-decoration: none;
}
.brand-mark {
  color: var(--red2); filter: drop-shadow(0 0 12px rgba(210,27,54,.75));
  animation: blink 3.7s steps(1) infinite;
}
body.mode-modern .brand-mark { color: #1a1e20; filter: none; }

.nav { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

.nav a,
.lang-toggle,
.button,
.link-grid a {
  border: 1px solid var(--line);
  background: rgba(255,255,255,.045);
  color: inherit;
  transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.nav a {
  padding: 9px 12px; font-size: 12px; letter-spacing: .16em; text-decoration: none;
}

.nav a:hover,
.nav a.is-active,
.lang-toggle:hover,
.button:hover,
.link-grid a:hover {
  transform: translateY(-2px);
  border-color: rgba(210,27,54,.72);
  background: rgba(161,15,36,.16);
  box-shadow: 0 0 24px rgba(161,15,36,.14);
}

body.mode-modern .nav a,
body.mode-modern .lang-toggle,
body.mode-modern .button,
body.mode-modern .link-grid a {
  background: rgba(255,255,255,.72);
  border-color: rgba(17,19,21,.10);
}
body.mode-modern .nav a:hover,
body.mode-modern .nav a.is-active,
body.mode-modern .lang-toggle:hover,
body.mode-modern .button:hover,
body.mode-modern .link-grid a:hover {
  background: #111315;
  color: #fff;
  border-color: #111315;
  box-shadow: 0 10px 30px rgba(0,0,0,.09);
}

.lang-toggle { cursor: pointer; padding: 9px 12px; letter-spacing: .12em; }
html[data-lang="ja"] .lang-ja, html[data-lang="en"] .lang-en {
  color: var(--red2); text-shadow: 0 0 14px rgba(210,27,54,.7);
}
body.mode-modern html[data-lang="ja"] .lang-ja,
body.mode-modern html[data-lang="en"] .lang-en { color: #111315; text-shadow: none; }
.slash { color: var(--faint); padding: 0 4px; }

.side-hud {
  position: fixed; z-index: 50; right: 24px; top: 110px; width: 190px; padding: 14px;
  border: 1px solid rgba(238,233,221,.12); background: rgba(3,3,4,.48);
  backdrop-filter: blur(14px); color: rgba(238,233,221,.48);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px; letter-spacing: .12em;
}
body.mode-modern .side-hud {
  background: rgba(255,255,255,.64);
  color: rgba(17,19,21,.58);
  border-color: rgba(17,19,21,.08);
}
.hud-line + .hud-line { margin-top: 8px; }

.horror-site main { position: relative; z-index: 2; }
.section {
  min-height: 100vh; padding: 150px clamp(22px, 6vw, 90px) 90px;
  display: grid; align-content: center; position: relative;
}
.section::before {
  content: ""; position: absolute; inset: 70px clamp(14px, 3vw, 34px);
  border: 1px solid rgba(238,233,221,.08); pointer-events: none;
}
body.mode-modern .section::before { border-color: rgba(17,19,21,.06); }

.hero {
  grid-template-columns: minmax(0, 1fr) minmax(260px, 460px);
  gap: clamp(28px, 6vw, 90px); align-items: center;
}

.eyebrow {
  color: var(--red2); letter-spacing: .32em; font-size: 12px; font-weight: 900; margin: 0 0 20px;
}
body.mode-modern .eyebrow { color: rgba(17,19,21,.50); }

h1, h2, h3, p { margin-top: 0; }

h2 {
  font-size: clamp(36px, 6vw, 84px); line-height: .96; letter-spacing: -.06em; max-width: 880px;
}
body.mode-modern h2 { color: var(--modern-ink); }

.glitch-title {
  position: relative; font-size: clamp(54px, 11vw, 154px); line-height: .90;
  letter-spacing: -.095em; max-width: 980px; margin: 0; white-space: pre-line;
  text-shadow: 0 0 24px rgba(161,15,36,.22);
}
body.mode-modern .glitch-title {
  color: var(--modern-ink);
  text-shadow: none;
}
.glitch-title span { white-space: pre-line; display: block; }
.glitch-title::before,
.glitch-title::after {
  content: attr(data-text-ja); position: absolute; inset: 0; opacity: 0; pointer-events: none; white-space: pre-line;
}
html[data-lang="en"] .glitch-title::before,
html[data-lang="en"] .glitch-title::after { content: attr(data-text-en); }
.glitch-title::before {
  color: rgba(210,27,54,.9); transform: translate(3px, -2px); clip-path: inset(0 0 60% 0);
  animation: textTear 4.2s steps(1) infinite;
}
.glitch-title::after {
  color: rgba(238,233,221,.58); transform: translate(-3px, 2px); clip-path: inset(58% 0 0 0);
  animation: textTear 5.4s steps(1) infinite reverse;
}
body.mode-modern .glitch-title::before,
body.mode-modern .glitch-title::after {
  color: rgba(17,19,21,.18);
  animation-duration: 7.2s;
}

@keyframes textTear {
  0%, 78%, 100% { opacity: 0; }
  79% { opacity: .9; transform: translate(12px, -4px); }
  80% { opacity: .18; transform: translate(-10px, 4px); }
  81% { opacity: .7; transform: translate(4px, 1px); }
  82% { opacity: 0; }
}

.lead {
  max-width: 720px; color: var(--muted); line-height: 2.15; letter-spacing: .06em;
  margin: 34px 0 0; font-size: clamp(16px, 2.1vw, 20px);
}
body.mode-modern .lead,
body.mode-modern .panel,
body.mode-modern .work-card p,
body.mode-modern .terminal,
body.mode-modern .site-footer { color: var(--modern-muted); }

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.button { cursor: pointer; padding: 14px 18px; letter-spacing: .16em; font-weight: 900; text-decoration: none; }
.button.primary { background: rgba(161,15,36,.25); border-color: rgba(210,27,54,.6); }
.button.ghost { background: transparent; }

.hidden-escape-link {
  display: inline-block;
  margin-top: 24px;
  font-size: 10px;
  opacity: .12;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: rgba(238,233,221,.6);
  text-decoration: none;
  transition: opacity .2s ease, transform .2s ease;
}
.hidden-escape-link:hover {
  opacity: .75;
  transform: translateX(4px);
}
body.mode-modern .hidden-escape-link {
  opacity: .45;
  color: rgba(17,19,21,.35);
}

.monitor {
  border: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(255,255,255,.08), transparent 38%), rgba(0,0,0,.54);
  box-shadow: 0 0 80px rgba(161,15,36,.16), inset 0 0 60px rgba(255,255,255,.04);
  min-height: 560px; position: relative; overflow: hidden;
}
body.mode-modern .monitor {
  background: rgba(255,255,255,.72);
  border-color: rgba(17,19,21,.10);
  box-shadow: 0 24px 70px rgba(0,0,0,.08);
}

.live-monitor::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(transparent 0 96%, rgba(255,255,255,.08) 96% 100%);
  background-size: 100% 4px;
  opacity: .16;
  mix-blend-mode: screen;
  pointer-events: none;
}

.monitor-top {
  display: flex; justify-content: space-between; padding: 12px 14px;
  color: rgba(238,233,221,.52); border-bottom: 1px solid var(--line);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px;
}
body.mode-modern .monitor-top {
  color: rgba(17,19,21,.52);
  border-color: rgba(17,19,21,.10);
}
.live-dot::before {
  content: "●";
  color: #ff3344;
  margin-right: 6px;
  animation: blink 1.4s steps(1) infinite;
}

.monitor-screen {
  min-height: 510px; position: relative; overflow: hidden;
  display: grid; place-items: center;
}

.live-art {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: contrast(1.08) saturate(1.05) brightness(.82);
  transform: scale(1.03);
}
body.mode-modern .live-art {
  filter: contrast(1.04) saturate(.92) brightness(1.0);
}

.feed-grid {
  position: absolute; inset: 0;
  background:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 36px 36px;
  mix-blend-mode: overlay;
  opacity: .28;
}
body.mode-modern .feed-grid { opacity: .08; }

.tracking-target {
  position: absolute; width: 44px; height: 44px;
  border: 1px solid rgba(110,244,156,.8);
  border-radius: 999px;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 18px rgba(110,244,156,.22);
  pointer-events: none;
}
.tracking-target::before,
.tracking-target::after {
  content: ""; position: absolute; background: rgba(110,244,156,.84);
}
.tracking-target::before { width: 1px; height: 62px; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.tracking-target::after { width: 62px; height: 1px; left: 50%; top: 50%; transform: translate(-50%, -50%); }

.eye-rig {
  position: absolute;
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 999px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.24), rgba(0,0,0,.08));
  box-shadow: 0 0 24px rgba(255,255,255,.12);
  opacity: .92;
}
.eye-rig::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 24px rgba(255,255,255,.12);
}
.main-eye {
  width: 70px; height: 40px;
  left: 55%; top: 25.5%;
  transform: translate(-50%, -50%) rotate(-5deg);
}
.sub-eye {
  width: 44px; height: 24px;
  left: 57.5%; top: 28.3%;
  transform: translate(-50%, -50%) rotate(-5deg);
  opacity: .0; /* default hidden; becomes visible during scares */
}
.sub-eye.is-active { opacity: .82; }

.pupil {
  position: absolute;
  width: 16px; height: 16px;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background: #0a0d10;
  border-radius: 999px;
  box-shadow: 0 0 0 4px rgba(255,255,255,.66), 0 0 12px rgba(0,0,0,.45);
}
.main-eye .pupil { width: 17px; height: 17px; }
.sub-eye .pupil { width: 10px; height: 10px; }

.monitor-overlay {
  position: absolute; inset: 0; display: flex; justify-content: space-between;
  align-items: flex-start; padding: 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px; letter-spacing: .12em; color: rgba(255,255,255,.76);
}
.overlay-left,
.overlay-right {
  display: grid; gap: 8px;
}
.overlay-right { text-align: right; }

.monitor-warning {
  position: absolute; bottom: 20px; left: 20px;
  color: rgba(255,255,255,.84); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px; letter-spacing: .18em;
  text-shadow: 0 0 16px rgba(210,27,54,.42);
}
body.mode-modern .monitor-warning,
body.mode-modern .monitor-overlay { color: rgba(17,19,21,.74); }

.split {
  grid-template-columns: minmax(0, .9fr) minmax(280px, 620px);
  gap: clamp(26px, 6vw, 90px); align-items: start;
}

.panel, .terminal, .work-card {
  border: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(255,255,255,.06), transparent 35%), rgba(0,0,0,.45);
  box-shadow: inset 0 0 55px rgba(255,255,255,.028), 0 0 55px rgba(0,0,0,.2);
}

body.mode-modern .panel,
body.mode-modern .terminal,
body.mode-modern .work-card {
  background: var(--modern-card);
  border-color: rgba(17,19,21,.08);
  box-shadow: 0 24px 60px rgba(0,0,0,.05);
}

.panel { padding: clamp(22px, 4vw, 38px); color: var(--muted); line-height: 2.1; letter-spacing: .06em; }

.creepy-list { padding: 0; margin: 24px 0 0; list-style: none; }
.creepy-list li { border-top: 1px solid rgba(238,233,221,.10); padding: 13px 0; }
.creepy-list li::before { content: "＊"; color: var(--red2); margin-right: 12px; }
body.mode-modern .creepy-list li { border-color: rgba(17,19,21,.10); }

.cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin-top: 28px; }

.work-card { min-height: 270px; padding: 24px; position: relative; overflow: hidden; }
.work-card::before {
  content: ""; position: absolute; inset: -40%;
  background: radial-gradient(circle, rgba(210,27,54,.18), transparent 28%);
  transform: translate(calc((var(--mx) - 50vw) * .03), calc((var(--my) - 50vh) * .03));
  opacity: .48;
}
body.mode-modern .work-card::before {
  background: linear-gradient(135deg, rgba(0,0,0,.035), transparent 50%);
  opacity: 1;
}
.work-card > * { position: relative; }

.card-number {
  display: inline-block; color: var(--red2);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; margin-bottom: 55px;
}
body.mode-modern .card-number { color: rgba(17,19,21,.42); }
.work-card h3 { font-size: 28px; line-height: 1.05; margin-bottom: 18px; }
body.mode-modern .work-card h3 { color: var(--modern-ink); }
.work-card p { color: var(--muted); line-height: 1.9; }

.terminal {
  padding: 24px; min-height: 320px; color: rgba(238,233,221,.72);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  line-height: 1.8; letter-spacing: .06em;
}
.terminal p { margin-bottom: 10px; }
.link-grid { display: grid; gap: 10px; margin-top: 24px; }
.link-grid a { display: block; padding: 14px; letter-spacing: .12em; text-decoration: none; }

.site-footer {
  position: relative; z-index: 3; display: flex; justify-content: space-between; gap: 20px;
  padding: 26px clamp(22px, 6vw, 90px); color: rgba(238,233,221,.42);
  font-size: 12px; letter-spacing: .08em; border-top: 1px solid rgba(238,233,221,.09);
}
body.mode-modern .site-footer { border-color: rgba(17,19,21,.08); }

.eye-field {
  position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: .44;
}
.eye {
  position: absolute; width: clamp(36px, 5vw, 70px); aspect-ratio: 1.9; border-radius: 50%;
  border: 1px solid rgba(238,233,221,.16);
  background: radial-gradient(circle at var(--eye-x, 50%) var(--eye-y, 50%), #050506 0 13%, #eee9dd 14% 22%, rgba(255,255,255,.05) 23% 100%);
  box-shadow: 0 0 20px rgba(238,233,221,.04); transform: rotate(var(--rot, 0deg)); opacity: var(--op, .45);
}
body.mode-modern .eye {
  border-color: rgba(17,19,21,.10);
  background: radial-gradient(circle at var(--eye-x, 50%) var(--eye-y, 50%), #111315 0 13%, #fff 14% 22%, rgba(17,19,21,.04) 23% 100%);
}
.eye-a { left: 8%; top: 20%; --rot: -8deg; --op: .34; }
.eye-b { right: 8%; top: 24%; --rot: 7deg; --op: .42; }
.eye-c { left: 18%; bottom: 16%; --rot: 13deg; --op: .3; }
.eye-d { right: 18%; bottom: 12%; --rot: -11deg; --op: .36; }
.eye-e { left: 48%; top: 9%; --rot: 2deg; --op: .28; }
.eye-f { left: 42%; bottom: 7%; --rot: -3deg; --op: .24; }
.eye-g { right: 38%; top: 56%; --rot: 5deg; --op: .18; }

.jump-layer {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: radial-gradient(circle, rgba(210,27,54,.50), transparent 30%), rgba(0,0,0,.88);
  opacity: 0; pointer-events: none; transition: opacity .18s ease;
}
.jump-layer.is-show { opacity: 1; }
.jump-text {
  color: var(--ink); font-size: clamp(42px, 11vw, 160px); font-weight: 900; letter-spacing: .22em;
  text-shadow: 0 0 30px rgba(210,27,54,.72); animation: jumpText .16s steps(2) infinite;
}
@keyframes jumpText {
  from { transform: translate(-2px, 2px) skewX(-4deg); }
  to { transform: translate(3px, -1px) skewX(3deg); }
}
@keyframes blink {
  0%, 88%, 100% { opacity: 1; }
  89%, 91% { opacity: .1; }
  92%, 94% { opacity: 1; }
  95% { opacity: .25; }
}

body.is-haunted .monitor,
body.is-haunted .panel,
body.is-haunted .work-card,
body.is-haunted .terminal {
  animation: hauntedShake .12s steps(2) 9;
}
@keyframes hauntedShake { from { transform: translateX(-2px); } to { transform: translateX(2px); } }

/* Popup storm */
.popup-storm {
  position: fixed; inset: 0; z-index: 250; pointer-events: none;
}
.storm-popup {
  position: absolute;
  width: min(300px, 80vw);
  background: #efefef;
  border: 2px outset #fff;
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
  font-family: "MS PGothic", sans-serif;
  overflow: hidden;
  animation: stormShake .16s steps(2) infinite;
}
.storm-title {
  background: #000080;
  color: #fff;
  padding: 4px 6px;
  font-size: 12px;
  font-weight: 900;
}
.storm-body {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 8px;
  align-items: start;
  padding: 12px;
  color: #111;
  font-size: 12px;
}
.storm-icon {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: #ffd400;
  border: 2px solid #000;
  font-weight: 900;
}
.storm-message {
  font-size: 18px;
  color: #8d001c;
  font-weight: 900;
  margin: 0 0 8px;
}
.storm-gibberish { margin: 0; word-break: break-all; }
@keyframes stormShake {
  from { transform: translate(-1px, 2px); }
  to { transform: translate(2px, -2px); }
}

/* Modern mode transform */
body.mode-modern {
  background: var(--modern-bg);
  color: var(--modern-ink);
}
body.mode-modern .horror-site {
  background:
    radial-gradient(circle at 0% 0%, rgba(0,0,0,.05), transparent 30rem),
    linear-gradient(180deg, #fafaf7, #f1f1ec);
}
body.mode-modern .jump-layer { display: none; }

@media (max-width: 980px) {
  .site-header { grid-template-columns: 1fr auto; }
  .nav { grid-column: 1 / -1; justify-content: flex-start; }
  .hero, .split { grid-template-columns: 1fr; }
  .monitor { min-height: 420px; }
  .monitor-screen { min-height: 370px; }
  .cards, .heisei-table { grid-template-columns: 1fr; }
  .side-hud { display: none; }
}

@media (max-width: 640px) {
  .site-header { top: 10px; left: 10px; right: 10px; gap: 10px; }
  .brand { letter-spacing: .06em; font-size: 13px; }
  .nav a { padding: 8px 9px; font-size: 11px; }
  .section { padding-top: 170px; }
  .site-footer { flex-direction: column; }
  .cursor-orb { display: none; }
  .heisei-logo { font-size: clamp(42px, 16vw, 74px); }
  .main-eye { width: 58px; height: 32px; }
  .sub-eye { width: 36px; height: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}


/* =========================================================
   v5 修正: 明るさ、ライト追従、スクロール崩れ対策、WORKS実装
========================================================= */

:root {
  --light-size: 28rem;
  --light-falloff: 82rem;
}

/* 暗すぎ対策: 本編のベースを少し明るく、背景写真も見えるように */
.horror-site {
  background:
    radial-gradient(circle at 50% 0%, rgba(161,15,36,.26), transparent 38rem),
    radial-gradient(circle at 15% 85%, rgba(255,255,255,.10), transparent 26rem),
    linear-gradient(180deg, #08080b, #101014 56%, #09090c) !important;
}

.horror-photo {
  filter: brightness(.74) contrast(1.08) saturate(.86) !important;
}

.horror-photo.active {
  opacity: .62 !important;
}

.vignette {
  /* transitionを使わず即時追従。スクロール中もfixed基準で安定 */
  will-change: background;
  background:
    radial-gradient(circle at var(--mx) var(--my),
      rgba(255,255,255,.10) 0 7rem,
      rgba(255,255,255,.035) 8rem var(--light-size),
      rgba(0,0,0,.24) calc(var(--light-size) + 12rem),
      rgba(0,0,0,.72) var(--light-falloff)) !important;
}

.global-scanline {
  opacity: .24 !important;
}

.global-noise {
  opacity: .08 !important;
}

.section::before {
  inset: 88px clamp(14px, 3vw, 34px) 48px !important;
}

/* スクロール時に重いfixed要素が暴れないように軽量化 */
.photo-layer,
.vignette,
.global-noise,
.global-scanline,
.cursor-orb {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* 本文の視認性 */
.lead,
.panel,
.work-card p,
.terminal {
  color: rgba(245,242,232,.78) !important;
}

.site-header {
  background: rgba(8,8,10,.78) !important;
}

.monitor,
.panel,
.terminal,
.work-card,
.work-card2,
.work-detail {
  background-color: rgba(9,9,12,.68) !important;
}

/* 入口カウンター444固定表示の見た目 */
.counter-box b {
  color: #ff4444 !important;
  text-shadow: 0 0 8px rgba(255, 0, 0, .35);
}

/* WORKS本実装 */
.works-section {
  align-content: start;
}

.section-head {
  max-width: 980px;
  margin-bottom: 28px;
}

.section-lead {
  max-width: 760px;
  color: rgba(245,242,232,.76);
  line-height: 2;
  letter-spacing: .05em;
}

.works-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 22px;
  position: relative;
  z-index: 2;
}

.filter-button {
  cursor: pointer;
  border: 1px solid rgba(238,233,221,.18);
  background: rgba(255,255,255,.055);
  color: var(--ink);
  padding: 10px 14px;
  letter-spacing: .14em;
  font-size: 12px;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.filter-button:hover,
.filter-button.is-active {
  transform: translateY(-2px);
  background: rgba(210,27,54,.18);
  border-color: rgba(210,27,54,.68);
}

.works-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  position: relative;
  z-index: 2;
}

.work-card2 {
  border: 1px solid rgba(238,233,221,.14);
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), transparent 36%),
    rgba(5,5,8,.70);
  min-height: 420px;
  overflow: hidden;
  cursor: pointer;
  display: grid;
  grid-template-rows: 210px 1fr;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, opacity .22s ease;
}

.work-card2:hover,
.work-card2.is-selected {
  transform: translateY(-5px);
  border-color: rgba(210,27,54,.7);
  box-shadow: 0 22px 80px rgba(0,0,0,.28), 0 0 40px rgba(210,27,54,.12);
}

.work-card2.is-hidden {
  display: none;
}

.work-thumb {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,.035);
}

.work-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.78) contrast(1.12);
  transform: scale(1.03);
  transition: transform .8s ease, filter .3s ease;
}

.work-card2:hover .work-thumb img {
  transform: scale(1.10);
  filter: brightness(.96) contrast(1.18);
}

.live-thumb img {
  object-position: center;
}

.tool-thumb {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 25%, rgba(210,27,54,.22), transparent 18rem),
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
}

.abstract-thumb {
  width: 130px;
  height: 130px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  color: rgba(238,233,221,.9);
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -.06em;
  box-shadow: inset 0 0 50px rgba(210,27,54,.12), 0 0 45px rgba(210,27,54,.12);
}

.work-status {
  position: absolute;
  right: 12px;
  top: 12px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.55);
  padding: 6px 8px;
  font-size: 11px;
  letter-spacing: .12em;
  color: rgba(255,255,255,.88);
}

.work-info {
  padding: 20px;
}

.work-type {
  display: inline-block;
  margin-bottom: 16px;
  color: rgba(210,27,54,.94);
  font-size: 11px;
  letter-spacing: .22em;
  font-weight: 900;
}

.work-card2 h3 {
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.03;
  margin-bottom: 14px;
}

.work-card2 p {
  color: rgba(245,242,232,.72);
  line-height: 1.8;
  margin: 0;
}

.work-detail {
  position: sticky;
  bottom: 18px;
  z-index: 4;
  margin-top: 22px;
  border: 1px solid rgba(238,233,221,.14);
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), transparent 36%),
    rgba(5,5,8,.78);
  backdrop-filter: blur(16px);
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 18px;
  align-items: end;
}

.detail-status {
  display: inline-block;
  margin-bottom: 10px;
  color: rgba(210,27,54,.92);
  font-size: 11px;
  letter-spacing: .2em;
  font-weight: 900;
}

.work-detail h3 {
  margin-bottom: 8px;
  font-size: clamp(24px, 4vw, 42px);
}

.work-detail p {
  max-width: 760px;
  color: rgba(245,242,232,.72);
  line-height: 1.8;
  margin-bottom: 8px;
}

.detail-tags {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: rgba(245,242,232,.50) !important;
}

.detail-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.detail-links a {
  border: 1px solid rgba(238,233,221,.16);
  padding: 10px 12px;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: .1em;
  font-size: 12px;
}

.disabled-link {
  opacity: .45;
  pointer-events: none;
}

/* モダン変貌後もWORKSは見やすく */
body.mode-modern .section-lead,
body.mode-modern .work-card2 p,
body.mode-modern .work-detail p {
  color: rgba(17,19,21,.65) !important;
}

body.mode-modern .filter-button {
  color: var(--modern-ink);
  background: rgba(255,255,255,.75);
  border-color: rgba(17,19,21,.10);
}

body.mode-modern .filter-button:hover,
body.mode-modern .filter-button.is-active {
  color: #fff;
  background: #111315;
  border-color: #111315;
}

body.mode-modern .work-card2,
body.mode-modern .work-detail {
  background: rgba(255,255,255,.78) !important;
  border-color: rgba(17,19,21,.08);
  box-shadow: 0 24px 70px rgba(0,0,0,.06);
}

body.mode-modern .work-card2 h3,
body.mode-modern .work-detail h3 {
  color: var(--modern-ink);
}

body.mode-modern .work-type,
body.mode-modern .detail-status {
  color: rgba(17,19,21,.48);
}

body.mode-modern .detail-links a {
  color: var(--modern-ink);
  border-color: rgba(17,19,21,.10);
  background: rgba(255,255,255,.60);
}

body.mode-modern .detail-links a:hover {
  color: #fff;
  background: #111315;
}

body.mode-modern .abstract-thumb {
  color: var(--modern-ink);
  border-color: rgba(17,19,21,.14);
  box-shadow: inset 0 0 50px rgba(0,0,0,.04);
}

body.mode-modern .work-status {
  color: rgba(17,19,21,.76);
  background: rgba(255,255,255,.74);
  border-color: rgba(17,19,21,.10);
}

/* 画面幅対策 */
@media (max-width: 1120px) {
  .works-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .works-grid {
    grid-template-columns: 1fr;
  }

  .work-detail {
    position: static;
    grid-template-columns: 1fr;
  }

  .detail-links {
    justify-content: flex-start;
  }

  :root {
    --light-size: 22rem;
    --light-falloff: 62rem;
  }
}


/* =========================================================
   v6 DIARY page
   危険な具体描写なしの心理ホラー独白
========================================================= */

.diary-section {
  align-content: start;
}

.diary-layout {
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
  gap: 18px;
  position: relative;
  z-index: 2;
}

.diary-index {
  display: grid;
  gap: 10px;
  align-content: start;
  position: sticky;
  top: 120px;
}

.diary-tab {
  cursor: pointer;
  text-align: left;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  align-items: center;
  border: 1px solid rgba(238,233,221,.14);
  background: rgba(5,5,8,.66);
  color: var(--ink);
  padding: 14px;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.diary-tab:hover,
.diary-tab.is-active {
  transform: translateX(4px);
  border-color: rgba(210,27,54,.68);
  background: rgba(210,27,54,.15);
}

.diary-tab span {
  color: rgba(210,27,54,.92);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 900;
}

.diary-tab b {
  font-size: 14px;
  letter-spacing: .05em;
}

.diary-reader {
  border: 1px solid rgba(238,233,221,.14);
  background:
    linear-gradient(135deg, rgba(255,255,255,.075), transparent 36%),
    rgba(5,5,8,.76);
  backdrop-filter: blur(16px);
  min-height: 620px;
  padding: clamp(24px, 5vw, 56px);
  box-shadow: 0 24px 90px rgba(0,0,0,.24);
  position: relative;
  overflow: hidden;
}

.diary-reader::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: .28;
}

.diary-reader > * {
  position: relative;
}

.diary-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px;
  color: rgba(245,242,232,.46);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .16em;
  font-size: 12px;
  margin-bottom: 28px;
}

.diary-reader h3 {
  font-size: clamp(34px, 6vw, 76px);
  line-height: 1;
  letter-spacing: -.06em;
  margin-bottom: 30px;
}

.diary-body {
  max-width: 860px;
  color: rgba(245,242,232,.82);
  font-size: clamp(16px, 2vw, 19px);
  line-height: 2.25;
  letter-spacing: .055em;
}

.diary-body p {
  margin-bottom: 1.25em;
}

.diary-body .redacted {
  display: inline-block;
  background: rgba(245,242,232,.84);
  color: transparent;
  min-width: 7em;
  height: 1.05em;
  transform: translateY(.18em);
  filter: blur(.2px);
}

.diary-body .broken {
  display: inline-block;
  color: rgba(210,27,54,.92);
  animation: diaryBroken 1.6s steps(2) infinite;
}

@keyframes diaryBroken {
  0%, 100% { transform: translate(0,0); opacity: .78; }
  50% { transform: translate(2px,-1px); opacity: 1; }
}

.diary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 34px;
}

.diary-actions button {
  cursor: pointer;
  border: 1px solid rgba(238,233,221,.16);
  background: rgba(255,255,255,.055);
  color: var(--ink);
  padding: 12px 14px;
  letter-spacing: .12em;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.diary-actions button:hover {
  transform: translateY(-2px);
  background: rgba(210,27,54,.16);
  border-color: rgba(210,27,54,.62);
}

.diary-afterword {
  position: relative;
  z-index: 2;
  margin-top: 18px;
  border: 1px solid rgba(238,233,221,.12);
  background: rgba(5,5,8,.62);
  padding: 18px;
  color: rgba(245,242,232,.68);
  line-height: 1.9;
  font-size: 13px;
}

.diary-thumb {
  background:
    radial-gradient(circle at 50% 40%, rgba(210,27,54,.22), transparent 13rem),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.04) 0 1px, transparent 1px 8px),
    rgba(5,5,8,.9);
}

body.mode-modern .diary-tab,
body.mode-modern .diary-reader,
body.mode-modern .diary-afterword {
  background: rgba(255,255,255,.78) !important;
  color: var(--modern-ink);
  border-color: rgba(17,19,21,.08);
  box-shadow: 0 24px 70px rgba(0,0,0,.06);
}

body.mode-modern .diary-tab:hover,
body.mode-modern .diary-tab.is-active {
  color: #fff;
  background: #111315 !important;
  border-color: #111315;
}

body.mode-modern .diary-body,
body.mode-modern .diary-afterword {
  color: rgba(17,19,21,.68) !important;
}

body.mode-modern .diary-meta {
  color: rgba(17,19,21,.46);
}

body.mode-modern .diary-reader h3 {
  color: var(--modern-ink);
}

body.mode-modern .diary-actions button {
  color: var(--modern-ink);
  background: rgba(255,255,255,.7);
  border-color: rgba(17,19,21,.10);
}

body.mode-modern .diary-actions button:hover {
  color: #fff;
  background: #111315;
  border-color: #111315;
}

body.mode-modern .diary-body .redacted {
  background: rgba(17,19,21,.82);
}

@media (max-width: 900px) {
  .diary-layout {
    grid-template-columns: 1fr;
  }

  .diary-index {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .diary-index {
    grid-template-columns: 1fr;
  }

  .diary-reader {
    min-height: auto;
  }
}


/* =========================================================
   v7 Link icons + Joke cat page
========================================================= */

/* Link icon system */
.nav a,
.icon-button,
.link-grid a,
.detail-links a,
.hidden-escape-link,
.cat-actions button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.nav a img,
.icon-button img,
.link-grid a img,
.detail-links a img,
.hidden-escape-link img,
.cat-actions button img {
  width: 1.08em;
  height: 1.08em;
  flex: 0 0 auto;
  object-fit: contain;
  color: currentColor;
  filter: drop-shadow(0 0 7px rgba(210,27,54,.22));
}

.nav a img {
  width: 14px;
  height: 14px;
}

.hidden-escape-link img {
  width: 11px;
  height: 11px;
}

body.mode-modern .nav a img,
body.mode-modern .icon-button img,
body.mode-modern .link-grid a img,
body.mode-modern .detail-links a img,
body.mode-modern .hidden-escape-link img,
body.mode-modern .cat-actions button img {
  filter: none;
}

/* Neko joke page */
.neko-section {
  align-content: start;
}

.neko-room {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(280px, 620px) minmax(240px, 1fr);
  gap: 18px;
  align-items: stretch;
}

.neko-card {
  border: 1px solid rgba(238,233,221,.14);
  background:
    radial-gradient(circle at 30% 18%, rgba(255, 209, 231, .22), transparent 16rem),
    radial-gradient(circle at 80% 85%, rgba(130, 224, 255, .12), transparent 18rem),
    rgba(8,8,10,.72);
  min-height: 620px;
  padding: clamp(22px, 4vw, 44px);
  display: grid;
  place-items: center;
  align-content: center;
  gap: 24px;
  overflow: hidden;
  box-shadow: 0 24px 90px rgba(0,0,0,.22);
}

.cat-visual {
  width: min(360px, 76vw);
  height: 360px;
  position: relative;
  transform-origin: 50% 80%;
  animation: catFloat 3.6s ease-in-out infinite;
}

@keyframes catFloat {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-8px) rotate(1deg); }
}

.cat-body {
  position: absolute;
  left: 50%;
  bottom: 20px;
  width: 220px;
  height: 190px;
  transform: translateX(-50%);
  border-radius: 48% 48% 34% 34%;
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.65), transparent 24%),
    linear-gradient(135deg, #f7c6db, #f2b5d4 60%, #f49bd0);
  box-shadow: inset 0 -24px 45px rgba(0,0,0,.10), 0 24px 60px rgba(255,140,200,.16);
}

.cat-tail {
  position: absolute;
  right: 34px;
  bottom: 78px;
  width: 150px;
  height: 52px;
  border: 28px solid #f4a6d0;
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  transform: rotate(-18deg);
  animation: tailWag 2.1s ease-in-out infinite;
  transform-origin: left center;
}

@keyframes tailWag {
  0%, 100% { transform: rotate(-18deg); }
  50% { transform: rotate(-2deg); }
}

.cat-face {
  position: absolute;
  left: 50%;
  top: 42px;
  width: 250px;
  height: 220px;
  transform: translateX(-50%);
  border-radius: 46% 46% 42% 42%;
  background:
    radial-gradient(circle at 35% 26%, rgba(255,255,255,.92), transparent 18%),
    linear-gradient(135deg, #ffe6f2, #ffc3df 62%, #f6a9d1);
  box-shadow: inset 0 -18px 36px rgba(0,0,0,.08), 0 22px 70px rgba(255,150,210,.18);
}

.cat-ear {
  position: absolute;
  top: 22px;
  width: 92px;
  height: 110px;
  background: #ffc3df;
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
  z-index: 0;
}

.cat-ear.left {
  left: 64px;
  transform: rotate(-20deg);
}

.cat-ear.right {
  right: 64px;
  transform: rotate(20deg);
}

.cat-ear::after {
  content: "";
  position: absolute;
  inset: 28px 26px 16px;
  background: #ff8fc6;
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
  opacity: .65;
}

.cat-eye {
  position: absolute;
  top: 86px;
  width: 34px;
  height: 46px;
  background: #151719;
  border-radius: 50%;
  box-shadow: inset 7px 9px 0 rgba(255,255,255,.86);
  animation: catBlink 5.2s steps(1) infinite;
}

.cat-eye.left { left: 70px; }
.cat-eye.right { right: 70px; }

@keyframes catBlink {
  0%, 92%, 100% { transform: scaleY(1); }
  94%, 96% { transform: scaleY(.08); }
}

.cat-nose {
  position: absolute;
  left: 50%;
  top: 136px;
  width: 22px;
  height: 16px;
  background: #ff6ea8;
  border-radius: 50%;
  transform: translateX(-50%);
}

.cat-mouth {
  position: absolute;
  left: 50%;
  top: 154px;
  width: 46px;
  height: 22px;
  border-bottom: 3px solid #151719;
  border-radius: 50%;
  transform: translateX(-50%);
}

.cat-whisker {
  position: absolute;
  top: 142px;
  width: 78px;
  height: 2px;
  background: rgba(21,23,25,.78);
}

.cat-whisker.w1 { left: 18px; transform: rotate(8deg); }
.cat-whisker.w2 { left: 18px; top: 158px; transform: rotate(-6deg); }
.cat-whisker.w3 { right: 18px; transform: rotate(-8deg); }
.cat-whisker.w4 { right: 18px; top: 158px; transform: rotate(6deg); }

.cat-dialogue {
  max-width: 520px;
  border: 1px solid rgba(238,233,221,.16);
  background: rgba(255,255,255,.08);
  padding: 18px;
  color: rgba(245,242,232,.84);
  line-height: 1.85;
  letter-spacing: .055em;
}

.cat-dialogue p {
  margin: 0;
}

.cat-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.cat-actions button {
  cursor: pointer;
  border: 1px solid rgba(238,233,221,.16);
  background: rgba(255,255,255,.07);
  color: var(--ink);
  padding: 12px 14px;
  letter-spacing: .1em;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.cat-actions button:hover {
  transform: translateY(-3px);
  background: rgba(255, 182, 220, .16);
  border-color: rgba(255, 182, 220, .55);
}

.neko-log {
  border: 1px solid rgba(238,233,221,.14);
  background: rgba(5,5,8,.72);
  padding: 22px;
  color: rgba(245,242,232,.72);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  line-height: 1.9;
  letter-spacing: .06em;
  min-height: 620px;
}

.neko-log p {
  margin: 0 0 10px;
}

.neko-card.is-petted .cat-visual {
  animation: catHappy .42s ease-in-out 4;
}

@keyframes catHappy {
  0%, 100% { transform: translateY(0) rotate(-1deg) scale(1); }
  50% { transform: translateY(-10px) rotate(2deg) scale(1.03); }
}

.neko-card.is-truth {
  animation: nekoTruth .12s steps(2) 12;
}

.neko-card.is-truth .cat-eye {
  background: #d21b36;
  box-shadow: 0 0 18px rgba(210,27,54,.75);
}

@keyframes nekoTruth {
  from { filter: none; }
  to { filter: contrast(1.4) saturate(1.6); transform: translateX(2px); }
}

/* Modern cat */
body.mode-modern .neko-card,
body.mode-modern .neko-log,
body.mode-modern .cat-dialogue {
  background: rgba(255,255,255,.78) !important;
  color: rgba(17,19,21,.70);
  border-color: rgba(17,19,21,.08);
  box-shadow: 0 24px 70px rgba(0,0,0,.06);
}

body.mode-modern .cat-actions button {
  color: var(--modern-ink);
  background: rgba(255,255,255,.70);
  border-color: rgba(17,19,21,.10);
}

body.mode-modern .cat-actions button:hover {
  color: #fff;
  background: #111315;
}

@media (max-width: 940px) {
  .neko-room {
    grid-template-columns: 1fr;
  }

  .neko-log {
    min-height: auto;
  }
}

@media (max-width: 560px) {
  .cat-visual {
    width: 300px;
    height: 320px;
  }

  .cat-face {
    width: 220px;
    height: 200px;
  }

  .cat-body {
    width: 190px;
    height: 170px;
  }

  .cat-ear.left { left: 50px; }
  .cat-ear.right { right: 50px; }

  .cat-eye.left { left: 60px; }
  .cat-eye.right { right: 60px; }

  .cat-tail {
    right: 20px;
    bottom: 72px;
  }
}


body.mode-horror .nav a img,
body.mode-horror .icon-button img,
body.mode-horror .link-grid a img,
body.mode-horror .detail-links a img,
body.mode-horror .hidden-escape-link img,
body.mode-horror .cat-actions button img,
body.mode-heisei .nav a img,
body.mode-heisei .icon-button img {
  filter: invert(1) drop-shadow(0 0 7px rgba(210,27,54,.25));
}

body.mode-modern .nav a:hover img,
body.mode-modern .nav a.is-active img,
body.mode-modern .icon-button:hover img,
body.mode-modern .link-grid a:hover img,
body.mode-modern .detail-links a:hover img,
body.mode-modern .cat-actions button:hover img {
  filter: invert(1);
}


/* =========================================================
   v8 Fluorescent light + psychological dummy pages
========================================================= */

.light-thumb {
  background:
    radial-gradient(circle at 50% 15%, rgba(235,255,236,.45), transparent 12rem),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.18)),
    rgba(5,5,8,.86);
}

.dummy-thumb {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 12px),
    radial-gradient(circle at 75% 25%, rgba(210,27,54,.18), transparent 18rem),
    rgba(5,5,8,.88);
}

/* 蛍光灯ページ */
.light-section {
  align-content: start;
}

.light-room {
  position: relative;
  z-index: 2;
  min-height: 680px;
  border: 1px solid rgba(238,233,221,.14);
  background:
    radial-gradient(circle at 50% 18%, rgba(221,255,224,.18), transparent 20rem),
    linear-gradient(180deg, rgba(10,12,12,.94), rgba(3,3,4,.96));
  overflow: hidden;
  box-shadow: inset 0 0 120px rgba(0,0,0,.58), 0 24px 90px rgba(0,0,0,.22);
}

.light-room::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: .35;
  pointer-events: none;
}

.fluorescent-unit {
  position: absolute;
  left: 50%;
  top: 90px;
  width: min(720px, 78vw);
  height: 74px;
  transform: translateX(-50%);
}

.fluorescent-tube {
  position: absolute;
  inset: 20px 0;
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent, rgba(235,255,238,.85) 12%, #f8fff9 50%, rgba(235,255,238,.85) 88%, transparent);
  box-shadow:
    0 0 20px rgba(235,255,238,.9),
    0 0 70px rgba(190,255,205,.48),
    0 0 160px rgba(190,255,205,.22);
  animation: fluorescentFlicker 7s steps(1) infinite;
}

.fluorescent-halo {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 120%;
  height: 360px;
  transform: translate(-50%, -30%);
  background: radial-gradient(ellipse at 50% 0%, rgba(230,255,235,.32), rgba(230,255,235,.08) 35%, transparent 70%);
  filter: blur(14px);
  pointer-events: none;
}

@keyframes fluorescentFlicker {
  0%, 89%, 92%, 100% { opacity: 1; filter: brightness(1); }
  90% { opacity: .62; filter: brightness(.72); }
  91% { opacity: .92; filter: brightness(1.15); }
  97% { opacity: .76; filter: brightness(.82); }
}

.insect-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.insect {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--size, 6px);
  height: var(--size, 6px);
  transform-origin: var(--radius, 120px) 0;
  animation:
    insectOrbit var(--speed, 8s) linear infinite,
    insectJitter .32s steps(2) infinite;
  opacity: var(--alpha, .72);
}

.insect::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 12, .95);
  border-radius: 50% 50% 45% 45%;
  box-shadow: 0 0 8px rgba(0,0,0,.8);
}

.insect::after {
  content: "";
  position: absolute;
  left: -60%;
  top: 20%;
  width: 220%;
  height: 70%;
  background: rgba(230,255,235,.18);
  border-radius: 50%;
  transform: rotate(var(--wing, 18deg));
  animation: wingBuzz .11s steps(2) infinite;
}

@keyframes insectOrbit {
  from { transform: rotate(var(--start, 0deg)) translateX(var(--radius, 120px)) rotate(0deg); }
  to { transform: rotate(calc(var(--start, 0deg) + 360deg)) translateX(var(--radius, 120px)) rotate(-360deg); }
}

@keyframes insectJitter {
  from { margin-left: -2px; margin-top: 1px; }
  to { margin-left: 2px; margin-top: -1px; }
}

@keyframes wingBuzz {
  from { opacity: .18; transform: rotate(18deg) scaleX(1); }
  to { opacity: .36; transform: rotate(-18deg) scaleX(1.2); }
}

.light-observation {
  position: absolute;
  left: clamp(18px, 5vw, 54px);
  bottom: clamp(18px, 5vw, 54px);
  max-width: 560px;
  color: rgba(235,255,238,.76);
  line-height: 1.9;
  letter-spacing: .08em;
}

.light-observation p {
  margin-bottom: 10px;
}

.tiny-observe {
  color: rgba(235,255,238,.45);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}

.light-switch {
  position: absolute;
  right: clamp(18px, 5vw, 54px);
  bottom: clamp(18px, 5vw, 54px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  border: 1px solid rgba(235,255,238,.18);
  background: rgba(235,255,238,.06);
  color: rgba(235,255,238,.82);
  padding: 12px 14px;
  letter-spacing: .12em;
}

.light-switch img {
  width: 1.1em;
  height: 1.1em;
  filter: invert(1);
}

.light-room.is-off .fluorescent-tube {
  opacity: .18;
  box-shadow: 0 0 10px rgba(235,255,238,.24);
  animation: none;
}

.light-room.is-off .fluorescent-halo {
  opacity: .08;
}

.light-room.is-off .insect {
  animation-duration: calc(var(--speed, 8s) * 1.8), .8s;
  opacity: .25;
}

/* ダミーページ群 */
.dummy-section {
  align-content: start;
}

.dummy-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
  gap: 18px;
}

.dummy-menu {
  display: grid;
  gap: 10px;
  align-content: start;
  position: sticky;
  top: 120px;
}

.dummy-link {
  cursor: pointer;
  border: 1px solid rgba(238,233,221,.14);
  background: rgba(5,5,8,.66);
  color: var(--ink);
  padding: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  letter-spacing: .08em;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.dummy-link img {
  width: 18px;
  height: 18px;
  filter: invert(1) drop-shadow(0 0 7px rgba(210,27,54,.25));
}

.dummy-link:hover,
.dummy-link.is-active {
  transform: translateX(4px);
  background: rgba(210,27,54,.15);
  border-color: rgba(210,27,54,.68);
}

.dummy-viewer {
  min-height: 620px;
  border: 1px solid rgba(238,233,221,.14);
  background:
    linear-gradient(135deg, rgba(255,255,255,.075), transparent 36%),
    rgba(5,5,8,.76);
  backdrop-filter: blur(16px);
  padding: clamp(24px, 5vw, 56px);
  box-shadow: 0 24px 90px rgba(0,0,0,.24);
  position: relative;
  overflow: hidden;
}

.dummy-viewer::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.025) 0 1px, transparent 1px 9px);
  opacity: .35;
  pointer-events: none;
}

.dummy-viewer::after {
  content: "";
  position: absolute;
  right: -15%;
  bottom: -25%;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(210,27,54,.13), transparent 68%);
  pointer-events: none;
}

.dummy-viewer > * {
  position: relative;
  z-index: 1;
}

.dummy-header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  color: rgba(245,242,232,.48);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .16em;
  font-size: 12px;
  margin-bottom: 28px;
}

.dummy-viewer h3 {
  font-size: clamp(34px, 6vw, 80px);
  line-height: 1;
  letter-spacing: -.06em;
  margin-bottom: 28px;
}

.dummy-body {
  max-width: 860px;
  color: rgba(245,242,232,.80);
  font-size: clamp(16px, 2vw, 19px);
  line-height: 2.2;
  letter-spacing: .055em;
}

.dummy-body p {
  margin-bottom: 1.2em;
}

.dummy-body .empty-line {
  display: block;
  height: 1.2em;
  border-bottom: 1px solid rgba(245,242,232,.18);
  opacity: .55;
}

.dummy-body .thin {
  color: rgba(245,242,232,.42);
  font-size: .9em;
}

.dummy-body .wrong {
  color: rgba(210,27,54,.94);
  animation: dummyWrong .2s steps(2) infinite;
}

@keyframes dummyWrong {
  from { transform: translateX(-1px); }
  to { transform: translateX(2px); }
}

.dummy-footer {
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  color: rgba(245,242,232,.38);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.dummy-footer button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  border: 1px solid rgba(238,233,221,.16);
  background: rgba(255,255,255,.055);
  color: var(--ink);
  padding: 12px 14px;
  letter-spacing: .1em;
}

.dummy-footer button img {
  width: 1.1em;
  height: 1.1em;
  filter: invert(1);
}

.dummy-footer button:hover {
  background: rgba(210,27,54,.16);
  border-color: rgba(210,27,54,.62);
}

/* Modern mode */
body.mode-modern .light-room,
body.mode-modern .dummy-link,
body.mode-modern .dummy-viewer {
  background: rgba(255,255,255,.78) !important;
  color: var(--modern-ink);
  border-color: rgba(17,19,21,.08);
  box-shadow: 0 24px 70px rgba(0,0,0,.06);
}

body.mode-modern .light-room {
  background:
    radial-gradient(circle at 50% 18%, rgba(235,255,236,.64), transparent 18rem),
    rgba(255,255,255,.78) !important;
}

body.mode-modern .light-observation,
body.mode-modern .dummy-body,
body.mode-modern .dummy-footer {
  color: rgba(17,19,21,.68);
}

body.mode-modern .dummy-header,
body.mode-modern .tiny-observe {
  color: rgba(17,19,21,.44);
}

body.mode-modern .dummy-viewer h3 {
  color: var(--modern-ink);
}

body.mode-modern .dummy-link:hover,
body.mode-modern .dummy-link.is-active,
body.mode-modern .dummy-footer button:hover,
body.mode-modern .light-switch:hover {
  color: #fff;
  background: #111315 !important;
  border-color: #111315;
}

body.mode-modern .dummy-link img,
body.mode-modern .dummy-footer button img,
body.mode-modern .light-switch img {
  filter: none;
}

body.mode-modern .dummy-link:hover img,
body.mode-modern .dummy-link.is-active img,
body.mode-modern .dummy-footer button:hover img,
body.mode-modern .light-switch:hover img {
  filter: invert(1);
}

body.mode-modern .light-switch,
body.mode-modern .dummy-footer button {
  background: rgba(255,255,255,.7);
  color: var(--modern-ink);
  border-color: rgba(17,19,21,.10);
}

@media (max-width: 900px) {
  .dummy-layout {
    grid-template-columns: 1fr;
  }

  .dummy-menu {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .light-room {
    min-height: 560px;
  }
}

@media (max-width: 620px) {
  .dummy-menu {
    grid-template-columns: 1fr;
  }

  .fluorescent-unit {
    top: 80px;
  }

  .light-observation,
  .light-switch {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    margin: 0 18px 18px;
  }

  .light-observation {
    padding-top: 420px;
  }
}


/* =========================================================
   v9 Favicon correction
   UI内リンクアイコンを廃止し、URL横/タブ用ファビコンへ変更
========================================================= */

.nav a,
.link-grid a,
.detail-links a,
.hidden-escape-link,
.cat-actions button,
.dummy-link,
.dummy-footer button,
.light-switch {
  gap: 0 !important;
}

.nav a img,
.icon-button img,
.link-grid a img,
.detail-links a img,
.hidden-escape-link img,
.cat-actions button img,
.dummy-link img,
.dummy-footer button img,
.light-switch img {
  display: none !important;
}

.favicon-note {
  font-size: 12px;
  opacity: .65;
}


/* =========================================================
   v10 Re-enable link icons + giant eye close-up
========================================================= */

/* v9で消したリンクアイコンを復活 */
.nav a,
.icon-button,
.link-grid a,
.detail-links a,
.hidden-escape-link,
.cat-actions button,
.dummy-link,
.dummy-footer button,
.light-switch {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.nav a img,
.icon-button img,
.link-grid a img,
.detail-links a img,
.hidden-escape-link img,
.cat-actions button img,
.dummy-link img,
.dummy-footer button img,
.light-switch img {
  display: inline-block !important;
  width: 1.08em !important;
  height: 1.08em !important;
  flex: 0 0 auto !important;
  object-fit: contain !important;
  opacity: .92;
  filter: invert(1) drop-shadow(0 0 7px rgba(210,27,54,.25)) !important;
}

.nav a img {
  width: 14px !important;
  height: 14px !important;
}

.hidden-escape-link img {
  width: 11px !important;
  height: 11px !important;
}

body.mode-modern .nav a img,
body.mode-modern .icon-button img,
body.mode-modern .link-grid a img,
body.mode-modern .detail-links a img,
body.mode-modern .hidden-escape-link img,
body.mode-modern .cat-actions button img,
body.mode-modern .dummy-link img,
body.mode-modern .dummy-footer button img,
body.mode-modern .light-switch img {
  filter: none !important;
}

body.mode-modern .nav a:hover img,
body.mode-modern .nav a.is-active img,
body.mode-modern .icon-button:hover img,
body.mode-modern .link-grid a:hover img,
body.mode-modern .detail-links a:hover img,
body.mode-modern .cat-actions button:hover img,
body.mode-modern .dummy-link:hover img,
body.mode-modern .dummy-link.is-active img,
body.mode-modern .dummy-footer button:hover img,
body.mode-modern .light-switch:hover img {
  filter: invert(1) !important;
}

/* 「もっと近くで見る」巨大目画像 */
.jump-layer {
  overflow: hidden;
}

.jump-eye-image {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(120vw, 1400px);
  max-width: none;
  transform: translate(-50%, -50%) scale(.48) rotate(-2deg);
  opacity: 0;
  filter:
    drop-shadow(0 0 40px rgba(210,27,54,.68))
    drop-shadow(0 0 160px rgba(210,27,54,.42));
  pointer-events: none;
  z-index: 1;
}

.jump-layer.is-show .jump-eye-image {
  animation: eyeRush .82s cubic-bezier(.08,.9,.08,1) both;
}

.jump-layer .jump-text {
  position: relative;
  z-index: 2;
  transform: translateY(34vh);
  font-size: clamp(22px, 6vw, 76px);
  background: rgba(0,0,0,.38);
  padding: .14em .24em;
  border: 1px solid rgba(238,233,221,.15);
  backdrop-filter: blur(4px);
}

@keyframes eyeRush {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.22) rotate(-8deg);
    filter: blur(10px) drop-shadow(0 0 20px rgba(210,27,54,.25));
  }
  18% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(.62) rotate(3deg);
  }
  38% {
    transform: translate(calc(-50% + 18px), calc(-50% - 8px)) scale(1.06) rotate(-2deg);
  }
  55% {
    transform: translate(calc(-50% - 11px), calc(-50% + 6px)) scale(.98) rotate(1deg);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.12) rotate(0deg);
    filter:
      blur(0)
      drop-shadow(0 0 40px rgba(210,27,54,.76))
      drop-shadow(0 0 160px rgba(210,27,54,.48));
  }
}

body.mode-modern .jump-eye-image {
  filter: grayscale(.15) drop-shadow(0 0 30px rgba(0,0,0,.22));
}


/* =========================================================
   v11 Main fixes
   - 日記を別ページへ
   - ライト暗幕演出OFF
   - 猫は顔だけ
========================================================= */

/* ライト追従の暗幕は一旦OFF */
.vignette {
  display: none !important;
}

.horror-site {
  background:
    radial-gradient(circle at 50% 0%, rgba(161,15,36,.18), transparent 38rem),
    radial-gradient(circle at 15% 85%, rgba(255,255,255,.12), transparent 28rem),
    linear-gradient(180deg, #101014, #141419 56%, #0f0f13) !important;
}

.horror-photo.active {
  opacity: .54 !important;
}

.lead,
.panel,
.work-card p,
.terminal,
.section-lead {
  color: rgba(245,242,232,.84) !important;
}

/* 猫は顔だけ表示 */
.cat-visual {
  height: 300px !important;
  width: min(330px, 76vw) !important;
  display: grid;
  place-items: center;
}

.cat-body,
.cat-tail {
  display: none !important;
}

.cat-face {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  z-index: 2;
  width: 260px !important;
  height: 230px !important;
}

.cat-ear {
  z-index: 1;
}

.cat-ear.left {
  left: 38px !important;
  top: 10px !important;
}

.cat-ear.right {
  right: 38px !important;
  top: 10px !important;
}

.cat-card-face-note {
  font-size: 12px;
  opacity: .68;
}

/* WORKSから別日記へ */
.work-open-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  border: 1px solid rgba(238,233,221,.14);
  padding: 9px 11px;
  color: var(--ink);
  text-decoration: none;
  font-size: 12px;
  letter-spacing: .1em;
}

.work-open-link img {
  width: 1em;
  height: 1em;
  filter: invert(1) drop-shadow(0 0 7px rgba(210,27,54,.25));
}

.work-open-link:hover {
  background: rgba(210,27,54,.16);
  border-color: rgba(210,27,54,.64);
}

body.mode-modern .work-open-link {
  color: var(--modern-ink);
  border-color: rgba(17,19,21,.10);
}

body.mode-modern .work-open-link img {
  filter: none;
}

body.mode-modern .work-open-link:hover {
  color: #fff;
  background: #111315;
}

body.mode-modern .work-open-link:hover img {
  filter: invert(1);
}


/* =========================================================
   v12 Simple LIVE monitor
   Live欄の渋滞を整理。視線アニメーション・追従ターゲット削除。
========================================================= */

/* 追従ターゲット、モニター内の目、視線系を完全非表示 */
.tracking-target,
.eye-rig,
.pupil,
.feed-grid,
.eye-field {
  display: none !important;
}

/* Live欄を静かな監視画面に */
.simple-live-monitor {
  min-height: 500px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.06), transparent 38%),
    rgba(0,0,0,.58) !important;
  box-shadow:
    0 20px 80px rgba(0,0,0,.26),
    inset 0 0 45px rgba(255,255,255,.035) !important;
}

.simple-live-monitor::after,
.live-monitor::after {
  display: none !important;
}

.simple-monitor-screen {
  min-height: 450px !important;
  display: block !important;
  background: #050506;
}

.simple-live-art {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transform: none !important;
  filter: brightness(.86) contrast(1.04) saturate(.92) !important;
  opacity: .92;
}

.simple-monitor-overlay {
  position: absolute;
  inset: 0;
  display: flex !important;
  justify-content: space-between;
  align-items: flex-start;
  padding: 14px;
  pointer-events: none;
  color: rgba(245,242,232,.70);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: .12em;
}

.simple-monitor-overlay .overlay-left,
.simple-monitor-overlay .overlay-right {
  display: grid;
  gap: 8px;
}

.simple-monitor-overlay .overlay-right {
  text-align: right;
}

/* 点滅も弱める */
.live-dot::before {
  animation-duration: 3.2s !important;
  opacity: .78;
}

.monitor-warning {
  font-size: 12px !important;
  opacity: .66;
  text-shadow: none !important;
}

/* マウス追従の小さい赤丸もLive整理のため控えめ */
.cursor-orb {
  opacity: .18 !important;
  width: 14px !important;
  height: 14px !important;
  box-shadow: 0 0 10px rgba(210,27,54,.26) !important;
}

/* モダンモードでも簡素に */
body.mode-modern .simple-live-monitor {
  background: rgba(255,255,255,.78) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.06) !important;
}

body.mode-modern .simple-monitor-screen {
  background: rgba(255,255,255,.6);
}

body.mode-modern .simple-live-art {
  filter: brightness(1.02) contrast(1.02) saturate(.86) !important;
  opacity: .86;
}

body.mode-modern .simple-monitor-overlay,
body.mode-modern .monitor-warning {
  color: rgba(17,19,21,.60) !important;
}

@media (max-width: 980px) {
  .simple-live-monitor {
    min-height: 380px !important;
  }

  .simple-monitor-screen {
    min-height: 340px !important;
  }
}


/* =========================================================
   v13 Haunted fictional WORKS
   架空作品一覧 + クリック怪奇現象
========================================================= */

.works-section .section-head h2 {
  max-width: 1080px;
}

.haunted-work {
  position: relative;
}

.haunted-work::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent, rgba(210,27,54,.05), transparent),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.022) 0 1px, transparent 1px 8px);
  opacity: 0;
  transition: opacity .2s ease;
}

.haunted-work:hover::after {
  opacity: 1;
}

.haunted-work.is-cursed {
  animation: cursedCard .42s steps(2) 2;
}

@keyframes cursedCard {
  0%, 100% { transform: translateY(-5px); filter: none; }
  25% { transform: translateY(-5px) translateX(-3px); filter: contrast(1.35); }
  50% { transform: translateY(-5px) translateX(3px); filter: hue-rotate(-18deg); }
  75% { transform: translateY(-5px) translateX(-1px); filter: saturate(1.6); }
}

.work-detail.is-haunted-detail {
  animation: detailHaunt .52s steps(2) 2;
}

@keyframes detailHaunt {
  0%, 100% { transform: none; }
  35% { transform: translateX(4px); border-color: rgba(210,27,54,.8); }
  70% { transform: translateX(-3px); filter: contrast(1.4); }
}

/* global haunt layer */
.work-haunt-layer {
  position: fixed;
  inset: 0;
  z-index: 260;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
}

.work-haunt-layer.is-active {
  opacity: 1;
}

.haunt-flash {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(210,27,54,.26), transparent 30rem),
    rgba(255,255,255,.04);
  opacity: 0;
}

.work-haunt-layer.is-active .haunt-flash {
  animation: hauntFlash .72s steps(2) both;
}

@keyframes hauntFlash {
  0% { opacity: 0; }
  18% { opacity: .92; }
  28% { opacity: .08; }
  45% { opacity: .45; }
  100% { opacity: 0; }
}

.haunt-message {
  position: absolute;
  left: 50%;
  top: 16%;
  transform: translate(-50%, -50%);
  color: rgba(245,242,232,.92);
  background: rgba(0,0,0,.62);
  border: 1px solid rgba(245,242,232,.18);
  padding: 12px 16px;
  letter-spacing: .18em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(12px, 2vw, 16px);
  opacity: 0;
  text-align: center;
}

.work-haunt-layer.is-active .haunt-message {
  animation: hauntMessage .95s steps(2) both;
}

@keyframes hauntMessage {
  0% { opacity: 0; transform: translate(-50%, -50%) translateY(-18px); }
  20%, 74% { opacity: 1; transform: translate(-50%, -50%) translateY(0); }
  100% { opacity: 0; transform: translate(-50%, -50%) translateY(12px); }
}

.haunt-symbols {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.work-haunt-layer.is-active .haunt-symbols {
  animation: symbolsFade 1.2s ease both;
}

@keyframes symbolsFade {
  0% { opacity: 0; }
  22%, 70% { opacity: .75; }
  100% { opacity: 0; }
}

.haunt-symbol {
  position: absolute;
  color: rgba(210,27,54,.76);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(12px, 2.4vw, 26px);
  text-shadow: 0 0 16px rgba(210,27,54,.45);
  animation: symbolDrift 1.2s steps(3) both;
}

@keyframes symbolDrift {
  from { transform: translateY(18px) rotate(-2deg); opacity: 0; }
  20%, 70% { opacity: 1; }
  to { transform: translateY(-24px) rotate(3deg); opacity: 0; }
}

/* per phenomenon */
body.phenom-corridor {
  animation: corridorStretch .9s cubic-bezier(.2,.9,.2,1) both;
}

@keyframes corridorStretch {
  0%, 100% { filter: none; }
  40% { filter: contrast(1.25) blur(.4px); transform: scaleX(1.012); }
  62% { transform: scaleX(.994); }
}

body.phenom-lunch .horror-site {
  animation: blueLunch 1.2s steps(2) both;
}

@keyframes blueLunch {
  0%, 100% { filter: none; }
  30%, 55% { filter: hue-rotate(150deg) saturate(1.8) brightness(1.12); }
}

body.phenom-mirror .site-header,
body.phenom-mirror .work-detail,
body.phenom-mirror .monitor {
  animation: mirrorInvert .9s steps(2) both;
}

@keyframes mirrorInvert {
  0%, 100% { transform: none; filter: none; }
  35% { transform: scaleX(-1); filter: invert(.8); }
  70% { transform: scaleX(1); filter: contrast(1.4); }
}

.haunt-phone {
  position: absolute;
  right: 9%;
  top: 45%;
  font-size: clamp(58px, 13vw, 160px);
  color: rgba(210,27,54,.82);
  text-shadow: 0 0 28px rgba(210,27,54,.55);
  opacity: 0;
  transform: rotate(-12deg);
}

.work-haunt-layer.phone .haunt-phone {
  animation: phoneRing .9s steps(2) both;
}

@keyframes phoneRing {
  0% { opacity: 0; transform: rotate(-12deg) scale(.8); }
  20%, 80% { opacity: 1; }
  30% { transform: rotate(12deg) scale(1); }
  45% { transform: rotate(-10deg) scale(1.06); }
  60% { transform: rotate(8deg) scale(1); }
  100% { opacity: 0; transform: rotate(-18deg) scale(.88); }
}

.haunt-mirror {
  position: absolute;
  left: 8%;
  top: 24%;
  width: min(300px, 46vw);
  height: min(420px, 60vh);
  border: 1px solid rgba(245,242,232,.30);
  background:
    linear-gradient(135deg, rgba(255,255,255,.16), transparent 35%),
    rgba(255,255,255,.04);
  box-shadow: inset 0 0 40px rgba(255,255,255,.08), 0 0 40px rgba(210,27,54,.18);
  opacity: 0;
}

.haunt-mirror::after {
  content: "いま、見た？";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  color: rgba(210,27,54,.75);
  letter-spacing: .2em;
  white-space: nowrap;
}

.work-haunt-layer.mirror .haunt-mirror {
  animation: mirrorAppear 1.1s steps(2) both;
}

@keyframes mirrorAppear {
  0% { opacity: 0; transform: translateY(20px); }
  20%, 78% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-20px); }
}

.haunt-footprints {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.work-haunt-layer.cat .haunt-footprints {
  animation: footprintsFade 1.4s ease both;
}

.haunt-footprints::before,
.haunt-footprints::after {
  content: " paw  paw  paw  paw  paw";
  position: absolute;
  left: 10%;
  bottom: 14%;
  color: rgba(245,242,232,.64);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .7em;
  transform: rotate(-10deg);
}

.haunt-footprints::after {
  left: 30%;
  bottom: 28%;
  transform: rotate(7deg);
  opacity: .7;
}

@keyframes footprintsFade {
  0% { opacity: 0; transform: translateY(20px); }
  25%, 75% { opacity: .8; }
  100% { opacity: 0; transform: translateY(-10px); }
}

body.phenom-light .horror-site {
  animation: lightPulseWork 1.1s steps(3) both;
}

@keyframes lightPulseWork {
  0%, 100% { filter: none; }
  20% { filter: brightness(1.6); }
  30% { filter: brightness(.55); }
  45% { filter: brightness(1.25); }
  70% { filter: brightness(.8); }
}

body.phenom-family .brand span:last-child::after {
  content: "　知らない人が一人増えました";
  color: rgba(210,27,54,.9);
  margin-left: 12px;
  animation: familyText 1.2s steps(2) both;
}

@keyframes familyText {
  0% { opacity: 0; }
  20%, 70% { opacity: 1; }
  100% { opacity: 0; }
}

body.phenom-memo .terminal,
body.phenom-memo .work-detail {
  animation: memoInk .95s steps(3) both;
}

@keyframes memoInk {
  0%, 100% { background-color: rgba(9,9,12,.68); }
  45% { background-color: rgba(80,0,12,.82); color: rgba(255,220,220,.95); }
}

/* Modern mode */
body.mode-modern .haunt-message {
  background: rgba(255,255,255,.78);
  color: rgba(17,19,21,.86);
  border-color: rgba(17,19,21,.14);
}

body.mode-modern .haunt-symbol {
  color: rgba(17,19,21,.54);
  text-shadow: none;
}

body.mode-modern .haunt-phone {
  color: rgba(17,19,21,.72);
  text-shadow: none;
}

body.mode-modern .haunt-mirror::after {
  color: rgba(17,19,21,.66);
}


/* =========================================================
   v14 Escape tab + rename Dummy to Nothing
========================================================= */

.nav a.escape-tab {
  border-color: rgba(210,27,54,.34) !important;
  background: rgba(210,27,54,.10) !important;
}

.nav a.escape-tab:hover {
  background: rgba(210,27,54,.24) !important;
  border-color: rgba(210,27,54,.78) !important;
  transform: translateY(-2px) scale(1.02);
}

.nav a.escape-tab img {
  filter: invert(1) drop-shadow(0 0 9px rgba(210,27,54,.52)) !important;
}

body.mode-modern .nav a.escape-tab {
  background: rgba(17,19,21,.08) !important;
  border-color: rgba(17,19,21,.18) !important;
}

body.mode-modern .nav a.escape-tab:hover {
  color: #fff;
  background: #111315 !important;
  border-color: #111315 !important;
}

body.mode-modern .nav a.escape-tab img {
  filter: none !important;
}

body.mode-modern .nav a.escape-tab:hover img {
  filter: invert(1) !important;
}


/* =========================================================
   v15 Rich generated materials + separate modern portfolio link
========================================================= */

/* 新規生成素材を活かすため、WORKSカードの写真密度を上げる */
.rich-thumb img {
  filter: brightness(.82) contrast(1.10) saturate(.92) !important;
}

.work-card2:hover .rich-thumb img {
  filter: brightness(1.02) contrast(1.16) saturate(1.02) !important;
}

/* 作品一覧下の素材棚 */
.visual-materials-panel {
  position: relative;
  z-index: 2;
  margin-top: 28px;
  border: 1px solid rgba(238,233,221,.14);
  background:
    linear-gradient(135deg, rgba(255,255,255,.07), transparent 40%),
    rgba(5,5,8,.72);
  padding: clamp(20px, 4vw, 34px);
  backdrop-filter: blur(16px);
}

.compact-head {
  margin-bottom: 18px;
}

.compact-head h3 {
  font-size: clamp(28px, 5vw, 58px);
  line-height: 1;
  letter-spacing: -.055em;
  margin-bottom: 12px;
}

.compact-head p {
  max-width: 760px;
  color: rgba(245,242,232,.72);
  line-height: 1.9;
}

.materials-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.materials-grid figure {
  margin: 0;
  border: 1px solid rgba(238,233,221,.12);
  background: rgba(0,0,0,.35);
  overflow: hidden;
}

.materials-grid img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  filter: brightness(.78) contrast(1.16) saturate(.95);
  transition: transform .45s ease, filter .25s ease;
}

.materials-grid figure:hover img {
  transform: scale(1.06);
  filter: brightness(1.06) contrast(1.22) saturate(1.1);
}

.materials-grid figcaption {
  padding: 10px;
  color: rgba(245,242,232,.74);
  font-size: 11px;
  letter-spacing: .1em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* 怪奇現象用エフェクト素材 */
.work-haunt-layer::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/assets/images/fx_glitch_rgb.webp");
  background-size: cover;
  background-position: center;
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}

.work-haunt-layer.is-active::before {
  animation: fxGlitchPulse 1.15s steps(3) both;
}

@keyframes fxGlitchPulse {
  0% { opacity: 0; transform: translateX(0); }
  18% { opacity: .34; transform: translateX(-8px); }
  32% { opacity: .12; transform: translateX(8px); }
  52% { opacity: .22; transform: translateX(-4px); }
  100% { opacity: 0; transform: translateX(0); }
}

.haunt-fx {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  pointer-events: none;
}

.haunt-fx-glitch {
  background-image: url("/assets/images/fx_glitch_rgb.webp");
  mix-blend-mode: screen;
}

.haunt-fx-static {
  background-image: url("/assets/images/fx_static_noise.webp");
  mix-blend-mode: screen;
}

.haunt-fx-red {
  background-image: url("/assets/images/fx_red_particles.webp");
  mix-blend-mode: lighten;
}

.haunt-fx-glass {
  background-image: url("/assets/images/fx_broken_glass.webp");
  background-size: contain;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
}

.haunt-fx-smoke {
  background-image: url("/assets/images/fx_smoke.webp");
  mix-blend-mode: screen;
}

.work-haunt-layer.corridor .haunt-fx-glitch,
.work-haunt-layer.phone .haunt-fx-static,
.work-haunt-layer.memo .haunt-fx-red,
.work-haunt-layer.mirror .haunt-fx-glass,
.work-haunt-layer.family .haunt-fx-smoke,
.work-haunt-layer.light .haunt-fx-static,
.work-haunt-layer.cat .haunt-fx-smoke,
.work-haunt-layer.lunch .haunt-fx-red {
  animation: richFxShow 1.25s ease both;
}

@keyframes richFxShow {
  0% { opacity: 0; filter: blur(8px); transform: scale(1.02); }
  20%, 70% { opacity: .32; filter: blur(0); transform: scale(1); }
  100% { opacity: 0; filter: blur(12px); transform: scale(1.05); }
}

/* ホラー側背景にも少しだけ新規ノイズ素材を混ぜる */
.global-noise {
  background-image:
    url("/assets/images/fx_static_noise.webp"),
    radial-gradient(circle, rgba(255,255,255,.07) 1px, transparent 1px) !important;
  background-size: cover, 4px 4px !important;
  opacity: .045 !important;
}

/* モダン側へ移動する導線を明示 */
.nav a.escape-tab::after {
  content: "↗";
  margin-left: 2px;
  opacity: .55;
  font-size: .9em;
}

/* modern mode classは今後直接使わないが、過去CSS互換用に残す */
body.mode-modern .visual-materials-panel {
  background: rgba(255,255,255,.78) !important;
  border-color: rgba(17,19,21,.08);
  box-shadow: 0 24px 70px rgba(0,0,0,.06);
}

body.mode-modern .compact-head p,
body.mode-modern .materials-grid figcaption {
  color: rgba(17,19,21,.62);
}

@media (max-width: 1100px) {
  .materials-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .materials-grid {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   v16 Bottom void + 404 jumpscare sequence
   ページ最下部に長い空白、最下層の「みたな」から発火
========================================================= */

.bottom-void {
  position: relative;
  z-index: 2;
  min-height: 220vh;
  background:
    linear-gradient(180deg, rgba(15,15,19,0) 0%, rgba(14,14,17,.92) 12%, #f7f7f7 48%, #fff 100%);
  color: #111;
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: end;
  justify-items: center;
  padding: 0 24px 16vh;
}

.void-space {
  min-height: 170vh;
}

.mitana-trigger {
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(17,17,17,.32);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(15px, 2.2vw, 24px);
  letter-spacing: .35em;
  cursor: pointer;
  padding: 24px;
  transform: translateX(.15em);
  transition: color .25s ease, transform .25s ease;
}

.mitana-trigger:hover,
.mitana-trigger:focus {
  color: rgba(160,0,18,.86);
  transform: translateX(.15em) scale(1.04);
  outline: none;
}

.bottom-curse-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
  background: transparent;
}

.bottom-curse-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}

.curse-mojibake,
.curse-404,
.curse-logo-wrap,
.curse-final-dialog {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
}

.curse-mojibake {
  align-content: start;
  justify-items: start;
  padding: 32px;
  color: #f1f1f1;
  background:
    url("/assets/images/fx_glitch_rgb.webp"),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.07) 0 1px, transparent 1px 7px),
    #050506;
  background-size: cover, auto, auto;
  mix-blend-mode: normal;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(12px, 1.6vw, 22px);
  line-height: 1.25;
  letter-spacing: .08em;
  white-space: pre-wrap;
  text-shadow: 2px 0 #d21b36, -2px 0 #00d7ff;
  overflow: hidden;
}

.bottom-curse-overlay.phase-glitch .curse-mojibake {
  animation: curseGlitchPhase 1.65s steps(2) both;
}

@keyframes curseGlitchPhase {
  0% { opacity: 0; transform: translateX(0); filter: none; }
  10%, 80% { opacity: 1; }
  20% { transform: translateX(-10px); filter: hue-rotate(90deg) contrast(1.5); }
  40% { transform: translateX(8px); filter: invert(.2) contrast(1.8); }
  58% { transform: translateX(-4px) skewX(-2deg); }
  82% { opacity: 1; }
  100% { opacity: 0; transform: translateX(0); }
}

.curse-404 {
  background: #fff;
  color: #0b0b0b;
  font-family: Inter, "Helvetica Neue", Arial, system-ui, sans-serif;
  font-size: clamp(76px, 18vw, 260px);
  font-weight: 900;
  letter-spacing: -.08em;
}

.bottom-curse-overlay.phase-404 .curse-404 {
  animation: curse404Phase 2.05s ease both;
}

@keyframes curse404Phase {
  0% { opacity: 0; filter: blur(10px); transform: scale(.96); }
  18%, 84% { opacity: 1; filter: blur(0); transform: scale(1); }
  100% { opacity: 0; filter: blur(7px); transform: scale(1.04); }
}

.curse-logo-wrap {
  background: #000;
}

.curse-logo {
  width: min(112vmin, 1120px);
  height: auto;
  transform: scale(.25) rotate(-8deg);
  opacity: 0;
  filter:
    drop-shadow(0 0 42px rgba(210,27,54,.8))
    drop-shadow(0 0 160px rgba(210,27,54,.48));
}

.bottom-curse-overlay.phase-logo .curse-logo-wrap {
  animation: logoWrapPhase 1.05s steps(2) both;
}

.bottom-curse-overlay.phase-logo .curse-logo {
  animation: logoJumpPhase 1.05s cubic-bezier(.05,.86,.05,1) both;
}

@keyframes logoWrapPhase {
  0%, 100% { opacity: 0; }
  6%, 86% { opacity: 1; }
}

@keyframes logoJumpPhase {
  0% { opacity: 0; transform: scale(.12) rotate(-12deg); filter: blur(14px); }
  18% { opacity: 1; transform: scale(1.08) rotate(2deg); filter: blur(0) drop-shadow(0 0 64px rgba(210,27,54,.95)); }
  34% { transform: scale(.96) rotate(-1deg); }
  58% { transform: scale(1.18) rotate(1deg); }
  78% { opacity: 1; transform: scale(1.0) rotate(0); }
  100% { opacity: 0; transform: scale(1.42) rotate(0); filter: blur(10px); }
}

.curse-final-dialog {
  background: #fff;
  color: #111;
}

.curse-final-dialog p {
  margin: 0;
  border: 1px solid rgba(17,17,17,.12);
  background: rgba(255,255,255,.88);
  padding: 18px 24px;
  box-shadow: 0 24px 90px rgba(0,0,0,.10);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(15px, 2.2vw, 22px);
  letter-spacing: .16em;
}

.bottom-curse-overlay.phase-final {
  opacity: 1;
}

.bottom-curse-overlay.phase-final .curse-final-dialog {
  opacity: 1;
}

/* バグ中だけ全体も少し壊す */
body.bottom-cursing .horror-site {
  animation: wholePageCorrupt .35s steps(2) infinite;
}

@keyframes wholePageCorrupt {
  0%, 100% { transform: translate(0,0); filter: none; }
  33% { transform: translate(-2px, 1px); filter: contrast(1.45) saturate(1.4); }
  66% { transform: translate(2px, -1px); filter: hue-rotate(-8deg); }
}

/* モダン別ページには影響しない */
body.mode-modern .bottom-void {
  display: none;
}

@media (max-width: 720px) {
  .bottom-void {
    min-height: 190vh;
  }

  .void-space {
    min-height: 145vh;
  }

  .curse-mojibake {
    padding: 18px;
  }

  .curse-logo {
    width: 130vmin;
  }
}


/* =========================================================
   v17 Live image replacement + VHS monitor treatment
========================================================= */

.vhs-monitor-screen {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 50%, rgba(210,27,54,.08), transparent 44%),
    #040405 !important;
}

.vhs-live-art {
  image-rendering: auto;
  object-fit: contain !important;
  padding: 7% 7% 9%;
  filter:
    saturate(.82)
    contrast(1.18)
    brightness(.84)
    drop-shadow(0 0 24px rgba(210,27,54,.18));
  transform: scale(1.02);
}

/* VHS overlays */
.vhs-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.vhs-noise {
  background-image: url("/assets/images/fx_static_noise.webp");
  background-size: cover;
  background-position: center;
  mix-blend-mode: screen;
  opacity: .12;
  animation: vhsNoise 0.22s steps(2) infinite;
}

@keyframes vhsNoise {
  0%   { transform: translate(0, 0); opacity: .10; }
  25%  { transform: translate(-1%, 1%); opacity: .14; }
  50%  { transform: translate(1%, -1%); opacity: .08; }
  75%  { transform: translate(.5%, .5%); opacity: .13; }
  100% { transform: translate(0, 0); opacity: .10; }
}

.vhs-scanlines {
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.055) 0 1px,
      rgba(0,0,0,0) 1px 4px
    );
  opacity: .36;
  mix-blend-mode: screen;
}

.vhs-tracking {
  background:
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(255,255,255,.10) 8%,
      rgba(210,27,54,.16) 12%,
      rgba(255,255,255,.06) 14%,
      transparent 18%
    );
  background-repeat: no-repeat;
  background-size: 100% 24%;
  opacity: .28;
  animation: vhsTracking 4.8s linear infinite;
}

@keyframes vhsTracking {
  0%   { background-position: 0 -32%; }
  100% { background-position: 0 132%; }
}

.vhs-glow {
  box-shadow:
    inset 0 0 90px rgba(0,0,0,.56),
    inset 0 0 12px rgba(255,255,255,.08),
    inset 0 0 120px rgba(210,27,54,.10);
  border: 1px solid rgba(255,255,255,.06);
}

/* slight chromatic split */
.vhs-monitor-screen::before,
.vhs-monitor-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: .08;
  z-index: 0;
}

.vhs-monitor-screen::before {
  background-image: url("/assets/images/live_eye_feed.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform: translateX(-3px);
  filter: hue-rotate(-20deg) saturate(1.2);
  padding: 7% 7% 9%;
}

.vhs-monitor-screen::after {
  background-image: url("/assets/images/live_eye_feed.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform: translateX(3px);
  filter: hue-rotate(120deg) saturate(1.1);
  padding: 7% 7% 9%;
}

/* monitor overlay stays above effects */
.simple-monitor-overlay,
.monitor-warning {
  z-index: 2 !important;
}

.simple-monitor-overlay {
  text-shadow: 0 0 6px rgba(0,0,0,.85);
}

.monitor-warning {
  letter-spacing: .18em;
  opacity: .78;
}

/* live time and REC feel more analog */
.simple-live-monitor .monitor-top {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-shadow: 0 0 6px rgba(0,0,0,.7);
}

.simple-live-monitor {
  border: 1px solid rgba(255,255,255,.08) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.03), transparent 38%),
    rgba(0,0,0,.68) !important;
}

.simple-live-monitor .live-dot {
  color: rgba(255,240,240,.88);
}

/* modern page unaffected, but if old body.mode-modern path ever used */
body.mode-modern .vhs-monitor-screen {
  background: #0d0e11 !important;
}

@media (max-width: 980px) {
  .vhs-live-art {
    padding: 10% 8% 12%;
  }
}


/* =========================================================
   v18 Reception page + CRT television signal
========================================================= */

.reception-section {
  align-content: start;
}

.reception-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(320px, 1.15fr) minmax(260px, .85fr);
  gap: 18px;
  align-items: start;
}

.reception-tv-wrap,
.reception-log-panel {
  border: 1px solid rgba(238,233,221,.14);
  background:
    linear-gradient(135deg, rgba(255,255,255,.07), transparent 40%),
    rgba(5,5,8,.72);
  backdrop-filter: blur(16px);
  box-shadow: 0 24px 90px rgba(0,0,0,.22);
}

.reception-tv-wrap {
  padding: clamp(16px, 3vw, 28px);
}

.crt-stage {
  position: relative;
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
}

.crt-tv-image {
  position: relative;
  z-index: 2;
  width: 100%;
  display: block;
  pointer-events: none;
  filter: brightness(.86) contrast(1.06);
}

/* Screen position tuned for generated CRT image */
.crt-screen {
  position: absolute;
  z-index: 1;
  left: 18.3%;
  top: 22.1%;
  width: 58.2%;
  height: 54.5%;
  overflow: hidden;
  border-radius: 4% / 7%;
  background: #020203;
  transform: perspective(580px) rotateX(.8deg);
  box-shadow:
    inset 0 0 45px rgba(0,0,0,.72),
    inset 0 0 12px rgba(255,255,255,.08),
    0 0 28px rgba(120,180,160,.12);
  isolation: isolate;
}

.crt-video-stack {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.crt-feed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.035);
  filter:
    brightness(.72)
    contrast(1.24)
    saturate(.76);
  transition: opacity .24s steps(2), transform .8s steps(4);
}

.crt-feed.is-active {
  opacity: 1;
  animation: crtImageJitter .72s steps(2) infinite;
}

.crt-feed[data-feed="live"] {
  object-fit: contain;
  padding: 10%;
  background: #020203;
}

@keyframes crtImageJitter {
  0%, 100% { transform: scale(1.035) translate(0,0); }
  25% { transform: scale(1.04) translate(-1px, 1px); }
  50% { transform: scale(1.032) translate(1px, -1px); }
  75% { transform: scale(1.038) translate(1px, 0); }
}

.crt-vhs-noise,
.crt-vhs-scanlines,
.crt-vhs-roll,
.crt-vhs-glitch,
.crt-blackout,
.crt-message {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.crt-vhs-noise {
  z-index: 3;
  background-image: url("/assets/images/fx_static_noise.webp");
  background-size: cover;
  mix-blend-mode: screen;
  opacity: .18;
  animation: crtNoise .2s steps(2) infinite;
}

@keyframes crtNoise {
  0% { transform: translate(0,0); opacity: .12; }
  50% { transform: translate(-2%, 1%); opacity: .22; }
  100% { transform: translate(1%, -1%); opacity: .16; }
}

.crt-vhs-scanlines {
  z-index: 4;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.07) 0 1px,
    rgba(0,0,0,.12) 1px 4px
  );
  opacity: .46;
  mix-blend-mode: overlay;
}

.crt-vhs-roll {
  z-index: 5;
  background:
    linear-gradient(to bottom, transparent, rgba(255,255,255,.16), rgba(210,27,54,.10), transparent);
  height: 28%;
  bottom: auto;
  opacity: .34;
  animation: crtRoll 5.6s linear infinite;
}

@keyframes crtRoll {
  from { transform: translateY(-140%); }
  to { transform: translateY(440%); }
}

.crt-vhs-glitch {
  z-index: 6;
  background-image: url("/assets/images/fx_glitch_rgb.webp");
  background-size: cover;
  mix-blend-mode: screen;
  opacity: 0;
}

.crt-screen.is-glitching .crt-vhs-glitch {
  animation: crtGlitch .48s steps(2) both;
}

@keyframes crtGlitch {
  0% { opacity: 0; transform: translateX(0); }
  25% { opacity: .45; transform: translateX(-8px); }
  50% { opacity: .16; transform: translateX(8px); }
  78% { opacity: .34; transform: translateX(-4px); }
  100% { opacity: 0; transform: translateX(0); }
}

.crt-message {
  z-index: 7;
  display: grid;
  place-items: end start;
  padding: 12px;
  color: rgba(245,242,232,.82);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(9px, 1.3vw, 13px);
  letter-spacing: .12em;
  text-shadow: 0 0 8px rgba(0,0,0,.9);
}

.crt-blackout {
  z-index: 8;
  display: grid;
  place-items: center;
  background: #020203;
  color: rgba(245,242,232,.72);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .25em;
  opacity: 0;
  font-size: clamp(14px, 2vw, 24px);
}

.crt-screen.is-blackout .crt-blackout {
  animation: crtBlackout .9s steps(2) both;
}

@keyframes crtBlackout {
  0% { opacity: 0; }
  15%, 76% { opacity: 1; }
  100% { opacity: 0; }
}

.reception-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
  justify-content: center;
}

.reception-controls button {
  cursor: pointer;
  border: 1px solid rgba(238,233,221,.16);
  background: rgba(255,255,255,.055);
  color: var(--ink);
  padding: 12px 14px;
  letter-spacing: .1em;
}

.reception-controls button:hover {
  border-color: rgba(210,27,54,.62);
  background: rgba(210,27,54,.16);
}

.reception-log-panel {
  padding: clamp(18px, 3vw, 28px);
  position: sticky;
  top: 120px;
}

.reception-progress {
  color: rgba(245,242,232,.76);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .12em;
  font-size: 12px;
  margin-bottom: 18px;
}

.reception-bar {
  height: 10px;
  border: 1px solid rgba(238,233,221,.14);
  background: rgba(0,0,0,.32);
  margin-top: 10px;
  overflow: hidden;
}

.reception-bar i {
  display: block;
  height: 100%;
  width: 38%;
  background: linear-gradient(90deg, rgba(210,27,54,.35), rgba(245,242,232,.72));
  animation: receptionBar 5.8s ease-in-out infinite;
}

@keyframes receptionBar {
  0% { width: 12%; }
  45% { width: 84%; }
  60% { width: 42%; }
  100% { width: 96%; }
}

.reception-log {
  display: grid;
  gap: 10px;
}

.reception-log-item {
  cursor: pointer;
  text-align: left;
  border: 1px solid rgba(238,233,221,.12);
  background: rgba(0,0,0,.22);
  color: rgba(245,242,232,.78);
  padding: 12px;
  display: grid;
  gap: 6px;
}

.reception-log-item:hover,
.reception-log-item.is-active {
  border-color: rgba(210,27,54,.62);
  background: rgba(210,27,54,.12);
}

.reception-log-item b {
  color: rgba(210,27,54,.88);
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.reception-log-item span {
  font-size: 13px;
  letter-spacing: .04em;
}

.hidden-log {
  display: none;
}

.hidden-log.is-visible {
  display: grid;
  animation: logAppear .5s steps(2) both;
}

@keyframes logAppear {
  0% { opacity: 0; transform: translateX(-8px); filter: blur(4px); }
  100% { opacity: 1; transform: translateX(0); filter: blur(0); }
}

.reception-note {
  color: rgba(245,242,232,.50);
  font-size: 12px;
  line-height: 1.8;
  margin-top: 18px;
}

/* Random horror interrupts */
.reception-section.is-receiving-haunt .reception-tv-wrap {
  animation: receptionHauntShake .16s steps(2) 6;
}

@keyframes receptionHauntShake {
  from { transform: translateX(-2px); }
  to { transform: translateX(2px); }
}

/* Modern fallback */
body.mode-modern .reception-tv-wrap,
body.mode-modern .reception-log-panel {
  background: rgba(255,255,255,.78) !important;
  border-color: rgba(17,19,21,.08);
  box-shadow: 0 24px 70px rgba(0,0,0,.06);
}

body.mode-modern .reception-log-item,
body.mode-modern .reception-controls button {
  color: var(--modern-ink);
  background: rgba(255,255,255,.66);
  border-color: rgba(17,19,21,.10);
}

body.mode-modern .reception-note,
body.mode-modern .reception-progress {
  color: rgba(17,19,21,.62);
}

@media (max-width: 980px) {
  .reception-layout {
    grid-template-columns: 1fr;
  }

  .reception-log-panel {
    position: static;
  }
}

@media (max-width: 640px) {
  .crt-screen {
    left: 18.5%;
    top: 22.3%;
    width: 58%;
    height: 54%;
  }
}


/* =========================================================
   v19 Asset check + Live camera love dialog
========================================================= */

.vhs-monitor-screen,
#liveCameraScreen {
  cursor: pointer;
}

#liveCameraScreen:focus-visible {
  outline: 2px solid rgba(210,27,54,.85);
  outline-offset: 4px;
}

#liveCameraScreen::selection {
  background: transparent;
}

/* クリックできることをうっすら示す */
#liveCameraScreen .monitor-warning::after {
  content: " / CLICK";
  opacity: .42;
}

/* 増殖ダイアログ */
.love-dialog-layer {
  position: fixed;
  inset: 0;
  z-index: 8500;
  pointer-events: none;
  opacity: 0;
}

.love-dialog-layer.is-active {
  opacity: 1;
  pointer-events: auto;
}

.love-dialog-layer::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at var(--love-x, 50%) var(--love-y, 50%), rgba(210,27,54,.12), transparent 24rem),
    rgba(0,0,0,.18);
  opacity: 0;
}

.love-dialog-layer.is-active::before {
  animation: loveBackdrop .28s ease both;
}

@keyframes loveBackdrop {
  to { opacity: 1; }
}

.love-dialog-window {
  position: absolute;
  left: var(--dialog-left, 50%);
  top: var(--dialog-top, 50%);
  width: min(420px, calc(100vw - 32px));
  background: #f4f4f4;
  color: #111;
  border: 1px solid #9b9b9b;
  box-shadow:
    0 18px 70px rgba(0,0,0,.42),
    inset 0 0 0 1px rgba(255,255,255,.72);
  transform: translate(-50%, -50%) scale(.98);
  font-family: "MS PGothic", "Yu Gothic", system-ui, sans-serif;
  opacity: 0;
}

.love-dialog-layer.is-active .love-dialog-window {
  animation: loveWindowIn .22s steps(2) both;
}

@keyframes loveWindowIn {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.92); filter: blur(4px); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
}

.love-dialog-title {
  min-height: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background:
    linear-gradient(90deg, #d8d8d8, #f0f0f0);
  border-bottom: 1px solid #a8a8a8;
  padding: 4px 6px 4px 10px;
  font-size: 13px;
}

.love-dialog-title button {
  cursor: pointer;
  width: 24px;
  height: 22px;
  border: 1px solid #888;
  background: #ececec;
  color: #111;
  line-height: 1;
}

.love-dialog-body {
  min-height: 118px;
  display: grid;
  place-items: center;
  padding: 22px;
}

.love-dialog-body p {
  margin: 0;
  text-align: center;
  font-size: clamp(16px, 2vw, 21px);
  letter-spacing: .06em;
  line-height: 1.7;
  white-space: pre-wrap;
}

.love-dialog-actions {
  display: flex;
  justify-content: center;
  padding: 0 18px 18px;
}

.love-dialog-actions button {
  cursor: pointer;
  min-width: 92px;
  border: 1px solid #777;
  background: #efefef;
  color: #111;
  padding: 7px 18px;
  font-family: inherit;
}

.love-dialog-actions button:active,
.love-dialog-title button:active {
  transform: translateY(1px);
}

/* stageごとに不穏化 */
.love-dialog-layer.stage-2 .love-dialog-window {
  filter: contrast(1.06);
}

.love-dialog-layer.stage-3 .love-dialog-window {
  animation: loveWindowIn .22s steps(2) both, loveTinyGlitch .16s steps(2) 4 .2s;
}

.love-dialog-layer.stage-4 .love-dialog-title {
  background: linear-gradient(90deg, #e6e6e6, #ffe7eb);
}

.love-dialog-layer.stage-5 .love-dialog-window,
.love-dialog-layer.stage-6 .love-dialog-window {
  border-color: rgba(210,27,54,.9);
  box-shadow:
    0 18px 70px rgba(0,0,0,.48),
    0 0 40px rgba(210,27,54,.18),
    inset 0 0 0 1px rgba(255,255,255,.72);
}

.love-dialog-layer.stage-6 .love-dialog-body p {
  color: #a00018;
  font-weight: 700;
  text-shadow: 1px 0 rgba(0,0,0,.1);
}

.love-dialog-layer.stage-7 .love-dialog-window {
  width: min(520px, calc(100vw - 32px));
  background: #fff;
  border-color: #111;
}

.love-dialog-layer.stage-8 {
  background: #fff;
}

.love-dialog-layer.stage-8::before {
  display: none;
}

.love-dialog-layer.stage-8 .love-dialog-window {
  width: min(560px, calc(100vw - 32px));
  background: #fff;
  border: 0;
  box-shadow: none;
}

.love-dialog-layer.stage-8 .love-dialog-title,
.love-dialog-layer.stage-8 .love-dialog-actions {
  display: none;
}

.love-dialog-layer.stage-8 .love-dialog-body {
  min-height: 220px;
}

.love-dialog-layer.stage-8 .love-dialog-body p {
  color: #111;
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(18px, 2.5vw, 28px);
  letter-spacing: .18em;
}

@keyframes loveTinyGlitch {
  from { transform: translate(-50%, -50%) translateX(-2px); }
  to { transform: translate(-50%, -50%) translateX(2px); }
}

/* Live dialog発火時、ライブ画面も反応 */
body.live-dialog-haunting .vhs-monitor-screen {
  animation: liveScreenPulse .22s steps(2) 6;
}

@keyframes liveScreenPulse {
  0% { filter: none; }
  50% { filter: contrast(1.4) brightness(.75) hue-rotate(-12deg); }
  100% { filter: none; }
}


/* =========================================================
   v21 fixes: reception layer / dummy restored / live click / mitana
========================================================= */

/* 受信ページ: 映像がテレビの後ろに潜らないように前面へ */
.crt-tv-image {
  z-index: 1 !important;
}

.crt-screen {
  z-index: 5 !important;
  pointer-events: auto;
}

/* CRT画像の灰色画面に負けないよう映像を少し明るく */
.crt-feed.is-active {
  opacity: .98 !important;
}

.crt-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 9;
  box-shadow:
    inset 0 0 34px rgba(0,0,0,.65),
    inset 0 0 8px rgba(255,255,255,.08);
  border-radius: inherit;
}

/* 何もないページの復元ログ用画像 */
.dummy-photo {
  display: block;
  margin: 12px 0;
  border: 1px solid rgba(238,233,221,.14);
  background: rgba(0,0,0,.28);
  overflow: hidden;
}

.dummy-photo img {
  display: block;
  width: 100%;
  max-height: 240px;
  object-fit: cover;
  filter: brightness(.78) contrast(1.14) saturate(.82);
}

/* ライブカメラ: クリック判定を確実化 */
.simple-live-monitor {
  pointer-events: auto !important;
}

#liveCameraScreen {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 6 !important;
  cursor: pointer !important;
}

.live-dialog-hit-area {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: block;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}

.live-dialog-hit-area:focus-visible {
  outline: 2px solid rgba(210,27,54,.92);
  outline-offset: -4px;
}

#liveCameraScreen .monitor-warning,
#liveCameraScreen .simple-monitor-overlay {
  z-index: 31 !important;
  pointer-events: none !important;
}

/* 最下層の空白をさらに長くする */
.bottom-void {
  min-height: 360vh !important;
  padding-bottom: 24vh !important;
}

.void-space {
  min-height: 300vh !important;
}

.mitana-trigger {
  margin-top: 28vh;
}

/* 「みたな」を1秒捉えた合図 */
.mitana-trigger.is-being-watched {
  color: rgba(160,0,18,.92) !important;
  animation: mitanaWatched 1s steps(4) both;
}

@keyframes mitanaWatched {
  0% { letter-spacing: .35em; filter: blur(0); transform: translateX(.15em) scale(1); }
  25% { letter-spacing: .52em; filter: blur(.6px); }
  50% { letter-spacing: .22em; filter: blur(0); transform: translateX(.15em) scale(1.08); }
  75% { letter-spacing: .6em; filter: blur(1px); }
  100% { letter-spacing: .35em; filter: blur(0); transform: translateX(.15em) scale(1.02); }
}

/* クリック不要を示すため、ホバーではなく視認で発火する不穏な感じ */
.mitana-trigger::after {
  content: "";
  display: block;
  width: 1px;
  height: 0;
  margin: 10px auto 0;
  background: rgba(160,0,18,.6);
  transition: height 1s linear;
}

.mitana-trigger.is-being-watched::after {
  height: 46px;
}


/* =========================================================
   v22 mirror update image replacement
========================================================= */

.work-card2[data-title-ja="鏡のアップデート"] .work-thumb img {
  object-fit: cover;
  object-position: center;
  filter: brightness(.82) contrast(1.18) saturate(.88);
}

.work-card2[data-title-ja="鏡のアップデート"]:hover .work-thumb img {
  filter: brightness(1.02) contrast(1.24) saturate(.96);
}


/* =========================================================
   v23: EFFECT MATERIALS欄は削除
========================================================= */

.visual-materials-panel {
  display: none !important;
}


/* =========================================================
   v25 Famicom RPG intro + Peaceful BGM
========================================================= */

.rpg-intro {
  position: fixed;
  inset: 0;
  z-index: 12000;
  background:
    radial-gradient(circle at 50% 42%, rgba(48, 76, 40, .34), transparent 28rem),
    #050505;
  color: #fff;
  display: grid;
  place-items: center;
  overflow: hidden;
  font-family: "MS Gothic", "DotGothic16", ui-monospace, monospace;
}

.rpg-intro.is-hidden {
  pointer-events: none;
  animation: rpgIntroOut 1.05s steps(6) both;
}

@keyframes rpgIntroOut {
  0% { opacity: 1; filter: none; }
  45% { opacity: 1; filter: contrast(1.8) saturate(1.4); transform: scale(1.01); }
  100% { opacity: 0; filter: blur(6px); transform: scale(1.04); visibility: hidden; }
}

.rpg-crt {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.05) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 50% 50%, transparent 0 46%, rgba(0,0,0,.5) 100%);
  opacity: .7;
  mix-blend-mode: screen;
  z-index: 4;
}

.rpg-shell {
  position: relative;
  z-index: 5;
  width: min(96vw, 980px);
  border: 6px solid #111;
  background: #111;
  box-shadow:
    0 0 0 4px #c4c4c4,
    0 30px 120px rgba(0,0,0,.65);
  image-rendering: pixelated;
}

.rpg-topbar,
.rpg-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #101018;
  color: #f8f8f8;
  padding: 10px 14px;
  font-size: clamp(12px, 1.7vw, 18px);
  letter-spacing: .08em;
}

.rpg-topbar {
  justify-content: space-between;
  border-bottom: 4px solid #c4c4c4;
}

.rpg-controls {
  border-top: 4px solid #c4c4c4;
  justify-content: center;
  flex-wrap: wrap;
}

.rpg-controls b {
  color: #ffef7a;
  font-weight: 900;
  border: 2px solid #ffef7a;
  padding: 2px 6px;
}

#rpgSkip,
#rpgBgmButton {
  cursor: pointer;
  border: 2px solid #f8f8f8;
  background: #252532;
  color: #f8f8f8;
  font: inherit;
  padding: 4px 10px;
}

#rpgBgmButton {
  border-color: #ffef7a;
  background: #1b2a58;
  color: #ffef7a;
}

#rpgBgmButton.is-playing {
  background: #2f6f33;
  color: #fff;
  border-color: #fff;
}

#rpgBgmButton.is-muted {
  background: #3a2430;
  color: #ffb8c8;
  border-color: #ffb8c8;
}

.rpg-intro.bgm-ready::after {
  content: "♪";
  position: absolute;
  right: 22px;
  bottom: 72px;
  z-index: 8;
  color: #ffef7a;
  text-shadow: 2px 2px #000;
  font-size: clamp(18px, 3vw, 32px);
  animation: bgmNoteFloat 1.1s steps(3) infinite;
  pointer-events: none;
}

@keyframes bgmNoteFloat {
  0% { transform: translateY(0); opacity: .55; }
  50% { transform: translateY(-8px); opacity: 1; }
  100% { transform: translateY(0); opacity: .55; }
}

.rpg-screen {
  position: relative;
  height: min(68vh, 620px);
  min-height: 460px;
  overflow: hidden;
  background: #68a843;
  isolation: isolate;
}

.rpg-map {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.10) 1px, transparent 1px),
    linear-gradient(rgba(0,0,0,.10) 1px, transparent 1px),
    radial-gradient(circle at 12% 82%, #477b2d 0 4px, transparent 4px),
    radial-gradient(circle at 62% 22%, #477b2d 0 4px, transparent 4px),
    #6fb34b;
  background-size: 32px 32px, 32px 32px, 64px 64px, 72px 72px, auto;
}

.rpg-path {
  position: absolute;
  background:
    linear-gradient(90deg, rgba(0,0,0,.08) 1px, transparent 1px),
    #d9b56a;
  background-size: 16px 16px;
  border: 3px solid rgba(115,79,28,.35);
}

.rpg-path-main {
  left: 46%;
  top: 0;
  width: 92px;
  height: 100%;
}

.rpg-path-side {
  left: 8%;
  top: 62%;
  width: 76%;
  height: 76px;
}

.rpg-house {
  position: absolute;
  width: 210px;
  height: 170px;
  background:
    linear-gradient(#b54220 0 34%, #f0c36b 34% 100%);
  border: 4px solid #3a2417;
  box-shadow: inset 0 -18px rgba(0,0,0,.16);
}

.rpg-house::before {
  content: "";
  position: absolute;
  left: -10px;
  right: -10px;
  top: -34px;
  height: 62px;
  background:
    repeating-linear-gradient(90deg, #d65d2c 0 24px, #8f2d19 24px 28px),
    #d65d2c;
  border: 4px solid #3a2417;
}

.rpg-house::after {
  content: "";
  position: absolute;
  left: 88px;
  bottom: 0;
  width: 40px;
  height: 62px;
  background: #8b5528;
  border: 4px solid #3a2417;
}

.rpg-house-a {
  left: 10%;
  top: 8%;
}

.rpg-house-b {
  right: 8%;
  top: 14%;
  transform: scale(.86);
}

.rpg-tree {
  position: absolute;
  width: 52px;
  height: 52px;
  background: #2d751d;
  border: 4px solid #174b16;
  border-radius: 50%;
  box-shadow: inset -8px -8px rgba(0,0,0,.18), 0 12px 0 #6e4324;
}

.rpg-tree.t1 { left: 4%; top: 6%; }
.rpg-tree.t2 { left: 30%; top: 5%; }
.rpg-tree.t3 { right: 4%; top: 6%; }
.rpg-tree.t4 { left: 5%; bottom: 14%; }
.rpg-tree.t5 { right: 14%; bottom: 18%; }
.rpg-tree.t6 { right: 4%; bottom: 36%; }

.rpg-player,
.rpg-npc {
  position: absolute;
  width: 52px;
  height: 70px;
  z-index: 4;
  image-rendering: pixelated;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
  filter: drop-shadow(0 4px 0 rgba(0,0,0,.25));
}

.rpg-player {
  left: 48%;
  top: 72%;
  background-image: url("/assets/images/rpg_hero.png");
}

.rpg-player.is-walking {
  animation: rpgWalk .22s steps(2) infinite;
}

@keyframes rpgWalk {
  from { transform: translateY(0); }
  to { transform: translateY(-3px); }
}

.rpg-npc {
  left: 56%;
  top: 57%;
  background-image: url("/assets/images/rpg_villager.png");
}

.rpg-npc::after {
  content: "!";
  position: absolute;
  left: 50%;
  top: -28px;
  transform: translateX(-50%);
  color: #ffef7a;
  text-shadow: 2px 2px #000;
  font-size: 24px;
  opacity: 0;
}

.rpg-npc.can-talk::after {
  opacity: 1;
  animation: npcNotice .7s steps(2) infinite;
}

@keyframes npcNotice {
  50% { transform: translateX(-50%) translateY(-4px); }
}

.rpg-dialog {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 24px;
  z-index: 20;
  min-height: 124px;
  border: 5px solid #fff;
  background: #071048;
  box-shadow: 0 0 0 4px #000;
  color: #fff;
  padding: 18px 20px;
  display: none;
}

.rpg-dialog.is-open {
  display: block;
}

.rpg-dialog p {
  margin: 0;
  font-size: clamp(18px, 3vw, 30px);
  line-height: 1.6;
}

.rpg-choices {
  display: flex;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.rpg-choices button {
  cursor: pointer;
  background: transparent;
  color: #fff;
  border: 0;
  font: inherit;
  font-size: clamp(18px, 3vw, 28px);
}

.rpg-choices button::before {
  content: "▶ ";
}

.yes-flood {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  display: none;
  overflow: hidden;
  background: rgba(7,16,72,.86);
}

.yes-flood.is-active {
  display: block;
}

.yes-flood span {
  position: absolute;
  color: #fff;
  font-size: 28px;
  text-shadow: 2px 2px #000;
  animation: yesBlink .42s steps(2) infinite;
}

@keyframes yesBlink {
  50% { opacity: .48; transform: translateY(-2px); }
}

.heisei-transition {
  position: absolute;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: 0;
  background:
    linear-gradient(90deg, #ff99cc, #ffff99 20%, #99ffff 44%, #cc99ff 72%, #ff99cc),
    url("/assets/images/fx_static_noise.webp");
  background-blend-mode: screen;
  background-size: 200% 100%, cover;
  animation: heiseiBg 1.4s linear infinite;
}

.heisei-transition.is-active {
  opacity: 1;
  animation: heiseiIn .8s steps(5) both, heiseiBg 1.4s linear infinite;
}

@keyframes heiseiBg {
  from { background-position: 0 0, center; }
  to { background-position: 200% 0, center; }
}

@keyframes heiseiIn {
  from { filter: blur(12px) contrast(2); }
  to { filter: blur(0) contrast(1.1); }
}

.heisei-window {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(680px, 88vw);
  transform: translate(-50%, -50%);
  border: 4px ridge #fff;
  background: #ffffee;
  color: #111;
  font-family: "MS PGothic", "MS Gothic", sans-serif;
  box-shadow: 10px 10px 0 rgba(0,0,0,.35);
}

.heisei-titlebar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #000080;
  color: #fff;
  padding: 4px 8px;
  font-weight: 700;
}

.heisei-titlebar button {
  border: 2px outset #eee;
  background: #ddd;
  color: #000;
}

.heisei-body {
  text-align: center;
  padding: 34px 22px;
}

.heisei-body h1 {
  margin: 0 0 14px;
  font-size: clamp(30px, 6vw, 64px);
  color: #ff0080;
  text-shadow: 2px 2px #00ffff;
}

.heisei-body p {
  color: #000080;
  font-weight: 700;
}

.heisei-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
}

.heisei-links span {
  border: 2px outset #ddd;
  background: #fff;
  padding: 6px 12px;
  color: #0000ee;
  text-decoration: underline;
}

body.heisei-site .horror-site {
  background:
    radial-gradient(circle at 20% 20%, rgba(255,0,128,.08), transparent 24rem),
    linear-gradient(90deg, rgba(255,255,153,.08), rgba(153,255,255,.05)),
    #111 !important;
}

body.heisei-site .site-header {
  border-style: ridge !important;
  border-color: rgba(255,255,255,.35) !important;
}

body.heisei-site .hero-card,
body.heisei-site .profile-card,
body.heisei-site .work-detail,
body.heisei-site .reception-tv-wrap,
body.heisei-site .reception-log-panel {
  border-style: ridge !important;
}

body.heisei-site .logo-line,
body.heisei-site .hero h1 {
  text-shadow:
    2px 2px rgba(255,0,128,.45),
    -2px -2px rgba(0,255,255,.25);
}

@media (max-width: 760px) {
  .rpg-shell {
    width: 100vw;
    height: 100vh;
    border-width: 0;
    box-shadow: none;
  }

  .rpg-screen {
    min-height: calc(100vh - 116px);
    height: calc(100vh - 116px);
  }

  .rpg-house {
    width: 150px;
    height: 120px;
  }

  .rpg-house-b {
    display: none;
  }

  .rpg-controls {
    font-size: 12px;
  }
}


/* =========================================================
   v26 mirror / RPG sprite / mitana fix
========================================================= */

/* 鏡のアップデートの新規素材 */
.work-card2[data-title-ja="鏡のアップデート"] .work-thumb img {
  object-fit: cover;
  object-position: center;
  filter: brightness(.78) contrast(1.16) saturate(.86);
}

.work-card2[data-title-ja="鏡のアップデート"]:hover .work-thumb img {
  filter: brightness(1.02) contrast(1.22) saturate(.98);
}

/* RPGスプライト切れ防止: キャンバスを少し大きくしてcontain */
.rpg-player,
.rpg-npc {
  width: 72px !important;
  height: 92px !important;
  background-size: contain !important;
  background-position: center bottom !important;
  overflow: visible !important;
}

/* RPGから本編に入った場合、最下部の「みたな」余白は出さない */
body.heisei-site .bottom-void,
body.heisei-site #bottomVoid,
body.heisei-site .mitana-trigger {
  display: none !important;
}

/* 余白そのものも消す */
body.heisei-site .void-space {
  min-height: 0 !important;
  height: 0 !important;
}

/* 念のため、通常本編で余白がページ高さを押し広げない */
body.heisei-site {
  min-height: auto;
}


/* =========================================================
   v27 BBS / escape dialogs / novels / event fixes
========================================================= */
.heisei-enter-menu{display:flex;justify-content:center;gap:14px;margin:18px auto;flex-wrap:wrap}
.heisei-enter-menu button{cursor:pointer;min-width:110px;border:3px outset #ddd;background:#ffffee;color:#0000ee;font-family:"MS PGothic","MS Gothic",sans-serif;font-size:18px;font-weight:bold;padding:8px 18px}
.heisei-enter-menu button:active{border-style:inset}
.heisei-bbs{margin:22px auto 0;max-height:220px;overflow:auto;text-align:left;border:3px ridge #c0c0c0;background:#fff;padding:10px;color:#111}
.heisei-bbs h2{margin:0 0 10px;color:#800080;font-size:18px}
.heisei-bbs article{border-bottom:1px dotted #999;padding:8px 0}
.heisei-bbs b{color:#000080}
.heisei-bbs p{margin:4px 0 0;line-height:1.5}

.escape-choice-dialog{position:fixed;z-index:9100;width:min(330px,calc(100vw - 24px));background:#f4f4f4;color:#111;border:1px solid #888;box-shadow:12px 12px 0 rgba(0,0,0,.35);font-family:"MS PGothic","Yu Gothic",sans-serif;animation:escapeDialogPop .16s steps(2) both}
@keyframes escapeDialogPop{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.escape-choice-title{background:#000080;color:#fff;padding:4px 8px;display:flex;justify-content:space-between;gap:8px;font-size:13px}
.escape-choice-body{padding:16px;text-align:center}
.escape-choice-body p{margin:0 0 14px;line-height:1.6}
.escape-choice-body button{cursor:pointer;min-width:74px;margin:0 5px;border:2px outset #ddd;background:#eee;color:#111;font-family:inherit;padding:5px 12px}

.love-dialog-layer{z-index:9300!important}
.love-dialog-window{z-index:9301!important}
.simple-live-monitor,#liveCameraScreen,.vhs-monitor-screen,.vhs-live-art,.live-art{pointer-events:auto!important;cursor:pointer!important}

.story-novel-layer{position:fixed;inset:0;z-index:9000;display:none;place-items:center;background:radial-gradient(circle at 50% 35%,rgba(160,0,18,.18),transparent 28rem),rgba(0,0,0,.72);padding:24px}
.story-novel-layer.is-open{display:grid}
.story-novel-window{width:min(760px,calc(100vw - 32px));min-height:min(620px,calc(100vh - 48px));border:1px solid rgba(238,233,221,.16);background:linear-gradient(135deg,rgba(255,255,255,.06),transparent 38%),#070709;color:rgba(245,242,232,.88);box-shadow:0 30px 120px rgba(0,0,0,.65);display:grid;grid-template-rows:auto 1fr auto}
.story-novel-top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(238,233,221,.12);padding:12px 14px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.12em;color:rgba(210,27,54,.88)}
.story-novel-top button{cursor:pointer;border:1px solid rgba(238,233,221,.18);background:rgba(255,255,255,.06);color:rgba(245,242,232,.88);width:32px;height:28px}
.story-novel-body{padding:clamp(22px,4vw,46px);display:flex;flex-direction:column;justify-content:center}
.story-novel-body h2{margin:0 0 24px;font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:clamp(28px,5vw,64px);letter-spacing:-.05em;line-height:1.08}
.story-novel-body p{margin:0;white-space:pre-wrap;line-height:2.05;font-size:clamp(16px,2vw,20px);color:rgba(245,242,232,.78)}
.story-novel-actions{display:flex;justify-content:space-between;gap:12px;border-top:1px solid rgba(238,233,221,.12);padding:14px}
.story-novel-actions button{cursor:pointer;border:1px solid rgba(238,233,221,.18);background:rgba(255,255,255,.06);color:rgba(245,242,232,.9);padding:10px 16px}

body:not(.from-rpg) .bottom-void{display:grid!important;min-height:360vh!important}
body:not(.from-rpg) .void-space{min-height:300vh!important}
body.from-rpg .bottom-void,body.from-rpg #bottomVoid,body.from-rpg .bottom-curse-overlay{display:none!important}

/* v28 yumerin branch sites */
.yumerin-site,.lcd-site{display:none}
body.site-b .horror-site,body.site-b .bottom-void,body.site-b .bottom-curse-overlay,body.site-c .horror-site,body.site-c .bottom-void,body.site-c .bottom-curse-overlay{display:none!important}
body.site-b .yumerin-site{display:block} body.site-c .lcd-site{display:block}
body.site-b,body.site-c{background:#ffeef8}
.yumerin-site{min-height:100vh;color:#36003f;background:linear-gradient(90deg,#ffd2ef,#fff7b8 28%,#ccffff 58%,#e4ccff);font-family:"MS PGothic","MS Gothic","Yu Gothic",sans-serif;padding:18px}
.yumerin-header,.yumerin-main{max-width:980px;margin:0 auto;position:relative;z-index:1}
.yumerin-header{border:5px ridge #fff;background:#fff0ff;padding:14px;text-align:center;box-shadow:8px 8px 0 rgba(0,0,0,.25)}
.yumerin-header p{margin:0;color:#0000cc;font-size:13px}.yumerin-header h1{margin:8px 0;color:#ff1493;font-size:clamp(34px,7vw,72px);text-shadow:3px 3px #00ffff,-2px -2px #ffff00;letter-spacing:.04em}
.yumerin-header nav{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.yumerin-header nav a{color:#0000ee;background:#ffffee;border:3px outset #ddd;padding:5px 10px;font-weight:bold}
.yumerin-main{display:grid;gap:18px;margin-top:20px}.yumerin-hero{display:grid;grid-template-columns:minmax(260px,.8fr) 1fr;gap:18px}
.yumerin-photo-frame,.yumerin-profile,.yumerin-box{border:5px ridge #fff;background:rgba(255,255,255,.92);padding:14px;box-shadow:8px 8px 0 rgba(0,0,0,.18)}
.yumerin-photo-frame img{width:100%;display:block;border:3px inset #ccc}.yumerin-photo-frame p{text-align:center;color:#cc0088;font-weight:bold}
.yumerin-profile h2,.yumerin-box h2{margin:0 0 12px;color:#800080;background:#ffffcc;border-bottom:3px double #ff99cc;padding:6px}.yumerin-profile p,.yumerin-box p{line-height:1.8}
.yumerin-catch{text-align:center;font-size:24px;color:#ff0066}.yumerin-catch b{font-size:42px;text-shadow:2px 2px #000}
#yumerinSongButton{cursor:pointer;border:3px outset #ddd;background:#ffccff;color:#000080;padding:8px 14px;font-weight:bold}.fake-midi{margin-top:12px;border:3px inset #aaa;background:#000;color:#00ff66;padding:8px;font-family:ui-monospace,monospace}.fake-midi i{display:block;height:10px;width:40%;background:#00ff66;margin-top:8px;animation:midiBar 1.2s steps(8) infinite}@keyframes midiBar{0%{width:12%}50%{width:88%}100%{width:40%}}
.yumerin-lyrics{color:#cc0066;font-weight:bold;text-align:center}.yumerin-bbs-log article{border-bottom:1px dotted #999;padding:8px}.yumerin-bbs-log b{color:#0000cc}
.hidden-cartridge{justify-self:end;cursor:pointer;width:128px;height:86px;border:4px solid #111;background:linear-gradient(#474747,#151515);color:#ffef7a;box-shadow:6px 6px 0 rgba(0,0,0,.3);font-family:ui-monospace,monospace;transform:rotate(-4deg)}.hidden-cartridge span{display:block;color:#999;letter-spacing:.18em}.hidden-cartridge b{display:block;margin-top:8px}
.lcd-site{min-height:100vh;color:#dfeaff;background:radial-gradient(circle at 50% 30%,rgba(0,80,255,.2),transparent 28rem),#020308;font-family:"MS Gothic",ui-monospace,monospace;overflow:hidden}
.lcd-noise{position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.05) 0 1px,transparent 1px 4px),url("/assets/images/fx_static_noise.webp");background-size:auto,cover;mix-blend-mode:screen;opacity:.16;z-index:1}.lcd-header,.lcd-game{position:relative;z-index:2;max-width:980px;margin:0 auto;padding:32px 18px}.lcd-header p{color:#66ccff;letter-spacing:.18em}.lcd-header h1{margin:0;font-size:clamp(42px,9vw,104px);line-height:.96;color:#e8f2ff;text-shadow:3px 0 #0055ff,-3px 0 #ff0033}
.lcd-screen{min-height:560px;border:2px solid rgba(180,220,255,.3);background:radial-gradient(circle at 50% 50%,rgba(140,190,255,.08),transparent 24rem),rgba(0,0,0,.75);box-shadow:inset 0 0 80px rgba(0,0,0,.8),0 0 80px rgba(0,90,255,.2);padding:clamp(22px,4vw,44px);display:grid;grid-template-rows:auto auto 1fr auto}.lcd-hud{display:flex;justify-content:space-between;color:#66ccff;border-bottom:1px solid rgba(180,220,255,.22);padding-bottom:12px;margin-bottom:24px}.lcd-screen h2{color:#fff;font-size:clamp(30px,5vw,58px);margin:0 0 18px}.lcd-screen p{line-height:2;white-space:pre-wrap;color:rgba(226,240,255,.82);font-size:clamp(16px,2.2vw,22px)}.lcd-actions button{cursor:pointer;border:1px solid rgba(180,220,255,.35);background:rgba(0,70,180,.22);color:#e8f2ff;padding:12px 16px;font-family:inherit}
@media(max-width:760px){.yumerin-hero{grid-template-columns:1fr}}


/* =========================================================
   v29 Separate Main Sites A/B/C/D
========================================================= */
.route-a #rpgIntro,
.route-a #yumerinSite,
.route-a #lcdSite {
  display: none !important;
}

body.standalone-b .yumerin-site,
body.standalone-c .lcd-site {
  display: block !important;
}

body.standalone-b .horror-site,
body.standalone-b .bottom-void,
body.standalone-b .bottom-curse-overlay,
body.standalone-c .horror-site,
body.standalone-c .bottom-void,
body.standalone-c .bottom-curse-overlay {
  display: none !important;
}

.abcd-mini-nav {
  position: fixed;
  z-index: 9999;
  right: 12px;
  top: 12px;
  display: flex;
  gap: 6px;
  font-family: ui-monospace, monospace;
}

.abcd-mini-nav a {
  background: rgba(0,0,0,.72);
  color: #fff;
  border: 1px solid rgba(255,255,255,.25);
  padding: 6px 8px;
  text-decoration: none;
}


/* =========================================================
   v30 Site B street / BBS humanity / routing fixes
========================================================= */

.yumerin-site {
  background:
    radial-gradient(circle at 10% 12%, rgba(255,255,255,.9) 0 2px, transparent 3px),
    radial-gradient(circle at 88% 18%, rgba(255,0,128,.24) 0 2px, transparent 4px),
    repeating-linear-gradient(135deg, rgba(255,255,255,.18) 0 8px, rgba(255,255,255,0) 8px 18px),
    linear-gradient(90deg, #ffd2ef, #fff7b8 28%, #ccffff 58%, #e4ccff) !important;
}

.yumerin-header::after {
  content: "NO REALITY / YUME CREW / 制裁";
  display: block;
  margin-top: 10px;
  color: #111;
  background: #ffef00;
  border: 2px dashed #111;
  padding: 6px;
  font-weight: 900;
  letter-spacing: .08em;
  transform: rotate(-1deg);
}

.yumerin-street-wall,
.yumerin-zine {
  border: 5px ridge #fff;
  background:
    linear-gradient(90deg, rgba(0,0,0,.04), transparent),
    rgba(255,255,255,.92);
  padding: 14px;
  box-shadow: 8px 8px 0 rgba(0,0,0,.18);
}

.graffiti-logo {
  font-size: clamp(34px, 7vw, 82px);
  line-height: .9;
  color: #ff1493;
  text-shadow:
    3px 3px #00ffff,
    6px 6px #111;
  font-weight: 900;
  letter-spacing: -.05em;
  transform: skewX(-8deg) rotate(-1deg);
  margin-bottom: 14px;
}

.sticker-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 14px;
}

.sticker-row span {
  display: inline-block;
  border: 3px solid #111;
  background: #fff;
  color: #111;
  padding: 5px 9px;
  font-weight: 900;
  box-shadow: 3px 3px 0 #ff1493;
  transform: rotate(var(--rot, -2deg));
}

.sticker-row span:nth-child(2n) {
  --rot: 2deg;
  background: #ccffff;
}

.sticker-row span:nth-child(3n) {
  --rot: -4deg;
  background: #ffff99;
}

.yumerin-street-wall p {
  color: #2b0030;
  line-height: 1.85;
  font-weight: bold;
}

.zine-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.zine-grid article {
  border: 3px solid #111;
  background: #ffffee;
  padding: 10px;
  min-height: 110px;
  transform: rotate(-1deg);
}

.zine-grid article:nth-child(2) {
  background: #ffccff;
  transform: rotate(2deg);
}

.zine-grid article:nth-child(3) {
  background: #ccffff;
  transform: rotate(-2deg);
}

.zine-grid b {
  display: inline-block;
  background: #111;
  color: #fff;
  padding: 2px 6px;
  margin-bottom: 6px;
}

.yumerin-bbs-log article {
  position: relative;
  background: rgba(255,255,255,.74);
  margin: 7px 0;
  border: 1px dotted #999 !important;
  border-left: 6px solid #ff1493 !important;
}

.yumerin-bbs-log time {
  float: right;
  color: #777;
  font-size: 12px;
}

.yumerin-bbs-log article:nth-child(2n) {
  border-left-color: #00a6ff !important;
  background: rgba(238,255,255,.86);
}

.yumerin-bbs-log article:nth-child(3n) {
  border-left-color: #ffcc00 !important;
  background: rgba(255,255,221,.9);
}

.hidden-cartridge {
  animation: cartridgeWiggle 2.8s steps(2) infinite;
}

@keyframes cartridgeWiggle {
  0%, 80%, 100% { transform: rotate(-4deg) translateY(0); }
  88% { transform: rotate(2deg) translateY(-4px); }
  94% { transform: rotate(-6deg) translateY(2px); }
}

.hidden-cartridge::after {
  content: "隠しROM";
  display: block;
  color: #ff66cc;
  font-size: 11px;
  margin-top: 4px;
}

@media (max-width: 760px) {
  .zine-grid {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   v31 Heisei portal wait/input fix
========================================================= */

/* 平成ポータルは演出ではなく分岐メニュー。クリック可能にする */
.heisei-transition.is-active {
  pointer-events: auto !important;
}

.heisei-transition.is-active .heisei-window,
.heisei-transition.is-active .heisei-body,
.heisei-transition.is-active button,
.heisei-transition.is-active a {
  pointer-events: auto !important;
}

/* 入力待ち状態であることを見た目でも伝える */
.heisei-transition.is-active .heisei-window::after {
  content: "ENTER または EXIT を選んでください";
  display: block;
  margin: 0 18px 18px;
  padding: 6px 8px;
  border: 2px dashed #ff0080;
  background: #ffffcc;
  color: #000080;
  font-family: "MS PGothic", "MS Gothic", sans-serif;
  font-weight: bold;
  text-align: center;
  animation: heiseiInputBlink 1.1s steps(2) infinite;
}

@keyframes heiseiInputBlink {
  50% { opacity: .55; }
}

/* はい増殖は背景演出にして、ポータルのクリックを邪魔しない */
.yes-flood {
  pointer-events: none !important;
}


/* =========================================================
   v32 Randomized BBS
========================================================= */

.bbs-random-note {
  margin: 0 0 10px;
  color: #800080;
  background: #ffffcc;
  border: 2px dashed #ff66cc;
  padding: 6px 8px;
  font-size: 13px;
  font-weight: bold;
}

.yumerin-bbs-log article.is-new::after,
.heisei-bbs article.is-new::after {
  content: "NEW";
  display: inline-block;
  margin-left: 8px;
  color: #fff;
  background: #ff1493;
  padding: 1px 5px;
  font-size: 11px;
  font-weight: bold;
  animation: bbsNewBlink .9s steps(2) infinite;
}

@keyframes bbsNewBlink {
  50% { opacity: .35; }
}

.yumerin-bbs-log article.is-system,
.heisei-bbs article.is-system {
  border-left-color: #111 !important;
  background: #eeeeee !important;
  color: #222;
}

.yumerin-bbs-log article.is-yumerin,
.heisei-bbs article.is-yumerin {
  border-left-color: #ff1493 !important;
  background: #fff0fb !important;
}

.yumerin-bbs-log article.is-human,
.heisei-bbs article.is-human {
  border-left-color: #00a6ff !important;
}

.yumerin-bbs-log article.is-odd,
.heisei-bbs article.is-odd {
  transform: rotate(-.25deg);
}

.yumerin-bbs-log article.is-even,
.heisei-bbs article.is-even {
  transform: rotate(.25deg);
}


/* =========================================================
   v33 Story card transition + substory horror novel sites
========================================================= */

.story-portal-flash {
  position: fixed;
  inset: 0;
  z-index: 15000;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 50%, rgba(210,27,54,.26), transparent 22rem),
    rgba(0,0,0,.86);
  color: rgba(245,242,232,.9);
  pointer-events: none;
  opacity: 0;
  animation: storyPortalIn .92s steps(6) forwards;
}

.story-portal-flash::before {
  content: "LOADING LOST WORK";
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .18em;
  border: 1px solid rgba(245,242,232,.2);
  padding: 18px 22px;
  background: rgba(255,255,255,.05);
  box-shadow: 0 0 80px rgba(210,27,54,.28);
}

.story-portal-flash::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.08) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, transparent 0 12px, rgba(210,27,54,.08) 12px 13px);
  mix-blend-mode: screen;
  animation: storyPortalNoise .22s steps(2) infinite;
}

@keyframes storyPortalIn {
  0% { opacity: 0; filter: blur(10px) contrast(2); }
  20% { opacity: 1; transform: scale(1); }
  55% { opacity: 1; transform: scale(1.02) skewX(-1deg); }
  100% { opacity: 1; transform: scale(1.08); filter: blur(1px) contrast(1.5); }
}

@keyframes storyPortalNoise {
  50% { transform: translate(4px, -3px); opacity: .6; }
}

.work-card2.story-linking,
.haunted-work.story-linking {
  animation: storyCardAbsorb .75s steps(5) forwards;
  transform-origin: center;
  z-index: 10;
}

@keyframes storyCardAbsorb {
  0% { filter: none; }
  30% { filter: contrast(2) saturate(.2); transform: scale(1.02) rotate(-1deg); }
  65% { filter: invert(1) contrast(2.2); transform: scale(.98) rotate(1deg); }
  100% { filter: brightness(0) blur(4px); transform: scale(.72); opacity: .2; }
}

.story-subsite {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 50% 20%, rgba(120,0,24,.24), transparent 30rem),
    #050507;
  color: rgba(245,242,232,.9);
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
}

.story-subsite::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.035) 0 1px, transparent 1px 4px);
  mix-blend-mode: screen;
  z-index: 5;
}

.story-site-shell {
  width: min(1120px, calc(100vw - 28px));
  margin: 0 auto;
  padding: 24px 0 54px;
}

.story-site-nav {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 10px 0 18px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.story-site-nav a {
  color: rgba(245,242,232,.82);
  text-decoration: none;
  border: 1px solid rgba(245,242,232,.16);
  background: rgba(255,255,255,.04);
  padding: 8px 10px;
}

.story-site-hero {
  display: grid;
  grid-template-columns: minmax(260px, .72fr) 1fr;
  gap: 18px;
  align-items: stretch;
  margin-bottom: 18px;
}

.story-site-image {
  min-height: 320px;
  background: #000;
  border: 1px solid rgba(245,242,232,.14);
  overflow: hidden;
}

.story-site-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(.72) contrast(1.25) saturate(.72);
  display: block;
}

.story-site-title {
  border: 1px solid rgba(245,242,232,.14);
  background:
    linear-gradient(135deg, rgba(255,255,255,.06), transparent 42%),
    rgba(255,255,255,.035);
  padding: clamp(22px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.story-site-title p,
.story-site-title span {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: rgba(210,27,54,.86);
  letter-spacing: .14em;
}

.story-site-title h1 {
  font-size: clamp(38px, 7vw, 92px);
  line-height: .95;
  letter-spacing: -.08em;
  margin: 14px 0;
}

.story-reader {
  border: 1px solid rgba(245,242,232,.16);
  background:
    radial-gradient(circle at 20% 0%, rgba(210,27,54,.12), transparent 24rem),
    rgba(0,0,0,.52);
  min-height: 480px;
  padding: clamp(22px, 4vw, 48px);
  box-shadow: 0 30px 120px rgba(0,0,0,.35);
}

.story-reader-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: rgba(210,27,54,.92);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .12em;
  margin-bottom: 28px;
  border-bottom: 1px solid rgba(245,242,232,.12);
  padding-bottom: 12px;
}

.story-reader h2 {
  font-size: clamp(30px, 5vw, 62px);
  margin: 0 0 22px;
  letter-spacing: -.04em;
}

.story-reader p {
  white-space: pre-wrap;
  line-height: 2.05;
  font-size: clamp(16px, 2.2vw, 21px);
  color: rgba(245,242,232,.78);
}

.story-choice-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 34px;
}

.story-choice-list button {
  cursor: pointer;
  color: rgba(245,242,232,.9);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(245,242,232,.22);
  padding: 12px 16px;
  font-family: "Yu Gothic", sans-serif;
}

.story-choice-list button:hover {
  background: rgba(210,27,54,.18);
  border-color: rgba(210,27,54,.6);
}

.story-shock .story-reader {
  animation: storySceneShock .28s steps(2);
}

@keyframes storySceneShock {
  0% { transform: translateX(0); filter: none; }
  33% { transform: translateX(-8px); filter: contrast(1.8); }
  66% { transform: translateX(6px); filter: invert(.08); }
  100% { transform: translateX(0); filter: none; }
}

.story-theme-blue {
  background: radial-gradient(circle at 50% 20%, rgba(0,80,255,.22), transparent 30rem), #030711;
}

.story-theme-mirror {
  background: radial-gradient(circle at 55% 20%, rgba(220,220,255,.18), transparent 28rem), #08080b;
}

.story-theme-phone {
  background: radial-gradient(circle at 50% 30%, rgba(0,120,80,.16), transparent 28rem), #050907;
}

.story-theme-cat {
  background: radial-gradient(circle at 30% 20%, rgba(255,210,120,.13), transparent 26rem), #070604;
}

.story-theme-diary {
  background: radial-gradient(circle at 50% 10%, rgba(255,245,210,.12), transparent 28rem), #070604;
}

.story-theme-light {
  background: radial-gradient(circle at 50% 10%, rgba(255,255,120,.14), transparent 24rem), #030303;
}

.story-theme-family {
  background: radial-gradient(circle at 50% 20%, rgba(130,60,40,.18), transparent 30rem), #080504;
}

@media (max-width: 760px) {
  .story-site-hero {
    grid-template-columns: 1fr;
  }

  .story-reader-top {
    flex-direction: column;
  }
}


/* =========================================================
   v34 Route Cleanup
========================================================= */

.route-root-clean #heiseiGate,
.route-root-clean #yumerinSite,
.route-root-clean #lcdSite,
.route-a-clean #rpgIntro,
.route-a-clean #heiseiGate,
.route-a-clean #yumerinSite,
.route-a-clean #lcdSite {
  display: none !important;
}

.main-site-a .horror-site {
  display: block !important;
}

.v34-site-nav {
  position: fixed;
  z-index: 99999;
  right: 12px;
  top: 12px;
  display: flex;
  gap: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.v34-site-nav a {
  color: #fff;
  background: rgba(0,0,0,.72);
  border: 1px solid rgba(255,255,255,.22);
  text-decoration: none;
  padding: 6px 8px;
}

.legacy-heisei-page {
  min-height: 100vh;
  background: #050505;
  color: #fff;
  padding-top: 52px;
}

.legacy-warning {
  max-width: 760px;
  margin: 0 auto 18px;
  border: 2px dashed #ffef7a;
  background: #1a1a1a;
  color: #ffef7a;
  padding: 12px;
  font-family: "MS Gothic", monospace;
}

.legacy-heisei-page #heiseiGate {
  position: relative !important;
  display: block !important;
}


/* =========================================================
   v35 Horror Web Journey: new main sites E-J
========================================================= */

.v35-main-nav {
  position: fixed;
  z-index: 99999;
  top: 10px;
  right: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
  max-width: min(680px, calc(100vw - 20px));
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.v35-main-nav a {
  color: #fff;
  background: rgba(0,0,0,.76);
  border: 1px solid rgba(255,255,255,.25);
  text-decoration: none;
  padding: 5px 7px;
  font-size: 12px;
}

.journey-site {
  margin: 0;
  min-height: 100vh;
  color: rgba(245,245,240,.92);
  background: #050506;
  font-family: "Yu Gothic", "Hiragino Kaku Gothic ProN", sans-serif;
  overflow-x: hidden;
}

.journey-site::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.035) 0 1px, transparent 1px 5px);
  mix-blend-mode: screen;
}

.journey-shell {
  width: min(1180px, calc(100vw - 28px));
  margin: 0 auto;
  padding: 76px 0 64px;
}

.journey-header {
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,.16);
  padding-bottom: 20px;
}

.journey-header p {
  color: #ff375f;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .16em;
}

.journey-header h1 {
  font-size: clamp(38px, 8vw, 104px);
  line-height: .9;
  margin: 8px 0 14px;
  letter-spacing: -.07em;
}

.journey-header span {
  color: rgba(245,245,240,.64);
}

.journey-layout {
  display: grid;
  grid-template-columns: minmax(280px, .78fr) 1.22fr;
  gap: 18px;
  align-items: start;
}

.journey-special,
.journey-reader {
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.045);
  box-shadow: 0 30px 120px rgba(0,0,0,.38);
}

.journey-special {
  padding: 14px;
}

.journey-image {
  height: 270px;
  background: #000;
  overflow: hidden;
  margin-bottom: 12px;
}

.journey-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.15) brightness(.72) saturate(.7);
}

.journey-reader {
  min-height: 560px;
  padding: clamp(22px, 4vw, 48px);
}

.journey-status {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #ff375f;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  border-bottom: 1px solid rgba(255,255,255,.12);
  padding-bottom: 12px;
  margin-bottom: 28px;
}

.journey-reader h2 {
  font-size: clamp(30px, 5vw, 66px);
  margin: 0 0 22px;
}

.journey-reader p {
  white-space: pre-wrap;
  line-height: 2.02;
  font-size: clamp(16px, 2vw, 21px);
  color: rgba(245,245,240,.78);
}

.journey-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 34px;
}

.journey-choices button {
  cursor: pointer;
  color: #fff;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.24);
  padding: 12px 15px;
}

.journey-choices button:hover {
  background: rgba(255,55,95,.22);
  border-color: rgba(255,55,95,.7);
}

.journey-hit .journey-reader {
  animation: journeyHit .25s steps(2);
}

@keyframes journeyHit {
  0% { transform: translate(0); filter: none; }
  45% { transform: translate(-7px, 2px); filter: contrast(1.8); }
  70% { transform: translate(5px, -1px); filter: invert(.08); }
  100% { transform: translate(0); filter: none; }
}

/* E: 404 search site */
.site-e404 {
  background: #f6f6f6;
  color: #161616;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.site-e404 .journey-header,
.site-e404 .journey-reader,
.site-e404 .journey-special {
  background: #fff;
  color: #161616;
  border: 1px solid #d5d5d5;
  box-shadow: none;
}

.site-e404 .journey-reader p { color: #333; }
.e404-searchbox input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  border: 2px solid #111;
  margin-bottom: 8px;
}
.e404-searchbox button {
  width: 100%;
  padding: 10px;
}
.e404-result {
  margin-top: 12px;
  border: 1px dashed #999;
  padding: 10px;
  background: #f2f2f2;
}

/* F: mail client */
.site-mail {
  background: linear-gradient(180deg, #d8e6ef, #8da9b8);
  color: #102033;
}
.site-mail .journey-reader,
.site-mail .journey-special {
  background: #f7fbff;
  color: #102033;
  border-color: #7a95aa;
}
.site-mail .journey-reader p { color: #1e3140; }
.mail-client {
  border: 2px solid #607d96;
  background: #fff;
}
.mail-row {
  padding: 9px;
  border-bottom: 1px solid #c6d3dc;
  cursor: pointer;
}
.mail-row:hover { background: #e5f0ff; }
.mail-preview {
  min-height: 120px;
  margin: 0;
  padding: 12px;
  white-space: pre-wrap;
  color: #203040;
}

/* G: live stream */
.site-live0 {
  background: #050505;
  color: #d9ffd9;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.live-stage {
  border: 2px solid #2cff79;
  background: #000;
  padding: 10px;
}
.live-screen {
  height: 220px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, rgba(44,255,121,.18), transparent 40%), #020402;
  border: 1px solid #175c2e;
  color: #2cff79;
}
.live-screen span { animation: bbsNewBlink .8s steps(2) infinite; }
.live-screen b { display:block; color:#d9ffd9; }
.live-meta { padding: 8px 0; }
.live-comments p {
  margin: 4px 0;
  color: #baffce;
}

/* H: right click god */
.site-god {
  background: radial-gradient(circle at 50% 15%, rgba(255,0,80,.16), transparent 34rem), #15040a;
  color: #ffeef4;
}
.god-shrine {
  min-height: 260px;
  display: grid;
  place-items: center;
  border: 3px double #ffcfdf;
  background: rgba(255,255,255,.04);
}
.god-paper {
  writing-mode: vertical-rl;
  background: #fff7e0;
  color: #250000;
  padding: 24px 12px;
  font-weight: 900;
  letter-spacing: .2em;
}
.god-message {
  margin-top: 12px;
  color: #ffd7e6;
}
.god-awake {
  animation: godAwake .75s steps(4) infinite;
}
@keyframes godAwake {
  50% { filter: invert(1) contrast(2); transform: rotate(.4deg); }
}

/* I: lost child center */
.site-lost {
  background: repeating-linear-gradient(90deg, #f9f0d0 0 80px, #f5d4d4 80px 160px);
  color: #321;
}
.site-lost .journey-header,
.site-lost .journey-reader,
.site-lost .journey-special {
  background: rgba(255,255,245,.95);
  color: #321;
  border: 3px solid #d43535;
}
.site-lost .journey-reader p { color: #321; }
.lost-counter {
  border: 2px solid #d43535;
  background: #fff8e8;
  padding: 12px;
}
.lost-counter button {
  width: 100%;
  padding: 12px;
}
.lost-ticket {
  margin-top: 12px;
  border: 1px dashed #333;
  background: #fff;
  padding: 12px;
}
.lost-ticket.is-issued {
  color: #d43535;
  font-weight: 900;
}

/* J: endless shop */
.site-scroll {
  background: #fff;
  color: #111;
  font-family: Arial, "Yu Gothic", sans-serif;
}
.site-scroll .journey-header,
.site-scroll .journey-reader,
.site-scroll .journey-special {
  background: #fff;
  color: #111;
  border: 1px solid #bbb;
  box-shadow: none;
}
.site-scroll .journey-reader p { color: #111; }
.fake-shop-long {
  height: 1050px;
  background: linear-gradient(#fff, #eee, #fff);
  border: 1px solid #ccc;
  padding: 12px;
}
.fake-shop-long p {
  margin: 120px 0;
  border: 1px solid #ddd;
  padding: 12px;
}
.scroll-bottom-clerk {
  opacity: 0;
  position: sticky;
  bottom: 10px;
  background: #111;
  color: #fff;
  padding: 16px;
  transition: opacity .5s;
}
.scroll-bottom-clerk.is-visible {
  opacity: 1;
}

/* Site map */
.site-map-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,55,95,.18), transparent 34rem),
    #050506;
  color: #f5f1e8;
  margin: 0;
  font-family: "Yu Gothic", sans-serif;
}
.site-map-shell {
  width: min(1160px, calc(100vw - 28px));
  margin: 0 auto;
  padding: 54px 0;
}
.site-map-header p {
  color: #ff375f;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .18em;
}
.site-map-header h1 {
  font-size: clamp(42px, 8vw, 96px);
  margin: 8px 0;
  line-height: .95;
}
.site-map-header span { color: rgba(245,241,232,.65); }
.site-map-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  margin-top: 28px;
}
.site-map-card {
  color: #f5f1e8;
  text-decoration: none;
  border: 1px solid rgba(245,241,232,.16);
  background: rgba(255,255,255,.045);
  padding: 18px;
  min-height: 160px;
  transition: transform .2s, background .2s;
}
.site-map-card:hover {
  transform: translateY(-4px) rotate(-.5deg);
  background: rgba(255,55,95,.14);
}
.site-map-card b {
  color: #ff375f;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.site-map-card h2 {
  margin: 12px 0 8px;
}

@media (max-width: 820px) {
  .journey-layout { grid-template-columns: 1fr; }
  .journey-shell { padding-top: 116px; }
}


/* =========================================================
   v36 Low-quality horror photo assets
========================================================= */

.journey-image {
  position: relative;
}

.journey-image::after,
.site-map-thumb::after,
.lowfi-photo-grid figure::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.12) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 50% 50%, transparent 38%, rgba(0,0,0,.52));
  mix-blend-mode: overlay;
}

.journey-image img,
.lowfi-photo-grid img,
.site-map-thumb img,
.asset-archive-grid img {
  filter: contrast(1.18) brightness(.68) saturate(.62);
}

.lowfi-asset-strip {
  margin-top: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(0,0,0,.24);
  padding: 10px;
}

.lowfi-asset-strip h3 {
  margin: 0 0 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: .13em;
  color: #ff375f;
}

.lowfi-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.lowfi-photo-grid figure {
  position: relative;
  margin: 0;
  background: #000;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
}

.lowfi-photo-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.lowfi-photo-grid figcaption {
  position: absolute;
  left: 4px;
  bottom: 4px;
  background: rgba(0,0,0,.72);
  color: rgba(255,255,255,.75);
  padding: 2px 4px;
  font-size: 9px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.site-map-thumb {
  position: relative;
  height: 120px;
  overflow: hidden;
  margin: -18px -18px 14px;
  background: #000;
}

.site-map-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lowfi-contact-archive {
  margin-top: 36px;
  border: 1px solid rgba(245,241,232,.16);
  background: rgba(255,255,255,.045);
  padding: 18px;
}

.lowfi-contact-archive h2 {
  color: #ff375f;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.lowfi-contact-archive img {
  width: 100%;
  display: block;
  margin-top: 12px;
  filter: contrast(1.1) brightness(.75);
}

.asset-archive-link a {
  display: inline-block;
  color: #fff;
  background: rgba(255,55,95,.18);
  border: 1px solid rgba(255,55,95,.55);
  padding: 10px 12px;
  text-decoration: none;
  margin-top: 18px;
}

.asset-archive-page {
  min-height: 100vh;
  background: #050506;
  color: #f5f1e8;
  margin: 0;
  font-family: "Yu Gothic", sans-serif;
}

.asset-archive-shell {
  width: min(1220px, calc(100vw - 28px));
  margin: 0 auto;
  padding: 74px 0 48px;
}

.asset-archive-shell header p {
  color: #ff375f;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .16em;
}

.asset-archive-shell header h1 {
  font-size: clamp(34px, 7vw, 84px);
  line-height: .95;
  margin: 8px 0;
}

.asset-archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  margin-top: 26px;
}

.asset-archive-grid figure {
  margin: 0;
  position: relative;
  background: #000;
  border: 1px solid rgba(255,255,255,.13);
  overflow: hidden;
}

.asset-archive-grid img {
  width: 100%;
  aspect-ratio: 5 / 3;
  object-fit: cover;
  display: block;
}

.asset-archive-grid figcaption {
  position: absolute;
  left: 6px;
  bottom: 6px;
  background: rgba(0,0,0,.76);
  color: rgba(255,255,255,.82);
  padding: 3px 6px;
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (max-width: 760px) {
  .lowfi-photo-grid {
    grid-template-columns: 1fr;
  }
}



/* =========================================================
   v37 fixes: RPG movement, Site A purity, distinct E-J sites
========================================================= */

#rpgPlayer {
  position: absolute !important;
  left: 48px;
  top: 72px;
  will-change: left, top;
}

#rpgPlayer.is-moving {
  animation: rpgStepWobble .22s steps(2) infinite;
}

@keyframes rpgStepWobble {
  50% { filter: brightness(1.25); }
}

.site-a-pure #yumerinSite,
.site-a-pure .yumerin-site,
.site-a-pure .yumerin-box,
.site-a-pure .yumerin-street-wall,
.site-a-pure .yumerin-zine,
.site-a-pure #hiddenCartridge,
.site-a-pure #lcdSite,
.site-a-pure .lcd-site,
.site-a-pure #rpgIntro,
.site-a-pure #heiseiGate,
.site-a-pure #heiseiTransition {
  display: none !important;
}

/* shared reader minimal */
.journey-reader {
  box-sizing: border-box;
}

.journey-choices button {
  transition: transform .12s, filter .12s, background .12s;
}

.journey-choices button:hover {
  transform: translateY(-2px);
}

/* E: completely search-engine style */
.site-e404-v37 {
  margin: 0;
  min-height: 100vh;
  background: #f3f3f3;
  color: #181818;
  font-family: Arial, "Yu Gothic", sans-serif;
}

.e404-page {
  display: grid;
  grid-template-columns: 260px 1fr;
  grid-template-areas:
    "logo logo"
    "side search"
    "side reader";
  gap: 18px;
  width: min(1180px, calc(100vw - 28px));
  margin: 0 auto;
  padding: 84px 0 48px;
}

.e404-logo {
  grid-area: logo;
  display: flex;
  align-items: end;
  gap: 14px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 12px;
}

.e404-logo b {
  font-size: clamp(56px, 12vw, 140px);
  color: #d80000;
  line-height: .75;
  font-family: Georgia, serif;
}

.e404-logo span {
  font-size: 22px;
  color: #555;
}

.e404-main-search {
  grid-area: search;
  background: #fff;
  padding: 22px;
  border: 1px solid #ddd;
}

.e404-main-search input {
  width: calc(100% - 110px);
  box-sizing: border-box;
  padding: 14px;
  border: 2px solid #222;
  font-size: 18px;
}

.e404-main-search button {
  width: 96px;
  padding: 14px;
  margin-left: 8px;
}

.e404-result-wall {
  margin-top: 18px;
  padding: 14px;
  background: #f8f8f8;
  border-left: 5px solid #d80000;
  min-height: 80px;
}

.e404-sidebar {
  grid-area: side;
  background: #fff;
  border: 1px solid #ddd;
  padding: 16px;
}

.e404-sidebar a {
  display: block;
  color: #1a0dab;
  text-decoration: underline;
  margin: 10px 0;
}

.e404-sidebar img {
  width: 100%;
  margin-top: 16px;
  filter: grayscale(.8) contrast(1.4);
}

.e404-reader {
  grid-area: reader;
  background: #fff !important;
  color: #111 !important;
  border: 1px solid #ddd !important;
  box-shadow: none !important;
}

/* F: old mail OS */
.site-mail-v37 {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(#9eb5c3, #dfeaf0);
  color: #112638;
  font-family: Tahoma, "MS UI Gothic", sans-serif;
}

.mail-os {
  width: min(1220px, calc(100vw - 24px));
  margin: 0 auto;
  padding: 82px 0 44px;
}

.mail-titlebar {
  background: linear-gradient(90deg, #0a3c7d, #6fa7df);
  color: #fff;
  border: 2px solid #0a3c7d;
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
}

.mail-three-pane {
  display: grid;
  grid-template-columns: 190px 320px 1fr;
  min-height: 360px;
  border: 2px solid #708a9d;
  background: #eef5f8;
}

.mail-folders,
.mail-list,
.mail-preview {
  border-right: 1px solid #9fb1bf;
  padding: 12px;
}

.mail-folders a,
.mail-list button {
  display: block;
  width: 100%;
  text-align: left;
  margin: 6px 0;
  padding: 8px;
  border: 1px solid #b6c7d1;
  background: #fff;
  color: #132d42;
}

.mail-folders img {
  width: 100%;
  margin-top: 12px;
  filter: sepia(.25) contrast(1.1);
}

.mail-preview {
  white-space: pre-wrap;
  background: #fff;
  font-family: "MS Gothic", monospace;
}

.mail-reader {
  margin-top: 16px;
  background: #f8fdff !important;
  color: #102030 !important;
  border: 2px solid #708a9d !important;
  box-shadow: none !important;
}

/* G: streaming dashboard */
.site-live0-v37 {
  margin: 0;
  min-height: 100vh;
  background: #030303;
  color: #baffce;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.live0-studio {
  display: grid;
  grid-template-columns: 1fr 310px;
  grid-template-areas:
    "player comments"
    "reader comments";
  gap: 14px;
  width: min(1240px, calc(100vw - 24px));
  margin: 0 auto;
  padding: 82px 0 46px;
}

.live0-player {
  grid-area: player;
  position: relative;
  background: #000;
  border: 2px solid #2cff79;
  min-height: 450px;
  overflow: hidden;
}

.live0-player img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: hue-rotate(80deg) saturate(.7) contrast(1.4) brightness(.6);
}

.live0-player .rec {
  position: absolute;
  top: 12px;
  left: 12px;
  color: #ff4545;
  z-index: 2;
}

.live0-countbox {
  position: absolute;
  right: 12px;
  bottom: 12px;
  background: rgba(0,0,0,.8);
  border: 1px solid #2cff79;
  padding: 10px;
}

.live0-comments {
  grid-area: comments;
  background: #061008;
  border: 1px solid #2cff79;
  padding: 12px;
  max-height: calc(100vh - 110px);
  overflow: hidden;
}

.live0-comments p {
  border-bottom: 1px dashed rgba(44,255,121,.25);
  padding-bottom: 6px;
}

.live0-reader {
  grid-area: reader;
  background: #061008 !important;
  border: 1px solid #2cff79 !important;
}

/* H: shrine */
.site-god-v37 {
  margin: 0;
  min-height: 100vh;
  background: radial-gradient(circle at 50% 10%, #3a0016, #080003 60%);
  color: #ffe8ef;
  font-family: "Yu Mincho", serif;
}

.god-temple {
  display: grid;
  grid-template-columns: 280px 300px 1fr;
  gap: 18px;
  width: min(1220px, calc(100vw - 24px));
  margin: 0 auto;
  padding: 88px 0 48px;
}

.god-left,
.god-center,
.god-reader {
  border: 3px double #ffccd8 !important;
  background: rgba(30,0,12,.78) !important;
  box-shadow: 0 0 80px rgba(255,0,84,.16);
}

.god-left {
  padding: 14px;
}

.god-left img {
  width: 100%;
  filter: contrast(1.4) brightness(.6);
}

.god-oracle {
  color: #ffd2e0;
  line-height: 1.8;
}

.god-center {
  display: grid;
  place-items: center;
  min-height: 560px;
}

.god-paper {
  writing-mode: vertical-rl;
  background: #fff7e0;
  color: #240000;
  font-size: 42px;
  font-weight: 900;
  padding: 32px 18px;
  letter-spacing: .22em;
  box-shadow: 0 0 30px rgba(255,255,255,.2);
}

.god-offerings span {
  display: inline-block;
  border: 1px solid #ffccd8;
  padding: 6px;
  margin: 4px;
}

.god-awake .god-paper {
  animation: godPaperShake .18s steps(2) infinite;
}

@keyframes godPaperShake {
  50% { transform: translate(3px, -2px) rotate(1deg); filter: invert(1); }
}

/* I: supermarket lost child center */
.site-lost-v37 {
  margin: 0;
  min-height: 100vh;
  background:
    repeating-linear-gradient(90deg, #fff3c6 0 120px, #ffd6d6 120px 240px);
  color: #331b10;
  font-family: "Yu Gothic", sans-serif;
}

.lost-terminal {
  display: grid;
  grid-template-columns: 340px 1fr 220px;
  gap: 14px;
  width: min(1220px, calc(100vw - 24px));
  margin: 0 auto;
  padding: 86px 0 48px;
}

.lost-announcement {
  grid-column: 1 / -1;
  background: #d92d2d;
  color: #fff;
  font-weight: 900;
  padding: 14px;
  text-align: center;
  letter-spacing: .12em;
}

.lost-counter-v37,
.lost-reader,
.lost-shelves {
  background: rgba(255,255,245,.94) !important;
  border: 4px solid #d92d2d !important;
  color: #321 !important;
}

.lost-counter-v37 {
  padding: 14px;
}

.lost-counter-v37 img {
  width: 100%;
  filter: contrast(1.2) brightness(.72);
}

.lost-issue {
  width: 100%;
  padding: 14px;
  margin-top: 12px;
  font-weight: 900;
}

.lost-ticket {
  margin-top: 12px;
  border: 2px dashed #333;
  padding: 12px;
  background: #fff;
}

.lost-ticket.is-issued {
  color: #d92d2d;
  font-weight: 900;
}

.lost-shelves {
  padding: 14px;
}

.lost-shelves span {
  display: block;
  margin: 12px 0;
  padding: 10px;
  background: #fff;
  border: 1px solid #e2b2b2;
}

/* J: endless shop */
.site-scroll-v37 {
  margin: 0;
  min-height: 200vh;
  background: #fff;
  color: #111;
  font-family: Arial, "Yu Gothic", sans-serif;
}

.shop-page {
  width: min(1180px, calc(100vw - 24px));
  margin: 0 auto;
  padding: 82px 0 80px;
}

.shop-header {
  position: sticky;
  top: 44px;
  z-index: 4;
  background: #fff;
  border: 1px solid #bbb;
  padding: 12px;
  display: flex;
  gap: 18px;
  align-items: center;
}

.shop-header h1 {
  margin: 0;
  font-size: 44px;
}

.shop-header input {
  flex: 1;
  padding: 12px;
}

.shop-products {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 18px;
}

.shop-products article {
  border: 1px solid #ccc;
  padding: 12px;
  background: #fff;
}

.shop-products img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: contrast(1.1) brightness(.7);
}

.shop-products b {
  color: #c40000;
  font-size: 22px;
}

.shop-long-space {
  height: 1100px;
  display: grid;
  place-items: center;
  color: #999;
  background: linear-gradient(#fff, #f1f1f1, #fff);
}

.shop-reader {
  background: #fff !important;
  color: #111 !important;
  border: 2px solid #111 !important;
  box-shadow: none !important;
}

.scroll-clerk {
  position: sticky;
  bottom: 12px;
  opacity: 0;
  transform: translateY(20px);
  background: #111;
  color: #fff;
  padding: 18px;
  transition: .4s;
  text-align: center;
  font-size: 22px;
}

.scroll-clerk.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 900px) {
  .e404-page,
  .live0-studio,
  .god-temple,
  .lost-terminal,
  .shop-products,
  .mail-three-pane {
    display: block;
  }
  .e404-page > *,
  .live0-studio > *,
  .god-temple > *,
  .lost-terminal > *,
  .mail-three-pane > * {
    margin-bottom: 14px;
  }
}


/* =========================================================
   v38 Site C: Famicom RPG + glitch + BGM2
========================================================= */

.site-c-rpg-v38 {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(circle at 50% 20%, rgba(70, 255, 130, .12), transparent 28rem),
    #050806;
  color: #e8ffe0;
  font-family: "MS Gothic", "Courier New", monospace;
  overflow-x: hidden;
}

.site-c-rpg-v38::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgba(255,255,255,.045) 0 1px, transparent 1px 4px),
    radial-gradient(circle at center, transparent 45%, rgba(0,0,0,.62));
  mix-blend-mode: screen;
}

.c-rpg-shell {
  width: min(1220px, calc(100vw - 24px));
  margin: 0 auto;
  padding: 82px 0 54px;
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 16px;
}

.c-rpg-cart {
  grid-column: 1 / -1;
  border: 4px solid #d7d7d7;
  border-left-color: #7a7a7a;
  border-bottom-color: #5c5c5c;
  background:
    linear-gradient(90deg, rgba(255,255,255,.12), transparent 30%),
    #181818;
  box-shadow: 0 10px 0 #000;
  padding: 18px;
}

.c-rpg-cart span {
  color: #82ff8e;
  letter-spacing: .16em;
}

.c-rpg-cart h1 {
  font-size: clamp(28px, 5vw, 58px);
  margin: 8px 0;
  line-height: 1;
  color: #fff8c7;
  text-shadow: 3px 3px #000, -2px 0 #ff4d7a, 2px 0 #32eaff;
}

.c-rpg-cart button,
.c-rpg-back {
  display: inline-block;
  color: #fff;
  background: #111;
  border: 2px solid #fff;
  padding: 9px 12px;
  text-decoration: none;
  margin-right: 8px;
  font-family: inherit;
  cursor: pointer;
}

.c-rpg-frame {
  position: relative;
  aspect-ratio: 4 / 3;
  min-height: 620px;
  background: #000;
  border: 10px solid #111;
  outline: 4px solid #c7c7c7;
  overflow: hidden;
  box-shadow: 0 0 80px rgba(0,0,0,.7);
}

.c-rpg-crt {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgba(0,0,0,.0) 0 2px, rgba(0,0,0,.2) 2px 4px),
    radial-gradient(circle at 50% 50%, transparent 55%, rgba(0,0,0,.45));
}

.c-rpg-glitch-layer {
  position: absolute;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  color: rgba(255, 60, 110, .8);
  font-size: 8vw;
  display: grid;
  place-items: center;
  opacity: 0;
  mix-blend-mode: screen;
}

.c-rpg-frame.is-glitching .c-rpg-glitch-layer {
  opacity: .5;
  animation: cRpgGlitchFlash .32s steps(3);
}

.c-rpg-frame.is-glitching {
  animation: cRpgFrameGlitch .38s steps(3);
}

@keyframes cRpgFrameGlitch {
  0% { filter: none; transform: translate(0); }
  33% { filter: contrast(2) hue-rotate(90deg); transform: translate(-5px, 2px); }
  66% { filter: invert(.2) contrast(1.8); transform: translate(4px, -2px); }
  100% { filter: none; transform: translate(0); }
}

@keyframes cRpgGlitchFlash {
  50% { transform: skewX(12deg) scale(1.08); }
}

.c-rpg-map {
  position: absolute;
  inset: 0;
  image-rendering: pixelated;
  background:
    linear-gradient(90deg, rgba(70,120,43,.9) 0 100%),
    #4d852b;
  overflow: hidden;
}

.c-rpg-map::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.07) 0 2px, transparent 2px 32px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.07) 0 2px, transparent 2px 32px);
  pointer-events: none;
}

.tile-road {
  position: absolute;
  background:
    radial-gradient(circle, rgba(120,79,38,.35) 0 2px, transparent 3px),
    #c99452;
  border: 4px solid #7c5a2d;
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.1);
}

.road-v {
  width: 120px;
  top: -20px;
  bottom: -20px;
  left: 45%;
}

.road-h {
  height: 96px;
  left: -20px;
  right: -20px;
  top: 52%;
}

.rpg-house {
  position: absolute;
  width: 128px;
  height: 104px;
  background:
    linear-gradient(#e64555 0 33%, #f7e8c5 33% 100%);
  border: 5px solid #27160a;
  box-shadow: 8px 8px 0 rgba(0,0,0,.28);
  cursor: pointer;
}

.rpg-house::before {
  content: "";
  position: absolute;
  left: -8px;
  right: -8px;
  top: -16px;
  height: 38px;
  background: #cf2f43;
  border: 5px solid #27160a;
}

.rpg-house span {
  position: absolute;
  left: 45px;
  bottom: 0;
  width: 34px;
  height: 48px;
  background: #7a4a21;
  border: 4px solid #27160a;
}

.house-1 { left: 8%; top: 10%; }
.house-2 { right: 8%; top: 12%; }

.rpg-tree {
  position: absolute;
  width: 66px;
  height: 78px;
  background: #7dbf35;
  border: 5px solid #1d2b12;
  border-radius: 42% 50% 46% 48%;
  box-shadow: inset 10px 4px 0 rgba(255,255,255,.14);
}

.rpg-tree::after {
  content: "";
  position: absolute;
  left: 25px;
  bottom: -26px;
  width: 18px;
  height: 34px;
  background: #7a4a21;
  border: 4px solid #2a180b;
}

.tree-1 { left: 5%; bottom: 20%; }
.tree-2 { left: 20%; bottom: 8%; }
.tree-3 { right: 18%; bottom: 10%; }
.tree-4 { right: 5%; bottom: 26%; }

.rpg-flower {
  position: absolute;
  width: 18px;
  height: 18px;
  background: #ff5777;
  border: 3px solid #111;
  box-shadow: 0 16px 0 #2f8a2d;
}

.flower-1 { left: 34%; top: 30%; }
.flower-2 { left: 58%; top: 34%; background:#ffe15a; }
.flower-3 { left: 70%; top: 58%; background:#b67cff; }
.flower-4 { left: 29%; top: 68%; background:#fff; }

.rpg-sign {
  position: absolute;
  left: 58%;
  top: 22%;
  width: 42px;
  height: 48px;
  background: #e4c27d;
  border: 4px solid #442b11;
  font-weight: 900;
  cursor: pointer;
}

.rpg-npc {
  position: absolute;
  width: 38px;
  height: 54px;
  border: 0;
  cursor: pointer;
  image-rendering: pixelated;
  background: transparent;
}

.rpg-npc::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 0;
  width: 22px;
  height: 22px;
  background: #ffd39b;
  border: 4px solid #111;
}

.rpg-npc::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 24px;
  width: 28px;
  height: 28px;
  background: #e84e68;
  border: 4px solid #111;
  box-shadow: inset 0 -8px #fff;
}

.villager-girl { left: 36%; top: 42%; }
.villager-woman { left: 66%; top: 45%; }
.villager-woman::after { background:#2f72b5; box-shadow: inset 0 -8px #fff; }
.villager-shadow { left: 49%; top: 74%; filter: brightness(.15); }

.is-glitch {
  animation: cRpgObjectGlitch 1.6s steps(2) infinite;
}

@keyframes cRpgObjectGlitch {
  0%, 85%, 100% { transform: translate(0); filter: none; }
  90% { transform: translate(-3px, 2px); filter: hue-rotate(110deg) contrast(2); }
  95% { transform: translate(3px, -1px); filter: invert(.4); }
}

.c-rpg-player {
  position: absolute;
  left: 46px;
  top: 168px;
  width: 34px;
  height: 48px;
  z-index: 4;
  image-rendering: pixelated;
}

.c-rpg-player::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 0;
  width: 20px;
  height: 20px;
  background: #ffd39b;
  border: 4px solid #111;
}

.c-rpg-player::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 22px;
  width: 28px;
  height: 26px;
  background: #3a78e0;
  border: 4px solid #111;
  box-shadow: inset 0 -8px #fff;
}

.c-rpg-player.is-walking {
  animation: cPlayerWalk .22s steps(2) infinite;
}

@keyframes cPlayerWalk {
  50% { transform: translateY(-2px); }
}

.c-rpg-hud {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 8px;
  z-index: 6;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #fff;
  text-shadow: 2px 2px #000;
  pointer-events: none;
}

.c-rpg-hud span {
  background: rgba(0,0,0,.66);
  border: 2px solid #fff;
  padding: 4px 7px;
}

.c-rpg-dialog {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 10;
  background: #050505;
  color: #fff;
  border: 5px solid #fff;
  box-shadow: 0 0 0 5px #000;
  padding: 16px;
  display: none;
}

.c-rpg-dialog.is-open {
  display: block;
}

.c-rpg-dialog h2 {
  margin: 0 0 8px;
  color: #fff8c7;
}

.c-rpg-dialog p {
  white-space: pre-wrap;
  line-height: 1.75;
}

.c-rpg-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.c-rpg-actions button {
  color: #fff;
  background: #111;
  border: 2px solid #fff;
  padding: 8px 12px;
  font-family: inherit;
  cursor: pointer;
}

.c-rpg-atlas {
  border: 4px solid #fff;
  background: #080808;
  padding: 12px;
  align-self: start;
}

.c-rpg-atlas img {
  width: 100%;
  image-rendering: pixelated;
  filter: contrast(1.1) saturate(.8);
}

.c-rpg-atlas h2 {
  color: #fff8c7;
}

@media (max-width: 920px) {
  .c-rpg-shell {
    grid-template-columns: 1fr;
  }
  .c-rpg-frame {
    min-height: 520px;
  }
}