:root {
  /* IBM Plex Mono to make the site feel like a Japanese museum training instrument rather than a generic tech tutorial. */
  --charcoal: #111416;
  --glass: #D9E6DE;
  --yellow: #F2C94C;
  --vermilion: #E94B35;
  --green: #3FE0A2;
  --blue: #164A68;
  --concrete: #9B958A;
  --serif: "Noto Serif JP", serif;
  --gothic: "BIZ UDPGothic", sans-serif;
  --mono: "IBM Plex Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--charcoal);
  color: var(--glass);
  font-family: var(--gothic);
  overflow-x: hidden;
}

.hazard-field {
  position: fixed;
  inset: -20vmax auto auto -24vmax;
  width: 82vmax;
  height: 82vmax;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background: repeating-radial-gradient(circle, rgba(242,201,76,.12) 0 2px, transparent 2px 72px), radial-gradient(circle, rgba(233,75,53,.18), rgba(22,74,104,.14) 42%, transparent 70%);
  filter: blur(.2px);
  transform: translate3d(var(--hazard-x, 0), var(--hazard-y, 0), 0);
}

.timeline-rail {
  position: fixed;
  top: 0;
  right: 24px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  z-index: 10;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: rgba(217,230,222,.55);
}
.timeline-rail::before { content: ""; position: absolute; left: -14px; top: 7vh; bottom: 7vh; border-left: 1px dashed rgba(242,201,76,.35); }

.simulator { position: relative; z-index: 1; }
.scene {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  padding: clamp(38px, 7vw, 100px);
  isolation: isolate;
}
.scene::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background-image: linear-gradient(rgba(217,230,222,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(217,230,222,.04) 1px, transparent 1px);
  background-size: 32px 32px;
}

h1, h2 { font-family: var(--serif); margin: 0; line-height: .98; font-weight: 900; }
h1 { font-size: clamp(44px, 9vw, 132px); max-width: 980px; text-shadow: 0 0 28px rgba(63,224,162,.2); }
h1 span { display: block; color: var(--yellow); font-size: .42em; margin-top: .18em; }
h2 { font-size: clamp(38px, 6vw, 86px); max-width: 850px; }
.chapter, .scenario-kicker, .mono-readout { font-family: var(--mono); text-transform: uppercase; letter-spacing: .13em; color: var(--yellow); font-size: 12px; }

.scenario-map { padding: 0; background: radial-gradient(circle at 18% 46%, rgba(63,224,162,.12), transparent 22%), linear-gradient(126deg, var(--charcoal) 0 52%, var(--blue) 52% 100%); }
.map-paper { position: absolute; inset: 4vw; border: 1px solid rgba(217,230,222,.22); background: linear-gradient(100deg, rgba(17,20,22,.96), rgba(22,74,104,.78)), repeating-linear-gradient(0deg, rgba(155,149,138,.08), rgba(155,149,138,.08) 1px, transparent 1px, transparent 9px); box-shadow: 0 35px 90px rgba(0,0,0,.55); clip-path: polygon(0 4%, 87% 0, 100% 18%, 95% 100%, 8% 95%); }
.coastline-band { position: absolute; inset: -8% -10% -8% 54%; background: linear-gradient(115deg, transparent 0 18%, rgba(217,230,222,.12) 18% 20%, var(--blue) 20% 56%, rgba(17,20,22,.7) 56%); }
.scanline { position: absolute; inset: 0; background: linear-gradient(180deg, transparent, rgba(63,224,162,.34), transparent); height: 18%; animation: scan 7s linear infinite; mix-blend-mode: screen; }
@keyframes scan { from { transform: translateY(-120%); } to { transform: translateY(620%); } }
.town-map { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .9; }
.shore { fill: none; stroke: var(--glass); stroke-width: 4; stroke-dasharray: 18 12; opacity: .54; }
.rings circle { fill: none; stroke: var(--yellow); stroke-width: 2; opacity: .38; }
.blocks rect { fill: var(--concrete); opacity: .42; transform-origin: center; transform: rotate(-8deg); }
.route, .shelter-route { fill: none; stroke: var(--vermilion); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 14 16; filter: drop-shadow(0 0 10px rgba(233,75,53,.5)); }
.route-b { stroke: var(--yellow); opacity: .7; }
.weather-vane line, .weather-vane path { stroke: var(--green); fill: rgba(63,224,162,.22); stroke-width: 5; filter: drop-shadow(0 0 12px var(--green)); }
.reactor-object { animation: pulse 3.8s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; transform: scale(1.05); } }
.title-lockup { position: absolute; left: clamp(28px, 6vw, 90px); top: clamp(60px, 12vh, 130px); max-width: 860px; }
.briefing { max-width: 620px; background: rgba(17,20,22,.55); border-left: 6px solid var(--yellow); padding: 16px 22px; }
.stamp-card { position: absolute; right: 9vw; bottom: 12vh; width: 310px; padding: 22px; background: rgba(217,230,222,.11); border: 1px solid rgba(217,230,222,.3); backdrop-filter: blur(4px); transform: rotate(-3deg); color: var(--glass); }
.stamp-card b { color: var(--yellow); display: block; font-family: var(--serif); }

