@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;700&family=Noto+Sans+JP:wght@300;400;700&display=swap');

/* ── リセット ── */
* {
  margin: 0; padding: 0; box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* ── デザイントークン（星降る学園カラー） ── */
:root {
  /* アクセント：スターライト紫 */
  --accent:      #b8a0e8;
  --accent-dim:  rgba(184, 160, 232, .42);
  --accent-glow: rgba(184, 160, 232, .12);
  --accent-line: rgba(184, 160, 232, .55);

  /* パネル：深い夜空ブルー */
  --panel:       rgba(6, 5, 18, .95);
  --panel-soft:  rgba(10, 8, 26, .88);

  /* テキスト */
  --text:     rgba(232, 225, 248, .96);
  --text-sub: rgba(180, 165, 210, .78);

  /* キャラカラー */
  --ren-color:   #7eb8ff;
  --yota-color:  #ffb347;
  --akira-color: #c9a0dc;
  --sou-color:   #ff7eb8;

  /* セーフエリア */
  --safe-top:    env(safe-area-inset-top,    0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* テキストウィンドウ高さ */
  --textwin-h: clamp(120px, 22vh, 160px);
}

/* ── フルスクリーン固定 ── */
html {
  height: 100%;
  height: -webkit-fill-available;
  overflow: hidden;
}
body {
  font-family: 'Noto Sans JP', sans-serif;
  background: #06050f;
  color: var(--text);
  overflow: hidden;
  position: fixed;
  inset: 0;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

#game {
  position: relative;
  width: 100%;
  height: 100%;
  height: 100dvh;
  max-width: 540px;
  margin: 0 auto;
  overflow: hidden;
}

/* 周辺ビネット（映画的な雰囲気） */
#game::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 38%, transparent 52%, rgba(0,0,4,.58) 100%);
}

/* ── 背景 ── */
#bg {
  position: absolute;
  inset: 0;
  transition: background 1.2s ease;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.bg-title     { background: linear-gradient(180deg, #0d1b3e 0%, #1a1040 40%, #2d1854 100%); }
.bg-school    { background: linear-gradient(180deg, #87CEEB 0%, #c8e8ff 40%, #f5e6d3 100%); }
.bg-classroom { background: linear-gradient(180deg, #f5e6d3 0%, #ffecd2 50%, #fff8f0 100%); }
.bg-hallway   { background: linear-gradient(180deg, #d4e4f7 0%, #e8d5c4 50%, #f0e0d0 100%); }
.bg-library   { background: linear-gradient(180deg, #1c100a 0%, #2c1810 40%, #3d2817 100%); }
.bg-rooftop   { background: linear-gradient(180deg, #ff7e5f 0%, #feb47b 40%, #ffe0c0 100%); }
.bg-night     { background: linear-gradient(180deg, #050518 0%, #0a0a2e 40%, #16163a 100%); }
.bg-garden    { background: linear-gradient(180deg, #87CEEB 0%, #b8e4c0 40%, #7cc47c 100%); }

/* ── タイトル スタートボタン ── */
.title-start-btn {
  background: linear-gradient(160deg, rgba(184,160,232,.12), rgba(130,90,220,.18));
  border: 1px solid var(--accent-dim);
  color: var(--text);
  padding: .78em 3.2em;
  font-size: 1rem;
  font-family: 'Noto Sans JP', sans-serif;
  letter-spacing: .32em;
  cursor: pointer;
  border-radius: 2px;
  transition: all .28s;
  min-width: 200px;
  min-height: 52px;
  position: relative;
  overflow: hidden;
  margin-top: 1.6em;
}
.title-start-btn::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 20%, var(--accent-glow) 50%, transparent 80%);
  opacity: 0; transition: opacity .3s;
}
.title-start-btn:hover::after { opacity: 1; }
.title-start-btn:hover  { border-color: rgba(184,160,232,.72); color: #f0e8ff; }
.title-start-btn:active { transform: scale(.97); background: rgba(184,160,232,.1); }
.title-continue-btn { margin-top: .5em; font-size: .88rem; opacity: .85; }

/* ── 星パーティクル ── */
.stars { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.star  { position: absolute; background: #fff; border-radius: 50%; animation: twinkle 2s infinite alternate; }
@keyframes twinkle {
  0%   { opacity: .14; transform: scale(.75); }
  100% { opacity: .88; transform: scale(1.2); }
}

/* ══════════════════════════════════════════
   タイトル画面
══════════════════════════════════════════ */
#title-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  padding-top: var(--safe-top);
  gap: 0;
}

/* 上部装飾ライン */
#title-screen::before {
  content: '';
  display: block;
  width: clamp(100px, 48vw, 190px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  margin-bottom: 1.6em;
}

#title-screen h1 {
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(1.65rem, 5.2vw, 2.7rem);
  color: #f0e8ff;
  text-shadow:
    0 0 20px rgba(184,160,232,.7),
    0 0 55px rgba(140, 90,255,.38);
  letter-spacing: .18em;
  margin-bottom: .2em;
  animation: titleGlow 3.5s ease-in-out infinite alternate;
  text-align: center;
  line-height: 1.48;
}
@keyframes titleGlow {
  0%   { text-shadow: 0 0 20px rgba(184,160,232,.65), 0 0 55px rgba(140, 90,255,.35); }
  100% { text-shadow: 0 0 30px rgba(210,180,255,1),   0 0 75px rgba(180,110,255,.5); }
}

/* サブタイトル */
#title-screen p {
  font-size: .68rem;
  color: rgba(184, 160, 232, .72);
  letter-spacing: .42em;
  margin-bottom: 0;
}
/* 下部装飾ライン */
#title-screen p::after {
  content: '';
  display: block;
  width: clamp(90px, 38vw, 148px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  margin: .85em auto 0;
}

.title-btns {
  display: flex;
  flex-direction: column;
  gap: .65em;
  align-items: center;
  width: 100%;
  margin-top: 1.8em;
}
.title-btn {
  background: linear-gradient(160deg, rgba(18,12,40,.75), rgba(30,18,60,.88));
  border: 1px solid var(--accent-dim);
  color: var(--text);
  padding: .82em 3em;
  font-size: .92rem;
  font-family: 'Noto Sans JP', sans-serif;
  letter-spacing: .22em;
  cursor: pointer;
  border-radius: 2px;
  transition: all .28s;
  min-width: 195px;
  min-height: 48px;
  position: relative;
  overflow: hidden;
}
/* ホバー時シマー */
.title-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 20%, var(--accent-glow) 50%, transparent 80%);
  opacity: 0;
  transition: opacity .3s;
}
.title-btn:hover::after { opacity: 1; }
.title-btn:hover  { border-color: rgba(184,160,232,.72); color: #f0e8ff; }
.title-btn:active { transform: scale(.97); background: rgba(184,160,232,.1); }

/* ══════════════════════════════════════════
   HUD（好感度バー・ボタン）
══════════════════════════════════════════ */
#hud {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 25;
  padding: calc(var(--safe-top) + .6em) .8em .4em;
  display: none;
  pointer-events: none;
}
#hud.active { display: flex; justify-content: space-between; align-items: flex-start; }

#affection-display {
  display: flex;
  flex-direction: column;
  gap: .28em;
  background: rgba(8, 6, 20, .68);
  border: 1px solid rgba(184,160,232,.22);
  padding: .48em .7em;
  border-radius: 3px;
  backdrop-filter: blur(6px);
}
.aff-row  { display: flex; align-items: center; gap: .4em; }
.aff-name { width: 2.2em; font-size: .68rem; text-align: right; color: var(--text-sub); }
.aff-bar  { width: 62px; height: 3px; background: rgba(255,255,255,.1); border-radius: 2px; overflow: hidden; }
.aff-fill { height: 100%; border-radius: 2px; transition: width .5s ease; }
.aff-fill-蓮   { background: linear-gradient(90deg, #3a80c0, #7eb8ff); }
.aff-fill-陽太  { background: linear-gradient(90deg, #c07820, #ffb347); }
.aff-fill-暁   { background: linear-gradient(90deg, #8050a8, #c9a0dc); }
.aff-fill-颯   { background: linear-gradient(90deg, #c04880, #ff7eb8); }

#hud-btns { display: flex; gap: .38em; pointer-events: all; }
.hud-btn {
  width: 36px; height: 36px;
  border-radius: 3px;
  background: rgba(8, 6, 20, .68);
  border: 1px solid rgba(184,160,232,.28);
  color: rgba(184,160,232,.82);
  font-size: .95rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(5px);
  transition: all .2s;
}
.hud-btn:active { background: rgba(184,160,232,.18); border-color: var(--accent); }

/* ══════════════════════════════════════════
   キャラクター立ち絵
══════════════════════════════════════════ */
#character {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  width: clamp(320px, 82vw, 480px);
  transition: opacity .4s;
  pointer-events: none;
}
#character svg,
#character img {
  width: 100%;
  height: auto;
  display: block;
  animation: charaBreathe 3.2s ease-in-out infinite;
  filter: drop-shadow(0 6px 22px rgba(0,0,8,.6));
}
/* 実写スプライト：チェッカー背景を透過表示、縦長にトリミング */
#character img.chara-photo {
  width: 100%;
  height: clamp(480px, 110vw, 680px);
  object-fit: cover;
  object-position: center top;
  border-radius: 0;
  mix-blend-mode: normal;
  filter: drop-shadow(0 8px 32px rgba(0,0,20,.75));
}
@keyframes charaBreathe {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}

/* ══════════════════════════════════════════
   テキストウィンドウ
══════════════════════════════════════════ */

/* テキストウィンドウ上部のフェードイン */
#text-window::before {
  content: '';
  position: absolute;
  top: -38px; left: 0; right: 0; height: 38px;
  background: linear-gradient(180deg, transparent, rgba(6, 5, 18, .45));
  pointer-events: none;
  z-index: 1;
}
/* 上部装飾ライン（スターライト色） */
#text-window::after {
  content: '';
  position: absolute;
  top: 0; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-line), transparent);
}

#text-window {
  position: absolute;
  bottom: calc(56px + var(--safe-bottom)); left: 0; right: 0;
  z-index: 20;
  background: rgba(6, 5, 18, .45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(184,160,232,.2);
  box-shadow:
    inset 0 1px 0 rgba(184,160,232,.06),
    0 -8px 32px rgba(0,0,12,.55);
  padding: 1.15em 1.4em 1.15em;
  min-height: var(--textwin-h);
  cursor: pointer;
  display: none;
}
#text-window.active { display: block; }

/* キャラクター名プレート */
#speaker {
  font-family: 'Noto Serif JP', serif;
  font-size: .88rem;
  font-weight: 700;
  margin-bottom: .55em;
  padding: .18em 1.1em .18em .7em;
  display: inline-block;
  background: rgba(8, 6, 22, .92);
  border: 1px solid rgba(184,160,232,.4);
  border-left: 3px solid var(--accent);
  border-radius: 0 3px 3px 0;
  letter-spacing: .1em;
  min-width: 3.5em;
  text-align: center;
}
.speaker-蓮    { color: var(--ren-color);   border-left-color: var(--ren-color); }
.speaker-陽太  { color: var(--yota-color);  border-left-color: var(--yota-color); }
.speaker-暁    { color: var(--akira-color); border-left-color: var(--akira-color); }
.speaker-颯    { color: var(--sou-color);   border-left-color: var(--sou-color); }
.speaker-default { color: var(--text-sub); border-left-color: var(--accent-dim); }

#text {
  font-size: clamp(.86rem, 2.5vw, .97rem);
  line-height: 2.05;
  color: var(--text);
  letter-spacing: .05em;
  white-space: pre-wrap;
}
#click-indicator {
  position: absolute;
  bottom: .8em;
  right: 1.4em;
  font-size: .68rem;
  color: rgba(184,160,232,.52);
  animation: blink 1.6s infinite;
}
@keyframes blink { 0%,100%{ opacity:.38 } 50%{ opacity:1 } }

/* ══════════════════════════════════════════
   選択肢ボタン
══════════════════════════════════════════ */
#choices {
  position: absolute;
  bottom: var(--textwin-h);
  left: 0; right: 0;
  z-index: 30;
  display: none;
  flex-direction: column;
  gap: .48em;
  padding: 0 1.15em 1em;
}
#choices.active { display: flex; }

.choice-btn {
  background: linear-gradient(150deg, rgba(12,8,30,.92), rgba(20,14,45,.96));
  border: 1px solid rgba(184,160,232,.3);
  border-left: 3px solid rgba(184,160,232,.62);
  color: var(--text);
  padding: .88em 1.2em .88em 1em;
  font-size: .9rem;
  font-family: 'Noto Sans JP', sans-serif;
  cursor: pointer;
  border-radius: 2px;
  transition: all .22s;
  text-align: left;
  backdrop-filter: blur(8px);
  min-height: 50px;
  letter-spacing: .04em;
}
.choice-btn::before {
  content: '◇';
  color: rgba(184,160,232,.68);
  margin-right: .55em;
  font-size: .68em;
  vertical-align: middle;
}
.choice-btn:hover {
  background: linear-gradient(150deg, rgba(184,160,232,.08), rgba(160,130,220,.12));
  border-color: rgba(184,160,232,.58);
  border-left-color: var(--accent);
  transform: translateX(8px);
}
.choice-btn--locked {
  opacity: .38;
  border-color: rgba(184,160,232,.15);
  border-left-color: rgba(184,160,232,.18);
  color: rgba(184,160,232,.28);
  cursor: default;
  pointer-events: none;
}
.choice-btn--locked::before { color: rgba(184,160,232,.2); }
.choice-btn--locked::after  { content: ' 🔒'; font-size: .72em; }
.choice-btn:active {
  transform: translateX(5px);
  background: rgba(184,160,232,.12);
}

/* ══════════════════════════════════════════
   好感度ポップアップ
══════════════════════════════════════════ */
#affection-popup {
  position: fixed;
  top: 17%; left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  padding: .48em 2em;
  border-radius: 2px;
  font-size: .82rem;
  font-family: 'Noto Serif JP', serif;
  opacity: 0;
  transition: opacity .5s, transform .5s;
  pointer-events: none;
  background: rgba(8, 6, 22, .9);
  border: 1px solid rgba(184,160,232,.48);
  border-top-color: var(--accent);
  color: rgba(210,190,250,.95);
  backdrop-filter: blur(8px);
  letter-spacing: .06em;
}
#affection-popup.show {
  opacity: 1;
  transform: translateX(-50%) translateY(-8px);
}

/* ══════════════════════════════════════════
   メニューオーバーレイ
══════════════════════════════════════════ */
#menu-overlay {
  position: absolute;
  inset: 0;
  z-index: 60;
  background: rgba(4, 3, 14, .8);
  backdrop-filter: blur(10px);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .78em;
  padding: 1.5em;
}
#menu-overlay.active { display: flex; }
#menu-overlay h2 {
  font-family: 'Noto Serif JP', serif;
  font-size: 1.05rem;
  color: var(--accent);
  letter-spacing: .22em;
  margin-bottom: .3em;
}
#menu-overlay h2::after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  margin-top: .38em;
}
.menu-btn {
  width: min(278px, 80%);
  min-height: 50px;
  padding: .72em 1.5em;
  background: rgba(10, 8, 28, .72);
  border: 1px solid rgba(184,160,232,.26);
  color: var(--text);
  font-size: .92rem;
  font-family: 'Noto Sans JP', sans-serif;
  cursor: pointer;
  border-radius: 2px;
  letter-spacing: .14em;
  transition: all .2s;
  text-align: center;
}
.menu-btn:hover  { border-color: rgba(184,160,232,.55); background: rgba(184,160,232,.06); }
.menu-btn:active { background: rgba(184,160,232,.14); border-color: var(--accent); }
.menu-btn.danger { color: #e08080; border-color: rgba(200,100,100,.3); }

/* ══════════════════════════════════════════
   セーブ / ロード
══════════════════════════════════════════ */
#saveload-screen {
  position: absolute;
  inset: 0;
  z-index: 65;
  background: rgba(4, 3, 14, .97);
  backdrop-filter: blur(12px);
  display: none;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--safe-top) + 2em) 1.5em 2em;
  gap: 1em;
  overflow-y: auto;
}
#saveload-screen.active { display: flex; }
#saveload-screen h2 {
  font-family: 'Noto Serif JP', serif;
  font-size: 1.15rem;
  color: var(--accent);
  letter-spacing: .18em;
  margin-bottom: .3em;
}
.save-slots { display: flex; flex-direction: column; gap: .6em; width: 100%; max-width: 400px; }
.save-slot {
  background: rgba(10, 8, 28, .72);
  border: 1px solid rgba(184,160,232,.2);
  border-radius: 2px;
  padding: 1em 1.2em;
  cursor: pointer;
  transition: all .2s;
  min-height: 68px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .28em;
}
.save-slot:hover  { border-color: rgba(184,160,232,.45); background: rgba(184,160,232,.05); }
.save-slot:active { background: rgba(184,160,232,.1); border-color: var(--accent); }
.save-slot-num   { font-size: .7rem;  color: rgba(184,160,232,.48); }
.save-slot-info  { font-size: .86rem; color: var(--text); }
.save-slot-time  { font-size: .68rem; color: var(--text-sub); }
.save-slot-empty { color: rgba(184,160,232,.3); font-size: .8rem; }
.saveload-close  { margin-top: .5em; }

/* ══════════════════════════════════════════
   ギャラリー
══════════════════════════════════════════ */
#gallery-screen {
  position: absolute;
  inset: 0;
  z-index: 65;
  background: rgba(4, 3, 14, .97);
  backdrop-filter: blur(12px);
  display: none;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--safe-top) + 2em) 1.2em calc(var(--safe-bottom) + 1.5em);
  overflow-y: auto;
  gap: 1em;
}
#gallery-screen.active { display: flex; }
#gallery-screen h2 {
  font-family: 'Noto Serif JP', serif;
  font-size: 1.15rem;
  color: var(--accent);
  letter-spacing: .18em;
}
.gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .62em;
  width: 100%;
  max-width: 440px;
}
.gallery-card {
  background: rgba(10, 8, 28, .72);
  border: 1px solid rgba(184,160,232,.18);
  border-radius: 3px;
  padding: 1em;
  cursor: pointer;
  transition: all .22s;
  min-height: 88px;
  display: flex;
  flex-direction: column;
  gap: .38em;
  justify-content: center;
}
.gallery-card.unlocked { border-color: rgba(184,160,232,.36); }
.gallery-card.unlocked:hover  { background: rgba(184,160,232,.06); border-color: rgba(184,160,232,.58); }
.gallery-card.unlocked:active { background: rgba(184,160,232,.1); }
.gallery-card-dot   { width: 9px; height: 9px; border-radius: 50%; margin-bottom: .18em; }
.gallery-card-title { font-size: .76rem; line-height: 1.55; color: var(--text); }
.gallery-card-lock  { font-size: 1.25rem; opacity: .22; }
.gallery-close      { margin-top: .3em; }

