:root {
  --ink: #09090D;
  --red: #FF2E4D;
  --paper: #F7F1E3;
  --violet: #4A2C82;
  --yellow: #FFD23F;
  --dust: #B8B3A7;
  --cyan: #00D7FF;
  --display: "Bebas Neue", Impact, sans-serif;
  --serif: "Noto Serif JP", serif;
  --mono: "IBM Plex Mono", monospace;
  --hand: "Gaegu", cursive;
}

/* Interface labels use IBM Plex Mono for crisp procedural contrast. For warmer human annotations or handwritten judge notes, evidence labels stay sharp. */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--ink); }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--serif);
  overflow-x: hidden;
}

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

.grain {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: .22;
  mix-blend-mode: multiply;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(9,9,13,.18) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 65%, rgba(255,46,77,.12) 0 1px, transparent 1px),
    linear-gradient(90deg, rgba(9,9,13,.04) 1px, transparent 1px);
  background-size: 13px 11px, 17px 19px, 44px 44px;
}

.punctuation-field {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
}

.punctuation-field span {
  position: absolute;
  top: -8vh;
  color: var(--dust);
  font-family: var(--display);
  font-size: clamp(24px, 4vw, 64px);
  opacity: 0;
  animation: punctuationFall linear infinite;
}

body.midnight-mode .punctuation-field span { opacity: .55; }

@keyframes punctuationFall {
  0% { transform: translate3d(0, -10vh, 0) rotate(0deg); }
  100% { transform: translate3d(var(--drift), 118vh, 0) rotate(240deg); }
}

.daylight-meter {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: grid;
  gap: 14px;
  justify-items: center;
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  color: var(--paper);
  mix-blend-mode: difference;
}

.meter-title { writing-mode: vertical-rl; letter-spacing: .18em; color: var(--yellow); }

.meter-dot {
  width: 13px;
  height: 13px;
  display: block;
  border: 2px solid currentColor;
  background: transparent;
  transform: rotate(45deg);
  text-decoration: none;
  position: relative;
}

.meter-dot span {
  position: absolute;
  right: 22px;
  top: -5px;
  transform: rotate(-45deg);
  opacity: 0;
  white-space: nowrap;
}

.meter-dot.active { background: var(--yellow); color: var(--yellow); box-shadow: 0 0 18px var(--yellow); }
.meter-dot.active span { opacity: 1; }

.debate-dial {
  position: fixed;
  left: var(--dial-x, 8vw);
  top: var(--dial-y, 10vh);
  width: clamp(82px, 11vw, 150px);
  aspect-ratio: 1;
  z-index: 45;
  transform: translate(-50%, -50%) rotate(var(--dial-rot, 0deg));
  transition: background-color .45s ease, box-shadow .45s ease;
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: 0 0 0 8px rgba(255,210,63,.22), 0 0 42px rgba(255,210,63,.48);
}

.dial-core {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 900;
  font-size: clamp(22px, 4vw, 56px);
  border: 3px solid var(--ink);
}

.dial-ring { position: absolute; inset: -10px; border: 2px dashed var(--ink); border-radius: 50%; }
.dial-hand { position: absolute; left: 50%; bottom: 50%; width: 4px; height: 54%; background: var(--red); transform-origin: bottom; }

body.light-noon .debate-dial { background: var(--red); box-shadow: 0 0 0 8px rgba(255,46,77,.22), 0 0 46px rgba(255,46,77,.55); }
body.light-afternoon .debate-dial { background: var(--cyan); box-shadow: 0 0 0 8px rgba(0,215,255,.2), 0 0 46px rgba(0,215,255,.5); }
body.light-dusk .debate-dial { background: var(--violet); box-shadow: 0 0 0 8px rgba(74,44,130,.28), 0 0 46px rgba(74,44,130,.6); }
body.light-midnight .debate-dial { background: var(--paper); box-shadow: 0 0 0 8px rgba(0,215,255,.25), 0 0 60px rgba(0,215,255,.7); }

.act {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(54px, 8vw, 120px);
}

.mono { font-family: var(--mono); letter-spacing: .08em; text-transform: uppercase; }

.chapter-label {
  position: relative;
  z-index: 3;
  max-width: 560px;
  transform: rotate(-3deg);
}

.chapter-label span { color: var(--red); font-size: 12px; font-weight: 700; }

