* {
      box-sizing: border-box;
    }
.hidden-trigger {
  position: fixed;

  right: 20px;
  bottom: calc(
    90px + env(safe-area-inset-bottom)
  );

  width: 44px;
  height: 44px;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  background: rgba(0, 0, 0, 0.08);

  border: none;
  border-radius: 50%;

  font-size: 22px;
  color: #333;

  opacity: 0.3;

  z-index: 9000;
  cursor: pointer;
}

/* 不讓普通選項的 ▶ 影響隱藏問號 */
.hidden-trigger::before {
  content: none !important;
  display: none !important;
  width: 0 !important;
  margin: 0 !important;
}
.title-overlay {
  text-align: center;
  color: white;

  text-shadow:
    0 2px 8px rgba(0, 0, 0, 0.8);
}

.game-title {
  margin: 0;

  font-size: clamp(42px, 8vw, 80px);
  letter-spacing: 8px;
}

.game-subtitle {
  margin-top: 5px;

  font-size: 18px;
  letter-spacing: 10px;

  opacity: 0.8;
}

.title-message {
  margin-top: 50px;
  margin-bottom: 35px;

  font-size: 18px;
  letter-spacing: 3px;

  opacity: 0.9;
}

.start-button,
.reset-data-button {
  display: block;

  width: 280px;
  max-width: 80vw;

  margin-left: auto;
  margin-right: auto;

  padding: 14px 30px;

  background: rgba(255, 255, 255, 0.12);
  color: white;

  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 12px;

  font-size: 16px;
  letter-spacing: 4px;

  cursor: pointer;

  transition: 0.25s;
}


/* START 與下面按鈕拉開 */
.start-button {
  margin-bottom: 28px;
}


/* 清除資料與版本號拉開 */
.reset-data-button {
  opacity: 0.65;
  margin-bottom: 35px;
}


.start-button:hover,
.reset-data-button:hover {
  background: rgba(255, 255, 255, 0.28);

  transform: translateY(-2px);
}
.start-button:hover {
  background: rgba(255, 255, 255, 0.3);

  transform: translateY(-2px);
}

.game-version {
  margin-top: 35px;

  font-size: 12px;
  opacity: 0.45;
}
.diary-panel {
  display: none;
  position: fixed;
  inset: 0;

  background: rgba(0, 0, 0, 0.88);

  justify-content: center;
  align-items: center;

  padding: 20px;

  z-index: 1100;
}

.diary-panel.show {
  display: flex;
}

/* =========================
   基本頁面
========================= */

html,
body {
  margin: 0;
  width: 100%;
  min-height: 100%;
  box-sizing: border-box;
}

body {
  background:
    repeating-linear-gradient(
      0deg,
      #dedbd5 0px,
      #dedbd5 1px,
      #d9d6d0 1px,
      #d9d6d0 3px
    );
}

/* =========================
   遊戲主畫面
========================= */

.game {
  display: none;

  width: 94%;
  max-width: 700px;

  height: auto;
  min-height: 0;

  margin: 0 auto;
  padding: 20px;

  box-sizing: border-box;
}


h2 {
  text-align: center;
  margin-bottom: 20px;
}


/* =========================
   對話框
========================= */

.dialogue {
  position: relative;

  background: #f4f0e8;
  color: #252525;

  /* 像素風：不要圓角 */
  border: 4px solid #252525;
  border-radius: 0;

  /* 第二層硬邊陰影 */
  box-shadow:
    6px 6px 0 #777;

  min-height: 240px;
  padding: 28px 34px;

  font-size: 19px;
  line-height: 1.9;
  white-space: pre-line;

  box-sizing: border-box;
}

/* =========================
   按鈕區
========================= */

.buttons button {
  min-height: 58px;

  padding: 12px 22px;

  font-size: 17px;

  background: #f4f0e8;

  border: 3px solid #252525;
  border-radius: 0;

  box-shadow: 5px 5px 0 #777;
}
.buttons button:hover {
  background: #252525;
  color: #f4f0e8;

  transform: translate(2px, 2px);

  box-shadow: 3px 3px 0 #777;
}
button::before {
  content: "▶";

  margin-right: 12px;
}
/* =========================
   標題畫面
========================= */

.title-screen {
  position: fixed;
  inset: 0;

  width: 100%;
  min-height: 100dvh;

  display: flex;
  justify-content: center;
  align-items: center;

  overflow-x: hidden;
  overflow-y: auto;

  padding: 30px;
  box-sizing: border-box;

  /* 和遊戲本體統一 */
  background:
    repeating-linear-gradient(
      0deg,
      #1b1b1b 0px,
      #1b1b1b 2px,
      #1e1e1e 2px,
      #1e1e1e 4px
    );

  z-index: 10000;

  transition:
    opacity 0.5s ease;
}
.title-content {
  width: min(680px, 92vw);
  min-height: 520px;

  padding: 80px 50px;

  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;

  color: #eee;

  border: 3px solid #aaa;

  box-shadow:
    8px 8px 0 #080808;

  background:
    rgba(20, 20, 20, 0.82);
}
.title-main {
  margin: 0;

  font-size: 46px;
  font-weight: bold;

  letter-spacing: 10px;

  color: #f2f2f2;

  text-shadow:
    4px 4px 0 #555;
}

.title-demo {
  margin-top: 14px;

  font-family: monospace;
  font-size: 15px;

  letter-spacing: 8px;

  color: #999;
}

.title-subtitle {
  margin-top: 50px;
  margin-bottom: 55px;

  font-family: monospace;
  font-size: 11px;

  letter-spacing: 5px;

  color: #666;
}
.start-button {
  width: 240px;

  padding: 14px 30px;

  background: transparent;
  color: #ddd;

  /* 像素硬邊 */
  border: 2px solid #777;
  border-radius: 0;

  box-shadow:
    4px 4px 0 #080808;

  font-family: monospace;
  font-size: 18px;
  letter-spacing: 5px;

  cursor: pointer;

  transition:
    color 0.12s,
    background 0.12s,
    border-color 0.12s;
}


/* 左邊的 > */
.start-button::before {
  content: ">" !important;

  display: inline-block !important;

  width: 18px !important;
  margin-right: 8px !important;

  opacity: 0;
}


/* 滑鼠移上去 */
.start-button:hover {
  background: #eee;
  color: #181818;

  border-color: #eee;

  transform:
    translate(2px, 2px);

  box-shadow:
    2px 2px 0 #080808;
}


/* hover 才出現 > */
.start-button:hover::before {
  opacity: 1;
}
.reset-data-button {
  width: auto;

  margin-top: 35px;

  padding: 8px 16px;

  background: transparent;

  border: 1px solid #555;
  border-radius: 0;

  box-shadow: none;

  color: #666;

  font-family: monospace;
  font-size: 11px;

  letter-spacing: 2px;

  cursor: pointer;
}

.reset-data-button::before {
  content: none !important;
  display: none !important;
}

.reset-data-button:hover {
  background: transparent;

  color: #aaa;
  border-color: #888;

  transform: none;
  box-shadow: none;
}
/* =========================
   日記
========================= */

.diary-book {
  width: min(520px, 92vw);

  /*
    日記可以限制高度，
    因為裡面的 diary-text
    本身可以捲動
  */

  height: min(650px, 85dvh);

  padding: 30px;

  background-color: #f3ead7;
  background-image:
    url("../assets/props/camellia-mark.svg"),
    linear-gradient(rgba(249, 243, 232, 0.9), rgba(238, 228, 211, 0.94)),
    url("../assets/props/diary-page.svg");
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: right 23px bottom 20px, center, center;
  background-size: 82px 82px, cover, 122% 112%;
  color: #302a24;

  border-radius: 8px;

  box-shadow:
    0 10px 40px rgba(0, 0, 0, 0.65);

  display: flex;
  flex-direction: column;

  overflow: hidden;

  box-sizing: border-box;
}


.diary-header {
  flex-shrink: 0;

  text-align: center;

  font-size: 24px;
  font-weight: bold;
  letter-spacing: 4px;

  margin-bottom: 18px;
}


.diary-date {
  flex-shrink: 0;

  font-size: 16px;

  padding-bottom: 10px;
  margin-bottom: 15px;

  border-bottom: 1px solid #9b8e7b;
}


.diary-text {
  flex: 1;

  white-space: pre-line;

  font-size: 16px;
  line-height: 1.9;

  text-align: left;

  overflow-y: auto;

  padding: 5px 8px;
}


.diary-controls {
  flex-shrink: 0;

  display: grid;

  grid-template-columns:
    1fr auto 1fr;

  align-items: center;

  gap: 12px;

  margin-top: 18px;
}


#diary-prev {
  justify-self: start;
}


#diary-next {
  justify-self: end;
}


#diary-page-number {
  text-align: center;

  min-width: 55px;
}


.diary-controls button,
.diary-close {
  padding: 9px 14px;

  background: transparent;

  color: #302a24;

  border: 1px solid #8f806c;

  border-radius: 6px;

  cursor: pointer;
}


.diary-controls button:disabled {
  opacity: 0.3;

  cursor: default;
}


.diary-close {
  flex-shrink: 0;

  display: block;

  margin: 16px auto 0;
}


/* =========================
   隱藏名字輸入畫面
========================= */

.hidden-name-panel {
  display: none;

  position: fixed;

  inset: 0;

  background:
    rgba(0, 0, 0, 0.85);

  justify-content: center;
  align-items: center;

  /*
    手機或 itch.io iframe
    高度不夠時允許捲動
  */

  overflow-y: auto;

  padding: 20px;

  box-sizing: border-box;

  z-index: 1000;
}


.hidden-name-panel.show {
  display: flex;
}


.hidden-name-box {
  width: min(320px, 90vw);

  background: #111;
  color: white;

  border: 1px solid #777;

  padding: 25px;

  text-align: center;

  box-sizing: border-box;
}


.hidden-name-title {
  margin-bottom: 20px;

  letter-spacing: 3px;
}


#hidden-name-input {
  width: 85%;

  padding: 8px;

  background: #050505;

  color: white;

  border: 1px solid #777;

  text-align: center;

  margin-bottom: 15px;

  box-sizing: border-box;
}


#hidden-name-message {
  margin-top: 15px;

  min-height: 24px;
}


/* =========================
   SECRET MODE
========================= */

html.secret-mode,
body.secret-mode {
  min-height: 100%;
  background: #111 !important;
  background-image: none !important;

  color: white;
}