/* ══════════════════════════════════════════
   CGオーバーレイ
══════════════════════════════════════════ */
#cg-overlay {
  position: absolute;
  inset: 0;
  z-index: 45;
  display: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
#cg-overlay.active { display: flex; }

.cg-scene { position: absolute; inset: 0; overflow: hidden; }

.cg-label {
  position: absolute;
  bottom: 35%; left: 50%;
  transform: translateX(-50%);
  font-family: 'Noto Serif JP', serif;
  font-size: 1.05rem;
  color: rgba(240, 232, 255, .92);
  text-shadow: 0 2px 12px rgba(0,0,12,.75);
  letter-spacing: .22em;
  white-space: nowrap;
  padding: .3em 1.6em;
  border-top: 1px solid rgba(184,160,232,.44);
  border-bottom: 1px solid rgba(184,160,232,.44);
}
.cg-tap-hint {
  position: absolute;
  bottom: 8%; left: 50%;
  transform: translateX(-50%);
  font-size: .72rem;
  color: rgba(184,160,232,.52);
  letter-spacing: .16em;
  animation: blink 2s infinite;
}

/* CG — 夕暮れ (蓮) */
.cg-sunset {
  background: linear-gradient(180deg, #1a0800 0%, #8a3800 20%, #df6418 45%, #f49e2c 65%, #ffce78 82%, #ffe8ae 100%);
}
.cg-sun {
  position: absolute;
  top: 26%; left: 50%; transform: translateX(-50%);
  width: 70px; height: 70px; border-radius: 50%;
  background: radial-gradient(circle, #fffae0, #ffcc44, #ff8800);
  box-shadow: 0 0 50px 28px rgba(255,175,0,.32);
}
.building { background: rgba(0,0,0,.74); border-radius: 2px 2px 0 0; }

/* CG — 雨 (陽太) */
.cg-rain { background: linear-gradient(180deg, #101c28 0%, #1c2c40 40%, #28384e 100%); }
.rain-drop {
  position: absolute; width: 1px; height: 14px;
  background: rgba(180,220,255,.42);
  animation: rainFall linear infinite;
}
@keyframes rainFall { 0%{ transform:translateY(-20px) } 100%{ transform:translateY(110vh) } }

/* CG — 夜空 (暁) */
.cg-night-sky { background: linear-gradient(180deg, #010108 0%, #040420 40%, #080830 100%); }
.cg-star-big  { position: absolute; background: #fff; border-radius: 50%; }
.cg-moon {
  position: absolute; top: 11%; right: 18%;
  width: 56px; height: 56px; border-radius: 50%;
  background: radial-gradient(circle at 38% 38%, #fff9ee, #e6dec0);
  box-shadow: 0 0 26px 10px rgba(215,205,170,.16);
}

/* ══════════════════════════════════════════
   エンディング画面
══════════════════════════════════════════ */
#ending-screen {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(4, 3, 16, .94);
  text-align: center;
  padding: calc(var(--safe-top) + 2em) 2em calc(var(--safe-bottom) + 2em);
}
#ending-screen.active { display: flex; }

#ending-screen h2 {
  font-family: 'Noto Serif JP', serif;
  font-size: clamp(1.15rem, 3.8vw, 1.85rem);
  color: #f0e8ff;
  margin-bottom: .5em;
  letter-spacing: .18em;
  line-height: 1.65;
  text-shadow: 0 0 22px rgba(184,160,232,.5);
  position: relative;
}
/* エンディングタイトル 装飾ライン */
#ending-screen h2::before,
#ending-screen h2::after {
  content: '';
  display: block;
  width: 52%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  margin: .48em auto;
}
#ending-screen p {
  font-size: .9rem;
  line-height: 2.25;
  max-width: 510px;
  color: rgba(210, 198, 235, .82);
  margin-bottom: 1.5em;
  white-space: pre-line;
}
.ending-star {
  font-size: 1.8rem;
  color: var(--accent);
  opacity: .6;
  margin-bottom: .4em;
  animation: pulse 2s ease-in-out infinite;
}
.ending-btns {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7em;
  margin-top: .5em;
}
.ending-ep-btn {
  letter-spacing: .18em;
  min-width: 200px;
  background: rgba(184,160,232,.15);
  border-color: var(--accent);
  color: var(--accent);
}
.ending-back-btn {
  letter-spacing: .22em;
  min-width: 200px;
  opacity: .7;
  font-size: .82rem;
}

/* ══════════════════════════════════════════
   キャラ選択画面
══════════════════════════════════════════ */
#chara-select-screen {
  position: absolute;
  inset: 0;
  z-index: 70;
  display: none;
  flex-direction: column;
  align-items: center;
  background: rgba(4, 3, 14, .97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: calc(var(--safe-top) + 1.4em) 1.2em calc(var(--safe-bottom) + 1.2em);
  gap: .8em;
  overflow-y: auto;
}
#chara-select-screen.active { display: flex; }
.cs-header { text-align: center; }
.cs-star {
  font-size: 1.5rem;
  color: var(--accent);
  opacity: .6;
  animation: pulse 2s ease-in-out infinite;
}
.cs-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 1.25rem;
  color: #f0e8ff;
  letter-spacing: .22em;
  text-shadow: 0 0 16px rgba(184,160,232,.5);
  margin: .2em 0 .1em;
}
.cs-sub {
  font-size: .72rem;
  color: var(--text-sub);
  letter-spacing: .1em;
}
.cs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75em;
  width: 100%;
  max-width: 440px;
}
.cs-card {
  background: rgba(10, 8, 28, .75);
  border: 1px solid rgba(184,160,232,.18);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all .2s;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cs-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: var(--cs-color, var(--accent));
  border-radius: 8px 8px 0 0;
}
.cs-card:active {
  background: rgba(184,160,232,.08);
  border-color: var(--cs-color, var(--accent));
  transform: scale(.97);
}
.cs-sprite {
  width: 100%;
  aspect-ratio: 1 / 1.4;
  object-fit: cover;
  object-position: top;
}
.cs-sprite-svg {
  width: 80%;
  aspect-ratio: 1 / 1.4;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}
.cs-sprite-svg svg {
  width: 100%;
  height: auto;
}
.cs-info {
  padding: .5em .6em .7em;
  text-align: center;
  width: 100%;
  background: rgba(6,5,18,.5);
}
.cs-name {
  font-family: 'Noto Serif JP', serif;
  font-size: .84rem;
  color: var(--cs-color, var(--accent));
  letter-spacing: .08em;
}
.cs-type {
  font-size: .65rem;
  color: var(--text-sub);
  letter-spacing: .06em;
  margin-top: .15em;
}
.cs-back-btn {
  margin-top: auto;
  min-width: 200px;
  letter-spacing: .2em;
  opacity: .7;
  font-size: .82rem;
}

/* ══════════════════════════════════════════
   オートボタン ON 状態
══════════════════════════════════════════ */
.hud-btn.auto-on {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(184,160,232,.15);
}

/* ══════════════════════════════════════════
   バックログ
══════════════════════════════════════════ */
#backlog-screen {
  position: absolute;
  inset: 0;
  z-index: 55;
  background: rgba(4, 3, 14, .96);
  backdrop-filter: blur(12px);
  display: none;
  flex-direction: column;
  padding-top: var(--safe-top);
  padding-bottom: calc(56px + var(--safe-bottom));
}
#backlog-screen.active { display: flex; }

.backlog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .7em 1.2em .6em;
  border-bottom: 1px solid rgba(184,160,232,.18);
  flex-shrink: 0;
}
.backlog-title {
  font-family: 'Noto Serif JP', serif;
  font-size: .95rem;
  color: var(--accent);
  letter-spacing: .22em;
}
.backlog-close {
  background: none;
  border: none;
  color: rgba(184,160,232,.55);
  font-size: 1.1rem;
  cursor: pointer;
  padding: .3em .5em;
  transition: color .2s;
}
.backlog-close:hover { color: var(--accent); }

