/* ============================================================
   深海図鑑 ─ ABYSSOPELAGIC ARCHIVE
   Vanilla CSS. No framework, no reset library.
   ============================================================ */

:root {
  /* ── 海の色。JSがスクロールに応じて --sea を書き換える ── */
  --sea: #062b38;
  --sea-deep: #01060c;

  --ink: #cfe4e8;              /* 本文 */
  --ink-dim: #7d97a0;          /* 補助 */
  --ink-faint: #48626c;        /* 罫・注記 */
  --lum: #6fe3ff;              /* 生物発光（青） */
  --lum-soft: #4fb9d8;
  --lure: #ffb26b;             /* 誘引突起の灯り（橙） */
  --blood: #b8433c;            /* 深海で見えない色 */

  --serif-ja: "Shippori Mincho B1", "Hiragino Mincho ProN", serif;
  --display: "Bodoni Moda", "Shippori Mincho B1", serif;
  --mono: "Fragment Mono", ui-monospace, monospace;

  --gutter: clamp(1.25rem, 5vw, 6rem);
  --hud-w: 7.5rem;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--sea);
  color: var(--ink);
  font-family: var(--serif-ja);
  font-weight: 400;
  line-height: 1.95;
  letter-spacing: .04em;
  overflow-x: hidden;
}

body::before {                       /* 水面から差し込む拡散光 */
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(120% 62% at 50% -12%, rgba(126, 224, 255, .16), transparent 60%),
    radial-gradient(80% 40% at 12% 4%, rgba(80, 190, 220, .08), transparent 70%);
  opacity: var(--surface-light, 1);
  pointer-events: none;
  z-index: 0;
}

::selection { background: var(--lum); color: #02121a; }

h1, h2, h3 { font-weight: 400; margin: 0; line-height: 1.3; }
p { margin: 0; }
em { font-style: italic; }

/* ============================================================
   背景レイヤー
   ============================================================ */

.snow {                              /* マリンスノー */
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: .85;
}

.grain {                             /* フィルム粒子 */
  position: fixed;
  inset: -50%;
  z-index: 2;
  pointer-events: none;
  opacity: .3;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  animation: grain-shift 6s steps(6) infinite;
}

@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-3%, 2%); }
  40%  { transform: translate(2%, -3%); }
  60%  { transform: translate(-2%, -2%); }
  80%  { transform: translate(3%, 1%); }
  100% { transform: translate(0, 0); }
}

.lamp {                              /* 潜水灯（カーソル追従） */
  position: fixed;
  top: 0; left: 0;
  width: 44rem; height: 44rem;
  margin: -22rem 0 0 -22rem;
  z-index: 2;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(111, 227, 255, .10) 0%, rgba(111, 227, 255, .04) 32%, transparent 62%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity .9s ease;
  will-change: transform;
}
.lamp.is-on { opacity: 1; }

.vignette {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  box-shadow: inset 0 0 22vw 6vw rgba(0, 4, 8, .55);
}

/* ============================================================
   潜航計器（HUD）
   ============================================================ */

.hud {
  position: fixed;
  top: 0; right: 0;
  z-index: 20;
  width: var(--hud-w);
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  pointer-events: none;
  border-left: 1px solid rgba(111, 227, 255, .12);
  background: linear-gradient(to left, rgba(1, 8, 14, .5), transparent);
  backdrop-filter: blur(2px);
}

.hud__stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
  width: 100%;
  padding: 0 .5rem;
}

.hud__readout {
  display: flex;
  align-items: baseline;
  gap: .25em;
  color: var(--lum);
  text-shadow: 0 0 22px rgba(111, 227, 255, .45);
}

.hud__num {
  font-family: var(--display);
  font-size: 2.1rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  line-height: 1;
}

.hud__unit { font-family: var(--mono); font-size: .68rem; opacity: .7; }