/* =========================
   ENDING RECORDS
========================= */

.ending-records-open-button {
  display: grid;
  gap: 3px;
  width: min(280px, 78vw);
  min-height: 48px;
  margin: 12px auto 0;
  padding: 9px 18px;
  color: rgba(214, 201, 211, 0.78);
  background: rgba(15, 13, 19, 0.48);
  border: 1px solid rgba(137, 111, 132, 0.42);
  border-radius: 2px;
  box-shadow: none;
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 2.6px;
}

.ending-records-open-button small {
  color: rgba(169, 151, 165, 0.62);
  font-size: 9px;
  letter-spacing: 2px;
}

.ending-records-open-button:hover {
  color: #eee1ea;
  background: rgba(58, 41, 55, 0.58);
  border-color: rgba(186, 135, 164, 0.68);
  box-shadow: 0 0 22px rgba(125, 73, 105, 0.12);
  transform: translateY(-1px);
}

.ending-records-panel {
  position: fixed;
  inset: 0;
  z-index: 39000;
  display: grid;
  place-items: center;
  padding: 20px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 260ms ease, visibility 260ms ease;
}

.ending-records-panel.show {
  visibility: visible;
  opacity: 1;
}

.ending-records-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 4, 7, 0.8);
  backdrop-filter: blur(5px);
}

.ending-records-dialog {
  position: relative;
  width: min(680px, 100%);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  padding: 31px;
  box-sizing: border-box;
  color: #d9cfd8;
  background:
    radial-gradient(circle at 78% 12%, rgba(114, 69, 96, 0.11), transparent 38%),
    linear-gradient(150deg, rgba(30, 25, 34, 0.99), rgba(10, 10, 14, 0.99));
  border: 1px solid rgba(149, 119, 140, 0.46);
  border-radius: 4px;
  box-shadow: 0 28px 76px rgba(0, 0, 0, 0.62);
  transform: translateY(7px) scale(0.99);
  transition: transform 260ms ease;
}

.ending-records-panel.show .ending-records-dialog {
  transform: translateY(0) scale(1);
}

.ending-records-kicker {
  margin-bottom: 8px;
  color: rgba(145, 124, 142, 0.68);
  font-family: monospace;
  font-size: 8px;
  letter-spacing: 3px;
}

.ending-records-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(132, 110, 128, 0.28);
}

.ending-records-heading h2 {
  margin: 0;
  color: #e6dce4;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 4px;
  text-align: left;
  overflow-wrap: anywhere;
}

.ending-records-heading p {
  margin: 7px 0 0;
  color: rgba(184, 164, 179, 0.7);
  font-size: 11px;
  letter-spacing: 3px;
}

.ending-records-heading output {
  flex: none;
  color: #c28ba9;
  font-family: monospace;
  font-size: 16px;
  letter-spacing: 2px;
}

.ending-records-list {
  display: block;
}

.ending-record-section + .ending-record-section {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(132, 110, 128, 0.24);
}

.ending-record-section-title {
  margin: 0 0 12px;
  color: rgba(178, 158, 174, 0.76);
  font-family: monospace;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 3px;
}

.ending-record-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.ending-record-slot {
  position: relative;
  min-height: 132px;
  padding: 18px 16px;
  overflow: hidden;
  box-sizing: border-box;
  background: rgba(18, 16, 21, 0.72);
  border: 1px solid rgba(116, 99, 113, 0.34);
}

.ending-record-slot.is-unlocked {
  background:
    linear-gradient(145deg, rgba(64, 43, 57, 0.38), rgba(20, 17, 23, 0.78));
  border-color: rgba(171, 123, 150, 0.48);
}

.ending-record-index {
  display: block;
  margin-bottom: 20px;
  color: rgba(142, 124, 137, 0.55);
  font-family: monospace;
  font-size: 8px;
  letter-spacing: 2px;
}

.ending-record-slot h3 {
  margin: 0;
  color: rgba(218, 205, 215, 0.9);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 2px;
}

.ending-record-slot.is-locked h3 {
  color: rgba(151, 139, 149, 0.56);
  font-size: 12px;
}

.ending-record-state {
  display: block;
  margin-top: 8px;
  color: rgba(181, 151, 169, 0.72);
  font-family: monospace;
  font-size: 8px;
  letter-spacing: 1.8px;
}

.ending-record-slot.is-locked {
  opacity: 0.58;
}

.ending-record-slot.is-locked .ending-record-state {
  color: rgba(124, 116, 123, 0.58);
}

.ending-record-slot.is-secret-record {
  background: linear-gradient(145deg, rgba(54, 44, 65, 0.42), rgba(17, 16, 22, 0.82));
  border-color: rgba(139, 124, 159, 0.52);
}

.ending-record-slot.is-secret-record .ending-record-state {
  color: rgba(184, 166, 205, 0.84);
}

.ending-record-slot.is-final-record.is-unlocked {
  background: linear-gradient(145deg, rgba(46, 48, 62, 0.4), rgba(18, 17, 23, 0.8));
  border-color: rgba(126, 132, 158, 0.46);
}

.ending-record-slot p {
  margin: 13px 0 0;
  color: rgba(190, 169, 184, 0.76);
  font-size: 11px;
  line-height: 1.7;
}

.ending-record-hidden {
  display: block;
  margin-top: 13px;
  color: rgba(108, 99, 106, 0.38);
  font-family: monospace;
  font-size: 8px;
  letter-spacing: 2px;
}

.ending-records-close-button {
  width: 100%;
  min-height: 47px;
  margin: 20px 0 0;
  color: #d9cad4;
  background: rgba(79, 49, 68, 0.35);
  border: 1px solid rgba(171, 119, 148, 0.58);
  border-radius: 2px;
  box-shadow: none;
  font-size: 12px;
  letter-spacing: 3px;
}

.ending-records-close-button:hover {
  color: #f0e5ec;
  background: rgba(104, 61, 84, 0.48);
  border-color: rgba(204, 143, 176, 0.75);
  transform: none;
}

@keyframes secretRecordReveal {
  0%, 100% { transform: translate(0); filter: none; }
  18% { transform: translate(-1px, 0); filter: hue-rotate(-8deg); }
  34% { transform: translate(1px, 0); }
  52% { opacity: 0.78; }
  70% { transform: translate(0, -1px); filter: hue-rotate(6deg); }
}

.ending-record-slot.secret-record-reveal {
  animation: secretRecordReveal 520ms steps(2, end) 1;
}

@media (max-width: 650px) {
  .ending-records-open-button {
    width: min(270px, 82vw);
    min-height: 50px;
  }

  .ending-records-panel {
    padding:
      calc(12px + env(safe-area-inset-top))
      12px
      calc(12px + env(safe-area-inset-bottom));
  }

  .ending-records-dialog {
    max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding: 24px 18px 19px;
  }

  .ending-records-heading {
    align-items: center;
    margin-bottom: 18px;
  }

  .ending-records-heading h2 {
    font-size: 18px;
    letter-spacing: 3px;
  }

  .ending-record-grid {
    grid-template-columns: 1fr;
    gap: 9px;
  }

  .ending-record-slot {
    min-height: 104px;
    padding: 14px 15px;
  }

  .ending-record-index {
    margin-bottom: 12px;
  }

  .ending-records-close-button {
    min-height: 52px;
  }
}

/* =========================
   FORMAL VN RUNTIME
========================= */
.speaker-name[data-character="unknown-girl"] {
  color: rgba(226, 201, 216, 0.88);
  letter-spacing: 0.22em;
}

.speaker-name[data-character="tsubaki"] {
  color: #e2c4d7;
  border-color: #5f4657;
}

.speaker-name[data-character="protagonist"] {
  color: #e8e5eb;
  border-color: #4d4a55;
}

.speaker-name[data-character="past-protagonist"] {
  color: #ddd0bf;
  border-color: #675b50;
}

.speaker-name[data-character="classmate"] {
  color: #d2d0d6;
  border-color: #4b4a50;
}

.speaker-name[data-character="autonomous-protagonist"] {
  min-width: 82px;
  color: #b9afc4;
  border-color: #51475e;
  letter-spacing: 0.32em;
}

.speaker-name[data-character="player"] {
  color: #c7cae4;
  border-color: #555a78;
  font-family: "Courier New", monospace;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
}

.dialogue.formal-name-mask,
.speaker-name.formal-name-mask {
  animation: formalNameMask 420ms steps(2, end);
}

@keyframes formalNameMask {
  0%, 100% {
    filter: none;
    transform: translateX(0);
  }
  28% {
    filter: blur(0.7px) saturate(0.72);
    transform: translateX(-1px);
  }
  55% {
    filter: blur(1.2px) saturate(0.45);
    transform: translateX(1px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dialogue.formal-name-mask,
  .speaker-name.formal-name-mask {
    animation: none;
  }
}

/* =========================
   正式版系統列 / SAVE / BACKLOG / AUTO
========================= */
.system-quick-controls {
  --system-control-bg: rgba(17, 13, 21, 0.46);
  --system-control-bg-hover: rgba(52, 35, 50, 0.64);
  --system-control-border: rgba(158, 126, 147, 0.34);
  --system-control-border-active: rgba(190, 137, 166, 0.62);
  --system-control-text: rgba(205, 190, 201, 0.76);
  position: fixed;
  top: 14px;
  right: 16px;
  z-index: 20000;
  display: flex;
  gap: 6px;
}

.system-quick-controls .settings-open-button,
.system-quick-button {
  position: static;
  min-width: 0;
  min-height: 36px;
  margin: 0;
  padding: 8px 10px;
  color: var(--system-control-text);
  background: var(--system-control-bg);
  border: 1px solid var(--system-control-border);
  border-radius: 3px;
  box-shadow: 0 7px 22px rgba(0, 0, 0, 0.16);
  font-family: monospace;
  font-size: 9px;
  letter-spacing: 1px;
  backdrop-filter: blur(12px) saturate(0.82);
  -webkit-backdrop-filter: blur(12px) saturate(0.82);
}

.system-quick-button:hover,
.system-quick-button.is-active {
  color: #e0cbd9;
  background: var(--system-control-bg-hover);
  border-color: var(--system-control-border-active);
  transform: none;
}

body.formal-loop1 .system-quick-controls {
  --system-control-bg: rgba(43, 28, 39, 0.4);
  --system-control-bg-hover: rgba(83, 48, 68, 0.58);
  --system-control-border: rgba(184, 134, 158, 0.34);
  --system-control-border-active: rgba(204, 148, 174, 0.62);
}

body.formal-loop2 .system-quick-controls {
  --system-control-bg: rgba(35, 29, 47, 0.42);
  --system-control-bg-hover: rgba(67, 52, 85, 0.6);
  --system-control-border: rgba(163, 139, 185, 0.35);
  --system-control-border-active: rgba(184, 158, 207, 0.64);
}

body.formal-loop3 .system-quick-controls {
  --system-control-bg: rgba(24, 35, 45, 0.42);
  --system-control-bg-hover: rgba(43, 64, 79, 0.6);
  --system-control-border: rgba(130, 151, 169, 0.36);
  --system-control-border-active: rgba(158, 182, 201, 0.64);
}

body.formal-loop4 .system-quick-controls {
  --system-control-bg: rgba(29, 28, 40, 0.44);
  --system-control-bg-hover: rgba(53, 50, 72, 0.62);
  --system-control-border: rgba(139, 135, 156, 0.38);
  --system-control-border-active: rgba(169, 164, 190, 0.66);
}

body.formal-epilogue .system-quick-controls {
  --system-control-bg: rgba(43, 36, 27, 0.4);
  --system-control-bg-hover: rgba(78, 63, 43, 0.58);
  --system-control-border: rgba(182, 154, 114, 0.36);
  --system-control-border-active: rgba(207, 177, 133, 0.64);
}

.vn-system-panel {
  position: fixed;
  inset: 0;
  z-index: 45000;
  display: grid;
  place-items: center;
  padding: 20px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 220ms ease, visibility 220ms ease;
}

.vn-system-panel.show {
  visibility: visible;
  opacity: 1;
}

.vn-system-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 4, 8, 0.76);
  backdrop-filter: blur(5px);
}

