/* 《夜色便利店》 visual novel stage */
:root {
  --bg: #07080b;
  --ink: #f4eee6;
  --ink-dim: #b7ada0;
  --gold: #e4c287;
  --gold-soft: rgba(228, 194, 135, 0.35);
  --teal: #7aa8a4;
  --panel: rgba(10, 12, 16, 0.88);
  --line: rgba(228, 194, 135, 0.28);
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  --sans: "PingFang SC", "Hiragino Sans GB", "Source Han Sans SC", "Noto Sans SC",
    "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
  --serif: "Songti SC", "STSong", "Source Han Serif SC", "Noto Serif SC",
    "SimSun", "PMingLiU", "PingFang SC", serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  width: 100%; height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
button, input { font-family: inherit; }
button {
  cursor: pointer;
  border: 0;
  background: none;
  color: inherit;
}
button:focus-visible, input:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 2px;
}
img { -webkit-user-drag: none; }

#app {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse at 50% 40%, #141821 0%, #07080b 72%);
}

/* 16:9 stage, letterboxed and centered */
#stage {
  position: relative;
  width: min(100vw, calc(100vh * 16 / 9));
  height: min(100vh, calc(100vw * 9 / 16));
  width: min(100vw, calc(100dvh * 16 / 9));
  height: min(100dvh, calc(100vw * 9 / 16));
  background: #0b0d12;
  overflow: hidden;
  box-shadow: var(--shadow), 0 0 0 1px rgba(255,255,255,0.04);
  isolation: isolate;
}

.layer, .bg {
  position: absolute;
  inset: 0;
  background: center/cover no-repeat;
  transition: opacity 0.7s ease;
}
#bg-a, #bg-b { z-index: 0; }
#bg-b { opacity: 0; }

.rain-canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.rain-canvas.on { opacity: 0.7; }

.light-veil {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 236, 200, 0.07), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.18) 70%, rgba(0,0,0,0.42));
  animation: flicker 6.5s ease-in-out infinite;
}
.light-veil.blackout {
  animation: none;
  background:
    radial-gradient(ellipse at 30% 60%, rgba(40, 90, 110, 0.18), transparent 50%),
    linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.5));
}
.light-veil.dawn {
  animation: none;
  background:
    radial-gradient(ellipse at 50% 80%, rgba(255, 214, 170, 0.12), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.2));
}
@keyframes flicker {
  0%, 92%, 100% { opacity: 1; }
  93.5% { opacity: 0.86; }
  94.5% { opacity: 1; }
  96% { opacity: 0.92; }
}

#sprite-layer {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 100%;
  z-index: 4;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-left: 16%;
}
#sprite {
  height: 96%;
  width: auto;
  max-width: 52%;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,0.45));
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.45s ease, transform 0.5s ease, filter 0.4s ease;
  pointer-events: none;
}
#sprite.show {
  opacity: 1;
  transform: translateY(0);
}
#sprite.expr-swap {
  transition: opacity 0.16s ease;
  transform: translateY(0);
}
#sprite.expr-swap:not(.show) {
  opacity: 0.28;
}

#chapter-tag {
  position: absolute;
  top: 3.2%;
  left: 2.8%;
  z-index: 8;
  font-family: var(--serif);
  font-size: clamp(11px, 1.5vw, 15px);
  letter-spacing: 0.18em;
  color: rgba(244, 238, 230, 0.78);
  text-shadow: 0 1px 8px rgba(0,0,0,0.7);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}
#chapter-tag.show { opacity: 1; }

#hud {
  position: absolute;
  top: 2.6%;
  right: 2.2%;
  z-index: 9;
  display: flex;
  gap: 0.2em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
#stage.playing #hud {
  opacity: 1;
  pointer-events: auto;
}
.hud-btn {
  padding: 0.35em 0.7em;
  font-size: clamp(11px, 1.35vw, 13px);
  letter-spacing: 0.08em;
  color: rgba(244,238,230,0.82);
  background: rgba(8,10,14,0.35);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hud-btn:hover { color: var(--gold); border-color: var(--gold-soft); }
.hud-btn.on {
  color: #1a140c;
  background: var(--gold);
  border-color: var(--gold);
}

#textbox-wrap {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 4.2%;
  z-index: 7;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  pointer-events: none;
}
#stage.playing #textbox-wrap {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
#nameplate {
  display: inline-block;
  min-width: 6.2em;
  margin: 0 0 0.45em 1.1em;
  padding: 0.22em 1.1em 0.28em;
  font-family: var(--serif);
  font-size: clamp(14px, 1.8vw, 18px);
  letter-spacing: 0.14em;
  color: #1c140c;
  background: linear-gradient(180deg, #f0d7a4, #d7b16a);
  border-radius: 2px 2px 0 0;
  box-shadow: 0 2px 0 rgba(0,0,0,0.2);
}
#textbox {
  position: relative;
  min-height: 28%;
  padding: 1.15em 1.6em 1.3em 1.5em;
  background:
    linear-gradient(180deg, rgba(18, 20, 26, 0.55), rgba(10, 12, 16, 0.9)),
    rgba(10, 12, 16, 0.78);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.4),
    0 16px 40px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.05);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
