/* ============================================================
   PIXEL PROMO — 事故物件 2:33 AM 専用スタイル
   /works/accident-property-233am
   ------------------------------------------------------------
   brand.css の後に読み込む（brand.css のトークンを上書きする）。
   work.css は読み込まない。作品ごとに世界の色が違うため、
   713 のスタイルを継承させない設計にしている。

   設計方針:
   - 恐怖は「静かに日常が壊れていく」ことで作る。
     派手なグリッチ・血・突然の顔出し・大音量は一切使わない。
   - 訪問者は観客ではなく「204号室の次の入居者」。
     だから紙の書式（募集図面・日記・調査記録）に寄せる。
   - 見出しは明朝。UIはゴシック。日記だけ手書き。
     3書体の役割を混ぜない。
   - 赤（#861E24）は「2:33」と警告だけ。面積比 1% 未満を目安。
   - 素材の元解像度が 1024×576 しかなく、4:5 カードでは
     2.4〜2.7倍に拡大している。そのままだと単に「ボケた画像」に
     見えるため、粒子・低彩度・強いビネットを重ねて
     「古い記録映像」として読ませる。
   - prefers-reduced-motion では演出を全て停止する。
   ============================================================ */

.a233-page {
  /* --- 作品固有パレット（指定色） --- */
  --bg: #070b0b;          /* 底。黒よりわずかに青緑へ寄せた闇 */
  --bg-elev: #0b1011;
  --bg-elev-2: #101617;
  --text: #e9e4da;        /* 生成りの白。純白にしない */
  --sub: #8d918d;
  --tatami: #b8aa8d;      /* 古い紙・畳・蛍光灯の色 */
  --moss: #56645d;        /* 湿った緑 */
  --blood: #861e24;       /* 赤。2:33 と警告のみ */

  --line: rgba(233, 228, 218, 0.1);
  --line-strong: rgba(233, 228, 218, 0.22);
  --accent: #861e24;
  --accent-bright: #861e24;

  --font-mincho: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --font-hand: 'Zen Kurenaido', 'Shippori Mincho', serif;
  --font-en-thin: 'Inter', 'Helvetica Neue', Arial, sans-serif;

  background: var(--bg);
  color: var(--text);
}

/* ============================================================
   共通パーツ
   ============================================================ */
.a233-page .a-section {
  padding-block: var(--section-y);
  position: relative;
  border-top: 1px solid var(--line);
}

/* 見出しは明朝。ブランドの Inter 見出しから意図的に外す。
   「不動産／記録／和のホラー」の側に寄せるため。 */
.a233-page .a-h2 {
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: clamp(24px, 4.2vw, 50px);
  line-height: 1.35;
  letter-spacing: 0.06em;
  margin-top: clamp(14px, 1.8vw, 22px);
}

.a233-page .a-lead {
  font-family: var(--font-jp);
  color: var(--sub);
  font-size: clamp(14px, 1.5vw, 16px);
  line-height: 2.05;
  max-width: 44em;
  margin-top: clamp(20px, 2.6vw, 32px);
}

.a233-page .a-p {
  font-family: var(--font-jp);
  font-size: clamp(13.5px, 1.4vw, 15.5px);
  line-height: 2.15;
  color: var(--sub);
}
.a233-page .a-p + .a-p {
  margin-top: 1.4em;
}
.a233-page .a-p--strong {
  color: var(--text);
  font-weight: 500;
}

/* 決め台詞。明朝＋やや大きく＋左に細い線 */
.a233-page .a-punch {
  font-family: var(--font-mincho);
  font-size: clamp(16px, 2.1vw, 24px);
  line-height: 1.85;
  letter-spacing: 0.05em;
  color: var(--text);
  margin-top: clamp(24px, 3vw, 40px);
  padding-left: 18px;
  border-left: 1px solid rgba(184, 170, 141, 0.45);
}
.a233-page .a-punch--wide {
  max-width: 32em;
  margin-inline: auto;
  text-align: left;
  margin-top: clamp(48px, 6vw, 84px);
}

.a233-page .a-note {
  font-family: var(--font-jp);
  font-size: 12px;
  line-height: 1.95;
  color: rgba(141, 145, 141, 0.78);
  margin-top: clamp(24px, 3vw, 40px);
  max-width: 46em;
}
.a233-page .a-source {
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--sub);
  margin-top: 20px;
}

/* ---------- 時計（2:33） ----------
   本作最強のIP記号。数字だけで成立させる。 */
.a233-page .a-clock {
  font-family: var(--font-en-thin);
  font-weight: 200;
  font-size: clamp(56px, 15vw, 168px);
  line-height: 0.9;
  letter-spacing: 0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.a233-page .a-clock-digits {
  position: relative;
  display: inline-block;
  text-shadow: 0 0 42px rgba(134, 30, 36, 0.32);
}
.a233-page .a-clock--sm {
  font-size: clamp(26px, 4vw, 44px);
}

/* ---------- 画像枠（比率は書き出した素材と厳密に一致させる） ---------- */
.a233-page .a-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background:
    repeating-linear-gradient(135deg, rgba(233, 228, 218, 0.02) 0 2px, transparent 2px 9px),
    var(--bg-elev);
}
.a233-page .a-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* 拡大由来の甘さを「古い記録」に読み替えるための処理 */
  filter: saturate(0.72) contrast(1.06) brightness(0.94);
}
/* 粒子とビネット。画像の上に薄く重ねる */
.a233-page .a-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 38%, rgba(7, 11, 11, 0.78) 100%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.055) 0 1px, transparent 1px 3px);
}
.a233-page .a-frame--32 { aspect-ratio: 3 / 2; }   /* room-204.jpg 1200×800 */
.a233-page .a-frame--45 { aspect-ratio: 4 / 5; }   /* caretaker.jpg / evidence-photo.jpg 720×900 */
.a233-page .a-frame--34 { aspect-ratio: 3 / 4; }   /* door-204.jpg 720×960 */
.a233-page .a-frame--11 { aspect-ratio: 1 / 1; }   /* sign-0233.jpg 900×900 */
.a233-page .a-frame--169 { aspect-ratio: 16 / 9; } /* archive-window.jpg 1400×788 */

/* 記号用の枠（画像を持たないルールカード） */
.a233-page .a-frame--symbol {
  display: grid;
  place-items: center;
  background: var(--bg-elev-2);
}
.a233-page .a-frame--symbol::after {
  background: radial-gradient(90% 90% at 50% 40%, transparent 40%, rgba(7, 11, 11, 0.6) 100%);
}