.vn-system-dialog {
  position: relative;
  width: min(620px, 100%);
  max-height: calc(100dvh - 40px);
  overflow: hidden;
  padding: 30px;
  color: #d8ced6;
  background: linear-gradient(145deg, rgba(24, 20, 27, 0.98), rgba(9, 9, 13, 0.98));
  border: 1px solid rgba(147, 112, 135, 0.52);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.62);
}

.vn-system-dialog h2 {
  margin: 4px 0 0;
  text-align: left;
  font-size: 24px;
  letter-spacing: 4px;
}

.vn-system-kicker,
.vn-system-subtitle {
  margin: 0;
  color: #8f7e8c;
  font-family: monospace;
  font-size: 10px;
  letter-spacing: 2px;
}

.vn-system-subtitle {
  margin: 5px 0 22px;
}

.autosave-summary,
.manual-save-slot {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  background: rgba(10, 9, 14, 0.62);
  border: 1px solid rgba(113, 95, 108, 0.35);
}

.autosave-summary {
  margin-bottom: 10px;
  border-color: rgba(166, 111, 142, 0.58);
}

.autosave-summary strong,
.manual-save-slot strong,
.backlog-entry strong {
  color: #caa7bb;
  font-family: monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
}

.autosave-summary span,
.manual-save-slot span {
  font-size: 13px;
}

.autosave-summary small,
.manual-save-slot small {
  color: #776f78;
  font-size: 10px;
}

.manual-save-slots {
  display: grid;
  gap: 8px;
}