#backlog-list {
  flex: 1;
  overflow-y: auto;
  padding: .8em 1.2em;
  display: flex;
  flex-direction: column-reverse; /* 新しいものが下 */
  gap: .1em;
}

.backlog-entry {
  padding: .55em 0;
  border-bottom: 1px solid rgba(184,160,232,.07);
}
.backlog-entry:last-child { border-bottom: none; }
.backlog-speaker {
  font-size: .72rem;
  font-family: 'Noto Serif JP', serif;
  letter-spacing: .12em;
  margin-bottom: .2em;
  opacity: .75;
}
.backlog-text {
  font-size: .85rem;
  line-height: 1.85;
  color: rgba(210,198,235,.82);
  white-space: pre-wrap;
  letter-spacing: .04em;
}

/* ══════════════════════════════════════════
   フェードオーバーレイ
══════════════════════════════════════════ */
#fade-overlay {
  position: absolute;
  inset: 0;
  background: #000;
  z-index: 35;
  opacity: 0;
  pointer-events: none;
  transition: opacity .7s;
}
#fade-overlay.active { opacity: 1; pointer-events: all; }

/* ══════════════════════════════════════════
   お名前登録画面
══════════════════════════════════════════ */
#name-screen {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2em 1.5em;
  background: radial-gradient(ellipse at 50% 38%, rgba(30,14,60,.7) 0%, rgba(6,5,18,.95) 100%);
}