/* 玲奈の枠。意図的な「不在」。713 の顔なし枠と同じ扱い。 */
.a233-page .a-frame--absent {
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(135deg, rgba(233, 228, 218, 0.022) 0 2px, transparent 2px 10px),
    var(--bg-elev);
}
.a233-page .a-frame--absent::after {
  background: radial-gradient(100% 100% at 50% 40%, transparent 30%, rgba(7, 11, 11, 0.5) 100%);
}
.a233-page .a-frame--absent::before {
  content: '';
  position: absolute;
  inset: 14px;
  border: 1px dashed rgba(233, 228, 218, 0.12);
}
.a233-page .a-absent-text {
  position: relative;
  z-index: 2;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: rgba(233, 228, 218, 0.3);
  text-align: center;
  padding: 0 18px;
  line-height: 2.2;
}

/* 画像読み込み失敗時。alt を露出させず枠だけ残す。 */
.a233-page .is-missing {
  background:
    repeating-linear-gradient(135deg, rgba(233, 228, 218, 0.022) 0 2px, transparent 2px 9px),
    var(--bg-elev-2);
}
.a233-page .is-missing::before {
  content: 'NO IMAGE ON RECORD';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-en);
  font-size: 9px;
  letter-spacing: 0.28em;
  color: rgba(233, 228, 218, 0.2);
  text-align: center;
  padding: 12px;
  z-index: 2;
}
.a233-page .a-hero-bg.is-missing::before {
  content: '';
}

/* ============================================================
   ⚠️ [hidden] リセット
   ------------------------------------------------------------
   display 値を与えた要素では UA の [hidden]{display:none} が
   効かなくなる。以下は初期状態で hidden 属性を持つため、
   必ずここで打ち消す。これを消すと非表示要素が常に開いた状態で
   露出し、日記・ルール・ネタバレが全部見えてしまう。
   ============================================================ */
.a233-page [hidden] {
  display: none !important;
}

/* ============================================================
   1. HERO
   ============================================================ */
.a233-page .a-hero {
  position: relative;
  min-height: min(100svh, 940px);
  display: flex;
  align-items: center;
  padding-block: clamp(124px, 18vh, 210px) clamp(72px, 12vh, 140px);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.a233-page .a-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--bg);
}
.a233-page .a-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.42;
  filter: saturate(0.5) contrast(1.05) brightness(0.85);
}
.a233-page .a-hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(120% 85% at 50% 34%, rgba(7, 11, 11, 0.18) 0%, rgba(7, 11, 11, 0.88) 66%, #070b0b 100%),
    linear-gradient(180deg, rgba(7, 11, 11, 0.92) 0%, rgba(7, 11, 11, 0.1) 34%, rgba(7, 11, 11, 0.96) 100%);
}

/* 弱い蛍光灯のちらつき。
   点滅させず、明るさをごくわずかに揺らすだけにする。
   強いフラッシュは「安いホラー」に見えるので使わない。 */
.a233-page .a-flicker {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(80% 50% at 50% 0%, rgba(184, 170, 141, 0.07) 0%, transparent 70%);
  animation: a233-flicker 7.5s steps(1, end) infinite;
}
@keyframes a233-flicker {
  0%, 44%, 47%, 62%, 64%, 100% { opacity: 1; }
  45%, 46% { opacity: 0.42; }
  63% { opacity: 0.66; }
}

.a233-page .a-hero-inner {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.6vw, 32px);
}
.a233-page .a-hero-title {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.a233-page .a-hero-title-en {
  font-family: var(--font-en-thin);
  font-weight: 300;
  font-size: clamp(22px, 3.4vw, 40px);
  line-height: 1.1;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(233, 228, 218, 0.82);
}
.a233-page .a-hero-title-ja {
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: clamp(26px, 5vw, 58px);
  line-height: 1.25;
  letter-spacing: 0.1em;
}

/* ヒーローの主役は人物ではなく時計 */
.a233-page .a-hero .a-clock {
  margin-block: clamp(4px, 1vw, 14px);
}

.a233-page .a-hero-lead {
  font-family: var(--font-mincho);
  font-size: clamp(18px, 3vw, 36px);
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.06em;
  max-width: 24em;
}
.a233-page .a-hero-body {
  display: grid;
  gap: clamp(12px, 1.6vw, 20px);
  max-width: 46em;
}
.a233-page .a-hero-lines,
.a233-page .a-hero-sub {
  font-family: var(--font-jp);
  font-size: clamp(13px, 1.4vw, 15px);
  line-height: 2.1;
  color: var(--sub);
}
.a233-page .a-hero-sub {
  color: rgba(141, 145, 141, 0.72);
}

/* イヤホン推奨の注記。音声OFFが初期状態であることを明示する。 */
.a233-page .a-audio-note {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-jp);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--tatami);
  border: 1px solid rgba(184, 170, 141, 0.28);
  padding: 9px 16px;
  align-self: flex-start;
  background: rgba(7, 11, 11, 0.5);
}
.a233-page .a-audio-note i {
  font-size: 12px;
  opacity: 0.85;
}

.a233-page .a-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 26px;
  align-items: center;
  margin-top: clamp(6px, 1vw, 14px);
}

/* ---------- パンくず ---------- */
.a233-page .a-breadcrumb {
  border-bottom: 1px solid var(--line);
  padding-block: 15px;
  font-family: var(--font-en);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--sub);
}
.a233-page .a-breadcrumb ol {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}
.a233-page .a-breadcrumb li + li::before {
  content: '/';
  margin-right: 10px;
  opacity: 0.4;
}
.a233-page .a-breadcrumb a:hover {
  color: var(--text);
}
.a233-page .a-breadcrumb [aria-current='page'] {
  color: var(--text);
  font-family: var(--font-jp);
  letter-spacing: 0.08em;
}

/* ============================================================
   2. ROOM 204 — 物件情報
   ------------------------------------------------------------
   不動産の募集図面に寄せる。ホラーの装飾を足さない。
   「安すぎる家賃」と「告知事項：記録なし」が並んでいるだけで
   十分に不気味になる。
   ============================================================ */
.a233-page .a-room-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: clamp(28px, 4.5vw, 64px);
  align-items: start;
  margin-top: clamp(40px, 5vw, 72px);
}

