@font-face {
  font-family: "Cubic 11";
  src: url("assets/fonts/Cubic_11.woff2") format("woff2");
  font-display: swap;
}
:root {
  --z-stage-bg: 0;
  --z-stage-screen: 10;
  --z-stage-shell: 20;
  --z-stage-props: 30;
  --z-overlay: 40;
  --z-portrait: 50;
  --z-dialog: 60;
  --z-options: 70;
  --scanline-alpha: 0.055;
  --scanline-period: 4px;
  /* === Task 1: Design Tokens === */
  /* 螢幕 */
  --crt-black: #0A0D12;
  --osd-green: #3DF56B;
  --signal-amber: #FFC857;
  /* PS 手把四鍵 */
  --btn-tri: #40C46A;
  --btn-cir: #E8484F;
  --btn-crs: #4FA3E8;
  --btn-sqr: #E87EB0;
  /* VN 對話盒 */
  --dlg-bg: rgba(10, 16, 46, 0.88);
  --dlg-border: #E8E9F0;
  --dlg-ink: #FFFFFF;
  /* 機殼（Task 3 使用） */
  --cabinet-dark: #1B1D20;
  --cabinet-mid: #2E3136;
  --cabinet-hi: #43474D;
  --console-grey: #C8C4BC;
  --report-paper: #f2efe4;
  --report-ink: #20242a;
  --report-muted: #5d615f;
  --report-rule: #9c9788;
  /* 舊有保留變數 */
  --bg: #1a1c2c; --panel: #2b2f4c; --ink: #f4f4f4;
  --accent: #ffcd75; --good: #38b764; --warn: #ef7d57;
  --font: "Cubic 11", "Microsoft JhengHei", "PingFang TC", monospace;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--crt-black); color: var(--ink);
  font-family: var(--font); image-rendering: pixelated; }

/* === Task 3: 分層 CRT 舞台 === */
.console-stage {
  position: relative;
  width: min(100%, 1152px);
  aspect-ratio: 3 / 2;
  margin-inline: auto;
  overflow: hidden;
  background: #090b0e;
}

.stage-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.stage-room { z-index: var(--z-stage-bg); }
.stage-crt-shell { z-index: var(--z-stage-shell); }
.stage-console,
.stage-controller { z-index: var(--z-stage-props); }

.game-viewport {
  position: absolute;
  left: 20.7%;
  top: 12.8%;
  width: 45.5%;
  height: 46.5%;
  aspect-ratio: 4 / 3;
  z-index: var(--z-stage-screen);
  overflow: hidden;
  border-radius: 3%;
  background: var(--crt-black);
  box-shadow:
    inset 0 0 40px rgba(0, 0, 0, 0.6),
    inset 0 0 4px rgba(180, 200, 255, 0.08);
}

.tv-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-overlay);
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0 calc(var(--scanline-period) - 1px),
      rgb(0 0 0 / var(--scanline-alpha)) calc(var(--scanline-period) - 1px) var(--scanline-period)
    ),
    radial-gradient(ellipse at center, transparent 60%, rgba(0, 0, 0, 0.42));
}

.music-toggle {
  position: absolute;
  top: -7px;
  left: 50%;
  right: auto;
  z-index: calc(var(--z-options) + 1);
  min-width: 52px;
  min-height: 44px;
  padding: 0 6px;
  border: 0;
  background: transparent;
  color: var(--osd-green);
  font: 12px/1 var(--font);
  letter-spacing: 0;
  cursor: pointer;
  transform: translateX(-50%);
}

.music-toggle[aria-pressed="false"] {
  color: #c4cbd6;
}

.music-toggle:focus-visible { outline-offset: -5px; }
.music-toggle:active { transform: translate(-50%, 2px); }

.game-viewport:has(#screen-ending.active) .music-toggle {
  position: fixed;
  top: 8px;
  left: auto;
  right: 8px;
  min-width: 56px;
  border: 1px solid var(--report-ink);
  background: var(--report-paper);
  color: var(--report-ink);
  transform: none;
}

@media (max-width: 480px) {
  .music-toggle { font-size: 12px; }
}

.crt-debug-control {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 10001;
  display: grid;
  grid-template-columns: auto minmax(120px, 220px) 4ch;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--osd-green);
  background: rgb(10 13 18 / 0.94);
  color: var(--osd-green);
  font: 12px/1.4 var(--font);
}
#app { width: 100%; height: 100%; padding: 12px; overflow: auto; }

