/* 雪豹生存故事 —— 单文件样式
   深松绿 + 米白 + 暖金；封面、阅读页、互动故事三个视图共用一套令牌。 */

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}

:root{
  --pine-950:#0b1915;
  --pine-900:#142521;
  --paper:#f2efe6;
  --ink:#1c2d26;
  --ink-soft:#3b4c43;
  --ink-faint:#5c6a61;
  --cream:#f3f0e4;
  --mist:#a9b6a7;
  --gold:#d5bb86;
  --gold-bright:#e6d1a3;
  --line-dark:rgba(231,236,222,.16);
  --line-light:#dcd6c6;
  --focus:#d5bb86;
  --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",system-ui,sans-serif;
  --serif:"Songti SC","Noto Serif SC",STSong,"SimSun","宋体",serif;
  --kai:"STXingkai","华文行楷","STKaiti","KaiTi","楷体",serif;
  --ease-out:cubic-bezier(.22,1,.36,1);
}

html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);font-size:15px;line-height:1.6;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1,h2,h3,p,ol,ul{margin:0;padding:0}
ol,ul{list-style:none}
::selection{background:rgba(213,187,134,.4);color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
body.is-about{--focus:#8a6a24}

/* ---------- 顶部导航 ---------- */
.site-head{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;justify-content:center;padding:12px 20px 18px;background:linear-gradient(rgba(8,19,15,.55),rgba(8,19,15,0))}
.tabs{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid rgba(20,37,33,.2);border-radius:999px;background:rgba(243,240,228,.95);box-shadow:0 12px 28px -20px rgba(5,14,11,.9)}
.tab{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 17px;border-radius:999px;font-size:12px;font-weight:500;letter-spacing:.6px;color:#4d5b4f;transition:background-color .18s,color .18s}
.tab:hover{color:var(--ink);background:rgba(20,37,33,.07)}
.tab[aria-current="page"]{background:var(--pine-900);color:var(--cream);box-shadow:0 8px 18px -10px rgba(8,19,15,.8)}
.tab:focus-visible{outline-offset:2px}
body.is-about .site-head{background:var(--paper);border-bottom:1px solid var(--line-light)}
body.is-about .tabs{background:#fffdf6;border-color:#d9d2c1}

/* ---------- 封面 ---------- */
.game-entry{background:var(--pine-950);color:var(--cream);min-height:100vh;min-height:100svh}
.site-main{display:block}
.cover-page{position:relative;display:flex;align-items:center;min-height:100vh;min-height:100svh;padding:clamp(96px,13vh,128px) clamp(22px,7vw,120px) clamp(48px,9vh,80px)}
.cover-photo{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--pine-950)}
.cover-photo img{width:100%;height:100%;object-fit:cover;object-position:center;filter:saturate(.78) brightness(.92);animation:photo-drift 28s ease-in-out infinite;will-change:transform}
.cover-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,18,14,.94) 0%,rgba(7,18,14,.88) 30%,rgba(7,18,14,.52) 58%,rgba(7,18,14,.12) 100%),linear-gradient(180deg,rgba(7,18,14,.55),rgba(7,18,14,0) 24%,rgba(7,18,14,0) 74%,rgba(7,18,14,.62))}
.cover-inner{position:relative;z-index:1;width:min(540px,100%)}
.cover-copy{animation:rise .5s var(--ease-out) both}
.cover-copy h1{font-family:var(--kai);font-style:italic;font-weight:400;font-size:clamp(30px,3.3vw,40px);line-height:1.4;letter-spacing:2px;color:#f8f4e7;text-wrap:balance}
.cover-lead{font-family:var(--kai);font-style:italic;font-size:clamp(15px,1.4vw,17px);line-height:1.9;letter-spacing:1px;color:#d9dfd1;margin-top:14px;max-width:26em}
.how-to{margin-top:clamp(26px,4vh,38px)}
.how-to h2{font-size:12px;font-weight:600;letter-spacing:2px;color:var(--gold);margin-bottom:10px}
.how-to ol{list-style:decimal;padding-left:1.45em}
.how-to li{font-size:13px;line-height:2;color:#cbd4c5;padding-left:2px}
.how-to li::marker{color:var(--gold-bright);font-family:Georgia,serif}
.save-tip{font-size:12px;line-height:1.8;color:#9fae9c;margin-top:14px}
.start-button{position:relative;display:inline-flex;align-items:center;justify-content:center;width:184px;min-height:50px;margin-top:clamp(26px,4vh,38px);padding:12px 30px;border:2px solid rgba(240,236,223,.9);border-radius:999px;background:rgba(17,38,31,.35);box-shadow:0 0 0 2px rgba(240,236,223,.22);color:#f0ecdf;font-size:14px;font-weight:500;letter-spacing:1px;overflow:hidden;isolation:isolate;transition:color .45s var(--ease-out),box-shadow .45s var(--ease-out),transform .15s ease}
.start-circle{position:absolute;top:50%;left:50%;z-index:0;width:16px;height:16px;border-radius:50%;background:#f0ecdf;opacity:0;transform:translate(-50%,-50%);transition:width .55s var(--ease-out),height .55s var(--ease-out),opacity .4s var(--ease-out)}
.start-text{position:relative;z-index:1;transform:translateX(-9px);transition:transform .55s var(--ease-out)}
.start-arrow{position:absolute;top:50%;z-index:2;width:20px;height:20px;fill:#f0ecdf;transform:translateY(-50%);transition:left .55s var(--ease-out),right .55s var(--ease-out),fill .4s;pointer-events:none}
.start-arrow.is-out{right:15px}
.start-arrow.is-in{left:-22%}
.start-button:hover,.start-button:focus-visible{color:var(--pine-900);box-shadow:0 0 0 2px rgba(240,236,223,.9)}
.start-button:hover .start-circle,.start-button:focus-visible .start-circle{width:260px;height:260px;opacity:1}
.start-button:hover .start-text,.start-button:focus-visible .start-text{transform:translateX(9px)}
.start-button:hover .start-arrow.is-out,.start-button:focus-visible .start-arrow.is-out{right:-22%}
.start-button:hover .start-arrow.is-in,.start-button:focus-visible .start-arrow.is-in{left:15px}
.start-button:hover .start-arrow,.start-button:focus-visible .start-arrow{fill:var(--pine-900)}
.start-button:active{transform:scale(.985)}

/* ---------- 「认识雪豹」阅读页 ---------- */
body.is-about{background:var(--paper);color:var(--ink)}
.about-page{padding:clamp(100px,14vh,136px) clamp(22px,5vw,40px) 72px}
.about-inner{max-width:760px;margin:0 auto}
.about-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding-bottom:16px;border-bottom:1px solid var(--line-light);margin-bottom:28px}
.about-head h1{font-family:var(--serif);font-weight:500;font-size:clamp(25px,2.6vw,30px);line-height:1.4;letter-spacing:2px;color:var(--ink)}
.about-head h1:focus{outline:none}
.about-back{flex-shrink:0;padding:6px 0;font-size:12px;color:var(--ink-faint);border-bottom:1px solid transparent;transition:color .15s,border-color .15s}
.about-back:hover{color:var(--ink);border-color:currentColor}
.about-inner > p{max-width:38em;margin-bottom:18px;font-size:14.5px;line-height:1.95;color:var(--ink-soft)}
.about-inner > p.about-lead{max-width:38em;margin-bottom:24px;font-family:var(--serif);font-size:17px;line-height:1.9;color:#273a30}
.about-links{margin:34px 0 28px;padding-top:22px;border-top:1px solid var(--line-light)}
.about-links h2{font-size:12px;font-weight:600;letter-spacing:2px;color:var(--ink-faint);margin-bottom:12px}
.about-links li + li{margin-top:7px}
.about-links a{font-size:13.5px;line-height:1.8;color:#33493d;border-bottom:1px solid rgba(51,73,61,.28);padding-bottom:1px;transition:color .15s,border-color .15s}
.about-links a:hover{color:var(--ink);border-color:var(--ink)}
.ext{font-size:11px;color:var(--ink-faint)}
.about-inner > p.about-note{max-width:38em;margin:28px 0 0;padding-top:18px;border-top:1px solid var(--line-light);font-size:12px;line-height:1.8;color:var(--ink-faint)}

/* ---------- 互动故事（全屏 dialog） ---------- */
#game{--focus:var(--gold);position:fixed;inset:0;width:100%;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;overflow:hidden;background:var(--pine-950);color:var(--cream);color-scheme:dark}
#game::backdrop{background:var(--pine-950)}
.game-photo{position:absolute;inset:0;z-index:0;overflow:hidden}
.game-photo img{width:100%;height:100%;object-fit:cover;object-position:72% 42%;filter:saturate(.74) brightness(.86)}
.game-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,17,13,.97) 0%,rgba(6,17,13,.93) 38%,rgba(6,17,13,.7) 64%,rgba(6,17,13,.28) 100%),linear-gradient(180deg,rgba(6,17,13,.72),rgba(6,17,13,0) 22%,rgba(6,17,13,0) 72%,rgba(6,17,13,.76))}
.game-shell{position:relative;z-index:1;height:100%;max-width:1460px;margin:0 auto;padding:0 clamp(20px,4vw,56px);display:flex;flex-direction:column}
.game-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-shrink:0;min-height:74px;padding:12px 0;border-bottom:1px solid var(--line-dark)}
.game-title{font-size:14px;font-weight:500;letter-spacing:2px;color:#e9ecdf}
.icon-button{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;font-size:20px;line-height:1;color:#d8dfd2;transition:background-color .18s,color .18s}
.icon-button:hover{background:rgba(238,242,231,.1);color:#fff}
.game-body{display:flex;flex:1;min-height:0;flex-direction:column}
.game-status{display:flex;align-items:center;gap:clamp(20px,3vw,40px);flex-shrink:0;padding:18px 0;border-bottom:1px solid var(--line-dark)}
.timeline{display:flex;flex:1;min-width:0;gap:clamp(10px,2vw,28px)}
.step{flex:1;max-width:150px;min-width:0;padding-bottom:8px;border-bottom:1px solid var(--line-dark);color:var(--mist);font-size:12px;letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.step-index{font-family:Georgia,serif;font-size:11px;color:#8d9b8a;margin-right:6px}
.step.is-done{color:#8d9b8a}
.step.is-current{color:var(--gold);font-weight:500;border-bottom-color:var(--gold)}
.step.is-current .step-index{color:var(--gold)}
.step.is-changed{animation:stage-glow .55s ease-out}
.stats{display:flex;flex-shrink:0;gap:clamp(14px,2vw,24px);width:min(300px,33vw)}
.stat{flex:1;min-width:0}
.stat-head{display:flex;align-items:baseline;justify-content:space-between;gap:4px;margin-bottom:6px;font-size:12px;color:#b9c4b6}
.stat-value{font-size:12px;color:#eef0e5;font-variant-numeric:tabular-nums}
.stat-delta{margin-left:3px;font-style:normal;font-size:11px}
.stat-delta.is-up{color:#a8cf9a}
.stat-delta.is-down{color:#e5b183}
.stat.has-delta .stat-value{animation:stat-pulse .45s ease-out}
.bar{height:2px;overflow:hidden;background:rgba(236,240,227,.16)}
.bar > span{display:block;height:100%;background:var(--gold);transition:width .35s var(--ease-out)}
.story-panel{display:flex;flex:1;min-height:0;align-items:center;align-items:safe center;overflow-y:auto;padding:clamp(22px,4vh,44px) 0;scrollbar-width:thin;scrollbar-color:rgba(200,212,187,.35) transparent}
.story-panel::-webkit-scrollbar{width:8px}
.story-panel::-webkit-scrollbar-thumb{border-radius:4px;background:rgba(200,212,187,.28)}
.story-block{width:min(100%,760px);padding-bottom:10px;animation:story-reveal .22s both}
.story-block:focus,.story-panel h2:focus{outline:none}
.eyebrow{display:block;margin-bottom:14px;font-size:11px;letter-spacing:2px;color:var(--gold)}
.story-block[data-kind="death"] .eyebrow{color:#d9917a}
.story-block[data-kind="injury"] .eyebrow{color:#d9b98a}
.story-panel h2{font-family:var(--serif);font-size:clamp(25px,2.4vw,32px);font-weight:500;line-height:1.45;letter-spacing:1px;color:#f5f3e9;margin-bottom:14px;outline:none}
.story-text{max-width:44em;margin-bottom:22px;font-family:var(--serif);font-size:15px;line-height:1.95;color:#ced7c8}
.story-text:empty{display:none}
.choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:24px}
.choice{display:flex;align-items:center;gap:12px;min-height:76px;padding:18px 16px;border:1px solid rgba(201,212,188,.35);background:rgba(20,39,32,.78);color:var(--cream);text-align:left;transition:border-color .18s,background-color .18s}
.choice:hover{border-color:var(--gold);background:rgba(35,58,47,.9)}
.choice:disabled{cursor:default;pointer-events:none;opacity:.5}
.choice b{flex-shrink:0;font-family:Georgia,serif;font-size:15px;font-weight:400;line-height:1.55;color:var(--gold)}
.choice > span{display:block;font-size:14.5px;line-height:1.6;color:#f0f1e7}
.scene{margin-top:22px;font-size:12px;letter-spacing:.4px;color:#91a18d}
.keyboard-hint{margin-top:10px;font-size:12px;color:#84937f}
@media(hover:none),(pointer:coarse){.keyboard-hint{display:none}}
.result-text{max-width:44em;margin-bottom:16px;font-family:var(--serif);font-size:16px;line-height:1.95;color:#e6eadc}
.effects{margin-bottom:18px;font-size:12.5px;letter-spacing:.5px;color:var(--gold)}
.boost{max-width:42em;margin:-4px 0 18px;font-size:12.5px;line-height:1.8;color:#c9b586}
.fact{max-width:42em;margin-bottom:22px;padding-top:14px;border-top:1px solid var(--line-dark);font-size:12.5px;color:#b4c1ae}
.fact summary,.journal summary{cursor:pointer;width:fit-content;line-height:1.8;color:var(--gold)}
.fact summary::marker,.journal summary::marker{color:var(--gold)}
.fact p{margin-top:10px;font-size:13px;line-height:1.9;color:#c7d1c1}
.primary{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 24px;border:1px solid var(--gold);background:var(--gold);color:#16241e;font-size:13px;font-weight:500;letter-spacing:1px;transition:background-color .18s,border-color .18s,transform .12s}
.primary:hover{background:var(--gold-bright);border-color:var(--gold-bright)}
.primary:active{transform:scale(.99)}
.ghost{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 22px;border:1px solid rgba(201,212,188,.5);color:#e3e8d9;font-size:13px;letter-spacing:1px;transition:border-color .18s,color .18s}
.ghost:hover{border-color:var(--gold);color:var(--gold)}
.ending-stats{margin:18px 0 6px;font-size:12px;letter-spacing:.5px;color:#a9b6a4}
.ending-stats b{margin-left:4px;font-weight:400;color:var(--gold)}
.journal{max-width:44em;margin-top:20px;padding-top:14px;border-top:1px solid var(--line-dark);font-size:12.5px;color:#b8c3b1}
.journal-list{display:grid;gap:8px;max-height:180px;margin-top:12px;padding-right:4px;overflow:auto}
.journal-list li{display:flex;justify-content:space-between;gap:14px;padding-bottom:7px;border-bottom:1px dashed rgba(201,212,188,.18)}
.j-title{flex:0 0 auto;color:#8f9e8b}
.j-choice{color:#c9d3c2;text-align:right}
.ending-note{max-width:44em;margin-top:22px;font-size:12px;line-height:1.8;color:#879582}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.toast{position:fixed;left:50%;bottom:max(24px,env(safe-area-inset-bottom));z-index:20;max-width:min(90vw,430px);padding:10px 16px;border-radius:2px;background:#ece8d9;box-shadow:0 14px 34px -12px rgba(0,0,0,.55);color:#1b2c25;font-size:12.5px;line-height:1.6;text-align:center;opacity:0;pointer-events:none;transform:translateX(-50%) translateY(8px);transition:opacity .2s,transform .2s}
.toast.is-visible{opacity:1;transform:translateX(-50%) translateY(0)}
.noscript{padding:14px 18px;background:#ece8d9;color:#1b2c25;font-size:13px;text-align:center}

/* ---------- 响应式 ---------- */
@media(min-width:1600px){
  .cover-inner{width:min(600px,100%)}
  .game-shell{max-width:1520px}
}
@media(max-width:1000px){
  .game-status{flex-wrap:wrap;gap:12px}
  .timeline{flex:1 1 100%;order:1}
  .stats{order:2;width:100%}
  .story-panel{align-items:flex-start}
  .story-block{width:min(100%,720px)}
  .choices{grid-template-columns:1fr;margin-top:22px}
  .choice{min-height:0;padding:15px 16px}
}
@media(max-height:720px) and (min-width:1001px){
  .game-head{min-height:60px;padding:8px 0}
  .game-status{padding:12px 0}
  .story-panel{align-items:flex-start;padding:18px 0}
  .game-title{font-size:13px}
}
@media(max-width:640px){
  .site-head{padding:10px 14px 16px}
  .tab{min-height:40px;padding:0 14px;font-size:12px}
  .cover-page{align-items:flex-start;padding:96px 22px 48px}
  .cover-copy h1{font-size:30px;letter-spacing:1px}
  .cover-lead{font-size:15px;line-height:1.85}
  .how-to{margin-top:28px}
  .how-to li{font-size:12.5px;line-height:1.95}
  .save-tip{font-size:11.5px}
  .cover-photo img{object-position:66% center}
  .cover-photo::after{background:linear-gradient(180deg,rgba(7,18,14,.72),rgba(7,18,14,.58) 38%,rgba(7,18,14,.84)),linear-gradient(90deg,rgba(7,18,14,.55),rgba(7,18,14,0) 80%)}
  .about-page{padding:92px 22px 56px}
  .about-head{flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:22px}
  .about-head h1{font-size:24px}
  .about-back{margin-left:auto}
  .about-inner > p.about-lead{font-size:16px}
  .about-inner > p{font-size:14px}
  .game-shell{padding:0 18px}
  .game-head{min-height:58px;padding:8px 0}
  .game-photo img{object-position:72% 40%}
  .game-photo::after{background:linear-gradient(90deg,rgba(6,17,13,.96),rgba(6,17,13,.9) 62%,rgba(6,17,13,.8)),linear-gradient(0deg,rgba(6,17,13,.82),rgba(6,17,13,0) 45%)}
  .game-status{padding:12px 0;gap:10px}
  .timeline{gap:8px}
  .step{font-size:11.5px;line-height:1.5;letter-spacing:0;padding-bottom:6px}
  .step-index{display:block;margin:0 0 2px;font-size:11px}
  .stats{gap:14px}
  .stat-head{font-size:12px;margin-bottom:5px}
  .stat-value{font-size:12px}
  .story-panel{padding:20px 0}
  .story-panel h2{font-size:23px;line-height:1.5;margin-bottom:12px}
  .eyebrow{font-size:11px;margin-bottom:12px}
  .story-text{font-size:14px;line-height:1.9;margin-bottom:20px}
  .choice{padding:14px 15px;gap:10px}
  .choice > span{font-size:14px}
  .scene{font-size:12px;margin-top:18px}
  .result-text{font-size:15px}
  .journal-list{max-height:150px}
  .actions{gap:10px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .cover-photo img{animation:none;transform:none}
}

/* ---------- 动效 ---------- */
@keyframes photo-drift{
  0%,100%{transform:scale(1) translate3d(0,0,0)}
  50%{transform:scale(1.02) translate3d(-6px,4px,0)}
}
@keyframes rise{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}
@keyframes story-reveal{
  from{opacity:0;transform:translateY(5px)}
  to{opacity:1;transform:none}
}
@keyframes stage-glow{
  0%{color:#fff3cd;text-shadow:0 0 10px rgba(213,187,134,.6)}
  100%{text-shadow:none}
}
@keyframes stat-pulse{
  0%,100%{transform:scale(1)}
  40%{transform:scale(1.045)}
}