.name-screen-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2em;
  width: 100%;
  max-width: 360px;
}

.name-screen-inner::before {
  content: '✦ お名前登録 ✦';
  font-family: 'Noto Serif JP', serif;
  font-size: 1.1rem;
  color: var(--accent);
  letter-spacing: .32em;
  text-shadow: 0 0 18px rgba(184,160,232,.6);
}

.name-screen-inner::after {
  content: '';
  display: block;
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-line), transparent);
  margin-top: -.5em;
}

.name-screen-sub {
  font-size: .74rem;
  color: var(--text-sub);
  letter-spacing: .18em;
  text-align: center;
  margin-top: -.3em;
}

.name-input-wrap {
  background: rgba(8, 6, 22, .88);
  border: 1px solid rgba(184,160,232,.38);
  border-bottom: 2px solid var(--accent);
  padding: .65em 1.2em;
  width: 100%;
  border-radius: 2px 2px 0 0;
  box-shadow: 0 4px 18px rgba(184,160,232,.08);
}

#name-input {
  background: none;
  border: none;
  outline: none;
  width: 100%;
  font-family: 'Noto Serif JP', serif;
  font-size: 1.55rem;
  color: #f0e8ff;
  letter-spacing: .28em;
  text-align: center;
  caret-color: var(--accent);
}