#textbox::before {
  content: "";
  position: absolute;
  left: 10px; right: 10px; top: 7px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(228,194,135,0.45), transparent);
}
#dialogue {
  min-height: 4.6em;
  font-size: clamp(15px, 2.05vw, 20px);
  line-height: 1.85;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
  white-space: pre-wrap;
  word-break: break-word;
}
#continue-hint {
  position: absolute;
  right: 1.2em;
  bottom: 0.7em;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid var(--gold);
  animation: bob 0.9s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50% { transform: translateY(5px); opacity: 1; }
}

#choice-layer {
  position: absolute;
  left: 18%;
  right: 18%;
  top: 22%;
  z-index: 8;
  display: flex;
  flex-direction: column;
  gap: 0.7em;
  align-items: stretch;
}
#choice-layer[hidden] { display: none; }
.choice-btn {
  padding: 0.75em 1.2em;
  font-size: clamp(14px, 1.85vw, 18px);
  letter-spacing: 0.04em;
  text-align: left;
  color: var(--ink);
  background: rgba(12, 14, 20, 0.82);
  border: 1px solid rgba(228, 194, 135, 0.28);
  border-radius: 4px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  transform: translateY(8px);
  opacity: 0;
  animation: choiceIn 0.4s ease forwards;
}
.choice-btn:nth-child(2) { animation-delay: 0.06s; }
.choice-btn:nth-child(3) { animation-delay: 0.12s; }
.choice-btn:nth-child(4) { animation-delay: 0.18s; }
.choice-btn:hover,
.choice-btn:focus {
  color: #1c140c;
  background: linear-gradient(180deg, #f0d7a4, #d7b16a);
  border-color: #e8c98f;
}
@keyframes choiceIn {
  to { opacity: 1; transform: none; }
}

/* screens / overlays */
.screen {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 6, 9, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.screen.hidden { display: none; }

#title-screen {
  background: #07080b center/cover no-repeat;
  z-index: 25;
}
#title-screen .title-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(6,8,12,0.25) 0%, rgba(6,8,12,0.55) 50%, rgba(6,8,12,0.88) 100%),
    radial-gradient(ellipse at 50% 30%, transparent, rgba(0,0,0,0.35));
}
.title-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 2rem;
}
.title-kicker {
  font-size: clamp(12px, 1.5vw, 14px);
  letter-spacing: 0.46em;
  color: var(--gold);
  margin-bottom: 1.1em;
}
.title-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 7.2vw, 86px);
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  line-height: 1.1;
  text-shadow: 0 8px 40px rgba(0,0,0,0.6);
}
.title-en {
  margin-top: 0.7em;
  font-size: clamp(11px, 1.4vw, 14px);
  letter-spacing: 0.38em;
  color: var(--teal);
  text-transform: uppercase;
}
.title-line {
  margin: 1.6em auto 2.2em;
  max-width: 22em;
  font-size: clamp(13px, 1.6vw, 16px);
  letter-spacing: 0.12em;
  color: var(--ink-dim);
}
.title-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55em;
}
.title-actions button,
.panel-actions button,
.ending-card button {
  min-width: 12em;
  padding: 0.55em 1.4em;
  font-size: clamp(14px, 1.7vw, 16px);
  letter-spacing: 0.2em;
  color: var(--ink);
  border: 1px solid rgba(228,194,135,0.32);
  background: rgba(10,12,16,0.45);
  border-radius: 2px;
}
.title-actions button:hover,
.panel-actions button:hover,
.ending-card button:hover,
button.primary {
  color: #1c140c;
  background: linear-gradient(180deg, #f0d7a4, #d7b16a);
  border-color: #e8c98f;
}
button.primary { font-weight: 500; }
.title-foot {
  position: absolute;
  bottom: 4%;
  left: 0; right: 0;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: rgba(244,238,230,0.45);
  z-index: 2;
}

.panel {
  position: relative;
  width: min(640px, 90%);
  max-height: 86%;
  overflow: auto;
  padding: 2em 2em 1.6em;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.panel h2, .ending-card h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 3vw, 30px);
  letter-spacing: 0.16em;
  margin-bottom: 0.6em;
}
.panel-kicker, .ending-kicker {
  font-size: 12px;
  letter-spacing: 0.4em;
  color: var(--gold);
  margin-bottom: 0.8em;
}
.panel-desc { color: var(--ink-dim); line-height: 1.8; margin-bottom: 1.4em; }
.panel-actions { display: flex; gap: 0.8em; justify-content: flex-end; margin-top: 1.4em; flex-wrap: wrap; }
.close-x {
  position: absolute;
  top: 0.6em; right: 0.8em;
  font-size: 22px;
  color: var(--ink-dim);
  line-height: 1;
  padding: 0.2em 0.4em;
}
.close-x:hover { color: var(--gold); }