.a233-page .a-listing {
  border: 1px solid rgba(184, 170, 141, 0.34);
  background:
    linear-gradient(180deg, rgba(184, 170, 141, 0.045) 0%, transparent 40%),
    var(--bg-elev);
}
.a233-page .a-listing-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 16px clamp(16px, 2.2vw, 26px);
  border-bottom: 1px solid rgba(184, 170, 141, 0.34);
  background: rgba(134, 30, 36, 0.14);
}
.a233-page .a-listing-title {
  font-family: var(--font-mincho);
  font-size: clamp(17px, 2.2vw, 24px);
  letter-spacing: 0.2em;
  color: var(--text);
}
.a233-page .a-listing-sub {
  font-family: var(--font-jp);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--tatami);
}

.a233-page .a-listing-body {
  margin: 0;
  padding: clamp(8px, 1.2vw, 14px) clamp(16px, 2.2vw, 26px) clamp(16px, 2.2vw, 24px);
}
.a233-page .a-listing-row {
  display: grid;
  grid-template-columns: 7.5em minmax(0, 1fr);
  gap: 14px;
  padding-block: 13px;
  border-bottom: 1px dashed rgba(233, 228, 218, 0.09);
  align-items: baseline;
}
.a233-page .a-listing-row:last-child {
  border-bottom: 0;
}
.a233-page .a-listing-row dt {
  font-family: var(--font-jp);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  color: var(--sub);
}
.a233-page .a-listing-row dd {
  margin: 0;
  font-family: var(--font-jp);
  font-size: clamp(13px, 1.4vw, 15px);
  line-height: 1.85;
  color: var(--text);
}

/* 告知事項の行。書き換わったあとだけ色が変わる。
   JS が動かない環境では「記録なし」のまま表示され、意味は通る。 */
.a233-page .a-listing-row--notice dd {
  transition: color 0.9s var(--ease), letter-spacing 0.9s var(--ease);
}
.a233-page .a-listing-row--notice.is-changed {
  border-bottom-color: rgba(134, 30, 36, 0.5);
}
.a233-page .a-listing-row--notice.is-changed dd {
  color: var(--tatami);
  letter-spacing: 0.04em;
}
/* 書き換わる瞬間だけ、ごく短く不透明度を落とす。
   文字を分解するような派手なグリッチは使わない。 */
.a233-page .a-listing-row--notice.is-changing dd {
  opacity: 0.25;
  transition: opacity 0.18s linear;
}

.a233-page .a-listing-after {
  margin: 0;
  padding: 14px clamp(16px, 2.2vw, 26px);
  border-top: 1px solid rgba(134, 30, 36, 0.45);
  background: rgba(134, 30, 36, 0.1);
  font-family: var(--font-jp);
  font-size: 12px;
  line-height: 1.95;
  color: var(--text);
}

.a233-page .a-room-figure {
  margin: 0;
}
.a233-page .a-room-note {
  margin-top: clamp(36px, 4.5vw, 64px);
  max-width: 46em;
}

/* ============================================================
   3. STORY
   ============================================================ */
.a233-page .a-story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
  margin-top: clamp(40px, 5vw, 72px);
}
.a233-page .a-story-main {
  max-width: 40em;
}

/* 本文の途中に置く時刻。読んでいる最中に 2:33 が割り込んでくる。 */
.a233-page .a-time-mark {
  font-family: var(--font-en-thin);
  font-weight: 200;
  font-size: clamp(38px, 7vw, 82px);
  line-height: 1;
  letter-spacing: 0.04em;
  color: rgba(233, 228, 218, 0.16);
  margin-block: clamp(28px, 3.5vw, 48px) clamp(14px, 2vw, 24px);
}

/* 断片。箇条書きに見せず「聞こえたもの」の羅列にする。 */
.a233-page .a-fragments {
  list-style: none;
  margin: 0 0 clamp(28px, 3.5vw, 44px);
  padding: 0;
  display: grid;
  gap: 12px;
}
.a233-page .a-fragments li {
  font-family: var(--font-jp);
  font-size: clamp(13.5px, 1.5vw, 16px);
  line-height: 1.9;
  color: var(--text);
  padding-left: 22px;
  position: relative;
}
.a233-page .a-fragments li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 12px;
  height: 1px;
  background: rgba(184, 170, 141, 0.6);
}

/* 証拠写真。誰が撮ったのか分からない一枚として提示する。 */
/* STORY 本文中の実機キャプチャ。
   「自分が撮っていない写真が増えていた」の直後に置くため、
   証拠写真より控えめな枠にして、本文の流れを切らない。 */
.a233-page .a-story-shot {
  margin: clamp(22px, 3vw, 34px) 0 clamp(24px, 3.2vw, 38px);
  max-width: 560px;
}
.a233-page .a-story-shot .a-frame {
  border: 1px solid rgba(233, 228, 218, 0.14);
}
.a233-page .a-story-shot-cap {
  margin-top: 10px;
  font-family: var(--font-en-thin);
  font-weight: 300;
  font-size: 11.5px;
  letter-spacing: 0.2em;
  color: var(--sub);
}

.a233-page .a-evidence {
  margin: 0;
  border: 1px solid var(--line);
  padding: 12px;
  background: rgba(184, 170, 141, 0.035);
  transform: rotate(-0.6deg);
}
.a233-page .a-evidence figcaption {
  display: grid;
  gap: 6px;
  margin-top: 12px;
}
.a233-page .a-evidence-caption {
  font-family: var(--font-jp);
  font-size: 12px;
  line-height: 1.85;
  color: var(--text);
}
.a233-page .a-evidence-note {
  font-family: var(--font-en);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--sub);
}

/* ============================================================
   4. THE FIVE RULES
   ------------------------------------------------------------
   このページで最も拡散される部分。
   1枚だけ切り出してスクショされる前提で、
   カード単体で「番号＋命令」が完結するようにする。
   ============================================================ */
/* 5枚なので 3+2 に固定する。
   auto-fit にすると幅次第で 4+1 になり、最後の1枚が孤立して間延びする。 */