/* === Task 1: 開機儀式 === */
#boot-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--crt-black);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#btn-boot-start {
  min-width: 156px;
  min-height: 44px;
  padding: 10px 16px;
  border: 2px solid var(--osd-green);
  background: var(--crt-black);
  color: var(--osd-green);
  font: 13px/1.4 var(--font);
  cursor: pointer;
}

#btn-boot-start:hover { background: #132019; }
#btn-boot-start:active { transform: translateY(2px); }

/* TV 白色水平線 */
#boot-line {
  width: 100%;
  height: 3px;
  background: #ffffff;
  transform: scaleX(0);
  transform-origin: center;
}

#boot-screen.boot-running #boot-line {
  animation: bootLineExpand 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

@keyframes bootLineExpand {
  from { transform: scaleX(0); opacity: 1; }
  to   { transform: scaleX(1); opacity: 1; }
}

/* Boot 銘版文字 */
#boot-logo {
  position: absolute;
  text-align: center;
  opacity: 0;
  pointer-events: none;
}

#boot-screen.boot-running #boot-logo {
  animation: bootLogoFade 0.7s ease-out 0.72s both;
}

#boot-logo .boot-brand {
  font-family: var(--font);
  font-size: 13px;
  letter-spacing: 0.25em;
  color: #c8c4bc;
  margin: 0;
  line-height: 1.8;
}

#boot-logo .boot-sub {
  font-family: var(--font);
  font-size: 9px;
  letter-spacing: 0.18em;
  color: #5a6070;
  margin: 4px 0 0;
}

@keyframes bootLogoFade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 開機結束：整個 boot-screen 淡出 */
#boot-screen.boot-done {
  animation: bootScreenOut 0.3s ease-in both;
  pointer-events: none;
}