.manual-save-slot {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.manual-save-slot > div:first-child {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.manual-save-slot.is-empty {
  opacity: 0.7;
}

.manual-save-actions {
  display: flex;
  gap: 6px;
}

.manual-save-actions button,
.vn-system-close {
  min-height: 40px;
  padding: 8px 13px;
  color: #b9aab6;
  background: rgba(35, 27, 35, 0.78);
  border: 1px solid rgba(139, 108, 128, 0.48);
  border-radius: 3px;
  box-shadow: none;
}

.manual-save-actions button:disabled {
  opacity: 0.3;
  cursor: default;
}

.vn-system-close {
  width: 100%;
  margin-top: 14px;
}

.vn-system-message {
  min-height: 18px;
  margin: 10px 0 0;
  color: #c6a1b7;
  font-size: 12px;
}

.backlog-dialog {
  display: flex;
  flex-direction: column;
}

.backlog-list {
  min-height: 180px;
  max-height: min(58dvh, 560px);
  overflow-y: auto;
  padding-right: 8px;
  overscroll-behavior: contain;
}

.backlog-entry {
  padding: 12px 4px 14px;
  border-bottom: 1px solid rgba(125, 105, 119, 0.24);
}

.backlog-entry p {
  margin: 6px 0 0;
  color: #d6d0d5;
  font-size: 14px;
  line-height: 1.75;
  white-space: pre-line;
}

.backlog-choice strong {
  color: #b68aa4;
}

.backlog-empty {
  color: #776f78;
  text-align: center;
}

@media (max-width: 650px) {
  .system-quick-controls {
    top: calc(7px + env(safe-area-inset-top));
    right: 8px;
    left: 8px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .system-quick-controls .settings-open-button,
  .system-quick-button {
    min-height: 42px;
    padding: 7px 4px;
    font-size: 8px;
    letter-spacing: 0.4px;
  }

  .game {
    padding-top: calc(64px + env(safe-area-inset-top));
  }

  .vn-system-panel {
    padding: 10px;
  }

  .vn-system-dialog {
    max-height: calc(100dvh - 20px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding: 23px 16px 16px;
    overflow-y: auto;
  }

  .manual-save-slot {
    grid-template-columns: 1fr;
  }

  .manual-save-actions button,
  .vn-system-close {
    min-height: 46px;
    flex: 1;
  }
}

@media (max-width: 380px) {
  .system-quick-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .game {
    padding-top: calc(105px + env(safe-area-inset-top));
  }
}

@media (prefers-reduced-motion: reduce) {
  .vn-system-panel {
    transition: none;
  }
}

@media (hover: none), (pointer: coarse) {
  .ending-records-open-button:hover {
    color: rgba(214, 201, 211, 0.78);
    background: rgba(15, 13, 19, 0.48);
    border-color: rgba(137, 111, 132, 0.42);
    box-shadow: none;
    transform: none;
  }

  .ending-records-open-button:active,
  .ending-records-close-button:active {
    transform: scale(0.985);
    filter: brightness(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ending-records-panel,
  .ending-records-dialog,
  .ending-record-slot.secret-record-reveal {
    animation: none;
    transition: none;
  }
}

body.secret-mode {
  min-height: 100dvh;
}


/* =========================
   GLITCH 強度規範

   LOW    soft-memory-glitch：日常中的短暫違和，不中斷閱讀。
   MEDIUM glitch：明確的記憶衝突／名字異常，短時間使用。
   HIGH   restore-glitch、restore-error：僅限系統阻止與修復失敗。

   一般日常場景不使用 MEDIUM／HIGH；HIGH 不應持續留在下一幕。
========================= */

.glitch {
  animation:
    glitch 0.15s linear 4;
}


@keyframes glitch {

  0% {
    transform: translate(0);
  }

  25% {
    transform:
      translate(-4px, 2px);
  }

  50% {
    transform:
      translate(4px, -2px);
  }

  75% {
    transform:
      translate(-2px, -2px);
  }

  100% {
    transform: translate(0);
  }
}


/* =========================
   Memory flash
========================= */

.memory-flash {
  animation: flash 0.5s;
}


@keyframes flash {

  0% {
    background: white;
    color: black;
  }

  30% {
    background: #ffffff;
    color: #000000;
  }

  100% {
    background: #111;
    color: white;
  }
}


/* =========================
   Secret buttons
========================= */

.secret-button {
  background: #111;

  color: white;

  border: 1px solid white;
}


.remember-button {
  background: white;

  color: black;

  border: 2px solid white;

  font-weight: bold;
}


/* =========================
   選項淡入
========================= */

.choice-button {
  opacity: 0;

  transform:
    translateY(8px);

  animation-name:
    choiceFadeIn;

  animation-duration:
    0.35s;

  animation-timing-function:
    ease;

  animation-fill-mode:
    forwards;
}


@keyframes choiceFadeIn {

  0% {
    opacity: 0;

    transform:
      translateY(8px);
  }

  100% {
    opacity: 1;

    transform:
      translateY(0);
  }
}


/* =========================
   Restore mode
========================= */

body.restore-mode {
  /* 不在 body 上使用 filter，避免 fixed 背景被 body 高度裁切。 */
  animation: none;
}

.choice-button.is-preview {
  opacity: 0.42;
  cursor: default;
  filter: saturate(0.55);
  border-style: dashed;
  animation: none;
  transform: none;
}

.choice-button.is-preview:hover,
.choice-button.is-preview:active {
  transform: none;
  box-shadow: none;
}

body.restore-mode .scene-background {
  min-height: 100vh;
  min-height: 100dvh;
  opacity: 1 !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(75, 55, 78, 0.2), transparent 48%),
    linear-gradient(155deg, #121116 0%, #0c0c11 55%, #08090d 100%);
  animation:
    restoreFlash
    0.18s
    linear
    infinite
    alternate;
}

body.restore-mode .scene-background-layer {
  opacity: 0 !important;
}


@keyframes restoreFlash {

  from {
    filter:
      brightness(1);
  }

  to {
    filter:
      brightness(1.18);
  }
}


.restore-glitch {
  animation:
    restoreGlitch
    0.12s
    linear
    8;
}


@keyframes restoreGlitch {

  0% {
    transform:
      translate(0);
  }

  25% {
    transform:
      translate(-3px, 1px);
  }

  50% {
    transform:
      translate(3px, -1px);
  }

  75% {
    transform:
      translate(-2px, -1px);
  }

  100% {
    transform:
      translate(0);
  }
}


.restore-error {
  animation:
    errorFlash
    0.15s
    linear
    5;
}


@keyframes errorFlash {

  0% {
    background: #111;

    color: white;
  }

  50% {
    background: #7a0000;

    color: white;
  }

  100% {
    background: #111;

    color: white;
  }
}


/* =========================
   三周目 MEMORY ERROR
========================= */

.memory-error-mode {
  background:
    #080808 !important;

  /*
    不再使用 overflow:hidden
    避免 itch.io 裁切
  */

  overflow-x: hidden;
  overflow-y: auto;
}


/* 整個遊戲畫面輕微故障 */

.memory-error-mode .game {
  animation:
    memoryScreenShake
    0.09s
    infinite;
}


@keyframes memoryScreenShake {

  0% {
    transform:
      translate(0, 0);
  }

  25% {
    transform:
      translate(-2px, 1px);
  }

  50% {
    transform:
      translate(2px, -1px);
  }

  75% {
    transform:
      translate(-1px, -1px);
  }

  100% {
    transform:
      translate(0, 0);
  }
}


/* =========================
   MEMORY ERROR 對話框
========================= */

.memory-error-mode #dialogue {
  background:
    #080808 !important;

  color:
    #eee !important;

  border-color:
    #777 !important;

  font-family:
    monospace;

  text-shadow:
    2px 0
      rgba(255, 255, 255, 0.25),

    -2px 0
      rgba(255, 255, 255, 0.15);
}


/* =========================
   ERROR 標題
========================= */

.memory-error-mode #title {
  letter-spacing: 8px;

  animation:
    errorTitle
    0.15s
    infinite;
}


@keyframes errorTitle {

  0% {
    transform:
      translateX(0);

    opacity: 1;
  }

  30% {
    transform:
      translateX(-4px);

    opacity: 0.7;
  }

  60% {
    transform:
      translateX(4px);

    opacity: 1;
  }

  100% {
    transform:
      translateX(0);
  }
}


/* =========================
   全畫面白閃
========================= */

.memory-flash::after {
  content: "";

  position: fixed;

  inset: 0;

  background: white;

  z-index: 99999;

  pointer-events: none;

  animation:
    memoryFlash
    0.15s
    forwards;
}


@keyframes memoryFlash {

  0% {
    opacity: 0;
  }

  30% {
    opacity: 0.9;
  }

  100% {
    opacity: 0;
  }
}


/* =========================
   三周目記憶殘影
========================= */

.memory-overlap {
  position: relative;

  overflow: hidden;
}


.memory-overlap::before,
.memory-overlap::after {
  content:
    attr(data-memory);

  position: absolute;

  inset: 0;

  padding: inherit;

  white-space: pre-line;

  pointer-events: none;

  opacity: 0.35;
}


.memory-overlap::before {
  transform:
    translate(-5px, 2px);
}


.memory-overlap::after {
  transform:
    translate(5px, -2px);
}


/* =========================
   基本尺寸
========================= */

html,
body {
  overflow-x: hidden;
  overflow-y: auto !important;
}

.game {
  width: min(94vw, 600px);
  max-width: 600px;

  margin-left: auto;
  margin-right: auto;

  padding: 20px;
  padding-bottom: 40px;

  box-sizing: border-box;
}

.dialogue {
  width: 100%;
  max-width: 100%;

  box-sizing: border-box;
}

.buttons {
  width: 100%;
  max-width: 100%;
}


/* =========================
   手機版
========================= */

@media (max-width: 650px) {

  body {
    padding-bottom:
      calc(
        60px +
        env(safe-area-inset-bottom)
      );
  }

  /* 遊戲主體 */
  .game {
    width: 100%;
    max-width: 100%;

    padding:
      20px 14px
      calc(
        50px +
        env(safe-area-inset-bottom)
      );

    box-sizing: border-box;
  }

  /* 標題 */
  #title {
    font-size: 19px;
    letter-spacing: 2px;

    margin-bottom: 10px;
  }

  /* DAY 01 */
  .game-status {
    font-size: 9px;
    letter-spacing: 2px;

    margin-bottom: 18px;
  }

  /* 對話框 */
  .dialogue {
    min-height: 220px;

    padding: 28px 18px 20px;

    font-size: 17px;
    line-height: 1.8;

    box-sizing: border-box;
  }

  /* 姓名框 */
  .speaker-name {
    top: -13px;
    left: 18px;

    min-width: 90px;

    padding: 6px 12px;

    font-size: 14px;
    letter-spacing: 2px;
  }

  /* 選項區 */
  .buttons {
    margin-top: 28px;
    gap: 12px;
  }

  /* 一般選項 */
  .buttons button {
    width: 100%;

    min-height: 52px;

    padding: 12px 16px;

    font-size: 16px;
    line-height: 1.5;

    box-sizing: border-box;
  }

  /* 手機沒有 hover，直接顯示 ▶ */
  .buttons button::before {
    opacity: 1;
  }

  /* 隱藏問號 */
  .hidden-trigger {
    right: 14px;

    bottom:
      calc(
        18px +
        env(safe-area-inset-bottom)
      );

    width: 42px;
    height: 42px;

    font-size: 19px;
  }

  /* 日記 */
  .diary-book {
    width: 94vw;
    height: 82dvh;

    padding: 20px;

    box-sizing: border-box;
  }

  /* 封面 */
  .title-screen {
    padding: 16px;
  }

  .title-content {
    width: 100%;

    min-height: auto;

    padding: 50px 20px;

    box-sizing: border-box;
  }

  .title-main {
    font-size: 30px;
    letter-spacing: 5px;
  }

  .title-demo {
    font-size: 12px;
    letter-spacing: 5px;
  }

  .title-subtitle {
    margin-top: 32px;
    margin-bottom: 38px;

    font-size: 9px;
    letter-spacing: 3px;
  }

  .start-button {
    width: min(280px, 100%);

    font-size: 17px;
  }

}
/* =========================
   選項區
========================= */

.buttons {
  margin-top: 40px;

  display: grid;
  gap: 16px;
}


/* =========================
   普通選項箭頭
========================= */

button::before {
  content: "▶";

  display: inline-block;

  width: 24px;
  margin-right: 8px;

  opacity: 0;
}

button:hover::before {
  opacity: 1;
}


/* =========================
   神秘 ? 選項
========================= */

.mystery-button {
  position: relative !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  text-align: center !important;

  padding-left: 0 !important;
  padding-right: 0 !important;

  letter-spacing: 4px;

  opacity: 0.72;
}


/* ? 不使用普通按鈕的箭頭 */
.mystery-button::before {
  content: none !important;

  display: none !important;

  width: 0 !important;
  margin: 0 !important;
}


/* 滑鼠碰到 ? */
.mystery-button:hover {
  color: #f4f0e8;
  background: #252525;

  border-color: #252525;

  opacity: 1;

  box-shadow:
    2px 2px 0 #777;
}
.game-status {
  margin-top: -10px;
  margin-bottom: 18px;

  font-family: monospace;
  font-size: 11px;
  letter-spacing: 3px;

  color: #777;
  opacity: 0.8;
}
.next-indicator {
  position: absolute;

  right: 18px;
  bottom: 12px;

  font-size: 13px;

  animation: pixelBounce 0.7s steps(2) infinite;
}

@keyframes pixelBounce {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(4px);
  }
}
.buttons button {
  text-align: left !important;
  padding-left: 28px;
}
/* =========================
   對話框外層
========================= */

.dialogue-wrap {
  position: relative;
}


/* =========================
   角色姓名標籤
========================= */

.speaker-name {
  display: none;

  position: absolute;

  top: -16px;
  left: 22px;

  min-width: 120px;

  padding: 7px 16px;

  background: #252525;
  color: #f4f0e8;

  border: 3px solid #252525;
  border-radius: 0;

  box-shadow: 4px 4px 0 #777;

  font-size: 15px;
  letter-spacing: 2px;

  text-align: center;

  z-index: 10;
}


/* 有人物說話才顯示 */
.speaker-name.show {
  display: block;
}

.formal-system-message {
  position: fixed;
  top: clamp(72px, 11vh, 118px);
  left: 50%;
  width: min(560px, calc(100vw - 36px));
  padding: 12px 18px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
  color: #d9d5e2;
  background: rgba(18, 17, 23, 0.92);
  border: 1px solid rgba(157, 139, 181, 0.38);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.3);
  font-family: "Courier New", monospace;
  letter-spacing: 0.08em;
  opacity: 0;
  transform: translate(-50%, -7px);
  pointer-events: none;
  z-index: 75;
  transition: opacity 220ms ease, transform 220ms ease;
}

.formal-system-message.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.formal-system-label {
  color: #a99ab9;
  font-size: 0.72rem;
  font-weight: 700;
}

.formal-system-text {
  font-size: 0.86rem;
  line-height: 1.55;
}

.formal-system-message.level-warning {
  border-color: rgba(178, 143, 158, 0.48);
}

.formal-system-message.level-correction {
  color: #e0d3d8;
  border-color: rgba(173, 109, 132, 0.55);
  text-shadow: 0.7px 0 rgba(144, 103, 164, 0.45);
}

@media (max-width: 600px) {
  .formal-system-message {
    top: max(64px, env(safe-area-inset-top));
    width: calc(100vw - 24px);
    padding: 11px 13px;
    gap: 10px;
  }

  .formal-system-text {
    font-size: 0.79rem;
  }
}
button.waiting {
  opacity: 0.7;
  cursor: default;
}

/* =========================
   場景小道具
========================= */

.scene-prop {
  display: grid;
  place-items: center;
  position: absolute;
  right: 18px;
  bottom: 17px;
  z-index: 2;
  width: 92px;
  height: 92px;
  opacity: 0;
  transform: translateY(5px) scale(0.96);
  pointer-events: none;
  transition:
    opacity 300ms ease,
    transform 360ms ease;
}

.scene-prop.is-visible {
  opacity: 0.82;
  transform: translateY(0) scale(1);
}

.scene-prop img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 7px 8px rgba(31, 24, 34, 0.16));
  transition: opacity 360ms ease, filter 360ms ease, transform 360ms ease;
}

.dialogue-wrap:has(.scene-prop.is-visible) .dialogue {
  padding-right: 126px;
}

.scene-prop.prop-diaryCover img {
  transform: rotate(-1.5deg) scale(1.03);
}

@media (max-width: 650px) {
  .scene-prop {
    right: 11px;
    bottom: 12px;
    width: 66px;
    height: 66px;
  }

  .dialogue-wrap:has(.scene-prop.is-visible) .dialogue {
    padding-right: 88px;
  }

  .diary-book {
    background-position: right 12px bottom 12px, center, center;
    background-size: 62px 62px, cover, 138% 116%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scene-prop,
  .scene-prop img {
    transition: none;
  }
}

/* =========================
   一般劇情演出與閱讀體驗
========================= */

body,
button,
input {
  font-family:
    "Noto Serif TC",
    "Source Han Serif TC",
    "Microsoft JhengHei",
    sans-serif;
}

.dialogue-enter {
  animation: dialogueEnter 0.18s ease-out;
}

/* 特殊劇情效果優先於一般淡入，避免削弱 SECRET／回憶演出。 */
.dialogue.glitch.dialogue-enter {
  animation: glitch 0.15s linear 4;
}

.dialogue.memory-flash.dialogue-enter {
  animation: flash 0.5s;
}

@keyframes dialogueEnter {
  from {
    opacity: 0.35;
  }

  to {
    opacity: 1;
  }
}

.status-change {
  animation: statusChange 0.28s ease-out;
}

@keyframes statusChange {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }

  to {
    opacity: 0.8;
    transform: translateY(0);
  }
}