.a233-page .a-rule-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 30px);
  margin-top: clamp(40px, 5vw, 72px);
}
@media (max-width: 900px) {
  .a233-page .a-rule-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .a233-page .a-rule-grid { grid-template-columns: minmax(0, 1fr); }
}
.a233-page .a-rule {
  border: 1px solid var(--line-strong);
  background:
    linear-gradient(180deg, rgba(184, 170, 141, 0.04) 0%, transparent 45%),
    var(--bg-elev);
  padding: clamp(18px, 2vw, 26px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: border-color 0.6s var(--ease), background-color 0.6s var(--ease);
}
.a233-page .a-rule:hover {
  border-color: rgba(184, 170, 141, 0.42);
}
.a233-page .a-rule-head {
  display: grid;
  gap: 8px;
}
.a233-page .a-rule-no {
  font-family: var(--font-en-thin);
  font-weight: 300;
  font-size: 12px;
  letter-spacing: 0.34em;
  color: var(--blood);
}
.a233-page .a-rule-title {
  font-family: var(--font-mincho);
  font-size: clamp(16px, 1.9vw, 20px);
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--text);
}
.a233-page .a-rule-visual {
  margin: 0;
}
.a233-page .a-rule-front {
  font-family: var(--font-jp);
  font-size: 12.5px;
  line-height: 2;
  color: var(--sub);
}

.a233-page .a-rule-toggle {
  appearance: none;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  padding: 14px 0 0;
  margin-top: auto;
  text-align: left;
  cursor: pointer;
  color: var(--tatami);
  font-family: var(--font-en);
  font-size: 10px;
  letter-spacing: 0.24em;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: color 0.4s var(--ease);
}
.a233-page .a-rule-toggle::after {
  content: '';
  width: 18px;
  height: 1px;
  background: currentColor;
  transition: width 0.4s var(--ease);
}
.a233-page .a-rule-toggle:hover {
  color: var(--text);
}
.a233-page .a-rule-toggle:hover::after {
  width: 30px;
}
.a233-page .a-rule-toggle-label {
  font-family: var(--font-jp);
  font-size: 11px;
  letter-spacing: 0.12em;
}

.a233-page .a-rule-body {
  display: grid;
  gap: 12px;
  border-top: 1px dashed rgba(233, 228, 218, 0.12);
  padding-top: 14px;
}
.a233-page .a-rule-p {
  font-family: var(--font-jp);
  font-size: 12.5px;
  line-height: 2.05;
  color: var(--sub);
  margin: 0;
}
.a233-page .a-rule-closing {
  font-family: var(--font-mincho);
  font-size: 13.5px;
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: var(--text);
  margin: 0;
}

/* ---------- ルールの記号（CSSで描く） ----------
   画像を使わない理由：
   写真を出すと「見せる」ホラーになる。
   記号だけにすると、読んだ人が自分の部屋を想像する。 */
.a233-page .a-symbol {
  position: relative;
  display: block;
  width: 56%;
  aspect-ratio: 1 / 1;
  z-index: 2;
}

/* 02: 天井のシミ。輪郭のにじんだ楕円がゆっくり形を変える。 */
.a233-page .a-symbol--stain {
  border-radius: 50% 42% 58% 46% / 46% 54% 44% 56%;
  background: radial-gradient(60% 60% at 42% 38%, rgba(184, 170, 141, 0.5) 0%, rgba(86, 100, 93, 0.32) 48%, transparent 78%);
  filter: blur(1.5px);
  animation: a233-stain 22s ease-in-out infinite alternate;
}
@keyframes a233-stain {
  0%   { border-radius: 50% 42% 58% 46% / 46% 54% 44% 56%; transform: scale(1) rotate(0deg); }
  50%  { border-radius: 44% 56% 48% 52% / 56% 44% 58% 42%; transform: scale(1.06) rotate(3deg); }
  100% { border-radius: 58% 46% 42% 54% / 42% 58% 46% 54%; transform: scale(1.02) rotate(-2deg); }
}

/* 03: 鏡。縦長の枠に、わずかにずれた反射線。 */
.a233-page .a-symbol--mirror {
  width: 40%;
  aspect-ratio: 3 / 5;
  border: 1px solid rgba(233, 228, 218, 0.34);
  border-radius: 999px 999px 6px 6px;
  background: linear-gradient(160deg, rgba(233, 228, 218, 0.1) 0%, transparent 45%, rgba(86, 100, 93, 0.16) 100%);
}
.a233-page .a-symbol--mirror::after {
  content: '';
  position: absolute;
  left: 22%;
  top: 14%;
  width: 1px;
  height: 64%;
  background: linear-gradient(180deg, rgba(233, 228, 218, 0.42), transparent);
  transform: rotate(6deg);
}

/* 04: 水。同心円の波紋。 */
.a233-page .a-symbol--water {
  border-radius: 50%;
  border: 1px solid rgba(233, 228, 218, 0.24);
}
.a233-page .a-symbol--water::before,
.a233-page .a-symbol--water::after {
  content: '';
  position: absolute;
  border: 1px solid rgba(233, 228, 218, 0.16);
  border-radius: 50%;
  inset: 18%;
}
.a233-page .a-symbol--water::after {
  inset: 36%;
  border-color: rgba(184, 170, 141, 0.3);
}

/* 05: 留守番電話。受話器ではなく「赤い録音ランプ」で表す。 */
.a233-page .a-symbol--phone {
  width: 46%;
  aspect-ratio: 4 / 3;
  border: 1px solid rgba(233, 228, 218, 0.26);
  border-radius: 3px;
  background: rgba(233, 228, 218, 0.03);
}
.a233-page .a-symbol--phone::before {
  content: '';
  position: absolute;
  left: 14%;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blood);
  box-shadow: 0 0 14px rgba(134, 30, 36, 0.9);
  animation: a233-rec 2.6s ease-in-out infinite;
}
.a233-page .a-symbol--phone::after {
  content: '';
  position: absolute;
  right: 14%;
  top: 32%;
  width: 42%;
  height: 1px;
  background: rgba(233, 228, 218, 0.24);
  box-shadow: 0 8px 0 rgba(233, 228, 218, 0.16), 0 16px 0 rgba(233, 228, 218, 0.1);
}
@keyframes a233-rec {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.28; }
}

/* 01 は画像（sign-0233.jpg）を使うが、
   画像が失われた場合のフォールバックとして時計記号も定義しておく。 */
.a233-page .a-symbol--clock {
  border-radius: 50%;
  border: 1px solid rgba(233, 228, 218, 0.3);
}
.a233-page .a-symbol--clock::before,
.a233-page .a-symbol--clock::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 50%;
  background: rgba(233, 228, 218, 0.7);
  transform-origin: bottom center;
}
.a233-page .a-symbol--clock::before {
  width: 1px;
  height: 30%;
  transform: rotate(13deg);
}
.a233-page .a-symbol--clock::after {
  width: 1px;
  height: 40%;
  background: var(--blood);
  transform: rotate(198deg);
}

