:root{
  --panel:rgba(13,20,22,0.94);--panel-hover:rgba(18,29,31,0.98);
  --border:rgba(181,213,196,0.16);--border-light:rgba(211,184,111,0.34);
  --text:#d9e0dc;--text-dim:#82918d;--white:#f7fbf8;
  --accent:#76b889;--accent2:#6fa9b8;--gold:#d3b86f;--red:#cf716d;--purple:#a58bb6;
  --radius:8px;--radius-sm:6px;--radius-lg:12px;
  --hair:rgba(255,255,255,0.045);--shadow:0 10px 28px rgba(0,0,0,0.28);
  --font:'PingFang SC','Hiragino Sans GB','Microsoft YaHei',-apple-system,BlinkMacSystemFont,sans-serif;
  --font-mono:'SF Mono','Fira Code','JetBrains Mono',monospace;
  --app-vh:1vh;
}
*{margin:0;padding:0;box-sizing:border-box}
html{
  width:100%;
  scroll-behavior:auto;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
button,input,select,textarea{font:inherit;color:inherit}
button{touch-action:manipulation}
body{
  background:
    radial-gradient(1180px 640px at 16% -18%,rgba(234,198,105,0.2),transparent 62%),
    radial-gradient(900px 520px at 86% 8%,rgba(211,184,111,0.1),transparent 68%),
    linear-gradient(126deg,rgba(211,184,111,0.14),transparent 46%),
    linear-gradient(170deg,#06060f 0%,#0d0d1a 54%,#0a0a16 100%);
  background-size:120% 110%,120% 100%,auto,auto;
  color:var(--text);font-family:var(--font);
  width:100%;min-height:100vh;min-height:calc(var(--app-vh,1vh)*100);
  display:flex;align-items:center;justify-content:center;
  background-attachment:fixed;
  position:relative;overflow-x:hidden;
  overscroll-behavior-y:none;
  color-scheme:dark;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent;
}
@supports (min-height:100dvh){
  body{min-height:100dvh}
}
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(740px 420px at 28% 0%,rgba(235,198,105,0.18),rgba(211,184,111,0.08) 38%,transparent 72%),
    linear-gradient(118deg,rgba(211,184,111,0.13) 0%,rgba(211,184,111,0.055) 28%,transparent 60%);
  opacity:0.86;
  transform:translate3d(0,0,0);
}
body::after{
  content:'';position:fixed;inset:-12%;z-index:0;pointer-events:none;
  background:
    repeating-linear-gradient(45deg,transparent 0 35px,rgba(154,122,176,0.055) 36px 37px,transparent 38px 72px),
    repeating-linear-gradient(135deg,transparent 0 35px,rgba(212,176,100,0.024) 36px 37px,transparent 38px 72px),
    linear-gradient(180deg,transparent 0%,rgba(0,0,0,0.42) 100%);
  background-size:auto,auto,auto;
  background-position:0 0,0 0,0 0;
  opacity:0.52;
  transform:translate3d(0,0,0);
  animation:gridGlimmer 8.6s ease-in-out infinite;
}
@keyframes gridGlimmer{
  0%,100%{opacity:0.46}
  42%{opacity:0.61}
  58%{opacity:0.54}
}
#game{
  width:100%;max-width:720px;min-height:100vh;min-height:calc(var(--app-vh,1vh)*100);padding:20px;
  padding-left:max(20px,env(safe-area-inset-left));
  padding-right:max(20px,env(safe-area-inset-right));
  padding-top:max(20px,env(safe-area-inset-top));
  padding-bottom:max(20px,env(safe-area-inset-bottom));
  display:flex;flex-direction:column;position:relative;gap:2px;z-index:1;
}
@supports (min-height:100dvh){
  #game{min-height:100dvh}
}

/* ---- header 固定顶部 ---- */
#top-bar{
  display:none;align-items:center;justify-content:space-between;
  padding:10px 14px;margin-bottom:10px;gap:10px;
  background:linear-gradient(180deg,rgba(17,27,29,0.98),rgba(10,16,18,0.98));
  border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  position:sticky;top:10px;z-index:30;
}
#top-bar.visible{display:flex}
#top-bar .title{font-size:14px;color:var(--gold);font-weight:800;letter-spacing:1px;white-space:nowrap}
#top-bar .home-link{font-size:12px;color:var(--text-dim);text-decoration:none;margin-right:6px;padding:2px 6px;border-radius:var(--radius-sm);transition:color 0.2s,background 0.2s;white-space:nowrap}
#top-bar .home-link:hover{color:var(--accent2);background:rgba(111,169,184,0.12)}
#top-bar .btns{display:flex;gap:4px;flex-wrap:wrap}
#phase-tag{
  padding:3px 8px;border:1px solid rgba(181,213,196,0.12);border-radius:999px;
  background:rgba(255,255,255,0.025);color:var(--text-dim);
  font-size:10px;letter-spacing:0.06em;white-space:nowrap;
}
#phase-tag:empty{display:none}
.btn-sm{
  padding:5px 10px;font-size:10px;border:1px solid var(--border);border-radius:7px;
  background:rgba(255,255,255,0.025);color:var(--text-dim);cursor:pointer;
  font-family:inherit;transition:color 0.16s,border-color 0.16s,background 0.16s,transform 0.16s;
}
.btn-sm:hover{border-color:var(--accent2);color:var(--text);background:rgba(111,169,184,0.1);transform:translateY(-1px)}

/* ---- 状态栏：紧凑单行 ---- */
#status-bar{
  display:none;gap:3px;padding:6px 10px;
  background:rgba(8,14,15,0.96);
  border:1px solid var(--border);border-radius:var(--radius-lg);
  margin-bottom:8px;font-size:11px;flex-wrap:nowrap;align-items:center;
  overflow-x:auto;
  box-shadow:0 8px 20px rgba(0,0,0,0.18);
}
#status-bar.visible{display:flex}
.sti{
  display:flex;flex-direction:column;align-items:center;flex-shrink:0;
  min-width:38px;padding:2px 4px;
  background:rgba(255,255,255,0.025);border:1px solid var(--hair);border-radius:var(--radius-sm);
}
.sti .sl{font-size:7px;color:var(--text-dim);letter-spacing:0.8px;text-transform:uppercase;margin-bottom:0;line-height:1}
.sti .sv{font-weight:700;font-family:var(--font-mono);font-size:13px;line-height:1.2}
.sv-m{color:#7ab8e0}.sv-s{color:var(--accent)}.sv-c{color:var(--gold)}.sv-t{color:var(--purple)}.sv-w{color:var(--red)}
/* 数字跳动动画 */
@keyframes numBounce{0%,100%{transform:scale(1)}30%{transform:scale(1.25);color:var(--gold)}}
.num-pop{animation:numBounce 0.5s ease}

/* 天气图标：静态显示，只承担识别作用 */
.weather-icon{
  font-size:17px;margin-left:auto;opacity:0.94;line-height:1;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,0.32));
}