#name-input::placeholder {
  color: rgba(184,160,232,.25);
  font-size: 1rem;
  letter-spacing: .1em;
}

.name-preset-btns {
  display: flex;
  gap: .5em;
  flex-wrap: wrap;
  justify-content: center;
}

.name-preset {
  background: rgba(10, 8, 28, .72);
  border: 1px solid rgba(184,160,232,.28);
  color: var(--text-sub);
  padding: .38em .9em;
  font-size: .8rem;
  font-family: 'Noto Sans JP', sans-serif;
  cursor: pointer;
  border-radius: 2px;
  letter-spacing: .1em;
  transition: all .2s;
}

.name-preset:hover  { border-color: var(--accent); color: var(--text); }
.name-preset:active { background: rgba(184,160,232,.12); }

.name-confirm-btn { width: 100%; margin-top: .5em; letter-spacing: .3em; }

/* ══════════════════════════════════════════
   スパークルエフェクト
══════════════════════════════════════════ */
#sparkles {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  overflow: hidden;
}

.sparkle {
  position: absolute;
  pointer-events: none;
  animation: sparklePop 1s ease-out forwards;
  font-size: .7rem;
  color: rgba(255, 235, 120, .95);
  text-shadow: 0 0 6px rgba(255,220,80,.7);
}