/* ============================================================
   5. TWO WOMEN — 玲奈と管理人
   ------------------------------------------------------------
   ⚠️ 意図的な非対称：
      玲奈＝画像なし（まだ見えない）／管理人＝画像あり（見えすぎる）。
      レイアウトの重みは左右で揃えるが、視覚の密度だけを変える。
   ⚠️ 管理人カードを「悪役」に見せる装飾を一切足さない。
      赤い枠・傾き・歪みエフェクトは使わない。
      不気味さは彼女の顔だけが担い、意味づけは台詞に任せる。
   ============================================================ */
.a233-page .a-women-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 240px) minmax(0, 1fr);
  gap: clamp(24px, 3.5vw, 52px);
  align-items: start;
  margin-top: clamp(40px, 5vw, 76px);
}

.a233-page .a-woman {
  border: 1px solid var(--line);
  background: var(--bg-elev);
  padding: clamp(18px, 2.2vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.a233-page .a-file-label {
  font-family: var(--font-en);
  font-size: 9.5px;
  letter-spacing: 0.3em;
  color: var(--sub);
}
.a233-page .a-woman-name {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.a233-page .a-woman-name-en {
  font-family: var(--font-en-thin);
  font-weight: 300;
  font-size: clamp(13px, 1.5vw, 16px);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(233, 228, 218, 0.62);
}
.a233-page .a-woman-name-ja {
  font-family: var(--font-mincho);
  font-size: clamp(21px, 2.8vw, 30px);
  letter-spacing: 0.1em;
  line-height: 1.3;
}
.a233-page .a-woman-role {
  font-family: var(--font-jp);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  color: var(--sub);
}

/* WAITING / WATCHING。左右で色を変えるが、
   どちらが危険かを示唆しない（両方 tatami 系にする）。 */
.a233-page .a-state {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-en);
  font-size: 10px;
  letter-spacing: 0.28em;
  color: var(--tatami);
  align-self: flex-start;
}
.a233-page .a-state-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tatami);
  box-shadow: 0 0 10px rgba(184, 170, 141, 0.6);
  animation: a233-pulse 3.4s ease-in-out infinite;
}
@keyframes a233-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.a233-page .a-woman-visual {
  margin: 0;
}
/* 管理人の写真は 2.68 倍拡大。粒子と低彩度を強めて
   「拡大した古い記録」として成立させる。 */
.a233-page .a-woman--caretaker .a-frame img {
  filter: saturate(0.52) contrast(1.1) brightness(0.9);
}
.a233-page .a-woman--caretaker .a-frame::after {
  background:
    radial-gradient(105% 85% at 50% 38%, transparent 30%, rgba(7, 11, 11, 0.86) 100%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.07) 0 1px, transparent 1px 3px);
}

/* スクロールで玲奈がわずかに近づく。
   移動量は小さく保つ（大きく動かすと「飛び出す」演出になる）。 */
.a233-page .a-woman--reina .a-frame--absent {
  transition: transform 1.6s var(--ease), border-color 1.6s var(--ease);
  transform: scale(0.985);
}
.a233-page .a-woman--reina.is-in .a-frame--absent {
  transform: scale(1.015);
  border-color: rgba(184, 170, 141, 0.34);
}

.a233-page .a-meta {
  margin: 0;
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: 14px;
}
.a233-page .a-meta-row {
  display: grid;
  grid-template-columns: 8.5em minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
}
.a233-page .a-meta-row dt {
  font-family: var(--font-en);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  color: var(--sub);
}
.a233-page .a-meta-row dd {
  margin: 0;
  font-family: var(--font-jp);
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--text);
}

.a233-page .a-woman-catch {
  font-family: var(--font-mincho);
  font-size: clamp(14.5px, 1.7vw, 18px);
  line-height: 1.95;
  letter-spacing: 0.05em;
  color: var(--text);
}

/* 台詞。表と裏を重ね、ホバー／タップで入れ替える。
   管理人の表は必ず保護的な台詞にしてある（データ層で担保）。 */
.a233-page .a-quote {
  position: relative;
  margin: 0;
  padding: 16px 18px;
  border-left: 2px solid rgba(184, 170, 141, 0.5);
  background: rgba(184, 170, 141, 0.045);
  cursor: pointer;
  min-height: 5.6em;
  display: grid;
}
.a233-page .a-quote-front,
.a233-page .a-quote-back {
  grid-area: 1 / 1;
  font-family: var(--font-mincho);
  font-size: 13.5px;
  line-height: 1.95;
  letter-spacing: 0.04em;
  color: var(--text);
  transition: opacity 0.7s var(--ease);
}
.a233-page .a-quote-back {
  opacity: 0;
  color: var(--tatami);
}
.a233-page .a-quote:hover .a-quote-front,
.a233-page .a-quote:focus-visible .a-quote-front,
.a233-page .a-quote.is-flipped .a-quote-front {
  opacity: 0;
}
.a233-page .a-quote:hover .a-quote-back,
.a233-page .a-quote:focus-visible .a-quote-back,
.a233-page .a-quote.is-flipped .a-quote-back {
  opacity: 1;
}

.a233-page .a-woman-body {
  display: grid;
  gap: 1.2em;
}
.a233-page .a-symbols {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.a233-page .a-symbols li {
  font-family: var(--font-jp);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--sub);
  border: 1px solid var(--line);
  padding: 5px 10px;
}

/* ---------- 中央の柱：204号室の扉・御守り・2:33 ---------- */
.a233-page .a-pillar {
  display: grid;
  gap: clamp(20px, 2.6vw, 34px);
  justify-items: center;
  align-content: start;
  padding-top: clamp(10px, 2vw, 34px);
}

/* 扉。実機キャプチャを使う。
   番号プレートと覗き穴は写真に写っているので、CSSで重ねて描かない。
   写真は 1024×576 由来なので、彩度と輝度を落として粒子を足し、
   「解像度が足りない写真」ではなく「暗い廊下で撮った写真」に見せる。 */
.a233-page .a-door {
  position: relative;
  width: 100%;
  max-width: 190px;
  display: grid;
  justify-items: center;
  gap: 8px;
}
.a233-page .a-door .a-frame {
  width: 100%;
  border: 1px solid rgba(233, 228, 218, 0.16);
}
/* 写真の下に小さく 204 を置く。写真内の番号を読ませつつ、
   スクリーンショット単体でも部屋番号が伝わるようにする。 */
