/* ============================================================
   潮汐信笺 · Tides & Letters
   一个视觉小说式感情小游戏
   ============================================================ */

:root{
  --ink:        #eae3d8;
  --ink-soft:   #b9b0a4;
  --ink-dim:    #8b8378;
  --paper:      #191a1f;
  --panel:      rgba(26, 28, 34, 0.86);
  --panel-line: rgba(255,255,255,0.10);
  --accent:     #e5a663;
  --accent-2:   #7fb6c4;
  --rose:       #d98a9a;
  --violet:     #a993d6;
  --green:      #8fc9a3;
  --gold:       #e8c37a;
  --shadow:     0 18px 50px rgba(0,0,0,0.5);
  --radius:     18px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html,body{ height:100%; }

body{
  font-family:"Noto Serif SC","Songti SC","Source Han Serif SC",
              "Microsoft YaHei",Georgia,serif;
  background:var(--paper);
  color:var(--ink);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

#app{
  position:relative;
  height:100vh; height:100dvh;
  width:100%;
  overflow:hidden;
}

/* ---------- 背景 ---------- */
#bg-layer{ position:absolute; inset:0; z-index:0; overflow:hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, #2a2d38 0%, #15161b 55%, #0d0e12 100%);
}
.bg-blob{
  position:absolute; border-radius:50%;
  filter:blur(90px); opacity:.42; mix-blend-mode:screen;
  animation:drift 26s ease-in-out infinite alternate;
}
.b1{ width:52vw; height:52vw; left:-12vw; top:-14vw;
     background:radial-gradient(circle,#3c6f86,transparent 65%); }
.b2{ width:46vw; height:46vw; right:-10vw; top:18vh;
     background:radial-gradient(circle,#7a5a86,transparent 65%);
     animation-delay:-9s; }
.b3{ width:40vw; height:40vw; left:26vw; bottom:-16vw;
     background:radial-gradient(circle,#8a6a3f,transparent 65%);
     animation-delay:-17s; }
@keyframes drift{
  0%  { transform:translate3d(0,0,0) scale(1); }
  100%{ transform:translate3d(4vw,3vh,0) scale(1.15); }
}
.grain{
  position:absolute; inset:-50%; opacity:.05; pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.55'/></svg>");
  animation:grain 1.1s steps(3) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)} 33%{transform:translate(-3%,2%)}
  66%{transform:translate(2%,-3%)} 100%{transform:translate(0,0)}
}

/* ---------- 屏幕切换 ---------- */
.screen{
  position:absolute; inset:0; z-index:2;
  display:none; flex-direction:column;
  padding:clamp(14px,3vw,40px);
  opacity:0; transition:opacity .45s ease;
}
.screen.active{ display:flex; opacity:1; }
#screen-game{ gap:0; }
#screen-game .stage{ flex:1 1 auto; min-height:0; }
#screen-game .choices{ flex:0 0 auto; max-height:34vh; margin-top:10px; }

/* ---------- 通用按钮 ---------- */
.btn{
  font-family:inherit; font-size:1rem; letter-spacing:.06em;
  color:var(--ink); background:rgba(255,255,255,.06);
  border:1px solid var(--panel-line); border-radius:999px;
  padding:.72em 1.7em; cursor:pointer;
  transition:transform .16s ease, background .2s ease, border-color .2s ease;
}
.btn:hover{ background:rgba(255,255,255,.13); transform:translateY(-2px);
            border-color:rgba(255,255,255,.28); }
.btn:active{ transform:translateY(0) scale(.98); }
.btn-primary{
  background:linear-gradient(135deg,var(--accent),#d4884a);
  color:#20160c; border:none; font-weight:700;
  box-shadow:0 10px 26px rgba(229,166,99,.28);
}
.btn-primary:hover{ filter:brightness(1.08); background:linear-gradient(135deg,var(--accent),#d4884a); }
.btn-ghost{ background:transparent; }
.btn-mini{ font-size:.82rem; padding:.42em 1.05em; }
.center{ text-align:center; margin-top:18px; }

/* ---------- 标题界面 ---------- */
#screen-title{ align-items:center; justify-content:center; text-align:center; }
.title-card{ max-width:720px; animation:rise .8s cubic-bezier(.2,.8,.2,1) both; }
.kicker{ color:var(--accent); letter-spacing:.42em; font-size:.8rem;
         text-transform:uppercase; margin-bottom:14px; }
.game-title{
  font-size:clamp(2.9rem,9vw,5.4rem); line-height:1.05;
  letter-spacing:.14em; font-weight:700;
  background:linear-gradient(180deg,#fff 20%,#c9bda9 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 24px 60px rgba(0,0,0,.5);
}
.subtitle{ color:var(--ink-dim); letter-spacing:.5em; font-size:.9rem;
           margin:6px 0 26px; text-transform:uppercase; }
.intro{ color:var(--ink-soft); line-height:2.05; font-size:1.02rem;
        margin-bottom:34px; }
.title-actions{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.hint{ margin-top:22px; color:var(--ink-dim); font-size:.78rem; letter-spacing:.12em; }
@keyframes rise{ from{opacity:0; transform:translateY(26px)} to{opacity:1; transform:none} }

/* ---------- 角色选择 ---------- */
#screen-cast{ align-items:center; justify-content:center; overflow-y:auto; }
.screen-title{ font-size:clamp(1.5rem,4vw,2.2rem); letter-spacing:.1em; text-align:center; }
.screen-sub{ color:var(--ink-dim); margin:12px 0 30px; text-align:center; font-size:.95rem; }
.cast-list{
  display:grid; gap:18px; width:100%; max-width:980px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
}
.cast-card{
  background:var(--panel); border:1px solid var(--panel-line);
  border-radius:var(--radius); padding:24px 20px; text-align:center;
  cursor:pointer; backdrop-filter:blur(8px);
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.cast-card:hover{ transform:translateY(-6px); border-color:var(--glow,var(--accent));
                  box-shadow:0 18px 40px rgba(0,0,0,.45); }
.cast-ava{
  width:78px; height:78px; margin:0 auto 14px; border-radius:50%;
  display:grid; place-items:center; font-size:2rem; font-weight:700;
  background:radial-gradient(circle at 35% 30%,var(--glow),rgba(0,0,0,.55));
  color:#fff; border:2px solid rgba(255,255,255,.22);
}
.cast-name{ font-size:1.22rem; letter-spacing:.1em; margin-bottom:4px; }
.cast-role{ color:var(--glow); font-size:.8rem; letter-spacing:.16em; margin-bottom:12px; }
.cast-desc{ color:var(--ink-soft); font-size:.88rem; line-height:1.85; }
.cast-tag{
  display:inline-block; margin-top:14px; font-size:.72rem; letter-spacing:.1em;
  padding:.3em .9em; border-radius:999px; color:var(--glow);
  border:1px solid var(--glow); opacity:.85;
}

/* ---------- HUD ---------- */
.game-header{
  display:flex; justify-content:space-between; align-items:center;
  gap:10px; flex-wrap:wrap; margin-bottom:14px; position:relative; z-index:3;
}
.hud-left,.hud-right{ display:flex; gap:8px; flex-wrap:wrap; }
.hud-chip{
  font-size:.78rem; letter-spacing:.1em; padding:.42em 1em;
  border-radius:999px; background:rgba(255,255,255,.07);
  border:1px solid var(--panel-line); color:var(--ink-soft);
}

/* ---------- 舞台 ---------- */
.stage{
  position:relative; flex:1; min-height:0;
  border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--panel-line);
  background:
    linear-gradient(180deg,rgba(255,255,255,.045),rgba(0,0,0,.25)),
    radial-gradient(80% 60% at 50% 110%,rgba(127,182,196,.16),transparent 70%);
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,.06);
  display:flex; flex-direction:column; justify-content:flex-end;
}

.characters{
  position:absolute; inset:0; pointer-events:none;
  display:flex; align-items:flex-end; justify-content:center;
  gap:clamp(10px,4vw,56px); padding:0 4vw 118px;
}
.char{
  position:relative;
  width:clamp(140px,18vw,240px);
  opacity:0; transform:translateY(24px) scale(.96);
  transition:opacity .5s ease, transform .5s ease, filter .5s ease;
  display:flex; justify-content:center;
}
.char.on{ opacity:1; transform:none; }
.char.dim{ opacity:.5; filter:grayscale(.35) brightness(.8); }

.char-img{
  display:block;
  width:100%;
  height:auto;
  max-height:56vh;
  object-fit:cover;
  object-position:center top;
  border-radius:10px;
  filter: saturate(1.06) contrast(1.03) drop-shadow(0 24px 40px rgba(0,0,0,.6));
  /* 椭圆羽化：中间完全保留，四周渐隐融入背景 */
  -webkit-mask-image: radial-gradient(ellipse 62% 66% at 50% 44%,
      #000 46%, rgba(0,0,0,.92) 64%, rgba(0,0,0,.55) 82%, transparent 99%);
  mask-image: radial-gradient(ellipse 62% 66% at 50% 44%,
      #000 46%, rgba(0,0,0,.92) 64%, rgba(0,0,0,.55) 82%, transparent 99%);
}

.char-label{
  display:none;
}
.char.on .char-label{ color:#fff; }

/* ---------- 对话框 ---------- */
.dialogue-wrap{
  position:relative; z-index:3; margin:0 clamp(14px,3vw,40px) clamp(12px,2.2vw,22px);
  background:var(--panel); backdrop-filter:blur(14px);
  border:1px solid var(--panel-line); border-radius:16px;
  padding:18px clamp(16px,2.6vw,30px) 22px;
  box-shadow:0 -6px 40px rgba(0,0,0,.35);
}
.speaker-row{ display:flex; align-items:center; gap:12px; margin-bottom:8px; min-height:34px; }
.portrait[hidden]{ display:none !important; }
.portrait{
  width:34px; height:34px; border-radius:50%; flex:0 0 auto;
  display:grid; place-items:center; font-size:1.05rem; font-weight:700;
  background:linear-gradient(150deg,var(--c1,#666),var(--c2,#333)); color:#fff;
}
.speaker-name{
  font-size:1.06rem; letter-spacing:.18em; font-weight:700; color:var(--accent);
}
.speaker-name[data-c="me"]{ color:#fff; }
.dialogue{
  font-size:clamp(1rem,1.45vw,1.2rem); line-height:2.0;
  color:var(--ink); min-height:4.2em; letter-spacing:.03em;
}
.dialogue .em{ color:var(--rose); }
.dialogue i{ color:var(--ink-dim); font-style:italic; }
.typing-hint{
  position:absolute; right:22px; bottom:10px; color:var(--accent);
  animation:bob 1s ease-in-out infinite; font-size:.8rem;
}
@keyframes bob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(4px)} }

/* 内心独白样式 */
.stage.mode-narr .dialogue{ color:#cfc7ba; font-style:italic; }

/* ---------- 选项 ---------- */
.choices{
  display:flex; flex-direction:column; gap:10px;
  margin-top:14px; max-height:38vh; overflow-y:auto;
}
.choice{
  text-align:left; font-family:inherit; font-size:.98rem; line-height:1.7;
  color:var(--ink); background:rgba(255,255,255,.055);
  border:1px solid var(--panel-line); border-left:3px solid transparent;
  border-radius:12px; padding:13px 18px; cursor:pointer;
  transition:all .16s ease; animation:rise .35s ease both;
}
.choice:hover,.choice:focus{
  background:rgba(255,255,255,.12); border-left-color:var(--accent);
  transform:translateX(5px); outline:none;
}
.choice .key{
  display:inline-grid; place-items:center; width:22px; height:22px;
  border-radius:6px; background:rgba(255,255,255,.12); color:var(--accent);
  font-size:.75rem; margin-right:12px; vertical-align:2px;
}
.choice.tone-bold{ --accent:var(--rose); }
.choice.tone-warm{ --accent:var(--accent); }
.choice.tone-cold{ --accent:var(--accent-2); }
.choice.tone-quiet{ --accent:var(--violet); }
.choice.locked{ opacity:.42; cursor:not-allowed; transform:none !important; }
.choice .req{ display:block; margin-top:6px; font-size:.76rem; color:var(--ink-dim); letter-spacing:.08em; }

/* ---------- 回顾 ---------- */
#screen-log{ align-items:center; overflow-y:auto; }
.log-list{ width:100%; max-width:820px; display:flex; flex-direction:column; gap:10px; }
.log-item{
  background:rgba(255,255,255,.05); border:1px solid var(--panel-line);
  border-radius:12px; padding:13px 18px; line-height:1.9;
}
.log-item .who{ color:var(--accent); font-size:.86rem; letter-spacing:.14em; margin-right:10px; }

/* ---------- 结局 ---------- */
#screen-ending{ align-items:center; justify-content:center; overflow-y:auto; }
.ending-card{
  max-width:660px; width:100%; text-align:center;
  background:var(--panel); border:1px solid var(--panel-line);
  border-radius:26px; padding:clamp(28px,5vw,54px);
  box-shadow:var(--shadow); backdrop-filter:blur(14px);
  animation:rise .8s cubic-bezier(.2,.8,.2,1) both;
}
.ending-title{
  font-size:clamp(1.7rem,5vw,2.6rem); letter-spacing:.14em; margin:6px 0 22px;
  background:linear-gradient(180deg,#fff,#c9bda9);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ending-portrait{ font-size:3.4rem; margin-bottom:10px; }
.ending-quote{
  color:var(--ink-soft); line-height:2.1; font-size:1.02rem;
  margin-bottom:24px; white-space:pre-line;
}
.ending-stats{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:8px;
}
.stat-chip{
  font-size:.76rem; letter-spacing:.08em; color:var(--ink-soft);
  padding:.36em .95em; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid var(--panel-line);
}
.stat-chip b{ color:var(--accent); font-weight:700; }

/* ---------- Toast ---------- */
.toast{
  position:fixed; left:50%; bottom:44px; translate:-50% 0; z-index:50;
  background:rgba(20,21,26,.94); border:1px solid var(--panel-line);
  color:var(--ink); padding:.7em 1.5em; border-radius:999px;
  font-size:.88rem; letter-spacing:.08em; box-shadow:var(--shadow);
  animation:toastIn .3s ease both;
}
@keyframes toastIn{ from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none} }

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.16); border-radius:8px; }
::-webkit-scrollbar-track{ background:transparent; }

/* ---------- 响应式 ---------- */
@media (max-width:640px){
  .char-head{ }
  .characters{ padding-bottom:120px; gap:2px; }
  .dialogue{ line-height:1.9; min-height:5em; }
  .hud-chip{ font-size:.7rem; padding:.38em .8em; }
  .btn-mini{ font-size:.72rem; padding:.36em .8em; }
  .dialogue-wrap{ padding:14px 14px 18px; }
}
@media (max-height:620px){
  .characters{ padding-bottom:118px; }
}

/* 减少动效 */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}


/* ================= 场景色调 ================= */
.stage{ transition:background 1.2s ease, box-shadow 1.2s ease; }
.stage.bg-tide{
  background:
    linear-gradient(180deg, rgba(120,190,215,.16), rgba(8,14,26,.55)),
    radial-gradient(90% 70% at 50% 120%, rgba(64,150,180,.30), transparent 70%),
    radial-gradient(70% 50% at 20% 10%, rgba(150,220,235,.12), transparent 65%);
}
.stage.bg-dust{
  background:
    linear-gradient(180deg, rgba(210,190,150,.10), rgba(10,12,16,.62)),
    radial-gradient(80% 60% at 50% 110%, rgba(200,160,90,.20), transparent 70%);
}
.stage.bg-dusk{
  background:
    linear-gradient(180deg, rgba(240,150,110,.20), rgba(60,30,60,.42) 45%, rgba(8,10,20,.66)),
    radial-gradient(85% 65% at 50% 125%, rgba(230,140,90,.32), transparent 72%);
}
.stage.bg-warm{
  background:
    linear-gradient(180deg, rgba(255,205,150,.18), rgba(30,18,12,.55)),
    radial-gradient(85% 65% at 50% 120%, rgba(235,170,110,.30), transparent 72%);
}
.stage::after{   /* 海平面微光 */
  content:""; position:absolute; left:0; right:0; bottom:0; height:34%;
  background:linear-gradient(to top, rgba(150,210,230,.10), transparent);
  pointer-events:none; opacity:.9; transition:opacity 1s ease;
}


/* ================= 场景背景图 ================= */
.scene-bg{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transition:opacity 1.1s ease;
  z-index:0;
  filter:saturate(1.02);
  transform:scale(1.02);
}
.scene-vignette{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 18%, rgba(0,0,0,0) 42%, rgba(8,8,12,.90) 100%),
    radial-gradient(130% 95% at 50% 42%, transparent 52%, rgba(0,0,0,.42) 100%);
}
.characters{ z-index:2; }
.dialogue-wrap{ z-index:3; }