.containment-cutaway { background: linear-gradient(160deg, var(--charcoal), #0b0d0e 60%, rgba(22,74,104,.55)); }
.acetate-panel { width: min(640px, 68vw); padding: 28px; background: rgba(217,230,222,.09); border: 1px solid rgba(217,230,222,.24); clip-path: polygon(0 0, 96% 5%, 100% 85%, 9% 100%); }
.reactor-cutaway { position: absolute; right: -90px; top: 10vh; width: min(62vw, 720px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(63,224,162,.18), rgba(17,20,22,.3) 44%, rgba(155,149,138,.12) 45% 46%, transparent 47%); }
.vessel-ring { position: absolute; border-radius: 50%; border: 2px solid rgba(217,230,222,.28); inset: 9%; }
.ring-two { inset: 23%; border-color: rgba(242,201,76,.38); }
.core-glow { position: absolute; inset: 37%; border-radius: 50%; background: radial-gradient(circle, var(--green), transparent 70%); filter: blur(7px); animation: pulse 4s infinite; }
.control-rods { position: absolute; inset: 22% 33%; display: flex; gap: 12px; justify-content: center; }
.control-rods i { width: 18px; height: 62%; background: #050606; border: 1px solid rgba(217,230,222,.18); animation: rod 5s ease-in-out infinite; }
.control-rods i:nth-child(even) { animation-delay: -1.4s; }
@keyframes rod { 50% { transform: translateY(38px); } }
.mono-readout { position: absolute; left: 38%; bottom: 20%; color: var(--green); }
.tide-marks { position: absolute; left: 0; right: 0; bottom: 11vh; height: 90px; background: repeating-linear-gradient(0deg, transparent, transparent 13px, rgba(155,149,138,.28) 14px, transparent 16px); }

.cooling-loop { background: linear-gradient(20deg, rgba(22,74,104,.8), var(--charcoal) 58%); }
.loop-board { position: relative; z-index: 2; width: min(720px, 82vw); }
.choice-strip { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
button { font: 600 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--glass); background: rgba(217,230,222,.08); border: 1px solid rgba(217,230,222,.3); padding: 13px 16px; cursor: pointer; }
button.active, button:hover { color: var(--charcoal); background: var(--yellow); border-color: var(--yellow); }
.coolant-svg { position: absolute; inset: auto -3vw 6vh 5vw; width: 90vw; height: 55vh; overflow: visible; }
.coolant-svg circle { fill: rgba(17,20,22,.65); stroke: var(--glass); stroke-width: 3; }
.pipe-bg { fill: none; stroke: rgba(217,230,222,.2); stroke-width: 34; stroke-linecap: round; }
.coolant-path { fill: none; stroke: var(--green); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 32 24; filter: drop-shadow(0 0 14px rgba(63,224,162,.8)); animation: flow 1.2s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -56; } }
.lesson-card { position: absolute; right: 9vw; top: 18vh; width: 330px; padding: 20px; background: rgba(17,20,22,.75); border-top: 6px solid var(--green); box-shadow: 0 18px 44px rgba(0,0,0,.4); font-family: var(--mono); font-size: 13px; line-height: 1.55; }
body.state-storm .coolant-path { stroke: var(--vermilion); animation-duration: .55s; }
body.state-delay .coolant-path { stroke: var(--yellow); animation-duration: 2.4s; stroke-dasharray: 10 34; }

.weather-plume { background: linear-gradient(120deg, var(--blue), var(--charcoal) 70%); }
.weather-desk { position: relative; z-index: 3; width: min(680px, 74vw); }
.radar-card { position: absolute; right: 11vw; top: 12vh; width: 260px; height: 260px; border-radius: 50%; border: 1px solid rgba(63,224,162,.45); background: repeating-radial-gradient(circle, transparent 0 38px, rgba(63,224,162,.18) 39px 40px); }
.radar-sweep { position: absolute; inset: 50% 50% 0 50%; width: 120px; height: 2px; background: linear-gradient(90deg, var(--green), transparent); transform-origin: left; animation: rotate 4s linear infinite; }
@keyframes rotate { to { transform: rotate(360deg); } }
.radar-card span { position: absolute; bottom: 38px; left: 75px; font-family: var(--mono); color: var(--green); }
.plume { position: absolute; left: 28vw; top: 30vh; width: 62vw; height: 40vh; border-radius: 60% 15% 55% 20%; background: radial-gradient(ellipse at left, rgba(233,75,53,.35), rgba(242,201,76,.16) 38%, transparent 72%); filter: blur(12px); transform: rotate(-12deg); animation: drift 8s ease-in-out infinite alternate; }
.plume-two { top: 43vh; opacity: .5; background: radial-gradient(ellipse at left, rgba(217,230,222,.22), rgba(63,224,162,.12), transparent 70%); animation-delay: -3s; }
@keyframes drift { to { transform: translateX(70px) rotate(-4deg) scale(1.08); } }
.plume-particles span { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--yellow); opacity: .45; animation: particle 9s linear infinite; }
@keyframes particle { to { transform: translate(38vw, -14vh); opacity: 0; } }

.town-assembly { background: linear-gradient(180deg, #181614, var(--charcoal)); }
.assembly-table { position: absolute; left: 7vw; right: 8vw; top: 12vh; bottom: 9vh; padding: clamp(28px, 5vw, 70px); background: linear-gradient(90deg, rgba(155,149,138,.28), rgba(217,230,222,.07)), repeating-linear-gradient(90deg, transparent 0 86px, rgba(17,20,22,.22) 87px 90px); clip-path: polygon(3% 0, 100% 8%, 95% 100%, 0 91%); border: 1px solid rgba(155,149,138,.45); }
.placards { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)); gap: 18px; margin-top: 44px; }
.placards span { min-height: 110px; padding: 18px; color: var(--charcoal); background: var(--glass); border-top: 10px solid var(--yellow); transform: rotate(var(--r, -2deg)); box-shadow: 0 12px 28px rgba(0,0,0,.3); font-family: var(--mono); }
.placards span:nth-child(2) { --r: 2deg; border-color: var(--green); }.placards span:nth-child(3) { --r: -4deg; border-color: var(--vermilion); }.placards span:nth-child(4) { --r: 3deg; border-color: var(--blue); }

.evacuation-route { background: linear-gradient(135deg, rgba(217,230,222,.15), var(--charcoal) 42%), var(--blue); }
.route-map { position: relative; z-index: 1; width: min(1060px, 84vw); margin: 0 auto; padding: 34px; background: rgba(217,230,222,.12); border: 1px solid rgba(217,230,222,.25); clip-path: polygon(0 8%, 48% 0, 100% 7%, 94% 100%, 45% 92%, 4% 100%); }
.evac-svg { width: 100%; height: 45vh; margin-top: 20px; }
.fold-line { stroke: rgba(217,230,222,.28); stroke-width: 2; stroke-dasharray: 8 8; }
.evac-bg { fill: none; stroke: rgba(17,20,22,.5); stroke-width: 36; stroke-linecap: round; }
.evac-line { fill: none; stroke: var(--vermilion); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 1000; stroke-dashoffset: 1000; filter: drop-shadow(0 0 10px rgba(233,75,53,.7)); transition: stroke-width .4s, stroke .4s; }
.scene.visible .evac-line { animation: drawRoute 3s ease forwards; }
@keyframes drawRoute { to { stroke-dashoffset: 0; } }
.shelter-signs rect { fill: var(--yellow); opacity: .76; }
body.state-storm .evac-line { stroke-width: 18; }
body.state-delay .evac-line { stroke: var(--yellow); stroke-dasharray: 40 20; }

.debrief-log { background: radial-gradient(circle at 18% 20%, rgba(233,75,53,.12), transparent 36%), linear-gradient(150deg, var(--charcoal), #0a0c0d); }
.after-action { width: min(900px, 82vw); margin: 6vh auto; padding: clamp(28px, 5vw, 68px); background: linear-gradient(rgba(217,230,222,.11), rgba(217,230,222,.06)); border: 1px solid rgba(217,230,222,.25); position: relative; }
.after-action::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 15% 75%, rgba(63,224,162,.18), transparent 22%), radial-gradient(circle at 70% 22%, rgba(242,201,76,.13), transparent 24%); pointer-events: none; }
.log-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 34px; }
.log-grid span { padding: 14px; border-left: 4px solid var(--green); background: rgba(17,20,22,.45); font-family: var(--mono); font-size: 13px; }
.official-stamp { margin-top: 44px; display: inline-block; padding: 14px 24px; border: 3px solid var(--vermilion); color: var(--vermilion); font-family: var(--serif); font-weight: 900; transform: rotate(-4deg); }

.scene:not(.visible) .acetate-panel, .scene:not(.visible) .loop-board, .scene:not(.visible) .weather-desk, .scene:not(.visible) .assembly-table, .scene:not(.visible) .route-map, .scene:not(.visible) .after-action { transform: translateY(24px); opacity: .72; }
.acetate-panel, .loop-board, .weather-desk, .assembly-table, .route-map, .after-action { transition: transform .9s ease, opacity .9s ease; }

@media (max-width: 760px) {
  .timeline-rail { display: none; }
  .scene { padding: 28px; }
  .map-paper { inset: 14px; }
  .stamp-card, .lesson-card, .radar-card { position: relative; right: auto; top: auto; bottom: auto; margin-top: 24px; width: auto; }
  .reactor-cutaway { position: relative; right: auto; width: 86vw; margin-top: 36px; }
  .coolant-svg { position: relative; inset: auto; width: 100%; }
  .placards, .log-grid { grid-template-columns: 1fr; }
}