.a233-page .a-door-cap {
  font-family: var(--font-en-thin);
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.34em;
  color: var(--tatami);
}

/* 御守り。実機キャプチャ（夜のアスファルトに落ちた布人形）を使う。
   ⚠️ 単体で置くと呪物に見え、管理人を悪役に固定してしまう。
      必ず .a-charm-note（管理人が渡してきたもの）と同居させる。
   ゆっくり揺れる動きは figure ごとに付ける（布が風で動く程度）。 */
.a233-page .a-charm {
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
}
.a233-page .a-charm-photo {
  width: 100%;
  max-width: 152px;
  border: 1px solid rgba(184, 170, 141, 0.24);
  transform-origin: 50% 0%;
  animation: a233-sway 6.5s ease-in-out infinite;
}
/* 布人形は赤と青が強く、そのまま置くとページのパレットから浮く。
   彩度をさらに落として畳色・苔色の側へ寄せる。 */
.a233-page .a-charm-photo img {
  filter: saturate(0.44) contrast(1.08) brightness(0.9);
}
@keyframes a233-sway {
  0%, 100% { transform: rotate(-1.4deg); }
  50% { transform: rotate(1.4deg); }
}
.a233-page .a-charm-label {
  font-family: var(--font-mincho);
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--text);
}
.a233-page .a-charm-note {
  font-family: var(--font-jp);
  font-size: 10.5px;
  line-height: 1.85;
  color: var(--sub);
  max-width: 15em;
}
.a233-page .a-pillar-clock {
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
}

/* ============================================================
   6. MISAKI'S DIARY
   ------------------------------------------------------------
   紙一枚として提示する。手書き書体はここだけ。
   ⚠️ 最後のページは文が切れる。その先を書かない。
   ============================================================ */
.a233-page .a-diary-book {
  margin-top: clamp(40px, 5vw, 72px);
  max-width: 720px;
  border: 1px solid rgba(184, 170, 141, 0.28);
  background:
    linear-gradient(180deg, rgba(184, 170, 141, 0.06) 0%, rgba(184, 170, 141, 0.02) 100%),
    var(--bg-elev);
}
.a233-page .a-diary-pages {
  padding: clamp(24px, 4vw, 48px);
  min-height: 340px;
}
.a233-page .a-diary-page {
  display: grid;
  gap: clamp(18px, 2.4vw, 26px);
}
.a233-page .a-diary-date {
  font-family: var(--font-hand);
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--tatami);
  border-bottom: 1px solid rgba(184, 170, 141, 0.24);
  padding-bottom: 10px;
}
.a233-page .a-diary-text {
  display: grid;
  gap: 1.15em;
}
.a233-page .a-diary-text p {
  font-family: var(--font-hand);
  font-size: clamp(14.5px, 1.7vw, 17px);
  line-height: 2.1;
  letter-spacing: 0.03em;
  color: rgba(233, 228, 218, 0.9);
  margin: 0;
  /* 1行ずつ順に浮かび上がる（JSがページ切替時に発火） */
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.a233-page .a-diary-page.is-active .a-diary-text p {
  opacity: 1;
  transform: none;
}
.a233-page .a-diary-page.is-active .a-diary-text p:nth-child(1) { transition-delay: 0.05s; }
.a233-page .a-diary-page.is-active .a-diary-text p:nth-child(2) { transition-delay: 0.28s; }
.a233-page .a-diary-page.is-active .a-diary-text p:nth-child(3) { transition-delay: 0.51s; }
.a233-page .a-diary-page.is-active .a-diary-text p:nth-child(4) { transition-delay: 0.74s; }
.a233-page .a-diary-page.is-active .a-diary-text p:nth-child(5) { transition-delay: 0.97s; }
.a233-page .a-diary-page.is-active .a-diary-text p:nth-child(6) { transition-delay: 1.2s; }
.a233-page .a-diary-page.is-active .a-diary-text p:nth-child(7) { transition-delay: 1.43s; }

/* 文章が途切れた跡。線を1本引くだけにする。 */
.a233-page .a-diary-cut {
  height: 1px;
  margin: 4px 0 0;
  background: linear-gradient(90deg, rgba(184, 170, 141, 0.5) 0%, transparent 62%);
}
.a233-page .a-diary-note {
  font-family: var(--font-jp);
  font-size: 11px;
  line-height: 1.9;
  color: var(--sub);
  border-top: 1px dashed rgba(233, 228, 218, 0.12);
  padding-top: 14px;
}

.a233-page .a-diary-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid rgba(184, 170, 141, 0.24);
  padding: 14px clamp(16px, 2.4vw, 26px);
}
.a233-page .a-diary-btn {
  appearance: none;
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--text);
  font-family: var(--font-jp);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  padding: 10px 16px;
  cursor: pointer;
  transition: border-color 0.4s var(--ease), color 0.4s var(--ease);
}
.a233-page .a-diary-btn:hover:not(:disabled) {
  border-color: rgba(184, 170, 141, 0.7);
}
.a233-page .a-diary-btn:disabled {
  opacity: 0.32;
  cursor: default;
}
.a233-page .a-diary-dots {
  display: flex;
  gap: 10px;
}
.a233-page .a-diary-dot {
  appearance: none;
  width: 9px;
  height: 9px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(184, 170, 141, 0.5);
  background: transparent;
  cursor: pointer;
  transition: background-color 0.4s var(--ease);
}
.a233-page .a-diary-dot.is-active {
  background: var(--tatami);
}

/* ============================================================
   7. ROOM 204 ARCHIVE — 部屋の中を調べる
   ------------------------------------------------------------
   「調べる」という行為をUIで再現する。
   閉じている状態では場所名と一言だけ。開くと記録が出る。
   ============================================================ */