@keyframes sparklePop {
  0%   { opacity: 1; transform: scale(0) translateY(0) rotate(0deg); }
  40%  { opacity: .9; transform: scale(1.4) translateY(-16px) rotate(60deg); }
  100% { opacity: 0; transform: scale(.4) translateY(-36px) rotate(120deg); }
}

/* ══════════════════════════════════════════
   テキストウィンドウ 隅装飾
══════════════════════════════════════════ */
/* コーナー装飾はCSSで追加（追加のHTML要素不要） */
#text-window {
  /* 既存スタイルに加えて角の光を追加 */
  box-shadow:
    inset 0 1px 0 rgba(184,160,232,.06),
    0 -8px 32px rgba(0,0,12,.55),
    inset 1px 0 0 rgba(184,160,232,.04),
    inset -1px 0 0 rgba(184,160,232,.04);
}

/* 好感度バーの幅をもう少し広く */
.aff-bar { width: 68px; }

/* 選択肢エリアをキャラの上に来るよう調整（タブバー分も上に） */
#choices {
  bottom: calc(var(--textwin-h) + 56px + var(--safe-bottom) + 8px);
}

/* チャラ男カラーのスパークル */
.sparkle-sou { color: rgba(255, 160, 200, .9); text-shadow: 0 0 6px rgba(255,100,180,.6); }