.hud__zone {
  font-family: var(--serif-ja);
  font-size: .78rem;
  letter-spacing: .34em;
  writing-mode: vertical-rl;
  color: var(--ink-dim);
  height: 6.5rem;
  display: flex;
  justify-content: center;
}

.hud__rule {
  position: relative;
  width: 1px;
  height: 30vh;
  background: linear-gradient(to bottom, transparent, rgba(111, 227, 255, .3) 12%, rgba(111, 227, 255, .3) 88%, transparent);
}

.hud__rule::before,
.hud__rule::after {
  content: "";
  position: absolute;
  left: -4px;
  width: 9px;
  height: 1px;
  background: rgba(111, 227, 255, .4);
}
.hud__rule::before { top: 0; }
.hud__rule::after { bottom: 0; }

.hud__rule-marker {
  position: absolute;
  left: 50%;
  top: 0;
  width: 22px; height: 22px;
  margin: -11px 0 0 -11px;
  border: 1px solid var(--lum);
  border-radius: 50%;
  box-shadow: 0 0 14px rgba(111, 227, 255, .5);
  transition: top .18s linear;
}
.hud__rule-marker::after {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: var(--lum);
  animation: pulse 2.6s var(--ease) infinite;
}

@keyframes pulse {
  0%, 100% { opacity: .5; transform: scale(.7); }
  50%      { opacity: 1;  transform: scale(1); }
}

.hud__stats {
  margin: 0;
  display: grid;
  gap: .45rem;
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .06em;
  color: var(--ink-faint);
  text-align: center;
}
.hud__stats dt { font-family: var(--serif-ja); letter-spacing: .2em; font-size: .55rem; }
.hud__stats dd { margin: 0; color: var(--ink-dim); }

/* ============================================================
   水面（ヒーロー）
   ============================================================ */