.a233-page .a-archive-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(28px, 4.5vw, 64px);
  align-items: start;
  margin-top: clamp(40px, 5vw, 72px);
}
.a233-page .a-points {
  display: grid;
  gap: 10px;
}
.a233-page .a-point {
  border: 1px solid var(--line);
  background: var(--bg-elev);
  transition: border-color 0.5s var(--ease);
}
.a233-page .a-point:hover {
  border-color: rgba(184, 170, 141, 0.4);
}
.a233-page .a-point-head {
  appearance: none;
  width: 100%;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: grid;
  grid-template-columns: 3em minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px clamp(14px, 1.8vw, 22px);
  text-align: left;
  color: inherit;
}
.a233-page .a-point-no {
  font-family: var(--font-en-thin);
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--tatami);
}
.a233-page .a-point-main {
  display: grid;
  gap: 5px;
  min-width: 0;
}
.a233-page .a-point-place {
  font-family: var(--font-mincho);
  font-size: clamp(14.5px, 1.7vw, 17px);
  letter-spacing: 0.07em;
  color: var(--text);
}
.a233-page .a-point-teaser {
  font-family: var(--font-jp);
  font-size: 11.5px;
  line-height: 1.8;
  color: var(--sub);
}
.a233-page .a-point-hint {
  font-family: var(--font-jp);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--tatami);
  white-space: nowrap;
  opacity: 0.8;
}
.a233-page .a-point-head[aria-expanded='true'] .a-point-hint {
  opacity: 0.35;
}
.a233-page .a-point-body {
  display: grid;
  gap: 10px;
  padding: 0 clamp(14px, 1.8vw, 22px) 20px;
  border-top: 1px dashed rgba(233, 228, 218, 0.1);
  padding-top: 16px;
  margin-inline: clamp(14px, 1.8vw, 22px);
  padding-inline: 0;
}
.a233-page .a-point-p {
  font-family: var(--font-jp);
  font-size: 12.5px;
  line-height: 2.05;
  color: var(--sub);
  margin: 0;
}
.a233-page .a-point-rule {
  font-family: var(--font-en);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--blood);
  margin: 4px 0 0;
}

.a233-page .a-archive-figure {
  margin: 0;
}
.a233-page .a-archive-figure figcaption {
  font-family: var(--font-jp);
  font-size: 11px;
  line-height: 1.9;
  color: var(--sub);
  margin-top: 12px;
}

/* ============================================================
   8. WHO DO YOU TRUST?
   ------------------------------------------------------------
   ⚠️ どちらを選んでも同じ結論に着地させる。
      正解を出した瞬間にプレイする理由が消える。
   ============================================================ */
.a233-page .a-trust-box {
  margin-top: clamp(40px, 5vw, 72px);
  border: 1px solid var(--line-strong);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(134, 30, 36, 0.1) 0%, transparent 58%),
    var(--bg-elev);
  padding: clamp(28px, 4.5vw, 64px);
  display: grid;
  gap: clamp(24px, 3vw, 38px);
  justify-items: center;
  text-align: center;
}

/* 02:32:58 → 02:33:00。数字が進むだけで緊張が出る。 */
.a233-page .a-trust-clock {
  font-family: var(--font-en-thin);
  font-weight: 200;
  font-size: clamp(38px, 9vw, 96px);
  line-height: 1;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  transition: color 1.2s var(--ease), text-shadow 1.2s var(--ease);
}
.a233-page .a-trust-box.is-arrived .a-trust-clock {
  color: var(--tatami);
  text-shadow: 0 0 48px rgba(134, 30, 36, 0.42);
}

.a233-page .a-trust-choice {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  justify-content: center;
}
.a233-page .a-choice-btn {
  appearance: none;
  background: transparent;
  border: 1px solid var(--line-strong);
  color: var(--text);
  font-family: var(--font-mincho);
  font-size: clamp(14px, 1.8vw, 18px);
  letter-spacing: 0.12em;
  padding: 16px clamp(20px, 3vw, 34px);
  cursor: pointer;
  transition: border-color 0.5s var(--ease), background-color 0.5s var(--ease), opacity 0.5s var(--ease);
}
.a233-page .a-choice-btn:hover {
  border-color: rgba(184, 170, 141, 0.75);
  background: rgba(184, 170, 141, 0.06);
}
.a233-page .a-choice-btn.is-chosen {
  border-color: var(--blood);
  background: rgba(134, 30, 36, 0.14);
}
.a233-page .a-choice-btn.is-dimmed {
  opacity: 0.34;
}

.a233-page .a-trust-result {
  display: grid;
  gap: clamp(18px, 2.4vw, 28px);
  justify-items: center;
  max-width: 34em;
}
.a233-page .a-trust-lines {
  display: grid;
  gap: 1.2em;
}
.a233-page .a-trust-result .a-p {
  text-align: left;
}
.a233-page .a-trust-result .a-punch {
  border-left: 0;
  padding-left: 0;
  text-align: center;
  border-top: 1px solid rgba(184, 170, 141, 0.35);
  padding-top: clamp(18px, 2.4vw, 26px);
}

/* 投票結果。D1 の集計がある場合のみ表示される。 */
.a233-page .a-votes {
  width: 100%;
  max-width: 30em;
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: clamp(18px, 2.4vw, 26px);
}
.a233-page .a-votes-label {
  font-family: var(--font-en);
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--sub);
}
.a233-page .a-vote-row {
  display: grid;
  grid-template-columns: 6.5em minmax(0, 1fr) 3.2em;
  gap: 12px;
  align-items: center;
}
.a233-page .a-vote-name {
  font-family: var(--font-jp);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--text);
  text-align: left;
}
.a233-page .a-vote-bar {
  height: 3px;
  background: rgba(233, 228, 218, 0.1);
  position: relative;
  display: block;
}
.a233-page .a-vote-fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--tatami);
  display: block;
}
.a233-page .a-vote-pct {
  font-family: var(--font-en);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--sub);
  text-align: right;
}

/* ============================================================
   9. GAME INFORMATION
   ============================================================ */
.a233-page .a-spec-table {
  margin: clamp(40px, 5vw, 72px) 0 0;
  border-top: 1px solid var(--line);
  max-width: 780px;
}
.a233-page .a-spec-row {
  display: grid;
  grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
  gap: 18px;
  padding-block: 16px;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.a233-page .a-spec-row dt {
  display: grid;
  gap: 4px;
}
.a233-page .a-spec-en {
  font-family: var(--font-en);
  font-size: 9.5px;
  letter-spacing: 0.24em;
  color: var(--sub);
}
.a233-page .a-spec-ja {
  font-family: var(--font-jp);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--tatami);
}
.a233-page .a-spec-row dd {
  margin: 0;
  font-family: var(--font-jp);
  font-size: clamp(13.5px, 1.5vw, 16px);
  line-height: 1.9;
  color: var(--text);
}