.buttons {
  margin-top: 26px;
  gap: 13px;
}

.buttons .choice-button {
  border-left-width: 6px;
}

.buttons button:active {
  transform: translate(3px, 3px);
  box-shadow: 2px 2px 0 #777;
}

.speaker-name {
  box-shadow: 3px 3px 0 #777;
}

@media (max-width: 650px) {
  .game {
    padding-bottom:
      calc(
        32px +
        env(safe-area-inset-bottom)
      );
  }

  .dialogue {
    min-height: 200px;
    padding: 27px 18px 18px;
    font-size: 16px;
    line-height: 1.85;
  }

  .buttons {
    margin-top: 22px;
    gap: 10px;
  }

  .buttons button {
    min-height: 54px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dialogue-enter,
  .status-change,
  .choice-button {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .title-screen {
    transition-duration: 0.01ms;
  }
}

/* =========================
   SETTINGS
========================= */

.settings-open-button {
  position: fixed;
  top: 14px;
  right: 16px;
  z-index: 20000;
  min-width: 94px;
  min-height: 36px;
  margin: 0;
  padding: 8px 12px;
  color: #9f939f;
  background: rgba(8, 8, 12, 0.78);
  border: 1px solid rgba(116, 104, 119, 0.42);
  border-radius: 3px;
  box-shadow: 0 7px 20px rgba(0, 0, 0, 0.22);
  font-family: monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  backdrop-filter: blur(8px);
}

.settings-open-button:hover {
  color: #d0c0ce;
  background: rgba(22, 18, 25, 0.92);
  border-color: rgba(169, 120, 145, 0.58);
  transform: none;
}

.audio-unlock-button {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 20000;
  min-width: 150px;
  min-height: 40px;
  margin: 0;
  padding: 8px 16px;
  color: #aa96a5;
  background: rgba(9, 8, 12, 0.78);
  border: 1px solid rgba(157, 113, 138, 0.44);
  border-radius: 3px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  font-size: 11px;
  letter-spacing: 1.5px;
  transform: translateX(-50%);
  transition: opacity 220ms ease, visibility 220ms ease, border-color 180ms ease;
}

.audio-unlock-button:hover {
  color: #d8c4d1;
  border-color: rgba(192, 136, 166, 0.7);
  transform: translateX(-50%);
}

.audio-unlock-button.hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.settings-panel {
  position: fixed;
  inset: 0;
  z-index: 30000;
  display: grid;
  place-items: center;
  padding: 20px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 220ms ease, visibility 220ms ease;
}

.settings-panel.show {
  visibility: visible;
  opacity: 1;
}

.settings-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 5, 8, 0.7);
  backdrop-filter: blur(5px);
}

.settings-dialog {
  position: relative;
  width: min(470px, 100%);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  padding: 34px 36px 30px;
  color: #d5ccd5;
  background:
    linear-gradient(145deg, rgba(31, 25, 35, 0.98), rgba(13, 13, 18, 0.98));
  border: 1px solid rgba(139, 116, 139, 0.4);
  border-radius: 4px;
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.52),
    inset 0 0 46px rgba(110, 76, 103, 0.045);
}

.settings-kicker {
  margin-bottom: 7px;
  color: #766b78;
  font-family: monospace;
  font-size: 8px;
  letter-spacing: 3px;
}

.settings-dialog h2 {
  margin: 0;
  color: #ded4de;
  font-size: 23px;
  font-weight: 500;
  letter-spacing: 6px;
}

.settings-subtitle {
  margin-top: 4px;
  margin-bottom: 30px;
  color: #9b8b9a;
  font-size: 12px;
  letter-spacing: 4px;
}

.settings-group {
  margin-bottom: 25px;
}

.settings-row-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 11px;
  color: #bdb1bd;
  font-size: 13px;
  letter-spacing: 1.2px;
}

.settings-row-heading output {
  color: #b889a3;
  font-family: monospace;
  font-size: 11px;
}

.settings-slider {
  width: 100%;
  height: 28px;
  margin: 0;
  padding: 0;
  background: transparent;
  accent-color: #ad7895;
  cursor: pointer;
}

.text-speed-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.text-speed-options button,
.settings-mute-button,
.settings-close-button {
  min-height: 44px;
  margin: 0;
  padding: 9px 12px;
  color: #9d929e;
  background: rgba(10, 9, 13, 0.62);
  border: 1px solid rgba(106, 96, 110, 0.42);
  border-radius: 3px;
  box-shadow: none;
  font-size: 12px;
  letter-spacing: 1px;
}

.text-speed-options button:hover,
.text-speed-options button.selected,
.settings-mute-button:hover,
.settings-close-button:hover {
  color: #e0d2dc;
  background: rgba(72, 49, 66, 0.48);
  border-color: rgba(178, 125, 155, 0.62);
  box-shadow: inset 0 0 18px rgba(160, 105, 137, 0.06);
  transform: none;
}

.text-speed-options button.selected {
  color: #dfc5d3;
}

.settings-mute-button {
  width: 100%;
  margin-top: 4px;
}

.settings-mute-button.muted {
  color: #c795aa;
  border-color: rgba(177, 105, 136, 0.55);
}

.settings-close-button {
  width: 100%;
  margin-top: 12px;
  color: #c4b6c2;
}

@media (max-width: 650px) {
  .settings-open-button {
    top: 8px;
    right: 8px;
    min-width: 84px;
    min-height: 38px;
  }

  .audio-unlock-button {
    bottom: 14px;
    min-height: 44px;
  }

  .settings-panel {
    padding: 12px;
  }

  .settings-dialog {
    max-height: calc(100dvh - 24px);
    padding: 27px 20px 22px;
  }

  .settings-subtitle {
    margin-bottom: 24px;
  }

  .settings-group {
    margin-bottom: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .settings-panel,
  .audio-unlock-button {
    transition: none !important;
  }
}

/* =========================
   記憶碎片 QTE
========================= */

.settings-help-button {
  width: 100%;
  min-height: 44px;
  margin: 0 0 8px;
  padding: 9px 12px;
  color: #a99daa;
  background: rgba(10, 9, 13, 0.48);
  border: 1px solid rgba(106, 96, 110, 0.34);
  border-radius: 3px;
  box-shadow: none;
  font-size: 12px;
  letter-spacing: 1px;
}

.settings-help-button:hover {
  color: #dfd1dc;
  background: rgba(65, 46, 61, 0.42);
  border-color: rgba(168, 121, 149, 0.54);
  transform: none;
}

.tutorial-panel {
  position: fixed;
  inset: 0;
  z-index: 40000;
  display: grid;
  place-items: center;
  padding: 20px;
  visibility: hidden;
  opacity: 0;
  transition: opacity 260ms ease, visibility 260ms ease;
}

.tutorial-panel.show {
  visibility: visible;
  opacity: 1;
}

.tutorial-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 5, 8, 0.74);
  backdrop-filter: blur(4px);
}

.tutorial-dialog {
  position: relative;
  width: min(460px, 100%);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  padding: 32px 34px 28px;
  color: #d9d0d8;
  background:
    linear-gradient(145deg, rgba(31, 25, 35, 0.985), rgba(12, 12, 17, 0.985));
  border: 1px solid rgba(154, 123, 146, 0.45);
  border-radius: 4px;
  box-shadow:
    0 26px 70px rgba(0, 0, 0, 0.56),
    inset 0 0 38px rgba(137, 91, 122, 0.045);
  transform: translateY(8px) scale(0.99);
  transition: transform 260ms ease;
}

.tutorial-panel.show .tutorial-dialog {
  transform: translateY(0) scale(1);
}

.tutorial-kicker {
  margin-bottom: 7px;
  color: #7f7180;
  font-family: monospace;
  font-size: 8px;
  letter-spacing: 3px;
}

.tutorial-dialog h2 {
  margin: 0 0 26px;
  color: #e2d8e0;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 5px;
  text-align: left;
}

.tutorial-content {
  display: grid;
  gap: 17px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  color: #c7bdc6;
  font-size: 14px;
  line-height: 1.85;
  letter-spacing: 0.7px;
}

.tutorial-content li {
  position: relative;
  padding-left: 20px;
}

.tutorial-content li::before {
  content: "・";
  position: absolute;
  left: 0;
  color: #b9829f;
}

.tutorial-confirm-button {
  width: 100%;
  min-height: 48px;
  margin: 0;
  padding: 11px 16px;
  color: #e0d1da;
  background: rgba(85, 52, 72, 0.38);
  border: 1px solid rgba(184, 127, 157, 0.62);
  border-radius: 3px;
  box-shadow: none;
  font-size: 13px;
  letter-spacing: 2px;
}

.tutorial-confirm-button:hover {
  color: #f0e6ec;
  background: rgba(106, 62, 85, 0.52);
  border-color: rgba(207, 148, 178, 0.78);
  transform: none;
}

.tutorial-panel.is-compact .tutorial-dialog {
  width: min(390px, 100%);
}

.tutorial-panel.is-compact .tutorial-content {
  margin-bottom: 24px;
}

@media (max-width: 650px) {
  .settings-help-button {
    min-height: 48px;
  }

  .tutorial-panel {
    padding:
      calc(12px + env(safe-area-inset-top))
      12px
      calc(12px + env(safe-area-inset-bottom));
  }

  .tutorial-dialog {
    width: 100%;
    max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding: 27px 20px 22px;
    box-sizing: border-box;
  }

  .tutorial-dialog h2 {
    margin-bottom: 22px;
    font-size: 20px;
    letter-spacing: 4px;
  }

  .tutorial-content {
    gap: 14px;
    font-size: 14px;
    line-height: 1.75;
  }

  .tutorial-confirm-button {
    min-height: 52px;
  }
}