/* ══════════════════════════════════════════
   固定タブバー
══════════════════════════════════════════ */
#tab-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 50;
  height: calc(56px + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  background: rgba(6, 5, 18, .92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(184,160,232,.18);
  display: flex;
  align-items: stretch;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .18em;
  background: none;
  border: none;
  cursor: pointer;
  color: rgba(184,160,232,.4);
  transition: color .2s;
  padding: 0;
  position: relative;
}
.tab-item::before {
  content: '';
  position: absolute;
  top: 0; left: 20%; right: 20%; height: 2px;
  background: var(--accent);
  border-radius: 0 0 2px 2px;
  opacity: 0;
  transition: opacity .2s;
}
.tab-item.tab-active { color: var(--accent); }
.tab-item.tab-active::before { opacity: 1; }
.tab-item:active { color: rgba(184,160,232,.7); }

.tab-icon  { font-size: 1.15rem; line-height: 1; }
.tab-label { font-size: .6rem; letter-spacing: .1em; font-family: 'Noto Sans JP', sans-serif; }

/* ══════════════════════════════════════════
   タイトル画面 キャラクター立ち絵
══════════════════════════════════════════ */
#title-chars {
  position: absolute;
  bottom: calc(56px + var(--safe-bottom)); left: 0; right: 0;
  z-index: 8;
  display: none;
}
#title-chars.active { display: flex; }
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  padding: 0 4px;
  pointer-events: none;
}
.title-chara {
  width: 23%;
  max-width: 115px;
  cursor: pointer;
  pointer-events: all;
  transition: transform .28s, filter .28s;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.55));
  position: relative;
}
.title-chara svg { width: 100%; height: auto; display: block; }
.title-chara:hover  { transform: translateY(-6px) scale(1.04); }
.title-chara:active { transform: translateY(-3px) scale(1.01); }
/* 各キャラの色グロー */
.title-chara-蓮   { filter: drop-shadow(0 0 12px rgba(126,184,255,.45)) drop-shadow(0 4px 14px rgba(0,0,0,.5)); }
.title-chara-陽太  { filter: drop-shadow(0 0 12px rgba(255,179, 71,.45)) drop-shadow(0 4px 14px rgba(0,0,0,.5)); }
.title-chara-暁   { filter: drop-shadow(0 0 12px rgba(201,160,220,.45)) drop-shadow(0 4px 14px rgba(0,0,0,.5)); }
.title-chara-颯   { filter: drop-shadow(0 0 12px rgba(255,126,184,.45)) drop-shadow(0 4px 14px rgba(0,0,0,.5)); }
/* キャラ名ラベル */
.title-chara-label {
  position: absolute;
  bottom: 4px; left: 50%;
  transform: translateX(-50%);
  font-size: .58rem;
  color: rgba(232,225,248,.72);
  letter-spacing: .1em;
  text-shadow: 0 1px 4px rgba(0,0,0,.8);
  white-space: nowrap;
  pointer-events: none;
}

/* ══════════════════════════════════════════
   キャラクター紹介画面
══════════════════════════════════════════ */
#chara-intro-screen {
  position: absolute;
  inset: 0;
  z-index: 68;
  background: rgba(4, 3, 14, .97);
  backdrop-filter: blur(12px);
  display: none;
  flex-direction: column;
  align-items: stretch;
  padding-top: var(--safe-top);
}
#chara-intro-screen.active { display: flex; }

/* タブバー */
.ci-tabs {
  display: flex;
  border-bottom: 1px solid rgba(184,160,232,.2);
  flex-shrink: 0;
}
.ci-tab {
  flex: 1;
  padding: .7em .2em .6em;
  font-size: .78rem;
  font-family: 'Noto Sans JP', sans-serif;
  letter-spacing: .08em;
  cursor: pointer;
  border: none;
  background: none;
  color: rgba(184,160,232,.45);
  border-bottom: 2px solid transparent;
  transition: all .2s;
  position: relative;
  bottom: -1px;
}
.ci-tab.active {
  color: var(--text);
  border-bottom-color: var(--ci-tab-color, var(--accent));
}
.ci-tab:hover { color: var(--text-sub); }