.chapter-label h2 {
  margin: .05em 0;
  font-family: var(--display);
  font-size: clamp(76px, 13vw, 190px);
  line-height: .82;
  letter-spacing: .02em;
}

.dawn-stage {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 40%, rgba(255,210,63,.36), transparent 21%),
    repeating-linear-gradient(90deg, rgba(9,9,13,.09) 0 2px, transparent 2px 12.5vw),
    var(--paper);
}

.shoji {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 51%;
  background:
    linear-gradient(rgba(247,241,227,.88), rgba(247,241,227,.88)),
    repeating-linear-gradient(0deg, transparent 0 74px, rgba(9,9,13,.22) 74px 78px),
    repeating-linear-gradient(90deg, transparent 0 92px, rgba(9,9,13,.18) 92px 96px);
  z-index: 6;
  transition: transform 1.1s cubic-bezier(.7,0,.15,1);
  border: 8px solid var(--ink);
}

.shoji-left { left: 0; transform-origin: left center; }
.shoji-right { right: 0; transform-origin: right center; }
body.claim-raised .shoji-left { transform: translateX(-86%) skewY(-4deg); }
body.claim-raised .shoji-right { transform: translateX(86%) skewY(4deg); }

.sun-halo {
  position: absolute;
  width: 38vw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--yellow);
  opacity: .24;
  filter: blur(2px);
}

.hero-mark { position: relative; z-index: 8; text-align: center; transition: transform 1s ease; }
body.claim-raised .hero-mark { transform: translateY(-7vh) scale(.94); }

.overline { font-size: 12px; color: var(--violet); font-weight: 700; }

h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(92px, 21vw, 310px);
  line-height: .78;
  letter-spacing: .025em;
  text-shadow: 8px 8px 0 rgba(184,179,167,.65);
}

.jp { font-family: var(--serif); font-weight: 700; }

.artifact-button {
  margin-top: 28px;
  border: 3px solid var(--ink);
  background: var(--paper);
  padding: 14px 22px;
  box-shadow: 8px 8px 0 var(--red);
  cursor: pointer;
  font-family: var(--mono);
  text-transform: uppercase;
  font-weight: 700;
  transform: rotate(-2deg);
  transition: transform .2s ease, box-shadow .2s ease;
}

.artifact-button:hover { transform: rotate(1deg) translate(4px, 4px); box-shadow: 2px 2px 0 var(--red); }

.podium-ring {
  position: absolute;
  width: 58vmin;
  aspect-ratio: 1;
  border: 2px dashed var(--ink);
  border-radius: 50%;
  animation: rotateRing 24s linear infinite;
}

.podium-ring span {
  position: absolute;
  width: 68px;
  height: 38px;
  background: var(--ink);
  border: 3px solid var(--paper);
}

.podium-ring span:nth-child(1) { left: 50%; top: -19px; transform: translateX(-50%); }
.podium-ring span:nth-child(2) { right: -34px; top: 50%; transform: translateY(-50%); }
.podium-ring span:nth-child(3) { left: 50%; bottom: -19px; transform: translateX(-50%); }
.podium-ring span:nth-child(4) { left: -34px; top: 50%; transform: translateY(-50%); }

@keyframes rotateRing { to { transform: rotate(360deg); } }

.morning-claim {
  background:
    linear-gradient(125deg, transparent 0 49%, rgba(255,210,63,.2) 49% 52%, transparent 52%),
    var(--paper);
}

.argument-lane {
  position: absolute;
  inset: 14vh 6vw 8vh 5vw;
  transform: rotate(-8deg);
}

.speech-slab {
  position: absolute;
  background: var(--paper);
  border: 5px solid var(--ink);
  box-shadow: 14px 14px 0 var(--dust);
  padding: clamp(22px, 4vw, 50px);
  clip-path: polygon(0 0, 94% 0, 100% 18%, 100% 100%, 11% 100%, 0 82%);
  animation: driftClaim 7s ease-in-out infinite alternate;
}

.slab-large { right: 6vw; top: 16vh; width: min(760px, 66vw); }
.slab-small { left: 5vw; bottom: 6vh; width: min(440px, 48vw); animation-delay: -2s; }
.speech-slab p { margin: 12px 0 0; font-size: clamp(23px, 4vw, 58px); line-height: 1.05; font-weight: 900; }
.slab-small p { font-size: clamp(18px, 2.6vw, 32px); }
.evidence-id { color: var(--cyan); font-size: 12px; font-weight: 700; }