/* ---- 日期指示器 ---- */
#day-indicator{
  display:none;gap:8px;align-items:center;margin-bottom:8px;
  padding:6px 12px;font-size:11px;color:var(--text-dim);
  background:rgba(255,255,255,0.025);border:1px solid var(--hair);border-radius:999px;
}
#day-indicator.visible{display:flex}
.dp{padding:3px 10px;border-radius:12px;font-size:10px;font-weight:600;letter-spacing:0.5px}
.dp-mo{background:rgba(212,176,100,0.2);color:var(--gold)}
.dp-dt{background:rgba(90,174,90,0.2);color:var(--accent)}
.dp-ev{background:rgba(90,158,218,0.2);color:var(--accent2)}
.dp-ni{background:rgba(154,122,176,0.2);color:var(--purple)}
.dp-we{background:rgba(212,176,100,0.15);color:var(--gold)}

/* ---- 主区域 ---- */
#main-area{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}
#game{
  transform:translateZ(0);
}
body.panel-active #game{
  pointer-events:none;
}
#modal-veil{
  position:fixed;inset:0;z-index:190;pointer-events:none;
  background-color:rgba(4,7,8,0);
  transition:background-color 0.96s cubic-bezier(.22,1,.36,1);
}
body.panel-active #modal-veil{background-color:rgba(4,7,8,0.42)}
body.panel-closing #modal-veil{animation:veilBrightnessOut 0.96s cubic-bezier(.22,1,.36,1) both}
@keyframes veilBrightnessOut{
  0%{background-color:rgba(4,7,8,0.42)}
  82%{background-color:rgba(4,7,8,0.03)}
  100%{background-color:rgba(4,7,8,0)}
}

/* ---- 叙事区：左边框装饰线 ---- */
#narrative{
  width:100%;font-size:16px;line-height:1.8;text-align:left;color:var(--text);
  padding:18px 18px 18px 20px;min-height:50px;
  border:1px solid var(--border);border-left:3px solid rgba(211,184,111,0.58);
  background:
    linear-gradient(90deg,rgba(211,184,111,0.06),rgba(8,14,15,0.72) 38%,rgba(8,14,15,0.38)),
    radial-gradient(circle at 86% 0%,rgba(111,169,184,0.08),transparent 34%);
  border-radius:var(--radius);
  box-shadow:0 8px 24px rgba(0,0,0,0.16);
}
#narrative p{margin:8px 0}
#narrative .hl{color:var(--gold);font-weight:600}
#narrative .dim{color:var(--text-dim);font-style:italic}
#narrative .warn{color:var(--red);font-weight:500}
#narrative .know{color:var(--accent2);font-style:italic}
#narrative.menu-narrative{
  border-color:transparent;border-left-color:transparent;background:transparent;
  box-shadow:none;text-align:center;padding:30px 18px 14px;
}
body.map-active #narrative{display:none}
.menu-hero{max-width:560px;margin:0 auto;animation:sectionRise .42s cubic-bezier(.16,1,.3,1) both}
.menu-kicker{font-family:var(--font-mono);font-size:10px;letter-spacing:0.18em;color:var(--text-dim);margin-bottom:10px}
.menu-title{font-size:24px;line-height:1.2;color:var(--gold);font-weight:800;letter-spacing:0.1em;margin-bottom:10px}
.menu-subtitle{font-size:13px;line-height:1.8;color:var(--text-dim);max-width:420px;margin:0 auto}
.menu-slots{
  width:100%;max-width:620px;margin:0 auto;display:flex;flex-direction:column;
  align-items:center;justify-content:center;animation:sectionRise .42s .06s cubic-bezier(.16,1,.3,1) both;
}

