:root{--pearl:#f4f2fb;--ink:#1b1830}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#1a1636;color:var(--pearl);
  font-family:"Noto Serif SC","Source Han Serif SC","Songti SC","STSong","SimSun",serif;-webkit-font-smoothing:antialiased}
canvas{position:fixed;inset:0;width:100%;height:100%;display:block}
#xfade{pointer-events:none;opacity:0;transform-origin:50% 45%}
#post{display:none}
body.post #post{display:block}
body.post #bg,body.post #fx{visibility:hidden}
body.post #grain,body.post #vignette{display:none}
#grain{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;opacity:.06;mix-blend-mode:overlay}
#vignette{position:fixed;inset:0;pointer-events:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}

/* 开始页 / 动作说明 */
.screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;overflow-y:auto;scrollbar-width:none;
  background:radial-gradient(ellipse 80% 70% at 50% 45%,rgba(14,12,34,.55),rgba(10,8,26,.78));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:opacity 1.4s ease,visibility 1.4s}
.screen.hide{opacity:0;visibility:hidden}
.screen::-webkit-scrollbar{display:none}
.inner{text-align:center;width:min(1500px,100%);padding:clamp(24px,5vh,48px) 16px;margin:auto}
h1{font-weight:300;font-size:clamp(30px,5vw,60px);letter-spacing:.42em;padding-left:.42em;margin-bottom:clamp(24px,4vh,44px);
  text-shadow:0 0 30px rgba(170,150,255,.45)}
.guide{display:grid;grid-template-columns:repeat(9,1fr);gap:10px;margin:0 auto clamp(22px,4vh,40px);width:min(100%,calc(330vh - 640px))}
.card{display:flex;flex-direction:column;align-items:center;padding:0 0 14px;border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.09)}
.card canvas{position:static;width:100%;height:auto;aspect-ratio:4/3;margin-bottom:4px;border-radius:16px 16px 0 0}
.card b{font-weight:400;font-size:14px;letter-spacing:.12em}
.card span{margin-top:5px;padding:0 8px;font-size:12px;line-height:1.5;letter-spacing:.06em;opacity:.62}
.primary{font-size:15px;letter-spacing:.5em;padding:14px 40px 14px 48px;border:1px solid rgba(244,242,251,.55);
  border-radius:999px;transition:all .5s ease;background:rgba(255,255,255,.05)}
.primary:hover:not(:disabled){background:rgba(255,255,255,.16);border-color:#fff;letter-spacing:.6em;box-shadow:0 0 30px rgba(170,150,255,.35)}
.primary:disabled{opacity:.6;cursor:default}
#prog{letter-spacing:.1em;font-family:"Helvetica Neue",Arial,sans-serif;font-weight:300;font-size:12px}
.row{margin-top:24px;font-size:13px;letter-spacing:.2em;opacity:.8}
.link{cursor:pointer;border-bottom:1px solid rgba(244,242,251,.35);padding-bottom:2px}
.link.on{border-color:#fff;opacity:1}
.dot{margin:0 14px;opacity:.5}
.err{margin-top:14px;font-size:12px;color:#ffe3e3;min-height:1em;letter-spacing:.08em}
#help{opacity:0;visibility:hidden;cursor:pointer}
#help.show{opacity:1;visibility:visible}
@media (max-width:1180px){.guide{grid-template-columns:repeat(6,1fr)}}
@media (max-width:760px){.guide{grid-template-columns:repeat(2,1fr);gap:10px}.card b{font-size:14px}}

/* 场景名 */
#title{position:fixed;left:0;right:0;top:40%;text-align:center;pointer-events:none;font-weight:300;
  font-size:clamp(34px,6vw,72px);letter-spacing:.6em;padding-left:.6em;opacity:0;transform:translateY(8px);
  transition:opacity 1.2s ease,transform 1.8s ease;text-shadow:0 0 40px rgba(255,255,255,.35),0 2px 20px rgba(10,8,30,.35)}
#title.show{opacity:.92;transform:none}

#music{position:fixed;right:28px;bottom:26px;display:none;align-items:flex-end;gap:3px;cursor:pointer;
  font-size:11px;letter-spacing:.2em;color:rgba(246,249,252,.85);text-shadow:0 1px 10px rgba(15,20,45,.5)}
#music.show{display:flex}
#music i{display:block;width:2px;height:4px;background:currentColor;border-radius:1px;transition:height .08s}
#music span{margin-left:10px}
#debug{position:fixed;left:12px;top:10px;font:11px/1.5 ui-monospace,Menlo,monospace;color:#fff;
  background:rgba(10,20,35,.45);padding:6px 9px;border-radius:6px;display:none;white-space:pre}
#drop{position:fixed;inset:0;display:none;align-items:center;justify-content:center;font-size:20px;letter-spacing:.4em;
  background:rgba(30,30,70,.35);backdrop-filter:blur(4px)}
#drop.on{display:flex}
#toast{position:fixed;top:24px;left:50%;transform:translateX(-50%);font-size:12px;letter-spacing:.3em;
  color:rgba(246,249,252,.9);text-shadow:0 1px 10px rgba(15,30,55,.55);opacity:0;transition:opacity .4s;pointer-events:none}
#toast.show{opacity:1}

/* 每个场景的暗角与颗粒 */
body[data-scene=dream]{background:#1a1636}
body[data-scene=dream] #vignette{background:radial-gradient(ellipse 85% 75% at 50% 45%,rgba(0,0,0,0) 50%,rgba(8,6,30,.42) 100%)}
body[data-scene=golden]{background:#d99a62}
body[data-scene=golden] #vignette{background:radial-gradient(ellipse 85% 75% at 50% 45%,rgba(0,0,0,0) 50%,rgba(40,18,6,.38) 100%)}
body[data-scene=pearl]{background:#eef1f6}
body[data-scene=pearl] #vignette{background:radial-gradient(ellipse 85% 75% at 50% 45%,rgba(0,0,0,0) 60%,rgba(140,155,185,.16) 100%)}
body[data-scene=pearl] #grain{opacity:.035}
body[data-scene=pearl] #music{color:rgba(40,44,60,.85);text-shadow:0 1px 8px rgba(255,255,255,.5)}
body[data-scene=pearl] #title{color:#fff;text-shadow:0 0 30px rgba(120,140,190,.5),0 2px 18px rgba(80,100,150,.35)}
@media (max-width:760px){
  #go{position:sticky;bottom:18px;z-index:2;background:rgba(30,24,60,.72);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
  .card canvas{aspect-ratio:16/9}
}