@keyframes driftClaim { from { transform: translate(-12px, 4px); } to { transform: translate(18px, -10px); } }

.crossed-bubbles { position: absolute; left: 44%; top: 45%; width: 210px; height: 210px; }
.bubble-sword { position: absolute; width: 150px; height: 88px; display: grid; place-items: center; background: var(--cyan); border: 4px solid var(--ink); font-family: var(--display); font-size: 70px; clip-path: polygon(0 0, 100% 0, 100% 76%, 60% 76%, 48% 100%, 42% 76%, 0 76%); }
.bubble-one { transform: rotate(42deg); }
.bubble-two { transform: rotate(-48deg); background: var(--yellow); left: 50px; top: 50px; }

.torn-tab { position: absolute; font-family: var(--hand); font-size: 26px; background: var(--yellow); padding: 8px 20px; border: 2px solid var(--ink); transform: rotate(7deg); }
.tab-one { right: 10vw; bottom: 11vh; }
.tab-two { left: 12vw; top: 22vh; background: var(--dust); transform: rotate(-10deg); }

.noon-rebuttal {
  background:
    radial-gradient(circle at 55% 48%, rgba(255,210,63,.82) 0 13%, transparent 13% 100%),
    repeating-radial-gradient(circle at 55% 48%, rgba(9,9,13,.12) 0 2px, transparent 2px 12px),
    var(--red);
  color: var(--paper);
}

.flipped { margin-left: auto; text-align: right; transform: rotate(3deg); }
.flipped span { color: var(--yellow); }

.claim-collision { position: absolute; inset: 18vh 8vw 13vh; }
.claim-tablet {
  position: absolute;
  left: 5%;
  top: 38%;
  width: 72%;
  padding: 36px;
  background: var(--paper);
  color: var(--ink);
  border: 6px solid var(--ink);
  font-family: var(--display);
  font-size: clamp(54px, 10vw, 145px);
  line-height: .86;
  box-shadow: 18px 18px 0 rgba(9,9,13,.45);
  transform: rotate(-5deg);
}

.claim-tablet::after {
  content: "";
  position: absolute;
  inset: -8px;
  background: linear-gradient(110deg, transparent 42%, var(--ink) 42% 44%, transparent 44% 55%, var(--ink) 55% 57%, transparent 57%);
  pointer-events: none;
}

.rebuttal-ribbon {
  position: absolute;
  left: -7%;
  right: -7%;
  top: 47%;
  padding: 13px 30px;
  background: var(--red);
  color: var(--paper);
  border-block: 4px solid var(--ink);
  font-family: var(--mono);
  font-size: clamp(17px, 3vw, 42px);
  font-weight: 700;
  text-align: center;
  transform: rotate(-18deg) translateX(var(--slice, 0));
  box-shadow: 0 0 0 7px var(--yellow);
  animation: sliceIn 1.6s ease-in-out infinite alternate;
}

.ribbon-b { top: 58%; background: var(--cyan); color: var(--ink); transform: rotate(15deg) translateX(calc(var(--slice, 0) * -1)); animation-delay: -.5s; }
@keyframes sliceIn { from { --slice: -14px; } to { --slice: 14px; } }

.speed-lines i { position: absolute; height: 5px; width: 18vw; background: var(--paper); right: 4vw; transform: rotate(-18deg); box-shadow: 0 10px 0 var(--yellow); }
.speed-lines i:nth-child(1) { top: 20%; }
.speed-lines i:nth-child(2) { top: 31%; width: 28vw; }
.speed-lines i:nth-child(3) { top: 68%; width: 25vw; }
.speed-lines i:nth-child(4) { top: 78%; }
.speed-lines i:nth-child(5) { top: 88%; width: 33vw; }
.stamp-pad { position: absolute; left: 8vw; bottom: 7vh; font-family: var(--mono); background: var(--ink); color: var(--yellow); padding: 12px 18px; transform: rotate(4deg); }

.evidence-rain {
  background:
    linear-gradient(90deg, rgba(0,215,255,.13) 1px, transparent 1px),
    linear-gradient(0deg, rgba(9,9,13,.09) 1px, transparent 1px),
    var(--paper);
  background-size: 44px 44px;
}