.surface {
  position: relative;
  z-index: 4;
  min-height: 100vh;
  min-height: 100dvh;
  padding: clamp(3rem, 8vh, 7rem) calc(var(--hud-w) + var(--gutter)) 3rem var(--gutter);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.rays {
  position: absolute;
  inset: -10% -10% auto -10%;
  height: 85%;
  pointer-events: none;
  background:
    linear-gradient(96deg,  transparent 30%, rgba(150, 235, 255, .10) 34%, transparent 38%),
    linear-gradient(84deg,  transparent 46%, rgba(150, 235, 255, .07) 50%, transparent 54%),
    linear-gradient(102deg, transparent 60%, rgba(150, 235, 255, .09) 64%, transparent 68%),
    linear-gradient(78deg,  transparent 72%, rgba(150, 235, 255, .05) 76%, transparent 80%);
  filter: blur(6px);
  animation: sway 14s ease-in-out infinite alternate;
}

@keyframes sway {
  from { transform: translateX(-2%) skewX(0deg); opacity: .8; }
  to   { transform: translateX(2%) skewX(-2deg); opacity: 1; }
}

.surface__inner { max-width: 46rem; position: relative; }

.surface__eyebrow {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .28em;
  color: var(--lum-soft);
  text-transform: uppercase;
  margin-bottom: clamp(1.5rem, 5vh, 3rem);
  opacity: 0;
  animation: rise 1.1s var(--ease) .2s forwards;
}

.surface__title { position: relative; margin-bottom: clamp(2rem, 6vh, 3.5rem); }

.surface__title-ja {
  display: block;
  font-family: var(--serif-ja);
  font-weight: 800;
  font-size: clamp(3.2rem, 10vw, 7.6rem);
  letter-spacing: .06em;
  line-height: .96;
  color: #eaf7fb;
  text-shadow: 0 0 60px rgba(111, 227, 255, .35), 0 0 120px rgba(70, 170, 210, .25);
  opacity: 0;
  animation: rise 1.4s var(--ease) .35s forwards;
}

.surface__title-en {
  display: block;
  margin-top: .6em;
  margin-left: .35em;
  font-family: var(--display);
  font-size: clamp(1rem, 2.4vw, 1.7rem);
  font-weight: 400;
  letter-spacing: .14em;
  line-height: 1.4;
  color: var(--ink-dim);
  opacity: 0;
  animation: rise 1.4s var(--ease) .55s forwards;
}
.surface__title-en em { color: var(--lum); font-style: italic; }

.surface__lede {
  font-size: clamp(.92rem, 1.6vw, 1.05rem);
  color: var(--ink);
  max-width: 42rem;
  border-left: 1px solid rgba(111, 227, 255, .25);
  padding-left: 1.4rem;
  opacity: 0;
  animation: rise 1.4s var(--ease) .75s forwards;
}
.surface__lede-en {
  display: inline-block;
  margin-top: .8em;
  font-family: var(--display);
  font-style: italic;
  font-size: .95em;
  color: var(--lum-soft);
  letter-spacing: .06em;
}

.surface__cue {
  margin-top: clamp(2.5rem, 8vh, 5rem);
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .3em;
  color: var(--ink-faint);
  opacity: 0;
  animation: rise 1.4s var(--ease) 1s forwards;
}
.surface__cue-line {
  display: block;
  width: 5rem; height: 1px;
  background: linear-gradient(to right, var(--lum), transparent);
  transform-origin: left;
  animation: descend 2.6s ease-in-out infinite;
}

@keyframes descend {
  0%, 100% { transform: scaleX(.35); opacity: .4; }
  50%      { transform: scaleX(1);   opacity: 1; }
}

.surface__meta {
  position: absolute;
  left: var(--gutter);
  right: calc(var(--hud-w) + var(--gutter));
  bottom: 2rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .18em;
  color: var(--ink-faint);
  border-top: 1px solid rgba(111, 227, 255, .1);
  padding-top: .9rem;
  opacity: 0;
  animation: rise 1.4s var(--ease) 1.2s forwards;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(1.8rem); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

/* ============================================================
   層の見出し
   ============================================================ */

main { position: relative; z-index: 4; }

.zone {
  position: relative;
  padding: clamp(7rem, 22vh, 15rem) calc(var(--hud-w) + var(--gutter)) clamp(4rem, 12vh, 8rem) var(--gutter);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: end;
}

.zone::before {                      /* 層の境界線 */
  content: "";
  position: absolute;
  left: var(--gutter);
  right: calc(var(--hud-w) + var(--gutter));
  top: clamp(4rem, 14vh, 9rem);
  height: 1px;
  background: linear-gradient(to right, rgba(111, 227, 255, .45), rgba(111, 227, 255, .05) 60%, transparent);
}

.zone__mark { display: flex; flex-direction: column; gap: .8rem; }

.zone__range {
  font-family: var(--display);
  font-size: .95rem;
  letter-spacing: .12em;
  color: var(--lum);
}

.zone__ja {
  font-family: var(--serif-ja);
  font-weight: 600;
  font-size: clamp(2.6rem, 7vw, 5.4rem);
  letter-spacing: .12em;
  color: #e6f4f8;
  line-height: 1;
}

.zone__en {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .22em;
  color: var(--ink-faint);
  text-transform: uppercase;
}

.zone__note {
  max-width: 30rem;
  font-size: .88rem;
  color: var(--ink-dim);
  padding-bottom: .6rem;
}

.zone--hadal .zone__ja { color: #cfe4e8; text-shadow: 0 0 40px rgba(111, 227, 255, .3); }
.zone--hadal .zone__range { color: var(--blood); }

/* ============================================================
   標本
   ============================================================ */

.specimen {
  position: relative;
  padding: clamp(3rem, 9vh, 7rem) calc(var(--hud-w) + var(--gutter)) clamp(3rem, 9vh, 7rem) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.specimen:nth-of-type(even) .plate { order: 2; }
.specimen:nth-of-type(even) .info  { order: 1; }
.specimen:nth-of-type(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.specimen:nth-of-type(odd) .info { transform: translateY(1.5rem); }

/* ── 図版 ── */

.plate { position: relative; }

.plate__frame {
  position: relative;
  border: 1px solid rgba(111, 227, 255, .16);
  padding: clamp(1rem, 3vw, 2.2rem);
  background:
    radial-gradient(72% 62% at 50% 46%, rgba(111, 227, 255, .07), transparent 72%),
    rgba(3, 16, 24, .32);
}

.plate__frame::before,
.plate__frame::after {               /* 角のトンボ */
  content: "";
  position: absolute;
  width: 12px; height: 12px;
  border: 1px solid var(--lum);
  opacity: .6;
}
.plate__frame::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.plate__frame::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.plate__frame svg { display: block; width: 100%; height: auto; overflow: visible; }

.plate__no {
  position: absolute;
  top: -.9rem;
  left: clamp(1rem, 3vw, 2.2rem);
  z-index: 2;
  padding: 0 .6rem;
  background-color: var(--sea);
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .22em;
  color: var(--ink-faint);
}
.plate__no em {
  font-family: var(--display);
  font-style: normal;
  font-size: 1.15em;
  color: var(--lum);
  margin-left: .3em;
}

/* ── SVGの筆致 ── */

.ink {
  fill: none;
  stroke: var(--ink-dim);
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .7s ease;
}
.specimen.is-visible .ink { stroke: var(--ink); }

.ink .fin-rays, .ink .hatch, .ink .legs, .ink .thread { stroke-width: .7; opacity: .62; }
.ink .thread { stroke-dasharray: 3 4; }
.ink .translucent { stroke-dasharray: 7 5; opacity: .8; }
.ink .veil, .ink .web { opacity: .55; stroke-width: .9; }
.ink .dome { stroke-dasharray: 9 6; opacity: .7; }
.ink .spots, .ink .pit { fill: rgba(207, 228, 232, .18); stroke-width: .7; }
.ink .teeth { stroke: #e7f5f8; stroke-width: 1; }
.ink .illicium { stroke: var(--lure); stroke-width: 1.2; opacity: .85; }

.eye-tube { fill: rgba(111, 227, 255, .10); stroke: var(--lum); stroke-width: .9; opacity: .8; }

.eye {
  fill: var(--lum);
  filter: drop-shadow(0 0 6px rgba(111, 227, 255, .9));
  animation: eye-breathe 4.5s ease-in-out infinite;
}
.eye-core { fill: #02141c; }

@keyframes eye-breathe {
  0%, 100% { opacity: .75; }
  50%      { opacity: 1; }
}

.photophore circle {
  fill: var(--lum);
  filter: drop-shadow(0 0 8px rgba(111, 227, 255, .95));
  animation: blink 3.4s ease-in-out infinite;
}
.photophore circle:nth-child(2n) { animation-delay: -1.1s; }
.photophore circle:nth-child(3n) { animation-delay: -2.2s; }

@keyframes blink {
  0%, 100% { opacity: .35; }
  45%      { opacity: 1; }
}

.lure {
  fill: var(--lure);
  filter: drop-shadow(0 0 14px rgba(255, 178, 107, .95));
  animation: lure-pulse 3.8s ease-in-out infinite;
}
.lure-halo { animation: lure-pulse 3.8s ease-in-out infinite; transform-origin: 118px 70px; }

@keyframes lure-pulse {
  0%, 100% { opacity: .55; transform: scale(.94); }
  50%      { opacity: 1;   transform: scale(1.06); }
}

/* ── 解説 ── */

.info__latin {
  font-family: var(--display);
  font-style: italic;
  font-size: 1rem;
  letter-spacing: .04em;
  color: var(--lum-soft);
  margin-bottom: .3rem;
}

.info__name {
  font-family: var(--serif-ja);
  font-weight: 600;
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  letter-spacing: .08em;
  color: #eaf7fb;
  margin-bottom: 1.4rem;
  position: relative;
  padding-bottom: 1.2rem;
}
.info__name::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 3.5rem; height: 1px;
  background: var(--lum);
  box-shadow: 0 0 10px rgba(111, 227, 255, .6);
}

.info__desc {
  font-size: .92rem;
  color: var(--ink);
  opacity: .88;
  max-width: 32rem;
  margin-bottom: 2rem;
  text-align: justify;
}

.spec {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: rgba(111, 227, 255, .14);
  border: 1px solid rgba(111, 227, 255, .14);
  max-width: 32rem;
}
.spec > div {
  background-color: rgba(2, 12, 19, .55);
  padding: .75rem .9rem;
}
.spec dt {
  font-family: var(--serif-ja);
  font-size: .6rem;
  letter-spacing: .22em;
  color: var(--ink-faint);
  margin-bottom: .25rem;
}
.spec dd {
  margin: 0;
  font-family: var(--mono);
  font-size: .74rem;
  line-height: 1.5;
  color: var(--ink);
  letter-spacing: 0;
}
.spec .is-lum { color: var(--lum); text-shadow: 0 0 12px rgba(111, 227, 255, .5); }
.spec .is-null { color: var(--ink-faint); }

/* ── 出現 ── */

.specimen .plate,
.specimen .info > *,
.zone__mark > *,
.zone__note {
  opacity: 0;
  transform: translateY(2rem);
  filter: blur(8px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease), filter 1.1s var(--ease);
}
.specimen:nth-of-type(even) .plate { transform: translateY(2rem) translateX(1.5rem); }
.specimen:nth-of-type(odd)  .plate { transform: translateY(2rem) translateX(-1.5rem); }

.is-visible .plate,
.is-visible .info > *,
.is-visible .zone__mark > *,
.is-visible .zone__note {
  opacity: 1;
  transform: none;
  filter: blur(0);
}
.specimen.is-visible:nth-of-type(odd) .info { transform: translateY(1.5rem); }

.info > *:nth-child(1) { transition-delay: .1s; }
.info > *:nth-child(2) { transition-delay: .18s; }
.info > *:nth-child(3) { transition-delay: .26s; }
.info > *:nth-child(4) { transition-delay: .34s; }
.zone__mark > *:nth-child(1) { transition-delay: .05s; }
.zone__mark > *:nth-child(2) { transition-delay: .15s; }
.zone__mark > *:nth-child(3) { transition-delay: .25s; }
.zone__note { transition-delay: .3s; }

/* ============================================================
   海底
   ============================================================ */

.floor {
  position: relative;
  z-index: 4;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 6rem calc(var(--hud-w) + var(--gutter)) 6rem var(--gutter);
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .75) 72%);
}

.floor__inner { max-width: 40rem; }

.floor__depth {
  font-family: var(--display);
  font-size: clamp(3.4rem, 11vw, 8rem);
  line-height: 1;
  color: var(--lum);
  letter-spacing: -.02em;
  text-shadow: 0 0 50px rgba(111, 227, 255, .5);
  margin-bottom: 1.5rem;
}
.floor__depth span { font-variant-numeric: tabular-nums; }
.floor__depth::after { content: ""; }

.floor__title {
  font-family: var(--serif-ja);
  font-weight: 600;
  font-size: clamp(1.5rem, 4vw, 2.4rem);
  letter-spacing: .3em;
  color: #e6f4f8;
  margin-bottom: 2rem;
}

.floor__text {
  font-size: .88rem;
  color: var(--ink-dim);
  margin-bottom: 3.5rem;
}

.floor__ascend {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(111, 227, 255, .35);
  color: var(--lum);
  font-family: var(--serif-ja);
  font-size: .8rem;
  letter-spacing: .34em;
  padding: 1rem 2.4rem 1rem 2.7rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  position: relative;
  overflow: hidden;
  transition: color .4s ease, border-color .4s ease;
}
.floor__ascend::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--lum);
  transform: translateY(101%);
  transition: transform .5s var(--ease);
}
.floor__ascend > * { position: relative; z-index: 1; }
.floor__ascend:hover { color: #02121a; border-color: var(--lum); }
.floor__ascend:hover::before { transform: translateY(0); }
.floor__ascend:focus-visible { outline: 1px solid var(--lum); outline-offset: 4px; }
.floor__ascend-arrow { font-family: var(--mono); transition: transform .5s var(--ease); }
.floor__ascend:hover .floor__ascend-arrow { transform: translateY(-.35rem); }

/* ============================================================
   奥付
   ============================================================ */

.colophon {
  position: relative;
  z-index: 4;
  padding: clamp(3rem, 8vh, 6rem) calc(var(--hud-w) + var(--gutter)) 3rem var(--gutter);
  border-top: 1px solid rgba(111, 227, 255, .12);
  background: rgba(0, 0, 0, .55);
}

.colophon__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 2.5rem;
  margin-bottom: 3rem;
}
.colophon h3 {
  font-family: var(--serif-ja);
  font-size: .72rem;
  letter-spacing: .3em;
  color: var(--lum-soft);
  margin-bottom: .8rem;
}
.colophon p {
  font-size: .76rem;
  line-height: 1.9;
  color: var(--ink-faint);
  max-width: 26rem;
}
.colophon__rule {
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .2em;
  color: var(--ink-faint);
  border-top: 1px solid rgba(111, 227, 255, .08);
  padding-top: 1.2rem;
}

/* ============================================================
   小さい画面
   ============================================================ */

@media (max-width: 900px) {
  :root { --hud-w: 0rem; }

  .hud {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    border-left: 0;
    border-top: 1px solid rgba(111, 227, 255, .14);
    background: linear-gradient(to top, rgba(1, 8, 14, .9), rgba(1, 8, 14, .3));
  }
  .hud__stack {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: .8rem;
    padding: .55rem 1rem calc(.55rem + env(safe-area-inset-bottom));
  }
  .hud__num { font-size: 1.5rem; }
  .hud__zone { writing-mode: horizontal-tb; height: auto; letter-spacing: .2em; font-size: .68rem; }
  .hud__rule { display: none; }
  .hud__stats { grid-template-columns: repeat(3, auto); gap: .8rem; }
  .hud__stats > div { display: flex; gap: .35rem; align-items: baseline; }

  .specimen,
  .specimen:nth-of-type(even) { grid-template-columns: 1fr; }
  .specimen:nth-of-type(even) .plate { order: 0; }
  .specimen:nth-of-type(even) .info  { order: 1; }
  .specimen:nth-of-type(odd) .info,
  .specimen.is-visible:nth-of-type(odd) .info { transform: none; }
  .specimen:nth-of-type(even) .plate,
  .specimen:nth-of-type(odd)  .plate { transform: translateY(2rem); }
  .is-visible .plate { transform: none; }

  .zone { grid-template-columns: 1fr; gap: 1.6rem; align-items: start; }
  .surface { padding-bottom: 8rem; }
  .surface__meta { flex-direction: column; gap: .3rem; bottom: 6rem; }
  .floor { padding-bottom: 9rem; }
  .spec { grid-template-columns: 1fr 1fr; }
  .info__desc { text-align: left; }
  body { line-height: 1.85; }
}

@media (max-width: 420px) {
  .hud__stats > div:nth-child(2) { display: none; }
}

/* ============================================================
   動きを減らす設定
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .specimen .plate,
  .specimen .info > *,
  .zone__mark > *,
  .zone__note,
  .surface__eyebrow,
  .surface__title-ja,
  .surface__title-en,
  .surface__lede,
  .surface__cue,
  .surface__meta {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .snow, .grain { display: none; }
}