/* 本文エリア */
.ci-body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.2em 1.4em calc(var(--safe-bottom) + 1em);
  gap: 1em;
}

/* キャラSVGエリア */
.ci-chara-wrap {
  width: clamp(140px, 40vw, 200px);
  flex-shrink: 0;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,.55));
  animation: charaBreathe 3.2s ease-in-out infinite;
}
.ci-chara-wrap svg { width: 100%; height: auto; display: block; }

/* プロフィールカード */
.ci-card {
  width: 100%;
  max-width: 420px;
  background: rgba(10, 8, 26, .78);
  border: 1px solid rgba(184,160,232,.2);
  border-radius: 4px;
  padding: 1.1em 1.3em;
  display: flex;
  flex-direction: column;
  gap: .6em;
}
/* キャラ名 */
.ci-name {
  font-family: 'Noto Serif JP', serif;
  font-size: 1.45rem;
  color: #f0e8ff;
  letter-spacing: .16em;
  text-shadow: 0 0 16px var(--ci-tab-color, var(--accent));
  line-height: 1.3;
}
.ci-furigana {
  font-size: .7rem;
  color: var(--text-sub);
  letter-spacing: .22em;
  margin-top: -.3em;
}
/* ステータスバッジ */
.ci-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .4em;
  margin-top: .1em;
}
.ci-badge {
  font-size: .68rem;
  padding: .2em .75em;
  border-radius: 2px;
  border: 1px solid rgba(184,160,232,.3);
  color: var(--text-sub);
  letter-spacing: .08em;
}
.ci-badge-type {
  border-color: var(--ci-tab-color, var(--accent));
  color: var(--ci-tab-color, var(--accent));
}
/* 区切り線 */
.ci-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(184,160,232,.25), transparent);
}
/* プロフィール本文 */
.ci-desc {
  font-size: .86rem;
  line-height: 2.1;
  color: rgba(210,198,235,.82);
  white-space: pre-line;
  letter-spacing: .04em;
}
/* とじるボタン */
.ci-close-btn {
  margin: 0 auto calc(var(--safe-bottom) + .8em);
  letter-spacing: .22em;
  min-width: 180px;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════
   設定画面
══════════════════════════════════════════ */
#settings-screen {
  position: absolute;
  inset: 0;
  z-index: 65;
  background: rgba(4, 3, 14, .97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: none;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--safe-top) + 2em) 1.5em calc(var(--safe-bottom) + 1.5em);
  gap: .5em;
  overflow-y: auto;
}
#settings-screen.active { display: flex; }
.sc-hd h2 {
  font-family: 'Noto Serif JP', serif;
  font-size: 1.15rem;
  color: var(--accent);
  letter-spacing: .18em;
  margin-bottom: .5em;
}
.settings-list {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: .5em;
}
.set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(10, 8, 28, .72);
  border: 1px solid rgba(184,160,232,.2);
  border-radius: 6px;
  padding: .9em 1.1em;
  gap: 1em;
}
.set-row-danger {
  cursor: pointer;
  border-color: rgba(220, 100, 100, .3);
}
.set-row-danger:active { background: rgba(220, 60, 60, .1); }
.set-label {
  font-size: .88rem;
  color: var(--text);
  letter-spacing: .06em;
  flex-shrink: 0;
}
.set-arr { color: rgba(220,100,100,.7); font-size: 1.2rem; }

/* トグルボタン */
.tog-btn {
  font-size: .78rem;
  padding: .3em .9em;
  border-radius: 20px;
  border: 1px solid rgba(184,160,232,.35);
  background: rgba(10, 8, 28, .5);
  color: rgba(184,160,232,.4);
  cursor: pointer;
  transition: all .2s;
  letter-spacing: .1em;
}
.tog-btn.tog-on {
  background: rgba(184, 160, 232, .18);
  border-color: var(--accent);
  color: var(--accent);
}

/* スライダー */
.set-slider-wrap {
  display: flex;
  align-items: center;
  gap: .6em;
  flex: 1;
}
.set-slider-wrap input[type=range] {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 3px;
  border-radius: 2px;
  background: rgba(184,160,232,.25);
  outline: none;
}
.set-slider-wrap input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  box-shadow: 0 0 6px rgba(184,160,232,.5);
}
.set-slider-wrap span {
  font-size: .75rem;
  color: var(--text-sub);
  min-width: 2.2em;
  text-align: right;
}

/* テキスト速度ボタン */
.speed-btns {
  display: flex;
  gap: .4em;
}
.speed-btn {
  font-size: .76rem;
  padding: .3em .75em;
  border-radius: 4px;
  border: 1px solid rgba(184,160,232,.25);
  background: rgba(10, 8, 28, .5);
  color: rgba(184,160,232,.4);
  cursor: pointer;
  transition: all .2s;
  letter-spacing: .06em;
}
.speed-btn.speed-active {
  background: rgba(184, 160, 232, .18);
  border-color: var(--accent);
  color: var(--accent);
}
.set-close-btn {
  margin-top: 1em;
  min-width: 180px;
  letter-spacing: .22em;
}