/* ---- 按钮区 ---- */
#actions{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;width:100%;position:relative;
  padding:12px;border:1px solid rgba(181,213,196,0.12);border-radius:var(--radius-lg);
  background:
    linear-gradient(180deg,rgba(12,20,21,0.48),rgba(4,8,9,0.22)),
    linear-gradient(90deg,rgba(211,184,111,0.035),transparent 28%,rgba(111,169,184,0.035));
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.035),0 16px 32px rgba(0,0,0,0.16);
}
#actions.menu-actions{
  align-self:center;max-width:660px;min-height:0;justify-content:center;align-items:center;
  background:transparent;border-color:transparent;box-shadow:none;padding:4px 0 18px;
}
.btn{
  padding:11px 22px;border:1px solid var(--border);border-radius:7px;
  background:linear-gradient(180deg,rgba(19,30,32,0.96),rgba(10,18,20,0.96));
  color:var(--text);font-size:14px;cursor:pointer;transition:color 0.22s,border-color 0.22s,background 0.22s,transform 0.22s cubic-bezier(.2,.8,.2,1),box-shadow 0.22s;
  font-family:inherit;min-width:80px;text-align:center;
  position:relative;overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,0.18),inset 0 1px 0 rgba(255,255,255,0.04);
}
.btn::after{
  content:'';position:absolute;top:50%;left:50%;width:0;height:0;border-radius:50%;
  background:rgba(255,255,255,0.1);transform:translate(-50%,-50%);transition:width 0.6s,height 0.6s;
}
.btn:hover{
  border-color:var(--accent);color:var(--white);
  background:linear-gradient(180deg,rgba(27,42,43,0.98),rgba(13,24,25,0.98));
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(0,0,0,0.24);
}
.btn:active{transform:translateY(0);transition:transform 0.08s}
.btn:active::after{width:300px;height:300px;opacity:0;transition:0s}
.btn-pri{border-color:rgba(118,184,137,0.72);color:var(--accent)}
.btn-pri:hover{background:rgba(118,184,137,0.12);box-shadow:0 8px 20px rgba(0,0,0,0.24)}
.btn-gold{border-color:rgba(211,184,111,0.76);color:var(--gold)}
.btn-gold:hover{background:rgba(211,184,111,0.12);box-shadow:0 8px 20px rgba(0,0,0,0.24)}
.btn-danger{border-color:var(--red);color:var(--red)}
.btn-danger:hover{background:rgba(207,113,109,0.12);box-shadow:0 8px 20px rgba(0,0,0,0.24)}
.btn-purp{border-color:var(--purple);color:var(--purple)}
.btn-purp:hover{background:rgba(165,139,182,0.12);box-shadow:0 8px 20px rgba(0,0,0,0.24)}
/* 归途按钮金色微光脉冲 */
.btn-guide-glow{
  border-color:var(--gold);color:var(--gold);
  box-shadow:inset 0 0 0 1px rgba(211,184,111,0.16),0 0 10px rgba(211,184,111,0.12);
  animation:guideGlow 2.8s ease-in-out infinite;
}
@keyframes guideGlow{
  0%,100%{box-shadow:inset 0 0 0 1px rgba(211,184,111,0.14),0 0 8px rgba(211,184,111,0.1);filter:saturate(1)}
  50%{box-shadow:inset 0 0 0 1px rgba(211,184,111,0.34),0 0 18px rgba(211,184,111,0.24);filter:saturate(1.12)}
}
/* 比武按钮红框闪烁 */
.btn.tournament-flash{border-color:var(--red);animation:tourneyFlash 1.9s ease-in-out infinite}
@keyframes tourneyFlash{
  0%,100%{border-color:rgba(207,113,109,.72);box-shadow:0 0 8px rgba(200,96,96,0.2)}
  50%{border-color:#f08080;box-shadow:0 0 18px rgba(240,96,96,0.36)}
}

/* 按钮分组 */
.btn-sec{width:100%;margin-bottom:8px}
.btn-sec:last-child{margin-bottom:0}
.btn-sec-title{
  font-size:10px;color:var(--text-dim);letter-spacing:0.12em;padding:0 2px 6px;margin-bottom:7px;
  font-weight:700;border-bottom:1px solid rgba(181,213,196,0.1);text-transform:uppercase;
}
.btn-sec-btns{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.btn-sec-empty{width:100%;padding:10px 12px;border:1px dashed var(--border);border-radius:var(--radius-sm);color:var(--text-dim);font-size:12px;text-align:center;background:rgba(255,255,255,0.018)}
@keyframes sectionRise{
  from{opacity:0;transform:translateY(12px) scale(.99)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.menu-hero{animation:menuHeroIn .86s cubic-bezier(.22,1,.36,1) both}
.menu-slots{animation:menuSlotsIn .88s .12s cubic-bezier(.22,1,.36,1) both}
@keyframes menuHeroIn{
  from{opacity:0;transform:translateY(18px) scale(.992)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes menuSlotsIn{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes currentCourseBreath{
  0%,100%{box-shadow:0 0 10px rgba(212,176,100,0.24),inset 0 0 8px rgba(212,176,100,0.05)}
  50%{box-shadow:0 0 18px rgba(212,176,100,0.38),inset 0 0 12px rgba(212,176,100,0.08)}
}
@keyframes barBreathe{
  0%,100%{background-position:0% 50%;filter:saturate(1)}
  50%{background-position:100% 50%;filter:saturate(1.12)}
}
.btn-sec{opacity:1;animation:none}
/* 好感度动画 */
@keyframes affinityPulse{
  0%,100%{box-shadow:0 0 0 rgba(90,174,90,0);transform:translateY(0)}
  35%{box-shadow:0 0 18px rgba(90,174,90,0.42),0 0 32px rgba(90,174,90,0.18);transform:translateY(-1px)}
  70%{box-shadow:0 0 8px rgba(90,174,90,0.24);transform:translateY(0)}
}
.npc-card.affinity-pop{animation:affinityPulse 0.95s cubic-bezier(.22,1,.36,1)}
.npc-card.affinity-pop .npc-af-fill{transition:width 0.75s cubic-bezier(.22,1,.36,1)}

/* ---- 课表 ---- */
#schedule{display:none;width:100%;margin:8px 0}
#schedule.visible{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
#schedule.wide{grid-template-columns:repeat(6,1fr)}
.sslot{
  padding:10px 4px;background:var(--panel);border:1px solid var(--border);
  border-radius:var(--radius-sm);text-align:center;font-size:10px;
  cursor:pointer;transition:border-color 0.16s,background 0.16s,transform 0.16s;
  position:relative;overflow:hidden;
}
/* 扫光动画 */
.sslot::before{
  content:'';position:absolute;top:0;left:-120%;width:80%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.04),transparent);
  transform:skewX(-25deg);transition:left 0.6s ease;
}
.sslot:hover{border-color:var(--accent2);background:var(--panel-hover);transform:translateY(-1px)}
.sslot:hover::before{left:150%}
.sslot.done{opacity:0.25;cursor:default;border-color:transparent;filter:grayscale(0.6)}
.sslot.done:hover{transform:none}
.sslot.done::before{display:none}
.sslot.off-current{opacity:0.25;filter:grayscale(0.85);border-color:transparent}
.sslot.off-current:hover{transform:none}
.sslot.off-current::before{display:none}
.sslot.current{
  border-color:var(--gold);
  box-shadow:0 0 12px rgba(212,176,100,0.35),inset 0 0 8px rgba(212,176,100,0.06);
  background:rgba(212,176,100,0.08);
  animation:currentCourseBreath 3.8s ease-in-out infinite;
}
.sslot .sn{font-weight:600;font-size:11px}.sslot .ss{font-size:8px;color:var(--text-dim);margin-top:2px}

/* ---- 地图区域 ---- */
#map-area{display:none;width:100%;margin:8px 0}
#map-area.visible{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.mn{
  padding:12px 5px;background:var(--panel);
  border:1px solid var(--border);border-radius:var(--radius);text-align:center;
  font-size:11px;cursor:pointer;transition:border-color 0.16s,background 0.16s,transform 0.16s,box-shadow 0.16s;
}
.mn:hover{border-color:var(--accent2);background:var(--panel-hover);transform:translateY(-1px);box-shadow:0 8px 18px rgba(0,0,0,0.22)}
.mn.locked{opacity:0.32;cursor:not-allowed;filter:grayscale(0.8)}
.mn .mi{display:block;margin:0 auto 7px;width:max-content;min-width:34px;padding:2px 7px;border:1px solid var(--border);border-radius:999px;color:var(--text-dim);font-family:var(--font-mono);font-size:9px;letter-spacing:0.08em}
.map-info{
  grid-column:1/-1;padding:13px 15px 13px 17px;
  background:
    linear-gradient(90deg,rgba(211,184,111,0.06),rgba(8,14,15,0.72) 38%,rgba(8,14,15,0.38)),
    radial-gradient(circle at 86% 0%,rgba(111,169,184,0.08),transparent 34%);
  border:1px solid var(--border);border-left:3px solid rgba(211,184,111,0.58);
  border-radius:var(--radius);box-shadow:0 8px 24px rgba(0,0,0,0.16);
  color:var(--text);font-size:12px;line-height:1.75;text-align:left;
}
.map-info .mi-title{color:var(--gold);font-weight:700;margin-bottom:2px}
.map-info .mi-body{color:var(--text-dim)}

/* ---- 生态面板 ---- */
#eco-panel{
  display:none;width:100%;margin:8px 0;padding:12px 14px;
  background:var(--panel);
  border:1px solid var(--border);border-radius:var(--radius);
  animation:panelIn 0.24s ease;
}
#eco-panel.visible{display:block}
.er{display:flex;align-items:center;gap:8px;margin:5px 0;font-size:12px}
.er .ei{
  width:34px;text-align:center;font-family:var(--font-mono);font-size:9px;letter-spacing:0.06em;
  color:var(--text-dim);border:1px solid var(--hair);border-radius:999px;padding:1px 0;background:rgba(255,255,255,0.018);
}
.er .en{font-weight:600;min-width:36px;font-size:11px}
.er .eb{flex:1;height:6px;background:rgba(255,255,255,0.06);border-radius:3px;overflow:hidden}
.er .ef{height:100%;border-radius:3px;transition:width 1.05s cubic-bezier(.22,1,.36,1);background-size:160% 100%;animation:barBreathe 5.6s ease-in-out infinite}
.ef-g{background:linear-gradient(90deg,var(--accent),#7ad87a)}.ef-b{background:linear-gradient(90deg,var(--accent2),#7ab8f0)}.ef-y{background:linear-gradient(90deg,var(--gold),#e8c878)}
.er .ev{font-size:10px;color:var(--text-dim);min-width:64px;text-align:right}

/* ---- 罪途面板 ---- */
#sintu-panel{
  display:none;width:100%;margin:8px 0;padding:12px 14px;
  background:var(--panel);
  border:1px solid rgba(200,96,96,0.25);border-radius:var(--radius);
  animation:panelIn 0.24s ease;
}
#sintu-panel.visible{display:block}
.st-row{display:flex;align-items:center;gap:8px;font-size:11px}
.st-bar{flex:1;height:6px;background:rgba(255,255,255,0.06);border-radius:3px;overflow:hidden}
.st-fill{height:100%;background:linear-gradient(90deg,var(--red),#f08080);border-radius:3px;transition:width 1.05s cubic-bezier(.22,1,.36,1);background-size:160% 100%;animation:barBreathe 5.6s ease-in-out infinite}
.ec{font-size:10px;color:var(--text-dim);text-align:center;margin-top:4px}

/* ---- 面板滑入动画 ---- */
@keyframes panelIn{
  from{opacity:0;transform:translateY(14px) scale(.99)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* ---- 日志 ---- */
#log{
  display:none;width:100%;max-height:80px;overflow-y:auto;font-size:10px;
  color:var(--text-dim);margin-top:10px;
  border-top:1px solid var(--border);padding-top:8px;
}
#log.visible{display:block}
.le{padding:1px 0;opacity:0.7}

/* ---- Panels: knowledge, npc, market, achievement ---- */
#knowledge-panel,#npc-panel,#market-panel,#achv-panel,#master-panel,#save-panel{
  display:none;position:fixed;top:0;left:0;right:0;bottom:0;
  background:linear-gradient(180deg,rgba(7,12,13,0.96),rgba(4,8,9,0.985));
  z-index:200;padding:30px 20px 42px;overflow-y:auto;flex-direction:column;align-items:center;
  border-left:1px solid rgba(211,184,111,0.12);border-right:1px solid rgba(111,169,184,0.08);
  max-height:calc(var(--app-vh,1vh)*100);
}
#knowledge-panel.visible,#npc-panel.visible,#market-panel.visible,#achv-panel.visible,#master-panel.visible,#save-panel.visible{display:flex;animation:panelIn 0.48s cubic-bezier(.22,1,.36,1)}
/* NPC 次级弹窗 */
#npc-detail{
  display:none;position:fixed;top:0;left:0;right:0;bottom:0;
  background:linear-gradient(180deg,rgba(7,12,13,0.96),rgba(4,8,9,0.988));
  z-index:220;padding:24px 20px;overflow-y:auto;flex-direction:column;align-items:center;justify-content:center;
  max-height:calc(var(--app-vh,1vh)*100);
}
#npc-detail.visible{display:flex;animation:panelIn 0.48s cubic-bezier(.22,1,.36,1)}
#npc-detail-content{width:100%;max-width:420px}
#npc-detail .npc-talk{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:12px}
.kclose{position:fixed;top:16px;right:20px;font-size:22px;cursor:pointer;color:var(--text-dim);z-index:201;transition:all 0.2s}
.kclose:hover{color:var(--red);transform:scale(1.1)}
#knowledge-panel h2,#npc-panel h2,#market-panel h2,#achv-panel h2,#master-panel h2,#save-panel h2{
  color:var(--accent2);font-size:18px;margin-bottom:18px;text-align:center;font-weight:800;
  letter-spacing:0.08em;border-bottom:1px solid rgba(111,169,184,0.18);padding-bottom:8px;min-width:160px;
}
.kc{
  padding:10px 14px;background:var(--panel);border:1px solid var(--border);border-left:3px solid var(--accent2);
  border-radius:var(--radius-sm);margin:6px 0;width:100%;max-width:550px;font-size:12px;
  animation:panelIn 0.24s ease;
}
.kt{font-weight:600;color:var(--gold)}.kb{color:var(--text);margin-top:3px}.ks{font-size:9px;color:var(--text-dim);margin-top:2px}

/* NPC & Social */
.npc-card{
  cursor:pointer;padding:12px 14px;background:linear-gradient(180deg,rgba(13,22,23,0.94),rgba(8,14,15,0.94));
  border:1px solid var(--border);border-radius:var(--radius);margin:4px 0;width:100%;max-width:550px;
  display:flex;align-items:center;gap:10px;transition:border-color 0.22s,background 0.22s,transform 0.22s cubic-bezier(.2,.8,.2,1),box-shadow 0.22s;font-size:12px;
}
.npc-card:hover{border-color:var(--accent2);background:var(--panel-hover);transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,0.2)}
.npc-card .na{font-weight:600;color:var(--gold)}.npc-card .nr{font-size:10px;color:var(--text-dim)}
.npc-card .nh{font-size:10px;margin-left:auto;text-align:right}
.npc-af-bar{height:4px;background:rgba(255,255,255,0.06);border-radius:2px;margin-top:2px;overflow:hidden}
.npc-af-fill{height:100%;border-radius:2px;transition:width 0.5s}
.af-0{background:#6a6a7a}.af-1{background:var(--accent2)}.af-2{background:var(--accent)}.af-3{background:var(--gold)}
.npc-talk{
  background:rgba(8,8,20,0.8);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px;margin:8px 0;width:100%;max-width:500px;
}
.npc-talk p{font-size:13px;line-height:1.8;color:var(--text)}
.buff-tag{display:inline-block;font-size:9px;padding:2px 6px;border-radius:10px;margin-left:4px;background:rgba(212,176,100,0.2);color:var(--gold)}
.master-tag{display:inline-block;font-size:9px;padding:2px 6px;border-radius:10px;margin-left:4px;background:rgba(154,122,176,0.25);color:var(--purple)}

/* Market Panel */
.mkt-section{margin:8px 0;width:100%;max-width:550px}
.mkt-section h3{font-size:13px;color:var(--gold);margin-bottom:6px;padding-bottom:4px;border-bottom:1px solid var(--border);font-weight:600}
.mkt-item{
  display:flex;align-items:center;justify-content:space-between;padding:10px 12px;
  background:var(--panel);
  border:1px solid var(--border);border-radius:var(--radius-sm);margin:4px 0;font-size:12px;
}
.mkt-item .mi-name{font-weight:600}.mkt-item .mi-price{color:var(--gold);font-family:var(--font-mono)}
.mkt-item .mi-tag{font-size:9px;padding:2px 6px;border-radius:8px;margin-left:6px}
.tag-hot{background:rgba(200,96,96,0.2);color:var(--red)}.tag-new{background:rgba(90,174,90,0.2);color:var(--accent)}.tag-weekend{background:rgba(90,158,218,0.2);color:var(--accent2)}
.credits-display{font-size:12px;text-align:center;margin-bottom:10px;color:var(--text-dim)}
.credits-display .enough{color:var(--accent)}.credits-display .low{color:var(--red)}

/* Achievement Panel */
.achv-card{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 14px;
  background:linear-gradient(180deg,rgba(13,22,23,0.94),rgba(8,14,15,0.94));
  border:1px solid var(--border);border-radius:var(--radius-sm);margin:5px 0;
  width:100%;max-width:550px;font-size:12px;transition:border-color .22s,transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s;
}
.achv-card:not(.locked):not(.hidden-locked):hover{border-color:var(--gold);transform:translateY(-1px);box-shadow:0 10px 24px rgba(0,0,0,0.18)}
.achv-card.locked{opacity:0.35}.achv-card.hidden-locked{opacity:0.6;filter:blur(2px);cursor:default}
.achv-name{font-weight:700;color:var(--text)}.achv-desc{font-size:10px;color:var(--text-dim);line-height:1.55}
.achv-tier{font-size:10px;padding:3px 8px;border-radius:10px;font-weight:600}
.tier-copper{background:rgba(180,120,60,0.2);color:#c08848}
.tier-silver{background:rgba(180,180,200,0.2);color:#a8a8c0}
.tier-gold{background:rgba(212,176,100,0.2);color:var(--gold)}
.tier-legend{background:rgba(200,96,96,0.2);color:var(--red)}
.tier-return{background:rgba(192,160,96,0.18);color:var(--gold);border:1px solid rgba(212,176,100,0.45);box-shadow:0 0 12px rgba(212,176,100,0.12)}

/* Master panel */
.master-card{
  padding:12px 16px;background:var(--panel);
  border:1px solid var(--border);border-radius:var(--radius);margin:4px 0;
  width:100%;max-width:550px;font-size:12px;
}
.master-card .ms-name{font-weight:700;color:var(--purple)}.master-card .ms-skill{color:var(--gold)}

/* Save slots */
.save-slot{
  width:100%;max-width:560px;padding:14px 16px;margin:6px 0;background:var(--panel);
  border:1px solid var(--border);border-radius:var(--radius);font-size:12px;
  display:flex;gap:10px;align-items:center;justify-content:space-between;
  transition:border-color .22s,background .22s,transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s;
}
.menu-slots .save-slot{margin-left:auto;margin-right:auto}
.save-slot:hover{border-color:var(--accent2);background:var(--panel-hover);transform:translateY(-2px);box-shadow:0 14px 30px rgba(0,0,0,0.2)}
.save-slot.empty{border-style:dashed;opacity:0.85}
.save-meta{color:var(--text-dim);font-size:10px;margin-top:4px}
.save-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.setup-box{width:100%;max-width:560px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin:8px 0}
.setup-input{width:100%;box-sizing:border-box;background:rgba(255,255,255,0.04);border:1px solid var(--border);border-radius:7px;color:var(--text);font:inherit;padding:10px 12px;margin-top:8px;transition:border-color .32s cubic-bezier(.22,1,.36,1),background .32s cubic-bezier(.22,1,.36,1),box-shadow .32s cubic-bezier(.22,1,.36,1),transform .32s cubic-bezier(.22,1,.36,1)}
.setup-input:focus{outline:none;border-color:rgba(211,184,111,.68);background:rgba(255,255,255,0.065);box-shadow:0 0 0 3px rgba(211,184,111,0.08);transform:translateY(-1px)}
.difficulty-note{font-size:11px;color:var(--text-dim);line-height:1.7;margin:8px 0}
.ending-card{
  width:100%;max-width:620px;margin:4px auto;padding:18px 18px;background:linear-gradient(180deg,rgba(20,20,38,0.88),rgba(8,8,20,0.92));
  border:1px solid var(--gold);border-radius:var(--radius);box-shadow:0 0 26px rgba(212,176,100,0.12);
  animation:endingRise 0.9s ease both;
}
.ending-title{font-size:20px;color:var(--gold);font-weight:700;letter-spacing:1px;margin-bottom:10px;text-align:center}
#narrative .ending-card p{animation:endingLine 0.7s ease both}
#narrative .ending-card p:nth-child(2){animation-delay:0.08s}
#narrative .ending-card p:nth-child(3){animation-delay:0.16s}
#narrative .ending-card p:nth-child(4){animation-delay:0.24s}
#narrative .ending-card p:nth-child(5){animation-delay:0.32s}
@keyframes endingRise{from{opacity:0;transform:translateY(16px) scale(0.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes endingLine{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.ending-prelude{
  width:100%;max-width:640px;margin:4px auto;padding:18px 18px;
  background:linear-gradient(180deg,rgba(34,12,18,0.9),rgba(8,8,20,0.96));
  border:1px solid rgba(200,96,96,0.65);border-radius:var(--radius);
  box-shadow:0 0 34px rgba(200,96,96,0.18),inset 0 0 24px rgba(255,255,255,0.03);
}
#narrative .ending-prelude p{opacity:0;animation:preludeLine 1.05s ease forwards,preludeTremor 0.16s linear infinite}
.ending-prelude .prelude-whisper{color:var(--gold);font-style:italic}
body.crisis-shake #game{animation:screenShake 0.18s linear infinite}
.prelude-reveal{opacity:0;animation:preludeButton 1.8s ease forwards}
@keyframes preludeLine{from{opacity:0;transform:translateY(10px) skewX(-1deg)}to{opacity:1;transform:translateY(0)}}
@keyframes preludeTremor{0%,100%{text-shadow:1px 0 rgba(200,96,96,0.25)}50%{text-shadow:-1px 0 rgba(90,158,218,0.18)}}
@keyframes screenShake{0%,100%{transform:translate(0,0)}25%{transform:translate(1px,-1px)}50%{transform:translate(-1px,1px)}75%{transform:translate(1px,1px)}}
@keyframes preludeButton{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

/* Toast */
#toast{
  position:fixed;bottom:86px;left:50%;transform:translateX(-50%);
  padding:10px 24px;background:var(--gold);color:#0d0d1a;border-radius:24px;
  font-size:13px;font-weight:700;opacity:0;transition:opacity 0.22s,transform 0.22s;pointer-events:none;z-index:999;white-space:normal;
  max-width:min(560px,calc(100vw - 36px));text-align:center;
  box-shadow:0 12px 28px rgba(0,0,0,0.32);
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(-8px);pointer-events:auto;cursor:pointer}
#toast.achv-toast{background:linear-gradient(135deg,#d4b064,#f0d878);box-shadow:0 4px 24px rgba(212,176,100,0.5)}
#toast.legend-toast{background:linear-gradient(135deg,#c86060,#f08080);box-shadow:0 4px 24px rgba(200,96,96,0.5)}
#toast.return-toast{background:linear-gradient(135deg,#c0a060,#f0d878);box-shadow:0 4px 28px rgba(212,176,100,0.58),0 0 18px rgba(240,216,120,0.26)}
#save-toast{
  position:fixed;bottom:136px;left:50%;transform:translateX(-50%);
  padding:6px 16px;background:var(--accent);color:#0d0d1a;border-radius:16px;
  font-size:11px;font-weight:600;opacity:0;transition:opacity 0.3s;pointer-events:none;z-index:998;
}

#save-toast.show{opacity:1}
/* 冷却：按钮变灰 + 从左到右渐变恢复 */
.btn.cooling{pointer-events:none;cursor:not-allowed;color:var(--text-dim)!important;border-color:rgba(255,255,255,0.05)!important}
.btn.cooling::before{
  content:'';position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;
  background:linear-gradient(to right,transparent 0%,transparent var(--cd-pct,0%),rgba(0,0,0,0.55) var(--cd-pct,0%));
}

/* 天气 & 节日指示器 */
#weather-bar{
  display:none;gap:8px;align-items:center;margin-bottom:6px;
  padding:5px 11px;font-size:11px;color:var(--text-dim);
  background:rgba(255,255,255,0.026);border:1px solid var(--hair);border-radius:16px;
  animation:sectionRise .36s cubic-bezier(.16,1,.3,1) both;
}
#weather-bar.visible{display:flex}
.we-tag{padding:3px 10px;border-radius:12px;font-size:12px;font-weight:700;display:inline-flex;align-items:center;gap:5px}
.we-sun{background:rgba(212,176,100,0.2);color:var(--gold)}
.we-rain{background:rgba(90,158,218,0.2);color:var(--accent2)}
.we-fog{background:rgba(154,122,176,0.2);color:var(--purple)}
.we-fest{background:rgba(200,96,96,0.2);color:var(--red);animation:pulse 1.5s infinite}

/* 排名展示 */
#rank-panel{
  display:none;width:100%;margin:8px 0;padding:14px 16px;
  background:var(--panel);
  border:1px solid rgba(212,176,100,0.3);border-radius:var(--radius);text-align:center;
  animation:panelIn 0.24s ease;
}
#rank-panel.visible{display:block}
.rank-num{font-size:40px;font-weight:700;color:var(--gold);font-family:var(--font-mono)}
.rank-bar-h{height:7px;background:rgba(255,255,255,0.06);border-radius:4px;margin:8px 0;overflow:hidden;position:relative}
.rank-bar-f{height:100%;background:linear-gradient(90deg,var(--accent),var(--gold));border-radius:4px;transition:width 1.05s cubic-bezier(.22,1,.36,1);background-size:160% 100%;animation:barBreathe 5.6s ease-in-out infinite}
.rank-top{color:var(--accent);font-weight:600}.rank-bottom{color:var(--red);font-weight:600}

/* 归途面板 */
#guide-panel{
  display:none;position:fixed;top:0;left:0;right:0;bottom:0;
  background:radial-gradient(ellipse at center,#0a0a18 0%,#000 100%);
  z-index:300;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;
  min-height:calc(var(--app-vh,1vh)*100);
}
#guide-panel.visible{display:flex}
#guide-void{font-size:80px;opacity:0.12;animation:voidPulse 4s infinite;user-select:none}
@keyframes voidPulse{0%,100%{opacity:0.08}50%{opacity:0.18}}
#guide-hints{max-width:500px;text-align:center;font-size:14px;line-height:2.2;color:var(--text-dim)}
#guide-hints .gh{opacity:0;animation:ghFade 2s ease forwards;margin:8px 0}
@keyframes ghFade{from{opacity:0;transform:translateY(12px)}to{opacity:0.7;transform:translateY(0)}}
#guide-hints .gh:nth-child(2){animation-delay:0.5s}
#guide-hints .gh:nth-child(3){animation-delay:1s}
#guide-figure{font-size:13px;color:rgba(212,176,100,0.5);margin-top:30px;font-style:italic;text-align:center;max-width:400px;line-height:1.9}

.pulse{animation:pulse 2s infinite}@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.55}}

/* ---- Motion polish: narrative, panels, cards ---- */
:root{
  --ease-out-soft:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.2,.86,.28,1);
  --motion-quick:0.34s;
  --motion-read:0.92s;
}
#main-area,#actions,#narrative{transform:translateZ(0)}
#narrative{position:relative;isolation:isolate}
#narrative p,
#narrative .n-line{
  opacity:1;transform:none;
  animation-delay:var(--line-delay,0s);
  will-change:auto;
}
#narrative.narrative-updated .n-line{
  animation:textLineIn var(--motion-quick) var(--ease-out-soft) both;
  animation-delay:var(--line-delay,0s);
  will-change:opacity,transform;
}
#narrative p::selection{background:rgba(211,184,111,.28)}
#narrative .hl{text-shadow:0 0 18px rgba(211,184,111,.16)}
#narrative .warn{text-shadow:0 0 16px rgba(207,113,109,.13)}
#narrative .narrative-notice{animation:narrativeNotice .38s var(--ease-out-soft) both}
#narrative.long-narrative .narrative-notice{
  opacity:1;
  transform:none;
  animation:none;
}
#narrative.long-narrative p,
#narrative.long-narrative .n-line{
  opacity:0;
  transform:translate3d(0,12px,0);
  animation:longTextLineIn var(--motion-read) var(--ease-out-soft) forwards;
  animation-delay:var(--line-delay,0s);
  will-change:opacity,transform;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
@keyframes textLineIn{
  0%{opacity:0;transform:translate3d(0,8px,0) scale(.997)}
  72%{opacity:1;transform:translate3d(0,-1px,0) scale(1)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
@keyframes longTextLineIn{
  0%{opacity:0;transform:translate3d(0,12px,0)}
  55%{opacity:1;transform:translate3d(0,2px,0)}
  100%{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes narrativeNotice{
  0%{opacity:0;transform:translate3d(0,12px,0)}
  78%{opacity:1;transform:translate3d(0,1px,0)}
  100%{opacity:1;transform:translate3d(0,0,0)}
}
#narrative,#actions{transform-origin:center top}
#narrative.narrative-updated{animation:surfaceRefresh .18s var(--ease-out-soft) both}
#actions.actions-updated{animation:surfaceRefresh .18s var(--ease-out-soft) both}
#actions .btn{
  opacity:1;
  transform:translate3d(0,0,0);
  will-change:auto;
}
#actions.actions-updated .btn{
  animation:buttonSettle .34s var(--ease-out-soft) both;
  animation-delay:calc(var(--actions-delay,0s) + var(--btn-delay,0s));
  will-change:opacity,transform;
}
#actions .btn:hover,
.btn-sm:hover,
.npc-card:hover,
.kc:hover,
.master-card:hover{transform:translateY(-2px)}
@keyframes surfaceRefresh{
  0%{opacity:.88;transform:translate3d(0,4px,0)}
  100%{opacity:1;transform:translate3d(0,0,0)}
}
@keyframes buttonSettle{
  0%{opacity:0;transform:translate3d(0,10px,0) scale(.992)}
  78%{opacity:1;transform:translate3d(0,-1px,0) scale(1)}
  100%{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
#schedule.visible .sslot{animation:softItemIn .68s var(--ease-out-soft) both}
#schedule.visible .sslot:nth-child(2){animation-delay:.035s}
#schedule.visible .sslot:nth-child(3){animation-delay:.07s}
#schedule.visible .sslot:nth-child(4){animation-delay:.105s}
#schedule.visible .sslot:nth-child(5){animation-delay:.14s}
body.hud-load-animate #status-bar.visible .sti,
body.hud-load-animate #day-indicator.visible,
body.hud-load-animate #weather-bar.visible > *{animation:softItemIn .58s var(--ease-out-soft) both}
body.hud-load-animate #status-bar.visible .sti:nth-child(2),
body.hud-load-animate #weather-bar.visible > *:nth-child(2){animation-delay:.035s}
body.hud-load-animate #status-bar.visible .sti:nth-child(3),
body.hud-load-animate #weather-bar.visible > *:nth-child(3){animation-delay:.07s}
body.hud-load-animate #status-bar.visible .sti:nth-child(4){animation-delay:.105s}
body.hud-load-animate #status-bar.visible .sti:nth-child(5){animation-delay:.14s}
@keyframes softItemIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}
#knowledge-panel.visible,
#npc-panel.visible,
#market-panel.visible,
#achv-panel.visible,
#master-panel.visible,
#save-panel.visible,
#npc-detail.visible{animation:panelFloatIn .58s var(--ease-out-soft) both}
@keyframes panelFloatIn{
  from{opacity:0;transform:translateY(18px) scale(.992)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@media(min-width:769px){
  #knowledge-panel.visible,
  #npc-panel.visible,
  #market-panel.visible,
  #achv-panel.visible,
  #master-panel.visible,
  #save-panel.visible{animation:modalFloatIn .62s var(--ease-out-soft) both}
  @keyframes modalFloatIn{
    from{opacity:0;transform:translate(-50%,-48.4%) scale(.992)}
    to{opacity:1;transform:translate(-50%,-50%) scale(1)}
  }
}
.npc-card,
.kc,
.master-card,
.mitem,
.slot,
.save-slot,
.setup-box{animation:cardSettle .58s var(--ease-out-soft) both;animation-delay:var(--card-delay,0s)}
@keyframes cardSettle{
  from{opacity:0;transform:translateY(12px) scale(.994)}
  to{opacity:1;transform:translateY(0)}
}
#toast.show{animation:toastLift .5s var(--ease-spring) both}
@keyframes toastLift{
  from{opacity:0;transform:translateX(-50%) translateY(14px) scale(.985)}
  70%{opacity:1;transform:translateX(-50%) translateY(-6px) scale(1)}
  to{opacity:1;transform:translateX(-50%) translateY(-8px) scale(1)}
}
.ending-card p{
  animation-duration:1.05s;
  animation-timing-function:var(--ease-out-soft);
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.001ms!important;animation-iteration-count:1!important;transition-duration:0.001ms!important;scroll-behavior:auto!important}
  #narrative p,
  #narrative .n-line,
  #actions .btn,
  #status-bar.visible .sti,
  #schedule.visible .sslot,
  #weather-bar.visible > *,
  .npc-card,
  .kc,
  .master-card,
  .mitem,
  .slot,
  .save-slot,
  .setup-box,
  #toast.show{
    animation-delay:0s!important;
    transform:none!important;
    filter:none!important;
  }
}

@supports not (transform:translate3d(0,0,0)){
  #narrative p,
  #narrative .n-line,
  #actions .btn,
  .npc-card,
  .kc,
  .master-card,
  .mitem,
  .slot,
  .save-slot,
  .setup-box{transform:none}
}

@media(hover:none) and (pointer:coarse){
  body{background-attachment:scroll}
  .btn{min-height:42px}
  .btn-sm{min-height:34px;padding:7px 11px}
  .btn:hover,
  .btn-sm:hover,
  .npc-card:hover,
  .kc:hover,
  .master-card:hover{transform:none}
}

/* ===== 移动端适配 ===== */
@media(max-width:480px){
  #game{
    padding:10px;
    padding-left:max(10px,env(safe-area-inset-left));
    padding-right:max(10px,env(safe-area-inset-right));
    padding-top:max(10px,env(safe-area-inset-top));
    padding-bottom:max(10px,env(safe-area-inset-bottom));
  }
  #top-bar{padding:8px 10px;gap:4px}
  #top-bar .title{font-size:12px}
  #schedule.visible{grid-template-columns:repeat(3,1fr)}
  #schedule.wide{grid-template-columns:repeat(4,1fr)}
  #schedule.wide .sslot{font-size:9px;padding:6px 2px}
  #map-area.visible{grid-template-columns:repeat(2,1fr)}
  .btn{padding:9px 14px;font-size:13px;min-width:68px;max-width:100%}
  .btn-sec-btns{gap:7px}
  #status-bar.visible{gap:4px}.sti{min-width:32px;padding:3px 5px}.sti .sv{font-size:12px}
  #narrative{font-size:14px;line-height:1.7;padding:12px 10px 12px 14px}
  #knowledge-panel,#npc-panel,#market-panel,#achv-panel,#master-panel,#save-panel{width:100vw;max-width:100vw;max-height:calc(var(--app-vh,1vh)*100)}
}
@media(min-width:481px) and (max-width:768px){
  #game{
    max-width:100%;padding:16px;
    padding-left:max(16px,env(safe-area-inset-left));
    padding-right:max(16px,env(safe-area-inset-right));
    padding-top:max(16px,env(safe-area-inset-top));
    padding-bottom:max(16px,env(safe-area-inset-bottom));
  }
  #schedule.visible{grid-template-columns:repeat(4,1fr)}
  #map-area.visible{grid-template-columns:repeat(3,1fr)}
  .btn{font-size:13px;padding:10px 18px}
  #narrative{font-size:15px}
  #knowledge-panel,#npc-panel,#market-panel,#achv-panel,#master-panel,#save-panel{width:100vw;max-width:100vw;max-height:calc(var(--app-vh,1vh)*100);padding:24px 16px}
}
@media(min-width:769px) and (max-width:1024px){
  #game{max-width:768px;padding:18px}
  #narrative{font-size:16px}
  .btn{font-size:14px}
  #knowledge-panel,#npc-panel,#market-panel,#achv-panel,#master-panel,#save-panel{
    max-width:600px;border-radius:var(--radius-lg);top:50%;left:50%;right:auto;bottom:auto;
    transform:translate(-50%,-50%);width:90vw;max-height:min(90vh,calc(var(--app-vh,1vh)*90));padding:28px 24px;background:rgba(4,4,12,0.98);
  }
}
@media(min-width:1025px){
  #game{max-width:800px;padding:24px;min-height:auto}
  body{align-items:flex-start;padding-top:20px}
  #narrative{font-size:17px;line-height:1.9}
  .btn{padding:12px 24px;font-size:15px}
  #status-bar.visible{gap:12px}
  #schedule.visible{gap:6px}.sslot{padding:12px 6px;font-size:11px}
  #knowledge-panel,#npc-panel,#market-panel,#achv-panel,#master-panel,#save-panel{
    max-width:600px;border-radius:var(--radius-lg);top:50%;left:50%;right:auto;bottom:auto;
    transform:translate(-50%,-50%);width:600px;max-height:min(90vh,calc(var(--app-vh,1vh)*90));padding:32px 28px;background:rgba(4,4,12,0.98);
  }
}