@media (hover: none), (pointer: coarse) {
  .settings-help-button:hover {
    color: #a99daa;
    background: rgba(10, 9, 13, 0.48);
    border-color: rgba(106, 96, 110, 0.34);
  }

  .settings-help-button:active:not(:disabled),
  .tutorial-confirm-button:active:not(:disabled) {
    transform: scale(0.985);
    filter: brightness(1.1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tutorial-panel,
  .tutorial-dialog {
    transition: none;
  }
}

.memory-qte {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 24px;
  visibility: hidden;
  opacity: 0;
  background: rgba(6, 7, 12, 0.9);
  backdrop-filter: blur(7px);
  transition: opacity 320ms ease, visibility 320ms ease;
}

.memory-qte.show {
  visibility: visible;
  opacity: 1;
}

.memory-qte-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at center, rgba(91, 76, 112, 0.16), transparent 38%),
    radial-gradient(circle at center, transparent 24%, rgba(0, 0, 0, 0.76) 100%);
  animation: memoryQteBreath 3.4s ease-in-out infinite;
}

.memory-qte-content {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 34px 22px 28px;
  text-align: center;
}

.memory-qte-label {
  position: absolute;
  top: 34px;
  left: 50%;
  transform: translateX(-50%);
  font-family: monospace;
  font-size: 9px;
  letter-spacing: 4px;
  color: rgba(173, 160, 190, 0.52);
}

.memory-fragment {
  position: absolute;
  width: clamp(220px, 62vw, 330px);
  min-width: 0;
  min-height: 76px;
  padding: 18px 26px;
  color: #d8c9de;
  background: rgba(31, 25, 40, 0.6);
  border: 1px solid rgba(177, 148, 190, 0.36);
  border-radius: 3px;
  box-shadow:
    inset 0 0 28px rgba(119, 88, 137, 0.07),
    0 0 24px rgba(107, 78, 127, 0.1);
  font-size: clamp(17px, 4vw, 23px);
  letter-spacing: 0.12em;
  cursor: pointer;
  touch-action: manipulation;
}

.memory-fragment:empty {
  visibility: hidden;
}

.memory-fragment.fragment-enter {
  animation: memoryFragmentFade 1.8s linear both;
}

.memory-fragment.caught {
  animation: memoryFragmentCaught 460ms ease-out both;
}

.memory-fragment.missed {
  animation: memoryFragmentMissed 500ms steps(3, end) both;
}

.memory-qte-feedback {
  position: absolute;
  bottom: 30px;
  left: 50%;
  width: min(520px, calc(100vw - 36px));
  transform: translateX(-50%);
  min-height: 22px;
  color: rgba(190, 178, 199, 0.7);
  font-size: 12px;
  letter-spacing: 0.16em;
}

@keyframes memoryQteBreath {
  50% { opacity: 0.72; }
}

@keyframes memoryFragmentFade {
  0% {
    opacity: 0;
    filter: blur(7px);
    transform: scale(0.98);
  }
  24% {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }
  78% {
    opacity: 0.88;
  }
  92% {
    opacity: 0.35;
    filter: blur(1px);
    transform: translateX(1px);
  }
  100% {
    opacity: 0;
    filter: blur(4px);
    transform: translateX(-2px);
  }
}

@keyframes memoryFragmentCaught {
  45% {
    color: #f0d5e2;
    border-color: rgba(214, 148, 179, 0.7);
    box-shadow: 0 0 30px rgba(183, 112, 151, 0.24);
    transform: scale(1.025);
  }
  100% {
    opacity: 0;
    transform: scale(1.04);
  }
}

@keyframes memoryFragmentMissed {
  30% {
    color: #8e8794;
    transform: translateX(-2px);
    text-shadow: 2px 0 rgba(167, 104, 137, 0.28), -2px 0 rgba(83, 123, 146, 0.25);
  }
  60% { transform: translateX(2px); }
  100% {
    opacity: 0;
    filter: blur(3px);
  }
}