.a233-page .a-cta {
  margin-top: clamp(48px, 6vw, 88px);
  border: 1px solid var(--line-strong);
  background: var(--bg-elev);
  padding: clamp(26px, 4vw, 52px);
  display: grid;
  gap: clamp(16px, 2vw, 24px);
  justify-items: start;
  max-width: 780px;
}
.a233-page .a-code {
  font-family: var(--font-en);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--sub);
  border: 1px solid var(--line);
  padding: 8px 14px;
}

/* ============================================================
   10. IP DESIGN
   ============================================================ */
.a233-page .a-ip-table-wrap {
  margin-top: clamp(40px, 5vw, 72px);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.a233-page .a-ip-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
}
.a233-page .a-ip-table th,
.a233-page .a-ip-table td {
  border-bottom: 1px solid var(--line);
  padding: 15px 14px;
  text-align: left;
  vertical-align: top;
}
.a233-page .a-ip-table thead th {
  font-family: var(--font-jp);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: var(--sub);
  border-bottom-color: var(--line-strong);
  white-space: nowrap;
}
.a233-page .a-ip-table tbody th {
  font-family: var(--font-mincho);
  font-size: clamp(14px, 1.6vw, 17px);
  letter-spacing: 0.06em;
  color: var(--text);
  white-space: nowrap;
}
.a233-page .a-ip-table tbody td {
  font-family: var(--font-jp);
  font-size: 12.5px;
  line-height: 1.95;
  color: var(--sub);
}

/* ============================================================
   11. RESTRICTED ARCHIVE
   ------------------------------------------------------------
   プレイ後領域。初期状態では閉じている。
   開いても中身は「封印済み」の見出しだけで、
   ネタバレ本文は出さない（項目の存在だけを示す）。
   ============================================================ */
.a233-page .a-restricted {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(134, 30, 36, 0.07) 0%, transparent 60%),
    var(--bg);
}
.a233-page .a-warning {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-jp);
  font-size: 12px;
  line-height: 1.9;
  letter-spacing: 0.06em;
  color: var(--text);
  border: 1px solid rgba(134, 30, 36, 0.5);
  background: rgba(134, 30, 36, 0.1);
  padding: 13px 18px;
  margin-top: clamp(24px, 3vw, 36px);
}
.a233-page .a-warning i {
  color: var(--blood);
}
.a233-page .a-restricted-toggle {
  margin-top: clamp(24px, 3vw, 36px);
}
.a233-page .a-restricted-body {
  display: grid;
  gap: clamp(18px, 2.4vw, 28px);
  margin-top: clamp(28px, 3.5vw, 44px);
  max-width: 780px;
}
.a233-page .a-sealed-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.a233-page .a-sealed {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--line);
  background: var(--bg-elev);
  padding: 15px 18px;
}
.a233-page .a-sealed-title {
  font-family: var(--font-jp);
  font-size: 12.5px;
  line-height: 1.8;
  color: var(--text);
}
.a233-page .a-sealed-status {
  font-family: var(--font-en);
  font-size: 9.5px;
  letter-spacing: 0.24em;
  color: var(--blood);
  white-space: nowrap;
}

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width: 1000px) {
  /* TWO WOMEN を縦積みにする。順序は 玲奈 → 柱 → 管理人 を維持。
     「見えない／見えすぎる」の対比は上下でも成立する。 */
  .a233-page .a-women-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .a233-page .a-pillar {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: center;
    justify-items: center;
    padding-block: 8px;
  }
  .a233-page .a-door {
    max-width: 118px;
  }
  .a233-page .a-charm-photo {
    max-width: 104px;
  }
  .a233-page .a-room-grid,
  .a233-page .a-story-grid,
  .a233-page .a-archive-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .a233-page .a-evidence {
    max-width: 320px;
  }
}

@media (max-width: 640px) {
  .a233-page .a-hero {
    min-height: auto;
    padding-block: 116px 72px;
  }
  .a233-page .a-clock {
    font-size: clamp(52px, 22vw, 96px);
  }
  .a233-page .a-hero-sub {
    text-align: left;
  }
  .a233-page .a-listing-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
  }
  .a233-page .a-spec-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
  }
  .a233-page .a-meta-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
  .a233-page .a-point-head {
    grid-template-columns: 2.4em minmax(0, 1fr);
    row-gap: 8px;
  }
  /* ヒントは番号の下、本文列に回り込ませる */
  .a233-page .a-point-hint {
    grid-column: 2;
  }
  .a233-page .a-trust-choice {
    width: 100%;
    flex-direction: column;
  }
  .a233-page .a-choice-btn {
    width: 100%;
  }
  .a233-page .a-vote-row {
    grid-template-columns: 5.5em minmax(0, 1fr) 3em;
    gap: 8px;
  }
  .a233-page .a-diary-nav {
    flex-wrap: wrap;
    justify-content: center;
  }
  .a233-page .a-sealed {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  /* 中央の柱は縦積みに戻す（横並びだと窮屈になる） */
  .a233-page .a-pillar {
    grid-auto-flow: row;
    gap: 24px;
  }
  .a233-page .a-door {
    max-width: 140px;
  }
  .a233-page .a-charm-photo {
    max-width: 120px;
  }
  .a233-page .a-punch {
    padding-left: 14px;
  }
}

/* ============================================================
   prefers-reduced-motion
   ------------------------------------------------------------
   演出は全て止める。ただし内容は必ず読める状態にする。
   日記の1行ずつの表示は「順次」をやめ、最初から全部表示する。
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .a233-page .a-flicker,
  .a233-page .a-symbol--stain,
  .a233-page .a-symbol--phone::before,
  .a233-page .a-charm-photo,
  .a233-page .a-state-dot {
    animation: none !important;
  }
  .a233-page .a-woman--reina .a-frame--absent,
  .a233-page .a-woman--reina.is-in .a-frame--absent {
    transform: none;
    transition: none;
  }
  .a233-page .a-diary-text p {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    transition-delay: 0s !important;
  }
  /* 台詞の反転をやめ、両方を上下に並べて読ませる */
  .a233-page .a-quote {
    display: grid;
    gap: 10px;
    cursor: default;
  }
  .a233-page .a-quote-front,
  .a233-page .a-quote-back {
    grid-area: auto;
    opacity: 1 !important;
    transition: none !important;
  }
  .a233-page .a-quote-back::before {
    content: '／ ';
    color: var(--sub);
  }
  .a233-page .a-evidence {
    transform: none;
  }
}