.name-label { display: flex; flex-direction: column; gap: 0.4em; }
.name-label span { font-size: 13px; letter-spacing: 0.16em; color: var(--gold); }
#name-input {
  padding: 0.7em 0.9em;
  font-size: 18px;
  letter-spacing: 0.12em;
  color: var(--ink);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(228,194,135,0.28);
  border-radius: 4px;
}

.save-list, .settings-list, .backlog-list { display: flex; flex-direction: column; gap: 0.7em; }
.save-slot, .setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: 0.85em 1em;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  border-radius: 4px;
  text-align: left;
  width: 100%;
  color: inherit;
}
.save-slot:hover { border-color: var(--gold-soft); }
.save-slot .slot-name { color: var(--gold); letter-spacing: 0.12em; font-size: 13px; }
.save-slot .slot-info { color: var(--ink-dim); font-size: 13px; line-height: 1.6; margin-top: 0.2em; }
.save-slot.empty .slot-info { opacity: 0.6; }

.setting-row label { letter-spacing: 0.08em; }
.setting-row select, .setting-row input[type="range"] {
  background: #12141a;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.3em 0.6em;
}
.setting-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--gold); }
.setting-vol {
  display: flex;
  align-items: center;
  gap: 0.6em;
}
.setting-vol input[type="range"] {
  width: 9.5em;
  padding: 0;
  border: 0;
  background: transparent;
  accent-color: var(--gold);
}
.setting-vol .vol-val {
  min-width: 2.2em;
  text-align: right;
  color: var(--ink-dim);
  font-size: 13px;
  letter-spacing: 0.04em;
}


.backlog-list {
  max-height: 55vh;
  overflow: auto;
  padding-right: 0.4em;
}
.backlog-item { padding: 0.5em 0.2em; border-bottom: 1px solid rgba(255,255,255,0.06); }
.backlog-item .who {
  font-family: var(--serif);
  color: var(--gold);
  letter-spacing: 0.12em;
  font-size: 13px;
  margin-bottom: 0.2em;
}
.backlog-item .said {
  line-height: 1.75;
  color: var(--ink);
  font-size: 15px;
  white-space: pre-wrap;
}
.backlog-item.narration .said { color: var(--ink-dim); }

#ending-screen { background: rgba(5,6,9,0.72); }
.ending-card {
  width: min(620px, 90%);
  text-align: center;
  padding: 2.6em 2em 2em;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.ending-who {
  color: var(--teal);
  letter-spacing: 0.24em;
  margin-bottom: 1.4em;
}
.ending-text {
  line-height: 2;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
  text-align: left;
  font-size: 15px;
}
.ending-card .panel-actions { justify-content: center; }

/* mobile */
@media (max-width: 720px) {
  #sprite-layer { padding-left: 0; }
  #sprite { max-width: 78%; height: 86%; }
  #textbox-wrap { left: 3%; right: 3%; bottom: 2.5%; }
  #dialogue { font-size: 15px; min-height: 4.2em; }
  #choice-layer { left: 6%; right: 6%; top: 18%; }
  #hud { top: auto; bottom: auto; right: 2%; top: 1.6%; flex-wrap: wrap; justify-content: flex-end; max-width: 70%; }
  .hud-btn { padding: 0.28em 0.5em; font-size: 11px; }
  .title-name { letter-spacing: 0.12em; text-indent: 0.12em; }
}
@media (prefers-reduced-motion: reduce) {
  .light-veil, #continue-hint { animation: none; }
  #sprite, .bg, #textbox-wrap, .choice-btn { transition: none; animation: none; opacity: 1; transform: none; }
}