.chalkboard {
  position: absolute;
  right: 10vw;
  bottom: 12vh;
  width: min(720px, 68vw);
  min-height: 390px;
  padding: 42px;
  background: var(--violet);
  color: var(--paper);
  border: 12px solid var(--ink);
  transform: rotate(5deg);
  box-shadow: 18px 18px 0 var(--dust);
}

.board-title { color: var(--cyan); font-weight: 700; }
.chalkboard .jp { font-size: clamp(24px, 3.8vw, 58px); line-height: 1.14; max-width: 520px; }
.chalk-arrow { position: absolute; font-family: var(--hand); color: var(--yellow); font-size: 72px; }
.arrow-one { right: 80px; top: 60px; transform: rotate(22deg); }
.arrow-two { left: 55px; bottom: 50px; }
.arrow-three { right: 150px; bottom: 70px; }
.proof-line { position: absolute; height: 3px; background: var(--cyan); transform-origin: left center; }
.line-one { left: 130px; top: 145px; width: 360px; transform: rotate(12deg); }
.line-two { left: 90px; bottom: 135px; width: 470px; transform: rotate(-17deg); }
.line-three { right: 80px; top: 105px; width: 180px; transform: rotate(68deg); }

.evidence-tag {
  position: absolute;
  width: 190px;
  padding: 34px 14px 14px;
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 8px 8px 0 var(--cyan);
  font-family: var(--mono);
  font-size: 12px;
  transform: translateY(var(--drop, -70vh)) rotate(var(--rot));
  transition: transform 1s cubic-bezier(.2,.9,.2,1.15);
}

.evidence-tag::before { content: ""; position: absolute; left: 50%; top: -42vh; width: 2px; height: 42vh; background: var(--ink); }
.evidence-tag::after { content: ""; position: absolute; top: 8px; left: 50%; width: 16px; height: 16px; background: var(--yellow); border: 2px solid var(--ink); border-radius: 50%; transform: translateX(-50%); }
.evidence-tag b { display: block; color: var(--red); margin-bottom: 8px; }
.evidence-rain.in-view .evidence-tag { --drop: 0; }
.tag-one { left: 9vw; top: 25vh; --rot: -7deg; transition-delay: .05s; }
.tag-two { left: 26vw; top: 55vh; --rot: 9deg; transition-delay: .22s; }
.tag-three { right: 18vw; top: 16vh; --rot: -12deg; transition-delay: .4s; }
.tag-four { right: 6vw; bottom: 11vh; --rot: 6deg; transition-delay: .58s; }