@keyframes bootScreenOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}
.screen { display: none; }
.screen.active { display: block; min-height: 100%; animation: screenIn 0.18s steps(3) both; }
@keyframes screenIn { from { opacity: 0; } to { opacity: 1; } }
h1 { font-size: 22px; line-height: 1.35; text-align: center; margin: 0; text-shadow: 3px 3px 0 #000; }
.subtitle { text-align: center; font-size: 12px; color: var(--accent); }
.btn-primary, .btn-secondary { display: block; width: 100%; margin: 16px 0;
  padding: 14px; font-family: inherit; font-size: 14px; cursor: pointer;
  border: 3px solid var(--ink); background: var(--panel); color: var(--ink); }
.btn-primary { background: var(--good); color: #1a1c2c; }
.btn-primary:active, .btn-secondary:active { transform: translateY(2px); }
.title-scene.active { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.title-lockup { width: min(100%, 360px); margin-block: auto; }
.title-kicker { margin: 0 0 4px; color: var(--osd-green); font-size: 11px; letter-spacing: 0.18em; }
.title-lockup h1 { font-size: clamp(20px, 4vw, 30px); }
.title-lockup .subtitle { margin: 8px 0 18px; }
.title-lockup .btn-primary,
.title-lockup .btn-secondary { min-height: 44px; margin: 8px 0; padding: 10px 14px; }
.press-start { letter-spacing: 0.08em; }
.disclaimer { width: 100%; font-size: 9px; line-height: 1.6; text-align: center; color: #9aa7bd; margin: 10px 0 0; }

.panel { border: 3px solid var(--ink); background: var(--panel); padding: 12px;
  font-size: 12px; line-height: 2; margin: 16px 0; }
.hint { font-size: 11px; color: #9aa7bd; line-height: 1.8; }
.sex-picker { display: flex; gap: 12px; }
.sex-picker button { flex: 1; min-height: 44px; margin: 8px 0; }
.setup-flow { width: min(100%, 440px); margin: auto; }
.chapter-label { margin: 0 0 8px; color: var(--osd-green); font-size: 10px; letter-spacing: 0.16em; }
.setup-flow h2 { margin: 0; line-height: 1.6; }
.family-brief { border-block: 2px solid var(--ink); padding: 10px 0; font-size: 11px; line-height: 1.7; }
.family-brief p { margin: 5px 0; }
.family-brief__label { color: var(--signal-amber); }
h2 { font-size: 16px; }

button:focus-visible { outline: 3px solid var(--signal-amber); outline-offset: 2px; }

@media (max-width: 480px) {
  .console-stage {
    left: 50%;
    width: 190vw;
    max-width: none;
    margin-inline: 0;
    transform: translateX(-43.45%);
  }
  #app { padding: 8px; }
  .title-lockup { margin-block: auto; }
  .title-kicker { margin-bottom: 2px; font-size: 14px; line-height: 1.2; }
  .title-lockup h1 { font-size: 20px; line-height: 1.25; text-shadow: 2px 2px 0 #000; }
  .title-lockup .subtitle { margin: 4px 0 6px; font-size: 14px; line-height: 1.35; }
  .title-lockup .btn-primary,
  .title-lockup .btn-secondary {
    min-height: 44px;
    margin: 4px 0;
    padding: 8px 10px;
    border-width: 2px;
    font-size: 14px;
  }
  .disclaimer { margin-top: 4px; font-size: 12px; line-height: 1.4; }
  .setup-flow .hint,
  .family-brief { font-size: 14px; }
  .chapter-label { font-size: 12px; }
}

/* === Task 9: mobile screen-only mode === */
@media (max-width: 899px) {
  .console-stage {
    left: auto;
    width: min(100vw, calc(100dvh * 4 / 3));
    max-width: none;
    min-height: 0;
    max-height: 100dvh;
    aspect-ratio: 4 / 3;
    margin-inline: auto;
    transform: none;
  }

  .stage-room,
  .stage-crt-shell,
  .stage-console,
  .stage-controller {
    display: none;
  }

  .game-viewport {
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
    box-shadow: none;
  }

  #app { padding: 8px; }

  .year-scene > .gamepad-bar button,
  .schedule-row-title,
  .btn-option {
    font-size: 14px;
  }

  .year-scene > .gamepad-bar button {
    white-space: nowrap;
  }

  .console-stage:has(#screen-ending.active) {
    width: 100%;
    max-height: none;
    min-height: 100dvh;
    aspect-ratio: auto;
    overflow: visible;
  }

  .game-viewport:has(#screen-ending.active) {
    position: static;
    height: auto;
    overflow: visible;
  }

  .game-viewport:has(#screen-ending.active) .tv-overlay { display: none; }

  #app:has(#screen-ending.active) {
    height: auto;
    padding: 0;
    overflow: visible;
  }

  #screen-ending.active {
    position: relative;
    inset: auto;
    min-height: 100dvh;
    padding: 0 0 24px;
    background: var(--report-paper);
  }
}

@media (min-width: 900px) {
  .console-stage {
    width: min(100%, 1152px, calc((100dvh - 24px) * 3 / 2));
    max-height: calc(100dvh - 24px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

#curve { width: 100%; border: 3px solid var(--ink); background: var(--crt-black); margin: 12px 0; }
.band { fill: none; stroke: #2e3a55; stroke-width: 1; }
.band.mid { stroke: #4a5680; stroke-dasharray: 4 3; }
.child { fill: none; stroke: var(--signal-amber); stroke-width: 2; }
.dot { fill: var(--signal-amber); }
.vel { fill: var(--osd-green); font-size: 8px; }
.sprite-child { width: 48px; margin: 0 auto; background: var(--good);
  image-rendering: pixelated; border: 3px solid var(--ink);
  transition: height 0.5s ease, width 0.5s ease; position: relative;
  overflow: hidden; }
.sprite-child::before { content: ""; position: absolute; top: -14px; left: 50%;
  transform: translateX(-50%); width: 20px; height: 12px;
  background: var(--good); border: 3px solid var(--ink); }
.sprite-child[data-stage="1"] { height: 48px; }
.sprite-child[data-stage="2"] { height: 60px; }
.sprite-child[data-stage="3"] { height: 76px; }
.sprite-child[data-stage="4"] { height: 92px; }
.sprite-child[data-body="round"] { width: 60px; }
/* Task 8a：孩子立繪 img（64×96 邏輯尺寸，自動填色塊高度，無資產退回色塊） */
.sprite-child-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  image-rendering: pixelated;
  position: absolute;
  inset: 0;
}
/* === Task 2: OSD HUD === */
.osd-panel { border-color: var(--osd-green) !important; background: var(--crt-black) !important;
  padding: 6px 10px !important; margin-bottom: 8px; }
.osd-hud { display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font); font-size: 12px; color: var(--osd-green);
  letter-spacing: 0.12em; line-height: 1.4; }
.osd-left { flex: 1; }
.osd-right { text-align: right; white-space: nowrap; }

/* === Task 2: 手把按鍵圖示 === */
.key-icon { display: inline-block; vertical-align: middle; margin-right: 5px;
  flex-shrink: 0; }
.btn-gamepad { display: flex; align-items: center; justify-content: center; }

/* === Task 2: 主畫面底部固定操作列（手把按鍵風） === */
#screen-main .actions.gamepad-bar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  display: flex;
  gap: 0;
  background: var(--crt-black);
  border-top: 2px solid var(--osd-green);
  padding: 8px 12px;
  box-sizing: border-box;
  z-index: 100;
}
#screen-main .actions.gamepad-bar button {
  flex: 1;
  margin: 0 4px;
  min-height: 44px;
}
/* 內容區補 padding-bottom 避免被固定欄遮擋 */
#screen-main { padding-bottom: 80px; }

/* 桌機（≥900px）恢復隨文件流 */
@media (min-width: 900px) {
  #screen-main .actions.gamepad-bar {
    position: static;
    transform: none;
    border-top: none;
    background: transparent;
    padding: 0;
  }
  #screen-main { padding-bottom: 0; }
}

/* 原有 actions 保留（其他畫面用） */
.actions { display: flex; gap: 8px; }
.actions button { flex: 1; margin: 8px 0; }
.event-card h3 { font-size: 13px; margin: 4px 0; color: var(--accent); }
.event-card p { font-size: 11px; line-height: 1.9; }
.npc-tag { color: var(--warn); font-size: 11px; }
.btn-option { display: block; width: 100%; margin: 6px 0; padding: 10px;
  font-family: inherit; font-size: 14px; text-align: left; cursor: pointer;
  border: 2px solid var(--ink); background: #1f2340; color: var(--ink); min-height: 44px; }
.btn-option:disabled { opacity: 0.4; cursor: not-allowed; }
.feedback { color: #6ee0a0; border-top: 2px dashed #3b4066; padding-top: 8px; }
/* === Task 8: CRT 前景紙本成長報告 === */
.game-viewport:has(#screen-ending.active) {
  z-index: var(--z-options);
  overflow: visible;
}

#screen-ending.active {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-options) + 1);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 5vh max(20px, calc((100vw - 720px) / 2)) 56px;
  background: rgb(10 13 18 / 0.7);
  color: var(--report-ink);
  animation: screenIn 0.18s steps(3) both;
}

.ending-report {
  width: min(100%, 720px);
  margin-inline: auto;
  padding: 48px 56px 52px;
  background: var(--report-paper);
  box-shadow: 0 18px 48px rgb(0 0 0 / 0.55), 0 0 0 1px rgb(32 36 42 / 0.3);
  font-family: "Microsoft JhengHei", "PingFang TC", sans-serif;
  line-height: 1.8;
}

.ending-report-header {
  padding-bottom: 24px;
  border-bottom: 2px solid var(--report-ink);
  text-align: center;
}
.ending-report-kicker { margin: 0 0 8px; color: var(--report-muted); font-size: 14px; }
.ending-report-header h2 {
  margin: 0 0 12px;
  color: var(--report-ink);
  font: 700 26px/1.45 "Microsoft JhengHei", "PingFang TC", sans-serif;
  text-wrap: balance;
}
.ending-percentile { margin: 0; color: var(--report-muted); font-size: 15px; }
.pct-num { color: #8d331f; font-size: 18px; }
.ending-report-summary,
.ending-report-timeline,
.ending-report-constitution { padding: 26px 0; border-bottom: 1px solid var(--report-rule); }
.ending-report-summary p,
.ending-report-constitution p { max-width: 70ch; margin: 0; font-size: 16px; text-wrap: pretty; }
.ending-report-timeline h3,
.ending-report-constitution h3 { margin: 0 0 14px; color: var(--report-ink); font-size: 18px; }
.tl-row { padding: 7px 0; border-bottom: 1px dotted var(--report-rule); font-size: 15px; }
.tl-row:last-child { border-bottom: 0; }
.tl-reveal { color: #8d331f; font-weight: 700; }
.ending-const-label { margin: 0 0 8px !important; color: #1e6844; font-size: 18px !important; font-weight: 700; }
.ending-report-note { margin: 0; color: var(--report-muted); font-size: 15px; }
.ending-report-cta { padding-top: 28px; }
.ending-report-cta h3 { margin: 0 0 10px; color: var(--report-ink); font-size: 20px; }
.ending-report-cta-lead { max-width: 65ch; margin: 0 0 18px; font-size: 16px; }
.ending-report-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 24px;
  margin: 0 0 18px;
  padding-left: 1.35em;
  color: var(--report-ink);
  font-size: 15px;
}
.ending-report-checklist li::marker { color: #8d331f; }
.ending-report-doctor-line {
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--report-rule);
  background: #e9e2d2;
  color: #3f352b;
  font-size: 15px;
  font-weight: 700;
}
.ending-report-links { display: flex; flex-wrap: wrap; gap: 10px; }
.ending-report-cta a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border: 2px solid var(--report-ink);
  background: transparent;
  color: var(--report-ink);
  font: 700 14px/1.4 var(--font);
  text-decoration: none;
}
.ending-report-cta a:hover { background: var(--report-ink); color: var(--report-paper); }
.ending-report-cta .ending-cta-primary { background: #8d331f; color: var(--report-paper); border-color: #8d331f; }
.ending-report-cta .ending-cta-primary:hover { background: #6f2818; }
.ending-report-cta a:focus-visible { outline-color: #8d331f; }
.ending-actions {
  width: min(100%, 720px);
  margin: 14px auto 0;
  flex-wrap: wrap;
  gap: 8px;
}
.ending-actions button { flex: 1 1 160px; min-height: 44px; margin: 0; }

@media (max-width: 480px) {
  .console-stage:has(#screen-ending.active) {
    left: auto;
    width: 100%;
    min-height: 100dvh;
    aspect-ratio: auto;
    overflow: visible;
    transform: none;
  }
  .console-stage:has(#screen-ending.active) > .stage-layer { display: none; }
  .game-viewport:has(#screen-ending.active) {
    position: static;
    width: 100%;
    height: auto;
    border-radius: 0;
    box-shadow: none;
  }
  .game-viewport:has(#screen-ending.active) .tv-overlay { display: none; }
  #app:has(#screen-ending.active) {
    height: auto;
    padding: 0;
    overflow: visible;
  }
  #screen-ending.active {
    position: relative;
    inset: auto;
    min-height: 100dvh;
    padding: 0 0 24px;
    background: var(--report-paper);
  }
  .ending-report { padding: 32px 20px 36px; box-shadow: none; }
  .ending-report-header h2 { font-size: 22px; }
  .ending-report-summary p,
  .ending-report-constitution p,
  .ending-report-cta-lead { font-size: 15px; }
  .ending-report-checklist { grid-template-columns: 1fr; font-size: 14px; }
  .ending-report-doctor-line { font-size: 14px; }
  .ending-report-links { flex-direction: column; }
  .ending-report-links a { width: 100%; }
  .ending-actions { padding-inline: 12px; }
  .ending-actions button { flex-basis: 100%; }
}

.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.gallery-cell { border: 2px solid var(--ink); background: var(--panel); color: var(--ink);
  font-family: inherit; font-size: 10px; padding: 10px 6px; cursor: default;
  display: flex; flex-direction: column; gap: 4px;
  align-items: center; justify-content: center; text-align: center; min-height: 72px; }
.gallery-cell--locked { opacity: 0.4; }
.gallery-cell__title { font-size: 10px; line-height: 1.6; }
.gallery-cell__label { font-size: 9px; color: var(--accent); margin-top: 2px; }

button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ===================================================================
   Task 5：VN 場景 UI
   =================================================================== */

/* --- 場景容器：absolute 滿版覆蓋 .tv-screen --- */
.vn-scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}

/* --- 背景優雅缺席：四個低調深色漸層 --- */
.vn-bg-home {
  background: linear-gradient(to bottom, #1a1208 0%, #241a0e 50%, #0e0a06 100%);
}
.vn-bg-school {
  background: linear-gradient(to bottom, #080e1a 0%, #0e1624 50%, #060c14 100%);
}
.vn-bg-park {
  background: linear-gradient(to bottom, #081208 0%, #0c1a0a 50%, #060e06 100%);
}
.vn-bg-clinic {
  background: linear-gradient(to bottom, #080c18 0%, #0a1020 50%, #060810 100%);
}

/* 背景上緣壓暗（保對話盒上字可讀） */
.vn-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, transparent 45%);
  pointer-events: none;
  z-index: 0;
}

/* --- 立繪掛點：256×320，無資產時不顯示（空 div = 零高度） --- */
/*
 * bottom 計算：
 *   對話盒最小高：min-height 80px + padding 22px + border 2px + margin-bottom 8px = 112px
 *   選項列（若展開）：每個 btn-option min-height 44px，常見 1–2 個 = 44–96px + padding 8px
 *   安全值（無選項）：底部對話盒 ≈ 112px + 36px 餘量 = 148px
 *   安全值（有選項列）：加一個選項 ~60px → 208px
 *   用 CSS :has() 偵測選項列顯示狀態（Task 10 打磨）
 */
.vn-portrait {
  overflow: hidden;
  width: 38%;
  max-width: 256px;
  position: absolute;
  bottom: 30%;
  /* 無資產：完全隱藏（空 div 無內容） */
  pointer-events: none;
  z-index: var(--z-portrait);
}
.vn-portrait-right .vn-portrait { right: 3%; left: auto; }
.vn-portrait-left .vn-portrait { left: 3%; right: auto; }
.vn-portrait:empty {
  display: none;
}
/* Task 8a：NPC 半身立繪 img（邏輯 128×160，顯示 2x=256×320，行動版可縮） */
.vn-portrait-img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
}
/* 360px 保護：立繪不遮覆對話盒，且寬不溢出 */
@media (max-width: 380px) {
  .vn-portrait {
    width: 38%;
    max-width: 192px;
    bottom: 31%;
  }
  .vn-portrait-img {
    display: block;
    width: 100%;
    height: auto;
  }
}

/* --- OSD 頂列 --- */
.vn-osd {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
}

/* --- 選項列 --- */
.vn-options {
  position: absolute;
  top: 14%;
  width: 54%;
  z-index: var(--z-options);
  padding: 0;
}
.vn-portrait-right .vn-options { left: 5%; right: auto; }
.vn-portrait-left .vn-options { right: 5%; left: auto; }
.vn-options[hidden] {
  display: none;
}

/* --- 對話盒 --- */
.vn-dialog-box {
  position: absolute;
  left: 3%;
  right: 3%;
  bottom: 2%;
  height: 34%;
  min-height: 34%;
  z-index: var(--z-dialog);
  box-sizing: border-box;
  overflow: visible;
  margin: 0;
  background: var(--dlg-bg);
  border: 1.5px solid var(--dlg-border);
  padding: 10px 14px 12px;
  cursor: pointer;
}

/* --- 名牌色條 --- */
.vn-name-tag {
  display: inline-block;
  font-family: var(--font);
  font-size: 11px;
  color: #fff;
  padding: 2px 8px;
  margin-bottom: 6px;
  line-height: 1.6;
  /* 色條寬度由內容決定 */
}

/* --- 對話文字 --- */
.vn-dialog-text {
  font-family: var(--font);
  font-size: 15px;
  line-height: 2.0;
  color: var(--dlg-ink);
  min-height: 2em; /* 至少佔一行 */
  max-height: 4em;
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-all;
}

/* --- ▼ 續行指示 --- */
.vn-dialog-cursor {
  position: absolute;
  bottom: 8px;
  right: 12px;
  font-size: 14px;
  color: var(--dlg-ink);
  opacity: 0;
  transition: none;
}
.vn-dialog-cursor.vn-cursor-visible {
  opacity: 1;
  animation: vn-cursor-blink 1s steps(2, start) infinite;
}
.vn-dialog-cursor.vn-cursor-hidden {
  opacity: 0;
  animation: none;
}

@keyframes vn-cursor-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* 360px 無溢出 */
@media (max-width: 380px) {
  .vn-dialog-box {
    left: 2%;
    right: 2%;
    padding: 8px 10px 10px;
  }
  .vn-dialog-text {
    font-size: 14px;
  }
}

/* prefers-reduced-motion：停用 ▼ 閃爍 */
@media (prefers-reduced-motion: reduce) {
  .vn-dialog-cursor.vn-cursor-visible {
    opacity: 1;
  }
}

@media (max-width: 400px) {
  #app { padding: 8px; }
  h1 { font-size: 18px; }
}

/* ===================================================================
   Task 6：本學年行程表 + Now Loading + 空狀態待機畫面
   =================================================================== */

/* --- 行程表 Header（沿用 osd-panel） --- */
.schedule-header {
  margin-bottom: 0 !important;
}

/* --- 行程列表容器 --- */
.schedule-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0 0 8px;
  border: 3px solid var(--ink);
  border-top: none;
}

/* --- 行程列（button 整列可按） --- */
.schedule-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 10px;
  background: var(--panel);
  color: var(--ink);
  border: none;
  border-top: 2px solid #3b4066;
  font-family: var(--font);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  min-height: 52px;
  transition: background 0.1s;
  gap: 8px;
}

.schedule-row:first-child {
  border-top: none;
}

.schedule-row:hover:not(:disabled) {
  background: #252848;
}

.schedule-row:active:not(:disabled) {
  background: #1e2240;
}

.schedule-row:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.schedule-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* --- 列主體內容 --- */
.schedule-row-inner {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.schedule-row-title {
  font-size: 12px;
  line-height: 1.6;
  color: var(--accent);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.schedule-row-meta {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* NPC 名牌（小色條） */
.schedule-npc-tag {
  display: inline-block;
  font-size: 10px;
  color: #fff;
  background: var(--btn-cir);
  padding: 1px 6px;
  line-height: 1.6;
}

/* 狀態章 */
.schedule-badge {
  display: inline-block;
  font-size: 9px;
  padding: 1px 5px;
  line-height: 1.6;
  letter-spacing: 0.05em;
  font-family: var(--font);
}

.badge-chosen {
  background: var(--btn-tri);
  color: #0a1008;
}

.badge-seen {
  background: #3b4066;
  color: var(--osd-green);
  border: 1px solid var(--osd-green);
}

/* 箭頭 */
.schedule-row-arrow {
  font-size: 10px;
  color: var(--osd-green);
  flex-shrink: 0;
}

/* 360px 無溢出 */
@media (max-width: 380px) {
  .schedule-row {
    padding: 10px 8px;
    min-height: 48px;
  }
  .schedule-row-title {
    font-size: 11px;
  }
}

/* --- 空狀態：待機畫面 --- */
.schedule-idle {
  margin: 16px 0;
  text-align: center;
}

.schedule-idle-inner {
  padding: 12px 0;
}

.schedule-idle-main {
  font-size: 14px;
  color: var(--osd-green);
  margin: 0 0 6px;
  letter-spacing: 0.1em;
}

.schedule-idle-sub {
  font-size: 11px;
  color: #9aa7bd;
  margin: 0;
}

/* --- Now Loading 覆蓋層 --- */
.now-loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 300;
  background: var(--crt-black);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: nl-fade-in 0.06s ease-out both;
}

@keyframes nl-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.now-loading-overlay.now-loading-out {
  animation: nl-fade-out 0.06s ease-in both;
}

@keyframes nl-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.now-loading-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* 自繪光碟旋轉（transform rotate，非閃爍，不受 3 次/秒限制） */
.disc-svg {
  animation: disc-spin 1.2s linear infinite;
  display: block;
}

@keyframes disc-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.now-loading-text {
  font-family: var(--font);
  font-size: 14px;
  color: var(--osd-green);
  letter-spacing: 0.2em;
  margin: 0;
}

/* reduced-motion：停用旋轉（全局規則亦可蓋，此為明確宣告） */
@media (prefers-reduced-motion: reduce) {
  .disc-svg {
    animation: none;
  }
  .now-loading-overlay {
    animation: none;
    opacity: 1;
  }
  .now-loading-overlay.now-loading-out {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ===================================================================
   90 年代末主機文字冒險：年度養成場景
   =================================================================== */
.year-scene {
  min-height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(76px, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 8px 10px;
}

#screen-main { padding-bottom: 0; }

.year-chapter {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  color: var(--osd-green);
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

.year-hud {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  min-width: 0;
}

.year-hud .osd-hud {
  justify-content: flex-end;
  gap: 6px;
  font-size: 12px;
  letter-spacing: 0;
}

.year-hud .osd-left { display: none; }

.year-actions {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  align-self: center;
}

.year-child {
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  justify-self: center;
  width: 76px;
  margin: 0;
}

.year-child[data-stage="1"] { height: 114px; }
.year-child[data-stage="2"] { height: 126px; }
.year-child[data-stage="3"] { height: 138px; }
.year-child[data-stage="4"] { height: 150px; }
.year-child[data-body="round"] { width: 84px; }

.record-curve-source { display: none; }

.record-book {
  position: fixed;
  inset: 0;
  z-index: var(--z-options);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 8px;
  padding: 12px;
  overflow: auto;
  background: rgba(10, 13, 18, 0.92);
}

.record-spread {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border: 5px solid #4f2e1e;
  border-radius: 4px 10px 10px 4px;
  background: #f2e4bd;
  box-shadow: inset -7px 0 #6d4028, 4px 5px 0 rgba(0, 0, 0, 0.45);
  color: #302719;
}

.record-page {
  min-width: 0;
  padding: 14px;
  background:
    linear-gradient(90deg, rgba(85, 54, 30, 0.11), transparent 13%),
    repeating-linear-gradient(#f6eac8 0 23px, #ddcfa9 24px);
}

.record-page + .record-page { border-left: 2px solid #b49c72; }
.record-page h2,
.record-page h3 { margin: 0 0 8px; color: #4d2d20; }
.record-page h2 { font-size: 22px; }
.record-page h3 { font-size: 17px; }
.record-term { margin: 0 0 14px; color: #77513a; }
.record-stats { margin: 0; }
.record-stats div { display: flex; justify-content: space-between; gap: 8px; }
.record-stats dt,
.record-stats dd { margin: 0; line-height: 1.8; }
.record-stats dd { font-weight: 700; }
.record-note { margin: 12px 0 0; font-size: 12px; line-height: 1.6; color: #76543c; }
.record-chart-mount { height: calc(100% - 28px); min-height: 130px; }
.record-chart { width: 100%; height: 100%; background: #171b20; border: 2px solid #573522; }
.record-chart .band { fill: none; }
.record-chart .child { fill: none; }

.record-close {
  justify-self: end;
  min-width: 96px;
  min-height: 44px;
  margin: 0;
  border: 2px solid var(--signal-amber);
  background: var(--crt-black);
  color: var(--signal-amber);
  font: 14px/1 var(--font);
}

.record-close:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

.year-scene > .gamepad-bar {
  grid-column: 1 / -1;
  grid-row: 3;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  border-top: 2px solid var(--osd-green);
  padding-top: 6px;
}

.year-scene > .gamepad-bar button {
  min-width: 0;
  min-height: 48px;
  margin: 0;
  padding: 7px 5px;
  border-width: 2px;
  font-size: 14px;
  line-height: 1.35;
}

.schedule-header {
  border: 2px solid var(--osd-green) !important;
  padding: 4px 8px !important;
}

.schedule-header .osd-hud { font-size: 11px; }

.schedule-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 0 0;
  border: 0;
}

.schedule-row {
  position: relative;
  min-width: 0;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 6px;
  border: 2px solid #3b4066;
  text-align: center;
}

.schedule-row:first-child { border-top: 2px solid #3b4066; }

.schedule-row-title {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  color: var(--accent);
  font-size: 14px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-npc-tag,
.schedule-badge {
  position: absolute;
  right: 3px;
  max-width: calc(100% - 6px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.schedule-npc-tag { top: 3px; }
.schedule-badge { bottom: 3px; }

.schedule-idle {
  min-height: 120px;
  display: grid;
  place-items: center;
  margin: 0;
}

@media (max-width: 480px) {
  .record-book { padding: 8px; }
  .record-spread {
    grid-template-columns: 1fr;
    overflow-y: auto;
  }
  .record-page { min-height: 210px; padding: 12px; }
  .record-page + .record-page { border-left: 0; border-top: 2px solid #b49c72; }
  .record-chart-mount {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
  }
  .year-scene {
    grid-template-columns: minmax(0, 3fr) minmax(68px, 1fr);
    gap: 6px;
  }
  .year-chapter,
  .year-hud .osd-hud,
  .schedule-row-title,
  .year-scene > .gamepad-bar button { font-size: 14px; }
  .year-child { width: 68px; }
  .year-child[data-stage="1"] { height: 102px; }
  .year-child[data-stage="2"] { height: 112px; }
  .year-child[data-stage="3"] { height: 122px; }
  .year-child[data-stage="4"] { height: 132px; }
  .year-child[data-body="round"] { width: 74px; }
  .schedule-list { gap: 5px; }
  .schedule-row { min-height: 72px; padding-inline: 4px; }
  .schedule-header .osd-hud { font-size: 12px; }
}

/* Task 9 component overrides stay last so desktop component defaults cannot win the cascade. */
@media (max-width: 899px) {
  .title-kicker,
  .title-lockup .subtitle { font-size: 14px; }
  .disclaimer { font-size: 12px; }
  .schedule-row { font-size: 14px; }
  .year-scene > .gamepad-bar button { font-size: 14px; }
  .btn-option { font-size: 14px; }
  .vn-options { width: 58%; }
  .vn-portrait { width: 34%; }
  .record-book {
    position: fixed;
    inset: 0;
    min-height: 100dvh;
    z-index: calc(var(--z-options) + 1);
  }
}