@media (max-width: 650px) {
  .memory-qte {
    padding: 18px;
  }

  .memory-qte-content {
    min-height: 100%;
    padding-inline: 8px;
  }

  .memory-fragment {
    width: min(260px, 68vw);
    min-height: 72px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .memory-qte,
  .memory-qte-vignette,
  .memory-fragment {
    animation: none !important;
    transition: none !important;
  }

  .memory-fragment.fragment-enter {
    opacity: 1;
    filter: none;
  }
}

/* =========================
   周目色調與關鍵詞
========================= */

body.playthrough-first {
  --loop-accent: #b8869e;
  --loop-accent-soft: rgba(184, 134, 158, 0.16);
}

body.playthrough-second {
  --loop-accent: #a38bb9;
  --loop-accent-soft: rgba(125, 102, 151, 0.2);
}

body.playthrough-third {
  --loop-accent: #8297a9;
  --loop-accent-soft: rgba(91, 117, 139, 0.22);
}

/* 正式版周目不依賴舊 DEMO 的 secondPlaythrough / thirdPlaythrough 全域值。 */
body.formal-loop1 {
  --loop-accent: #b8869e;
  --loop-accent-soft: rgba(184, 134, 158, 0.16);
}

body.formal-loop2 {
  --loop-accent: #a38bb9;
  --loop-accent-soft: rgba(125, 102, 151, 0.2);
}

body.formal-loop3 {
  --loop-accent: #8297a9;
  --loop-accent-soft: rgba(91, 117, 139, 0.22);
}

body.formal-loop4 {
  --loop-accent: #8b879c;
  --loop-accent-soft: rgba(92, 88, 112, 0.24);
}

body.formal-epilogue {
  --loop-accent: #b69a72;
  --loop-accent-soft: rgba(182, 154, 114, 0.18);
}

body.playthrough-second .game-status,
body.playthrough-second .speaker-name {
  border-color: rgba(163, 139, 185, 0.4);
  color: #b9a7c9;
}

body.playthrough-third .game-status,
body.playthrough-third .speaker-name,
body.formal-loop3 .game-status,
body.formal-loop3 .speaker-name {
  border-color: rgba(130, 151, 169, 0.42);
  color: #a9becd;
}

body.formal-loop2 .game-status,
body.formal-loop2 .speaker-name {
  border-color: rgba(163, 139, 185, 0.4);
  color: #b9a7c9;
}

body.formal-loop4 .game-status,
body.formal-loop4 .speaker-name {
  border-color: rgba(139, 135, 156, 0.42);
  color: #aaa6b9;
}

body.formal-epilogue .game-status,
body.formal-epilogue .speaker-name {
  border-color: rgba(182, 154, 114, 0.46);
  color: #c9b38f;
}

body.playthrough-second .dialogue {
  box-shadow: 0 18px 48px rgba(26, 17, 38, 0.25);
}

body.playthrough-third .dialogue {
  box-shadow: 0 18px 48px rgba(12, 25, 36, 0.28);
}

body.formal-loop2 .dialogue {
  box-shadow: 0 18px 48px rgba(26, 17, 38, 0.25);
}

body.formal-loop3 .dialogue {
  box-shadow: 0 18px 48px rgba(12, 25, 36, 0.28);
}

body.formal-loop4 .dialogue {
  box-shadow: 0 20px 52px rgba(15, 15, 27, 0.32);
}

body.formal-epilogue .dialogue {
  box-shadow: 0 18px 48px rgba(76, 54, 30, 0.2);
}

.dialogue-keyword {
  position: relative;
  font-weight: 600;
  text-shadow: 0 0 12px currentColor;
}

.memory-keyword {
  color: #c3a8cf;
}

.name-keyword {
  color: #ce8fa9;
}

.warning-keyword {
  color: #ba8790;
  letter-spacing: 0.035em;
}

.soft-memory-glitch {
  animation: softMemoryGlitch 520ms steps(2, end) both;
}

@keyframes softMemoryGlitch {
  0%, 100% {
    transform: translate(0);
    filter: none;
  }

  28% {
    transform: translateX(-1px);
    text-shadow: 1px 0 rgba(180, 118, 153, 0.35), -1px 0 rgba(108, 139, 161, 0.28);
  }

  52% {
    transform: translateX(1px);
    filter: brightness(1.07);
  }

  72% {
    transform: translate(0);
    text-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .soft-memory-glitch {
    animation: none !important;
  }
}

/* =========================
   劇情場景色調
   正常日常保持柔和，只有不安場景稍微收冷。
========================= */

body {
  transition: background-color 900ms ease, color 500ms ease;
}

/* =========================
   BGM 控制
========================= */

.audio-controls {
  position: fixed;
  top: 14px;
  right: 16px;
  z-index: 20000;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  color: rgba(180, 169, 184, 0.72);
  background: rgba(8, 8, 12, 0.74);
  border: 1px solid rgba(108, 99, 113, 0.3);
  border-radius: 3px;
  backdrop-filter: blur(8px);
  box-shadow: 0 7px 20px rgba(0, 0, 0, 0.2);
}

.audio-toggle {
  min-width: auto;
  min-height: 28px;
  margin: 0;
  padding: 3px 7px;
  color: #aaa0ad;
  background: transparent;
  border: 0;
  box-shadow: none;
  font-family: monospace;
  font-size: 9px;
  letter-spacing: 1px;
}

.audio-toggle:hover {
  color: #d0c2d0;
  background: rgba(255, 255, 255, 0.035);
  border: 0;
  box-shadow: none;
  transform: none;
}

.audio-toggle.muted {
  color: #746d78;
}

.audio-volume-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: monospace;
  font-size: 8px;
  letter-spacing: 1px;
}

.audio-volume-wrap input {
  width: 72px;
  height: 3px;
  margin: 0;
  padding: 0;
  accent-color: #a97891;
  cursor: pointer;
}

@media (max-width: 650px) {
  .audio-controls {
    top: 8px;
    right: 8px;
    gap: 5px;
    padding: 5px 7px;
  }

  .audio-volume-wrap span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .audio-volume-wrap input {
    width: 54px;
  }
}

/* =========================
   SCENE BACKGROUND CROSSFADE
========================= */

.scene-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(155deg, #dfdcd6 0%, #d0ccd0 54%, #c2bdc3 100%);
  transition: opacity 700ms ease;
}

.scene-background-layer {
  position: absolute;
  inset: -4%;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1100ms ease-in-out;
  will-change: opacity;
}

.scene-background-layer.is-active {
  opacity: 1;
}

.scene-background-layer[data-scene-mood="neutral"] {
  background:
    radial-gradient(circle at 72% 18%, rgba(183, 148, 165, 0.16), transparent 38%),
    linear-gradient(155deg, #e3e0da 0%, #d3cfd1 52%, #c5c0c6 100%);
}

.scene-background-layer[data-scene-mood="warm"] {
  background:
    radial-gradient(circle at 70% 20%, rgba(183, 119, 142, 0.2), transparent 40%),
    linear-gradient(145deg, #ded7d4 0%, #d0c4c8 54%, #beb5bf 100%);
}

.scene-background-layer[data-scene-mood="daylight"] {
  background:
    radial-gradient(circle at 30% 16%, rgba(194, 163, 139, 0.18), transparent 42%),
    linear-gradient(160deg, #e1ddd6 0%, #d1ccd0 50%, #c1bbc5 100%);
}

.scene-background-layer[data-scene-mood="quiet"] {
  background:
    radial-gradient(circle at 68% 17%, rgba(125, 113, 150, 0.14), transparent 43%),
    linear-gradient(158deg, #d5d2d2 0%, #c5c1c8 52%, #b3afb9 100%);
}

.scene-background-layer[data-scene-mood="uneasy"] {
  background:
    radial-gradient(circle at 52% 24%, rgba(96, 75, 111, 0.15), transparent 38%),
    linear-gradient(162deg, #c5c2c1 0%, #aba8ae 52%, #908d96 100%);
}

.scene-background.memory-color-shift {
  animation: sceneMemoryColorShift 520ms ease-out;
}

@keyframes sceneMemoryColorShift {
  0%, 100% {
    filter: none;
  }

  30% {
    filter: hue-rotate(-13deg) saturate(0.58) brightness(0.93);
  }

  58% {
    filter: hue-rotate(8deg) saturate(0.72) brightness(0.97);
  }
}

body > .game {
  position: relative;
  z-index: 1;
}

body.secret-mode .scene-background,
body.memory-error-mode .scene-background {
  opacity: 0;
}

.game::before {
  content: "";
  display: none;
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 900ms ease, background 900ms ease;
}

body.scene-warm .game::before {
  opacity: 0.5;
  background:
    radial-gradient(circle at 72% 24%, rgba(133, 76, 93, 0.14), transparent 43%),
    linear-gradient(145deg, rgba(63, 45, 71, 0.12), transparent 65%);
}

body.scene-daylight .game::before {
  opacity: 0.46;
  background:
    radial-gradient(circle at 30% 18%, rgba(154, 127, 115, 0.11), transparent 42%),
    linear-gradient(160deg, rgba(79, 66, 91, 0.1), transparent 62%);
}

body.scene-quiet .game::before {
  opacity: 0.42;
  background:
    radial-gradient(circle at 68% 18%, rgba(102, 91, 130, 0.1), transparent 45%),
    linear-gradient(180deg, rgba(44, 45, 62, 0.08), transparent 70%);
}

body.scene-uneasy .game::before {
  opacity: 0.62;
  background:
    radial-gradient(circle at 50% 30%, rgba(83, 65, 100, 0.13), transparent 40%),
    linear-gradient(180deg, rgba(12, 13, 19, 0.02), rgba(17, 14, 24, 0.22));
}

body.scene-uneasy .dialogue {
  border-color: rgba(155, 125, 164, 0.3);
  box-shadow: 0 16px 42px rgba(5, 4, 10, 0.28);
}

body.scene-uneasy .game-status {
  color: rgba(205, 190, 211, 0.72);
}

@media (prefers-reduced-motion: reduce) {
  body,
  .game::before,
  .scene-background,
  .scene-background-layer {
    transition: none;
  }

  .scene-background.memory-color-shift {
    animation: none;
  }
}

/* =========================
   封面：安靜的戀愛／記憶異常
========================= */

.title-screen {
  isolation: isolate;
  background:
    radial-gradient(
      circle at 72% 38%,
      rgba(102, 48, 78, 0.2),
      transparent 32%
    ),
    radial-gradient(
      circle at 26% 70%,
      rgba(51, 39, 72, 0.22),
      transparent 38%
    ),
    repeating-linear-gradient(
      0deg,
      #0d0e12 0,
      #0d0e12 2px,
      #111218 2px,
      #111218 4px
    );
}

.title-screen::before {
  content: "";
  position: absolute;
  inset: -18%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse at center,
      rgba(126, 61, 88, 0.12),
      transparent 55%
    );
  animation: titleAmbientBreath 9s ease-in-out infinite alternate;
}

.title-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  box-shadow: inset 0 0 160px rgba(0, 0, 0, 0.88);
}

@keyframes titleAmbientBreath {
  from {
    opacity: 0.45;
    transform: scale(0.98);
  }

  to {
    opacity: 0.85;
    transform: scale(1.03);
  }
}

.title-memory-ghost {
  position: absolute;
  top: 18%;
  left: calc(50% + 150px);
  width: 150px;
  height: 58%;
  z-index: -1;
  pointer-events: none;
  opacity: 0.16;
  filter: blur(5px);
  background:
    radial-gradient(
      circle at 50% 13%,
      rgba(222, 205, 215, 0.45) 0 12%,
      transparent 13%
    ),
    linear-gradient(
      102deg,
      transparent 20%,
      rgba(179, 151, 169, 0.3) 21% 70%,
      transparent 71%
    );
  clip-path: polygon(32% 0, 68% 0, 82% 22%, 74% 100%, 22% 100%, 16% 24%);
  animation: titleGhostDrift 11s ease-in-out infinite alternate;
}

@keyframes titleGhostDrift {
  from {
    opacity: 0.1;
    transform: translateX(-3px);
  }

  to {
    opacity: 0.18;
    transform: translateX(3px);
  }
}

.title-content {
  position: relative;
  overflow: hidden;
  width: min(720px, 92vw);
  min-height: min(620px, calc(100dvh - 60px));
  padding: 64px 58px 54px;
  border-color: rgba(213, 204, 213, 0.66);
  background:
    linear-gradient(
      145deg,
      rgba(25, 23, 31, 0.92),
      rgba(13, 14, 19, 0.95)
    );
  box-shadow:
    10px 10px 0 rgba(4, 4, 7, 0.92),
    0 24px 70px rgba(0, 0, 0, 0.38);
}

.title-content::before {
  content: "";
  position: absolute;
  top: 18px;
  right: 18px;
  width: 42px;
  height: 1px;
  background: rgba(177, 107, 137, 0.58);
  box-shadow:
    -8px 5px 0 rgba(177, 107, 137, 0.2),
    -20px 10px 0 rgba(177, 107, 137, 0.1);
}

.title-kicker {
  margin-bottom: 36px;
  font-family: monospace;
  font-size: 10px;
  letter-spacing: 4px;
  color: #77717d;
  animation: titleFadeIn 0.8s ease-out both;
}

.title-main {
  position: relative;
  font-size: clamp(42px, 6vw, 58px);
  line-height: 1.18;
  letter-spacing: 12px;
  color: #e8e3e6;
  text-shadow:
    4px 4px 0 #4c4851,
    0 0 28px rgba(204, 154, 177, 0.08);
  animation: titleFadeIn 0.9s 0.1s ease-out both;
}

.title-love {
  color: #e4d0d8;
}

.title-demo {
  margin-top: 12px;
  padding-left: 7px;
  font-size: 12px;
  letter-spacing: 9px;
  color: #9b929e;
  animation: titleFadeIn 0.9s 0.18s ease-out both;
}

.title-subtitle {
  position: relative;
  margin-top: 34px;
  margin-bottom: 18px;
  font-size: 10px;
  letter-spacing: 6px;
  color: #8b838e;
  animation: titleFadeIn 0.9s 0.28s ease-out both;
}

.title-subtitle::after {
  content: attr(data-memory-text);
  position: absolute;
  inset: 0;
  color: rgba(181, 117, 144, 0.75);
  opacity: 0;
  pointer-events: none;
  animation: titleMemorySlip 13s steps(1, end) infinite;
}

@keyframes titleMemorySlip {
  0%,
  91%,
  93%,
  100% {
    opacity: 0;
    transform: translateX(0);
  }

  92% {
    opacity: 0.72;
    transform: translateX(2px);
  }
}

.title-tagline {
  margin: 0 0 26px;
  color: #c7bbc2;
  font-size: 14px;
  letter-spacing: 3px;
  opacity: 0.82;
  animation: titleFadeIn 0.9s 0.38s ease-out both;
}

.title-character-data {
  display: flex;
  gap: 18px;
  margin-bottom: 30px;
  font-family: monospace;
  font-size: 9px;
  letter-spacing: 2px;
  color: #5f5b64;
  animation: titleFadeIn 0.9s 0.46s ease-out both;
}

.title-screen .start-button {
  width: 260px;
  margin-bottom: 14px;
  border-color: rgba(181, 117, 144, 0.72);
  color: #eee7eb;
  background:
    linear-gradient(
      90deg,
      rgba(116, 55, 81, 0.2),
      rgba(255, 255, 255, 0.015)
    );
  box-shadow:
    5px 5px 0 #07070a,
    0 0 24px rgba(148, 73, 105, 0.08);
  animation: titleFadeIn 0.9s 0.56s ease-out both;
}

.title-screen .start-button::before {
  opacity: 0.48;
  color: #c58ca4;
  animation: titleCursor 1.3s steps(2, end) infinite;
}

.title-screen .start-button:hover {
  background: #ded3d8;
  color: #1a151b;
  border-color: #ded3d8;
  box-shadow:
    2px 2px 0 #07070a,
    0 0 30px rgba(188, 112, 145, 0.2);
}

@keyframes titleCursor {
  50% {
    opacity: 0.12;
  }
}

.title-memory-status {
  margin-top: 2px;
  font-family: monospace;
  font-size: 8px;
  letter-spacing: 2px;
  color: #554f59;
  animation: titleFadeIn 0.9s 0.68s ease-out both;
}

.title-screen .reset-data-button {
  margin-top: 30px;
  margin-bottom: 0;
  color: #8d838f;
  background: rgba(10, 9, 14, 0.78);
  border-color: #514a56;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.025),
    0 5px 16px rgba(0, 0, 0, 0.24);
  opacity: 0.94;
}

.title-screen .reset-data-button:hover {
  color: #c1b5c2;
  background: rgba(24, 20, 28, 0.92);
  border-color: #786b7c;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 6px 20px rgba(0, 0, 0, 0.32),
    0 0 14px rgba(164, 118, 151, 0.08);
  opacity: 1;
}

@keyframes titleFadeIn {
  from {
    opacity: 0;
    transform: translateY(7px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 650px) {
  .title-screen {
    padding: 14px;
  }

  .title-content {
    width: 100%;
    min-height: min(620px, calc(100dvh - 28px));
    padding: 42px 22px 34px;
  }

  .title-kicker {
    margin-bottom: 28px;
    font-size: 8px;
    letter-spacing: 2.5px;
  }

  .title-main {
    font-size: clamp(30px, 9vw, 40px);
    letter-spacing: 6px;
  }

  .title-demo {
    font-size: 10px;
    letter-spacing: 7px;
  }

  .title-subtitle {
    margin-top: 27px;
    margin-bottom: 16px;
    font-size: 8px;
    letter-spacing: 3.5px;
  }

  .title-tagline {
    margin-bottom: 22px;
    font-size: 13px;
    letter-spacing: 2px;
  }

  .title-character-data {
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-bottom: 26px;
    font-size: 8px;
  }

  .title-screen .start-button {
    width: min(270px, 100%);
    min-height: 56px;
  }

  .title-memory-ghost {
    top: 21%;
    left: 58%;
    width: 110px;
    height: 42%;
    opacity: 0.1;
  }
}

@media (max-height: 650px) {
  .title-content {
    min-height: auto;
    padding-top: 34px;
    padding-bottom: 30px;
  }

  .title-kicker {
    margin-bottom: 20px;
  }

  .title-character-data {
    margin-bottom: 20px;
  }

  .title-screen .reset-data-button {
    margin-top: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .title-screen::before,
  .title-memory-ghost,
  .title-kicker,
  .title-main,
  .title-demo,
  .title-subtitle,
  .title-subtitle::after,
  .title-tagline,
  .title-character-data,
  .title-screen .start-button,
  .title-screen .start-button::before,
  .title-memory-status {
    animation: none !important;
  }
}

/* =========================
   MOBILE TOUCH POLISH
========================= */

.buttons button {
  cursor: pointer;
  transition:
    color 130ms ease,
    background-color 130ms ease,
    border-color 130ms ease,
    box-shadow 110ms ease,
    transform 90ms ease;
}

.buttons button:disabled {
  cursor: default;
  opacity: 0.56;
  filter: grayscale(0.25);
}

.buttons .continue-button {
  position: relative;
}

.buttons .continue-button.is-typing {
  opacity: 0.78;
  border-color: #4c4a4a;
}

.buttons .continue-button.is-ready {
  opacity: 1;
  border-left-color: var(--loop-accent, #b8869e);
}

.buttons .continue-button.is-ready::after {
  content: "";
  position: absolute;
  right: 15px;
  bottom: 11px;
  width: 5px;
  height: 5px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.5;
  animation: continueReadyPulse 1.4s ease-in-out infinite;
}

@keyframes continueReadyPulse {
  50% {
    transform: translateY(2px) rotate(45deg);
    opacity: 0.9;
  }
}

button {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
}

button:focus-visible,
.settings-slider:focus-visible {
  outline: 2px solid rgba(205, 145, 177, 0.82);
  outline-offset: 3px;
}

@media (hover: none), (pointer: coarse) {
  .buttons button,
  .start-button,
  .reset-data-button,
  .settings-open-button,
  .audio-unlock-button,
  .text-speed-options button,
  .settings-mute-button,
  .settings-close-button {
    transition:
      transform 90ms ease-out,
      filter 90ms ease-out,
      box-shadow 110ms ease-out,
      border-color 120ms ease-out,
      background-color 120ms ease-out;
  }

  .buttons button:hover {
    color: #252525;
    background: #f4f0e8;
    transform: none;
    box-shadow: 5px 5px 0 #777;
  }

  .title-screen .start-button:hover {
    color: #eee7eb;
    background: linear-gradient(
      90deg,
      rgba(116, 55, 81, 0.2),
      rgba(255, 255, 255, 0.015)
    );
    border-color: rgba(181, 117, 144, 0.72);
    transform: none;
    box-shadow:
      5px 5px 0 #07070a,
      0 0 24px rgba(148, 73, 105, 0.08);
  }

  .title-screen .reset-data-button:hover {
    color: #8d838f;
    background: rgba(10, 9, 14, 0.78);
    border-color: #514a56;
    transform: none;
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.025),
      0 5px 16px rgba(0, 0, 0, 0.24);
  }

  .settings-open-button:hover {
    color: #9f939f;
    background: rgba(8, 8, 12, 0.78);
    border-color: rgba(116, 104, 119, 0.42);
    transform: none;
    filter: none;
  }

  .audio-unlock-button:hover {
    color: #aa96a5;
    border-color: rgba(157, 113, 138, 0.44);
  }

  .text-speed-options button:not(.selected):hover,
  .settings-mute-button:not(.muted):hover,
  .settings-close-button:hover {
    color: #9d929e;
    background: rgba(10, 9, 13, 0.62);
    border-color: rgba(106, 96, 110, 0.42);
    box-shadow: none;
    transform: none;
    filter: none;
  }

  .settings-close-button:hover {
    color: #c4b6c2;
  }

  .buttons button:active:not(:disabled),
  .start-button:active:not(:disabled),
  .reset-data-button:active:not(:disabled),
  .settings-open-button:active:not(:disabled),
  .text-speed-options button:active:not(:disabled),
  .settings-mute-button:active:not(:disabled),
  .settings-close-button:active:not(:disabled) {
    transform: translateY(1px) scale(0.985);
    filter: brightness(1.12);
  }

  .buttons button:active:not(:disabled) {
    box-shadow: 1px 1px 0 #777;
  }

  .buttons .continue-button,
  .buttons .continue-button:hover,
  .buttons .continue-button:focus {
    color: #252525;
    background: #f4f0e8;
    transform: none;
    filter: none;
    box-shadow: 5px 5px 0 #777;
  }

  .buttons .continue-button:active:not(:disabled) {
    transform: none;
    filter: brightness(0.92);
    box-shadow: 2px 2px 0 #777;
    transition-duration: 60ms;
  }

  .title-screen .start-button:active:not(:disabled) {
    box-shadow:
      1px 1px 0 #07070a,
      0 0 22px rgba(188, 112, 145, 0.18);
  }

  .audio-unlock-button:active:not(:disabled) {
    transform: translateX(-50%) translateY(1px) scale(0.985);
    filter: brightness(1.12);
  }
}

@media (max-width: 650px) {
  .game {
    padding-top: calc(58px + env(safe-area-inset-top));
  }

  .dialogue {
    min-height: clamp(180px, 32dvh, 210px);
  }

  .buttons button {
    min-height: 54px;
    padding: 13px 16px;
  }

  .settings-open-button {
    top: calc(8px + env(safe-area-inset-top));
    min-width: 88px;
    min-height: 44px;
  }

  .audio-unlock-button {
    bottom: calc(14px + env(safe-area-inset-bottom));
    min-height: 48px;
  }

  .title-content {
    padding-bottom: calc(88px + env(safe-area-inset-bottom));
  }

  .title-screen .start-button {
    min-height: 58px;
  }

  .title-screen .reset-data-button {
    min-height: 46px;
    padding: 11px 17px;
  }

  .settings-dialog {
    width: 100%;
    box-sizing: border-box;
    overscroll-behavior: contain;
  }

  .settings-slider {
    height: 36px;
  }

  .text-speed-options button,
  .settings-mute-button,
  .settings-close-button {
    min-height: 48px;
  }
}

@media (max-width: 380px) {
  .text-speed-options {
    gap: 6px;
  }

  .text-speed-options button {
    padding-inline: 7px;
    font-size: 11px;
  }

  .settings-dialog {
    padding-inline: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .buttons .continue-button.is-ready::after {
    animation: none;
  }
}

/* =========================
   TITLE MENU ALIGNMENT
========================= */
.title-menu {
  display: grid;
  width: min(280px, 100%);
  gap: 11px;
  margin: 0 auto;
}

.title-menu .start-button,
.title-menu .ending-records-open-button {
  width: 100%;
  max-width: none;
  margin: 0;
  box-sizing: border-box;
}

.title-menu .start-button {
  min-height: 54px;
}

.title-menu .ending-records-open-button {
  min-height: 54px;
}

.title-menu .ending-records-open-button::before {
  content: none;
  display: none;
}

.title-screen .title-memory-status {
  margin-top: 14px;
}

.title-screen .reset-data-button {
  min-width: 168px;
  margin: 22px auto 0;
}

@media (max-width: 650px) {
  .title-menu {
    width: min(270px, 100%);
    gap: 10px;
  }

  .title-menu .start-button {
    min-height: 58px;
  }

  .title-menu .ending-records-open-button {
    min-height: 58px;
  }

  .title-screen .reset-data-button {
    margin-top: 18px;
  }
}

/* 功能列最終狀態：覆蓋既有 SETTINGS 單獨樣式，確保四顆按鈕一致。 */
.system-quick-controls .settings-open-button:hover,
.system-quick-controls .system-quick-button:hover,
.system-quick-controls .settings-open-button:focus-visible,
.system-quick-controls .system-quick-button:focus-visible,
.system-quick-controls .system-quick-button.is-active {
  color: #e0cbd9;
  background: var(--system-control-bg-hover);
  border-color: var(--system-control-border-active);
  box-shadow: 0 7px 22px rgba(0, 0, 0, 0.16);
  transform: none;
  filter: none;
}

.system-quick-controls .settings-open-button:active:not(:disabled),
.system-quick-controls .system-quick-button:active:not(:disabled) {
  color: #eadce5;
  background: var(--system-control-bg-hover);
  border-color: var(--system-control-border-active);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.14);
  transform: translateY(1px) scale(0.985);
  filter: brightness(1.04);
}

@media (hover: none), (pointer: coarse) {
  .system-quick-controls .settings-open-button:hover,
  .system-quick-controls .system-quick-button:hover {
    color: var(--system-control-text);
    background: var(--system-control-bg);
    border-color: var(--system-control-border);
    box-shadow: 0 7px 22px rgba(0, 0, 0, 0.16);
  }

  .system-quick-controls .system-quick-button.is-active {
    color: #e0cbd9;
    background: var(--system-control-bg-hover);
    border-color: var(--system-control-border-active);
  }
}