:root {
  /* Design typography tokens: IBM Plex Mono sparingly. For occasional handwritten instructor marks, IBM Plex Sans JP** JP* for explanatory text. */
  --pool-blue: #63D7E8;
  --iodine-violet: #6D4C9B;
  --rain-concrete: #2E3438;
  --sodium-amber: #F2A83B;
  --paper-cream: #E7DDC4;
  --oxide-red: #B9473B;
  --deep-sea: #071113;
  --display: 'Zen Kaku Gothic New', sans-serif;
  --body: 'IBM Plex Sans JP', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
  --mark: 'Noto Sans JP', sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  overflow: hidden;
  background: var(--deep-sea);
  color: var(--paper-cream);
  font-family: var(--body);
}

button { font: inherit; color: inherit; }

.sim-room {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(230px, 18vw) minmax(380px, 42vw) 1fr;
  gap: clamp(18px, 3vw, 44px);
  padding: clamp(18px, 3vw, 44px);
  background:
    radial-gradient(circle at 45% 50%, rgba(99, 215, 232, .08), transparent 31%),
    radial-gradient(circle at 18% 14%, rgba(242, 168, 59, .12), transparent 20%),
    linear-gradient(135deg, #071113 0%, #172024 42%, #2E3438 100%);
  isolation: isolate;
}

.rain-glass::before,
.rain-glass::after,
.rain-field,
.night-vignette {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.rain-glass::before {
  z-index: 1;
  background-image: repeating-linear-gradient(104deg, transparent 0 24px, rgba(231, 221, 196, .11) 25px 26px, transparent 27px 62px);
  filter: blur(.45px);
  opacity: .45;
  animation: rainSlide 7s linear infinite;
}

.rain-glass::after {
  z-index: 1;
  background: radial-gradient(circle at 70% 18%, rgba(231, 221, 196, .08), transparent 28%), linear-gradient(90deg, rgba(255,255,255,.04), transparent 12%, rgba(255,255,255,.03) 13%, transparent 14%);
  mix-blend-mode: screen;
}

.rain-field {
  z-index: 0;
  background-image: radial-gradient(rgba(231,221,196,.16) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: .22;
}

.night-vignette {
  z-index: 5;
  box-shadow: inset 0 0 140px 40px rgba(7,17,19,.96);
}

.control-rail,
.map-table,
.scene-stage,
.arrow-controls { position: relative; z-index: 3; }

.control-rail {
  min-height: calc(100vh - clamp(36px, 6vw, 88px));
  border: 1px solid rgba(231, 221, 196, .18);
  background: linear-gradient(180deg, rgba(46,52,56,.82), rgba(7,17,19,.72));
  padding: 18px;
  box-shadow: inset 0 0 45px rgba(0,0,0,.45), 0 24px 70px rgba(0,0,0,.35);
}

.municipal-stamp {
  display: inline-block;
  padding: 10px 13px;
  border: 2px solid var(--oxide-red);
  color: var(--oxide-red);
  font-family: var(--mark);
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
  transform: rotate(-2deg);
  background: rgba(231,221,196,.05);
  box-shadow: 0 0 0 3px rgba(185,71,59,.11) inset;
}

.municipal-stamp span { font-size: .67rem; }

.selector-dial {
  width: 178px;
  height: 178px;
  margin: 40px auto 28px;
  position: relative;
  border-radius: 50%;
  border: 2px solid rgba(231,221,196,.28);
  background: radial-gradient(circle, #182225 0 42%, #0a1416 43% 58%, rgba(242,168,59,.18) 59% 60%, #151b1f 61%);
  transform: rotate(var(--dial-rotation, 0deg));
  transition: transform .7s cubic-bezier(.2,.8,.15,1);
  box-shadow: inset 0 0 32px rgba(0,0,0,.8), 0 0 28px rgba(242,168,59,.12);
}

.dial-core {
  position: absolute;
  inset: 38px;
  border-radius: 50%;
  border: 1px solid rgba(231,221,196,.22);
  background: #071113;
  display: grid;
  place-content: center;
  text-align: center;
  cursor: pointer;
  transform: rotate(calc(var(--dial-rotation, 0deg) * -1));
  transition: transform .7s cubic-bezier(.2,.8,.15,1), box-shadow .3s;
}

.dial-core span { font-family: var(--display); color: var(--sodium-amber); font-weight: 700; }
.dial-core small { font-family: var(--mono); color: rgba(231,221,196,.65); font-size: .62rem; }
.dial-core:hover { box-shadow: 0 0 24px rgba(242,168,59,.25); }

.dial-tick { position: absolute; width: 8px; height: 24px; left: calc(50% - 4px); top: 8px; background: var(--sodium-amber); transform-origin: 4px 80px; opacity: .55; }
.t0 { transform: rotate(0deg); } .t1 { transform: rotate(72deg); } .t2 { transform: rotate(144deg); } .t3 { transform: rotate(216deg); } .t4 { transform: rotate(288deg); }

.station-nav { display: grid; gap: 8px; }
.station-button,
.wind-button,
.decision-button,
.log-toggle,
.arrow-controls button {
  border: 1px solid rgba(231,221,196,.22);
  background: rgba(7,17,19,.48);
  padding: 10px 12px;
  text-align: left;
  cursor: pointer;
  font-family: var(--mono);
  letter-spacing: .04em;
  transition: background .25s, color .25s, border-color .25s, transform .25s;
}

.station-button.active,
.wind-button.active,
.decision-button.active,
.log-toggle.open { background: rgba(242,168,59,.18); border-color: var(--sodium-amber); color: var(--sodium-amber); }
.station-button:hover,
.wind-button:hover,
.decision-button:hover,
.log-toggle:hover,
.arrow-controls button:hover { transform: translateX(4px); border-color: var(--paper-cream); }

.instrument-strip { margin-top: 24px; padding-top: 18px; border-top: 1px dashed rgba(231,221,196,.22); }
.instrument-label { margin: 0 0 10px; font-family: var(--mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(231,221,196,.68); }
.gauge { height: 84px; border-radius: 84px 84px 0 0; border: 1px solid rgba(231,221,196,.22); border-bottom: 0; position: relative; overflow: hidden; background: radial-gradient(circle at 50% 100%, rgba(99,215,232,.25), transparent 43%); }
.gauge i { position: absolute; width: 3px; height: 62px; left: calc(50% - 1px); bottom: 0; background: var(--oxide-red); transform-origin: bottom; transform: rotate(var(--needle, -48deg)); transition: transform .7s; }
.readout { display: block; margin-top: 8px; font-family: var(--mono); color: var(--pool-blue); }

.map-table { display: grid; place-items: center; min-height: calc(100vh - clamp(36px, 6vw, 88px)); }
.coastal-map {
  width: min(41vw, 640px);
  aspect-ratio: 1;
  border-radius: 50%;
  position: relative;
  border: 1px solid rgba(231,221,196,.25);
  background: radial-gradient(circle, rgba(231,221,196,.08) 0 2px, transparent 3px), conic-gradient(from 10deg, rgba(46,52,56,.9), rgba(99,215,232,.07), rgba(46,52,56,.85), rgba(109,76,155,.12), rgba(46,52,56,.9));
  background-size: 26px 26px, auto;
  box-shadow: inset 0 0 70px rgba(7,17,19,.85), 0 0 70px rgba(99,215,232,.08);
  transform: rotate(var(--map-rotation, 0deg));
  transition: transform .9s cubic-bezier(.2,.8,.15,1);
}

.sea-shape { position: absolute; inset: 9% 6% 12% 52%; border-radius: 58% 42% 45% 55%; background: rgba(99,215,232,.11); border-left: 1px solid rgba(99,215,232,.5); filter: blur(.2px); }
.dose-ring { position: absolute; border-radius: 50%; border: 1px dashed rgba(231,221,196,.3); inset: var(--inset); }
.ring-a { --inset: 19%; } .ring-b { --inset: 31%; border-color: rgba(242,168,59,.42); } .ring-c { --inset: 43%; border-color: rgba(185,71,59,.5); }
.reactor-dot { position: absolute; width: 18px; height: 18px; border-radius: 50%; left: calc(50% - 9px); top: calc(50% - 9px); background: var(--pool-blue); box-shadow: 0 0 26px var(--pool-blue); }
.sector { position: absolute; inset: 0; border-radius: 50%; opacity: .26; mix-blend-mode: screen; clip-path: polygon(50% 50%, 84% 0, 100% 34%); }
.sector-red { background: var(--oxide-red); transform: rotate(12deg); }
.sector-amber { background: var(--sodium-amber); transform: rotate(128deg); opacity: .18; }
.sector-violet { background: var(--iodine-violet); transform: rotate(238deg); opacity: .22; }
.geiger-ticks { position: absolute; inset: 3%; border-radius: 50%; background: repeating-conic-gradient(from 3deg, rgba(231,221,196,.55) 0 1deg, transparent 1deg 8deg); mask: radial-gradient(circle, transparent 0 47%, #000 48% 51%, transparent 52%); }

.acetate-layer { position: absolute; inset: 14% 10% 18% 35%; border-radius: 58% 42% 60% 40%; background: radial-gradient(ellipse at 25% 50%, rgba(109,76,155,.34), transparent 45%), radial-gradient(ellipse at 60% 45%, rgba(99,215,232,.22), transparent 56%); border: 1px solid rgba(231,221,196,.14); opacity: .72; filter: blur(1px); transform-origin: 18% 50%; transition: transform .7s, inset .7s; animation: contourDrift 8s ease-in-out infinite; }
.plume-ghost.east { transform: rotate(48deg) translate(8%, -3%); inset: 18% 7% 15% 37%; }
.plume-ghost.south { transform: rotate(116deg) translate(10%, 1%); inset: 21% 12% 11% 31%; }
.plume-ghost.north { transform: rotate(-18deg) translate(5%, -4%); }
.evac-route { position: absolute; height: 4px; background: repeating-linear-gradient(90deg, var(--sodium-amber) 0 16px, transparent 16px 22px); transform-origin: left; }
.evac-route span { position: absolute; top: -28px; left: 42%; white-space: nowrap; font-family: var(--mono); font-size: .68rem; color: var(--sodium-amber); transform: rotate(var(--map-rotation-inverse, 0deg)); }
.route-school { width: 36%; left: 50%; top: 52%; transform: rotate(142deg); }
.route-harbor { width: 31%; left: 51%; top: 51%; transform: rotate(20deg); background: repeating-linear-gradient(90deg, var(--pool-blue) 0 12px, transparent 12px 18px); }
.route-note { position: absolute; bottom: 10%; left: 8%; max-width: 290px; padding: 10px 12px; background: rgba(231,221,196,.9); color: var(--deep-sea); font-family: var(--mono); transform: rotate(-1deg); }

.scene-stage { min-height: calc(100vh - clamp(36px, 6vw, 88px)); display: grid; align-items: center; }
.scene { grid-area: 1 / 1; opacity: 0; transform: translateX(28px) rotate(.6deg); pointer-events: none; transition: opacity .5s, transform .55s; max-width: 650px; }
.scene.active { opacity: 1; transform: translateX(0) rotate(0); pointer-events: auto; }
h1, h2 { font-family: var(--display); font-weight: 900; line-height: .98; letter-spacing: -.045em; margin: 0 0 22px; text-wrap: balance; }
h1 { font-size: clamp(3.8rem, 8vw, 8.5rem); }
h2 { font-size: clamp(2.8rem, 5.5vw, 6.6rem); }
.scene-copy { max-width: 560px; font-size: clamp(1rem, 1.35vw, 1.28rem); line-height: 1.75; color: rgba(231,221,196,.83); }
.paper-cluster { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 28px; }
.notice-card, .iodine-pack { color: var(--deep-sea); background: var(--paper-cream); padding: 18px; width: 210px; min-height: 118px; box-shadow: 0 18px 40px rgba(0,0,0,.28); transform: rotate(-2deg); }
.notice-card strong { color: var(--oxide-red); font-size: 2rem; }
.iodine-pack { background: linear-gradient(90deg, var(--iodine-violet) 0 28%, var(--paper-cream) 28%); padding-left: 76px; transform: rotate(3deg); font-family: var(--mono); }
.iodine-pack span { font-size: .72rem; }
.cutaway-model { width: min(520px, 90%); height: 230px; margin-top: 28px; border: 1px solid rgba(231,221,196,.22); position: relative; background: linear-gradient(180deg, rgba(46,52,56,.7), rgba(7,17,19,.9)); overflow: hidden; }
.pool-glow { position: absolute; inset: 28% 12% 16%; background: radial-gradient(ellipse, rgba(99,215,232,.75), rgba(99,215,232,.12) 62%, transparent 68%); animation: poolPulse 3.6s ease-in-out infinite; }
.fuel-rods { position: absolute; inset: 22% 35% 18%; background: repeating-linear-gradient(90deg, transparent 0 14px, rgba(231,221,196,.48) 15px 18px); }
.water-ruler { position: absolute; right: 18px; top: 18px; font-family: var(--mono); color: var(--pool-blue); border-left: 2px solid var(--pool-blue); padding-left: 10px; }
.wind-controls, .decision-panel { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.after-action-log { display: grid; gap: 12px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .6s, opacity .4s; margin-top: 18px; }
.after-action-log.open { max-height: 420px; opacity: 1; }
.after-action-note { padding: 14px 16px; background: rgba(231,221,196,.92); color: var(--deep-sea); border-left: 6px solid var(--oxide-red); transform: rotate(var(--note-tilt, -1deg)); }
.after-action-note:nth-child(2) { --note-tilt: 1.4deg; border-left-color: var(--sodium-amber); }
.after-action-note:nth-child(3) { --note-tilt: -.4deg; border-left-color: var(--iodine-violet); }
.arrow-controls { position: fixed; right: clamp(18px, 3vw, 44px); bottom: clamp(18px, 3vw, 44px); display: flex; gap: 8px; }

@keyframes rainSlide { from { background-position: 0 -120px; } to { background-position: 0 120px; } }
@keyframes contourDrift { 0%,100% { filter: blur(1px); opacity: .62; } 50% { filter: blur(2px); opacity: .82; } }
@keyframes poolPulse { 0%,100% { opacity: .58; } 50% { opacity: .94; } }

@media (max-width: 980px) {
  body { overflow: auto; }
  .sim-room { min-height: auto; grid-template-columns: 1fr; padding-bottom: 88px; }
  .control-rail, .map-table, .scene-stage { min-height: auto; }
  .control-rail { display: grid; grid-template-columns: 1fr auto; gap: 18px; }
  .station-nav, .instrument-strip { grid-column: 1 / -1; }
  .selector-dial { margin: 0; }
  .coastal-map { width: min(86vw, 560px); }
  .scene-stage { min-height: 62vh; }
}

@media (max-width: 620px) {
  .control-rail { grid-template-columns: 1fr; }
  .selector-dial { margin: 18px auto; }
  .arrow-controls { left: 18px; right: 18px; }
  .arrow-controls button { flex: 1; text-align: center; }
}