.dusk-contradiction {
  background: linear-gradient(105deg, var(--violet) 0 49.5%, var(--ink) 49.5% 50.5%, #241139 50.5% 100%);
  color: var(--paper);
}

.dusk-label span { color: var(--cyan); }
.split-seam { position: absolute; inset: 24vh 7vw 12vh; display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.statement {
  min-height: 360px;
  padding: clamp(24px, 4vw, 54px);
  border: 5px solid var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: transform .7s ease, clip-path .7s ease;
}

.statement-left { background: var(--paper); color: var(--ink); transform: translateX(var(--push-left, 0)) rotate(-3deg); clip-path: polygon(0 0, 100% 0, 91% 100%, 0 100%); }
.statement-right { background: var(--ink); color: var(--paper); transform: translateX(var(--push-right, 0)) rotate(3deg); clip-path: polygon(9% 0, 100% 0, 100% 100%, 0 100%); }
.statement span { color: var(--red); font-size: 12px; font-weight: 700; }
.statement p { font-size: clamp(28px, 4.5vw, 74px); line-height: .98; margin: 14px 0 0; font-weight: 900; }
.dusk-contradiction.in-view .statement-left { --push-left: 4vw; clip-path: polygon(0 0, 84% 8%, 99% 42%, 86% 100%, 0 100%); }
.dusk-contradiction.in-view .statement-right { --push-right: -4vw; clip-path: polygon(13% 0, 100% 0, 100% 100%, 3% 89%, 18% 51%); }
.seam-thread { position: absolute; left: 50%; top: 0; bottom: 0; width: 5px; background: var(--red); transform: translateX(-50%); box-shadow: 0 0 0 8px rgba(255,46,77,.2); }
.buckled-note { position: absolute; right: 13vw; bottom: 9vh; font-family: var(--hand); color: var(--yellow); font-size: 34px; transform: rotate(-7deg); }

.midnight-ronpa {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 50%, rgba(0,215,255,.2), transparent 24%),
    radial-gradient(circle at 50% 50%, var(--violet), var(--ink) 68%);
  color: var(--paper);
}

.night-orbit { position: absolute; width: 78vmin; aspect-ratio: 1; border: 2px dashed var(--cyan); border-radius: 50%; animation: rotateRing 18s linear infinite reverse; opacity: .55; }
.final-bubble { position: absolute; left: 8vw; top: 13vh; width: min(520px, 70vw); padding: 32px; border: 4px solid var(--paper); background: rgba(9,9,13,.76); clip-path: polygon(0 0, 100% 0, 100% 84%, 62% 84%, 50% 100%, 43% 84%, 0 84%); }
.final-bubble span { color: var(--cyan); font-weight: 700; }
.final-bubble h2 { margin: 6px 0; font-family: var(--display); font-size: clamp(64px, 10vw, 140px); line-height: .8; }
.final-bubble p { font-size: 18px; line-height: 1.55; }

.ronpa-stamp {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  width: min(54vw, 520px);
  aspect-ratio: 1.45;
  border: 14px solid var(--red);
  color: var(--red);
  font-family: var(--serif);
  font-size: clamp(84px, 16vw, 220px);
  font-weight: 900;
  transform: rotate(-12deg) scale(.86);
  opacity: .82;
  text-shadow: 4px 4px 0 rgba(255,46,77,.2);
  filter: drop-shadow(0 0 34px rgba(255,46,77,.55));
  transition: transform .45s cubic-bezier(.17,1.6,.35,1), opacity .45s ease;
}

.midnight-ronpa.in-view .ronpa-stamp { transform: rotate(-7deg) scale(1); opacity: 1; animation: stampSlam .9s .2s both; }
@keyframes stampSlam { 0% { transform: translateY(-38vh) rotate(-22deg) scale(1.55); opacity: 0; } 64% { transform: translateY(0) rotate(-7deg) scale(.92); opacity: 1; } 100% { transform: rotate(-7deg) scale(1); } }

.shockwave { position: absolute; width: 30vmin; aspect-ratio: 1; border-radius: 50%; border: 6px solid var(--cyan); opacity: 0; }
.wave-two { border-color: var(--yellow); }
.midnight-ronpa.in-view .shockwave { animation: shock 1.7s .75s ease-out infinite; }
.midnight-ronpa.in-view .wave-two { animation-delay: 1.05s; }
@keyframes shock { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(4); opacity: 0; } }
.kana-shards span { position: absolute; font-family: var(--display); color: var(--yellow); font-size: clamp(34px, 6vw, 96px); opacity: .8; }
.kana-shards span:nth-child(1) { left: 18vw; bottom: 18vh; transform: rotate(-20deg); }
.kana-shards span:nth-child(2) { right: 20vw; top: 24vh; transform: rotate(22deg); color: var(--cyan); }
.kana-shards span:nth-child(3) { left: 32vw; top: 16vh; transform: rotate(9deg); }
.kana-shards span:nth-child(4) { right: 12vw; bottom: 20vh; transform: rotate(-31deg); color: var(--red); }
.kana-shards span:nth-child(5) { left: 12vw; top: 32vh; transform: rotate(37deg); color: var(--red); }
.kana-shards span:nth-child(6) { right: 34vw; bottom: 10vh; transform: rotate(12deg); color: var(--cyan); }

@media (max-width: 760px) {
  .act { padding: 44px 26px; }
  .daylight-meter { right: 8px; }
  .argument-lane, .claim-collision, .split-seam { position: relative; inset: auto; min-height: 70vh; }
  .slab-large, .slab-small, .chalkboard, .evidence-tag, .final-bubble { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: 100%; margin: 22px 0; }
  .speech-slab { position: relative; }
  .split-seam { display: block; }
  .statement { min-height: 260px; margin: 18px 0; }
  .claim-tablet { width: 92%; left: 0; }
  .rebuttal-ribbon { left: -20%; right: -20%; }
  .evidence-tag::before { height: 18vh; top: -18vh; }
}