/* ===== 云存档状态栏 ===== */
.cloud-status{
  display:flex;align-items:center;gap:6px;
  padding:8px 14px;margin-bottom:12px;
  border-radius:var(--radius-sm);
  font-size:13px;line-height:1.4;
  animation:fadeIn 0.4s ease;
}
.cloud-online{
  background:rgba(118,184,137,0.12);
  border:1px solid rgba(118,184,137,0.3);
  color:var(--accent);
}
.cloud-offline{
  background:rgba(207,113,109,0.08);
  border:1px solid rgba(207,113,109,0.2);
  color:var(--text-dim);
}
.cloud-hint{opacity:0.6;font-size:12px;margin-left:2px}
.cloud-login-link{color:var(--accent2);text-decoration:underline;cursor:pointer}
.cloud-login-link:hover{color:var(--gold)}
/* ===== 云存档按钮 ===== */
.btn-cloud{
  background:rgba(118,184,137,0.15);
  border-color:rgba(118,184,137,0.35);
  color:var(--accent);
  font-size:12px;padding:4px 8px;
}
.btn-cloud:hover{background:rgba(118,184,137,0.28);border-color:var(--accent)}
.btn-cloud:disabled{opacity:0.5;cursor:not-allowed}
.btn-cloud-danger{
  background:rgba(207,113,109,0.15);
  border-color:rgba(207,113,109,0.35);
  color:var(--red);
  font-size:12px;padding:4px 8px;
}
.btn-cloud-danger:hover{background:rgba(207,113,109,0.28);border-color:var(--red)}
.btn-cloud-danger:disabled{opacity:0.5;cursor:not-allowed}
/* ===== 云存档冲突对话框 ===== */
.cloud-conflict-overlay{
  position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,0.7);
  display:flex;align-items:center;justify-content:center;
  animation:fadeIn 0.2s ease;
}
.cloud-conflict-dialog{
  background:var(--panel);
  border:1px solid var(--border-light);
  border-radius:var(--radius-lg);
  padding:28px 24px;
  max-width:420px;width:90%;
  text-align:center;
  animation:scaleIn 0.25s ease;
}
.cloud-conflict-dialog h3{
  color:var(--gold);
  margin-bottom:12px;
  font-size:18px;
}
.cloud-conflict-dialog p{
  font-size:14px;
  color:var(--text-dim);
  margin-bottom:20px;
}
.conflict-options{
  display:flex;flex-direction:column;gap:10px;
  margin-bottom:16px;
}
.conflict-btn{
  display:flex;flex-direction:column;gap:4px;
  padding:14px 16px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:var(--panel-hover);
  cursor:pointer;
  transition:all 0.2s;
}
.conflict-btn:hover{
  border-color:var(--accent2);
  background:rgba(111,169,184,0.12);
}
.conflict-label{
  font-size:15px;font-weight:600;
  color:var(--text);
}
.conflict-meta{
  font-size:12px;
  color:var(--text-dim);
}
@keyframes scaleIn{
  from{transform:scale(0.92);opacity:0}
  to{transform:scale(1);opacity:1}
}