/* 《捞月秘卷 · 贰》隐藏档案页 —— 全局样式 */

/* 字体 */
@font-face{
  font-family:'TaikoPixel';
  src:url('../assets/fonts/REEJI-TaikoMagicGB-Flash.ttf') format('truetype');
  font-display:swap;
}

/* 配色与全局变量 */
:root{

  --night-0:#0a1438; --night-1:#101f56; --night-2:#16296b;
  --bamboo-0:#0c1840; --bamboo-1:#1a3384; --bamboo-2:#2b55a8;
  --leaf:#35b8b2; --leaf-dim:#1e7f84;

  --stage-top:#3a3f4a; --stage-face:#16181f; --stage-edge:#5a6272;
  --screen:#0b0d14;

  --px-white:#e8ecf8; --px-dim:#9aa5c8;

  --moon-cream:#f0dcae; --gold:#ffe066; --green:#7ddb6a; --teal:#3ec6c0;
  --orange:#f5a623; --blue:#4a90d9;
  --danger:#e0483a;

  --font-display:'TaikoPixel',"Noto Sans SC",sans-serif;
  --font-pixel:"Press Start 2P",monospace;

  --font-pixel-zh:"Press Start 2P",'TaikoPixel',"Noto Sans SC",sans-serif;
  --font-body:"Noto Sans SC",sans-serif;

  --noise-uri: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='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");

  --stage-w:min(720px,94vw);
  --trim-h:88px;
}

/* 基础复位 */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  min-height:100dvh;
  overflow:hidden;

  background:linear-gradient(180deg,var(--night-1) 0%,var(--night-0) 100%);
  color:var(--px-white);
  font-family:var(--font-body);
  font-size:18px;
  line-height:1.2;
}
h1,h2,h3,h4,p,figure{ margin:0; }
button{
  font-family:inherit; color:inherit;
  background:none; border:0; padding:0;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
[hidden]{ display:none !important; }
::selection{ background:var(--teal); color:var(--night-0); }

body::before{
  content:""; position:fixed; inset:0; z-index:35;
  background-image:var(--noise-uri); background-size:140px 140px;
  opacity:.05; pointer-events:none;
}

:focus{ outline:none; }
:focus-visible{
  outline:2px solid var(--teal);
  outline-offset:3px;
}

.micro{
  font-family:var(--font-pixel);
  font-size:9px;
  letter-spacing:.15em;
  color:var(--px-dim);
  line-height:1.8;
}

.sprite,.brand-moon,.wanderer{ image-rendering:pixelated; }

/* 背景层：像素竹林 */
.layer-far,.layer-near{
  position:fixed; inset:0;
  pointer-events:none;
  background-repeat:repeat;
}
.layer-far{
  z-index:10; opacity:.85;
  background-image:
    repeating-linear-gradient(180deg, rgba(0,0,0,.45) 0 4px, transparent 4px 118px),
    repeating-linear-gradient(90deg, transparent 0 22px, var(--bamboo-0) 22px 48px, transparent 48px 74px);
  -webkit-mask-image:repeating-linear-gradient(90deg, transparent 0 22px, #000 22px 48px, transparent 48px 74px);
          mask-image:repeating-linear-gradient(90deg, transparent 0 22px, #000 22px 48px, transparent 48px 74px);
}
.layer-near{
  z-index:11;
  background-image:
    repeating-linear-gradient(180deg, rgba(0,0,0,.5) 0 4px, transparent 4px 156px),
    repeating-linear-gradient(90deg,
      transparent 0 46px,
      var(--bamboo-2) 46px 50px,
      var(--bamboo-1) 50px 86px,
      transparent 86px 138px);
  -webkit-mask-image:repeating-linear-gradient(90deg, transparent 0 46px, #000 46px 86px, transparent 86px 138px);
          mask-image:repeating-linear-gradient(90deg, transparent 0 46px, #000 46px 86px, transparent 86px 138px);
}

/* 双层呼吸雾气 */
.mist{
  position:fixed; left:-25%; width:150%; height:34vh;
  pointer-events:none; z-index:12;
  background:radial-gradient(ellipse 62% 100% at 50% 50%,
    rgba(154,165,200,.10) 0%, rgba(154,165,200,.045) 46%, transparent 72%);
  filter:blur(30px);
  animation:
    mistBreath 7s ease-in-out infinite,
    mistDrift  26s ease-in-out infinite alternate;
}
.mist-a{ top:16%; }
.mist-b{
  top:56%;
  animation-duration:8.5s, 34s;
  animation-delay:-3.5s, -14s;
}
@keyframes mistBreath{
  0%,100%{ filter:blur(30px); }
  50%    { filter:blur(60px); }
}
@keyframes mistDrift{
  from{ transform:translateX(-4%); }
  to  { transform:translateX(4%);  }
}

/* 档案场景专属雾 */
.mist-arch{ z-index:17; opacity:0; transition:opacity 1.2s ease; }
.mist-arch-a{ top:22%; }
.mist-arch-b{ top:64%; animation-duration:9s, 30s; animation-delay:-4s, -9s; }
body.is-unlocked .mist-arch{ opacity:1; }

/* 萤火层 */
#fxFireflies{
  position:fixed; inset:0; z-index:18;
  width:100%; height:100%;
  pointer-events:none;
}

/* 场景一：锁屏 */
#scene-lock{
  position:fixed; inset:0; z-index:20; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:24px 0 calc(56px + env(safe-area-inset-bottom));
  pointer-events:none;
}

/* 机台组合 */
.cabinet{
  display:flex; flex-direction:column; align-items:center;
  margin-top:5vh;
  zoom:.9;
  pointer-events:none;
}
.cabinet :is(button,.panel){ pointer-events:auto; }

/* 像素屏 .stage-screen */
.stage-screen{
  position:relative; z-index:2;
  width:78%; max-width:560px;
  aspect-ratio:16/10;
  margin-bottom:-26px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding-bottom:7%;
  text-align:center;
  background:
    radial-gradient(120% 90% at 50% 38%, rgba(62,198,192,.10), transparent 60%),
    var(--screen);
  border:10px solid var(--stage-face);
  border-radius:18px;
  box-shadow:
    0 18px 40px rgba(0,0,0,.5),
    inset 0 0 0 2px rgba(0,0,0,.6);
  overflow:hidden;
  transform-origin:center center;
}
.stage-screen::before{
  content:""; position:absolute; inset:0; z-index:0;
  background-image:var(--noise-uri); background-size:140px 140px;
  opacity:.07; pointer-events:none;
}

.screen-title{
  position:relative; z-index:1;
  font-family:var(--font-display);
  font-weight:400;
  font-size:clamp(22px,3.6vw,31px);
  letter-spacing:.35em;
  text-indent:.35em;
  color:var(--px-dim);
  opacity:.85;
}
.screen-sub{
  position:relative; z-index:1;
  margin-top:5px;
  font-family:var(--font-pixel);
  font-size:clamp(10px,1.6vw,12px);
  letter-spacing:.18em;
  color:var(--px-dim);
}

.leaf-cluster{
  position:absolute; top:14px; z-index:0;
  width:6px; height:6px;
  background:transparent;
  pointer-events:none;
}
.leaf-r{
  right:18px;
  transform:scaleX(-1);
  box-shadow:
    30px 0 0 var(--leaf-dim), 36px 0 0 var(--leaf-dim),
    24px 6px 0 var(--leaf-dim), 30px 6px 0 var(--leaf), 36px 6px 0 var(--leaf), 42px 6px 0 var(--leaf-dim), 72px 6px 0 var(--leaf-dim),
    18px 12px 0 var(--leaf-dim), 24px 12px 0 var(--leaf), 30px 12px 0 var(--leaf), 36px 12px 0 var(--leaf), 42px 12px 0 var(--leaf-dim), 48px 12px 0 var(--leaf-dim), 66px 12px 0 var(--leaf-dim), 72px 12px 0 var(--leaf-dim), 78px 12px 0 var(--leaf-dim),
    12px 18px 0 var(--leaf-dim), 18px 18px 0 var(--leaf), 24px 18px 0 var(--leaf), 30px 18px 0 var(--leaf), 36px 18px 0 var(--leaf), 42px 18px 0 var(--leaf), 48px 18px 0 var(--leaf-dim), 54px 18px 0 var(--leaf-dim), 66px 18px 0 var(--leaf-dim), 72px 18px 0 var(--leaf-dim), 78px 18px 0 var(--leaf-dim), 84px 18px 0 var(--leaf-dim),
    18px 24px 0 var(--leaf-dim), 24px 24px 0 var(--leaf-dim), 30px 24px 0 var(--leaf), 36px 24px 0 var(--leaf), 42px 24px 0 var(--leaf), 48px 24px 0 var(--leaf), 54px 24px 0 var(--leaf), 60px 24px 0 var(--leaf-dim), 66px 24px 0 var(--leaf-dim), 72px 24px 0 var(--leaf-dim), 78px 24px 0 var(--leaf-dim),
    24px 30px 0 var(--leaf-dim), 30px 30px 0 var(--leaf-dim), 36px 30px 0 var(--leaf), 42px 30px 0 var(--leaf), 48px 30px 0 var(--leaf), 54px 30px 0 var(--leaf), 60px 30px 0 var(--leaf-dim), 66px 30px 0 var(--leaf-dim),
    36px 36px 0 var(--leaf-dim), 42px 36px 0 var(--leaf-dim), 48px 36px 0 var(--leaf), 54px 36px 0 var(--leaf), 60px 36px 0 var(--leaf-dim), 66px 36px 0 var(--leaf-dim),
    24px 42px 0 var(--leaf-dim), 48px 42px 0 var(--leaf-dim), 54px 42px 0 var(--leaf-dim), 60px 42px 0 var(--leaf-dim),
    18px 48px 0 var(--leaf-dim), 24px 48px 0 var(--leaf-dim);
}
.leaf-l{
  left:18px;
  box-shadow:
    30px 0 0 var(--leaf-dim), 36px 0 0 var(--leaf-dim),
    24px 6px 0 var(--leaf-dim), 30px 6px 0 var(--leaf), 36px 6px 0 var(--leaf), 42px 6px 0 var(--leaf-dim), 72px 6px 0 var(--leaf-dim),
    18px 12px 0 var(--leaf-dim), 24px 12px 0 var(--leaf), 30px 12px 0 var(--leaf), 36px 12px 0 var(--leaf), 42px 12px 0 var(--leaf-dim), 48px 12px 0 var(--leaf-dim), 66px 12px 0 var(--leaf-dim), 72px 12px 0 var(--leaf-dim), 78px 12px 0 var(--leaf-dim),
    12px 18px 0 var(--leaf-dim), 18px 18px 0 var(--leaf), 24px 18px 0 var(--leaf), 30px 18px 0 var(--leaf), 36px 18px 0 var(--leaf), 42px 18px 0 var(--leaf), 48px 18px 0 var(--leaf-dim), 54px 18px 0 var(--leaf-dim), 66px 18px 0 var(--leaf-dim), 72px 18px 0 var(--leaf-dim), 78px 18px 0 var(--leaf-dim), 84px 18px 0 var(--leaf-dim),
    18px 24px 0 var(--leaf-dim), 24px 24px 0 var(--leaf-dim), 30px 24px 0 var(--leaf), 36px 24px 0 var(--leaf), 42px 24px 0 var(--leaf), 48px 24px 0 var(--leaf), 54px 24px 0 var(--leaf), 60px 24px 0 var(--leaf-dim), 66px 24px 0 var(--leaf-dim), 72px 24px 0 var(--leaf-dim), 78px 24px 0 var(--leaf-dim),
    24px 30px 0 var(--leaf-dim), 30px 30px 0 var(--leaf-dim), 36px 30px 0 var(--leaf), 42px 30px 0 var(--leaf), 48px 30px 0 var(--leaf), 54px 30px 0 var(--leaf), 60px 30px 0 var(--leaf-dim), 66px 30px 0 var(--leaf-dim),
    36px 36px 0 var(--leaf-dim), 42px 36px 0 var(--leaf-dim), 48px 36px 0 var(--leaf), 54px 36px 0 var(--leaf), 60px 36px 0 var(--leaf-dim), 66px 36px 0 var(--leaf-dim),
    24px 42px 0 var(--leaf-dim), 48px 42px 0 var(--leaf-dim), 54px 42px 0 var(--leaf-dim), 60px 42px 0 var(--leaf-dim),
    18px 48px 0 var(--leaf-dim), 24px 48px 0 var(--leaf-dim);
}

.px-cloud{
  position:absolute; left:12%; top:56%; z-index:0;
  width:6px; height:6px;
  background:transparent;
  pointer-events:none; opacity:.8;
  box-shadow:
    18px 0 0 var(--px-white), 24px 0 0 var(--px-white), 30px 0 0 var(--px-white), 36px 0 0 var(--px-white),
    12px 6px 0 var(--px-white), 18px 6px 0 var(--px-white), 24px 6px 0 var(--px-white), 30px 6px 0 var(--px-white), 36px 6px 0 var(--px-white), 42px 6px 0 var(--px-white), 48px 6px 0 var(--px-dim), 54px 6px 0 var(--px-dim),
    6px 12px 0 var(--px-white), 12px 12px 0 var(--px-white), 18px 12px 0 var(--px-white), 24px 12px 0 var(--px-white), 30px 12px 0 var(--px-white), 36px 12px 0 var(--px-white), 42px 12px 0 var(--px-white), 48px 12px 0 var(--px-white), 54px 12px 0 var(--px-dim), 60px 12px 0 var(--px-dim),
    12px 18px 0 var(--px-white), 18px 18px 0 var(--px-white), 30px 18px 0 var(--px-white), 36px 18px 0 var(--px-white), 42px 18px 0 var(--px-white), 54px 18px 0 var(--px-dim), 60px 18px 0 var(--px-dim);
}

.scanlines{
  position:absolute; inset:0; z-index:2;
  background:repeating-linear-gradient(180deg, transparent 0 2px, rgba(0,0,0,.55) 2px 4px);
  opacity:.25; pointer-events:none;
}

/* 机台 .stage */
.stage{
  position:relative; z-index:3;
  width:var(--stage-w);
}

.stage-top{
  height:var(--trim-h);
  clip-path:polygon(8% 0,92% 0,100% 100%,0 100%);
  background:
    radial-gradient(circle, rgba(232,236,248,.07) 1px, transparent 1.6px),
    linear-gradient(180deg, rgba(232,236,248,.10), transparent 34%),
    var(--stage-top);
  background-size:8px 8px, 100% 100%, 100% 100%;
  box-shadow:
    inset 0 3px 0 var(--stage-edge),
    inset 0 -8px 0 rgba(0,0,0,.28);
}

.stage-trim{
  position:absolute; left:0; right:0; top:var(--trim-h); z-index:4;
  height:0;
  display:flex; align-items:flex-end; justify-content:center;
  gap:clamp(36px,9vw,84px);
  pointer-events:none;
}
.sprite{
  display:block; width:auto;
  filter:drop-shadow(0 6px 0 rgba(0,0,0,.3));
}
.sprite-moon  { height:168px; margin-bottom:16px;
  animation:idleBob 1.9s steps(2,end) infinite; }
.sprite-luohou{ height:112px;
  animation:idleBob 1.6s steps(2,end) infinite; }
.sprite-yanhou{ height:112px;
  animation:idleBob 2.2s steps(2,end) infinite; }

@keyframes idleBob{
  from{ transform:translateY(0); }
  to  { transform:translateY(-6px); }
}

.sprite.is-jump{ animation:spriteJump .5s steps(3,end) 1; }
@keyframes spriteJump{
  0%  { transform:translateY(0); }
  45% { transform:translateY(-30px); }
  100%{ transform:translateY(0); }
}

.stage-face{
  position:relative;
  margin:0 4%;
  padding:18px 20px 16px;
  background:var(--stage-face);
  border:2px solid var(--stage-edge); border-top:0;
  border-radius:0 0 6px 6px;
  box-shadow:0 22px 44px rgba(0,0,0,.45);
}

.panel-row{
  display:flex; flex-wrap:wrap; gap:12px;
  align-items:stretch; justify-content:center;
}
.panel{
  background:var(--screen);
  border:2px solid var(--stage-edge);
  border-radius:4px;
  padding:10px 12px;
}
#panelCode{ flex:1 1 320px; min-width:0; }
#panelStatus{
  flex:0 1 220px; min-width:188px;
  display:flex; flex-direction:column; justify-content:center; gap:8px;
}
.panel-label{
  font-family:var(--font-pixel);
  font-size:10px; letter-spacing:.15em;
  color:var(--px-dim);
  margin-bottom:8px;
}

#lockSlots{
  display:flex; justify-content:center;
  gap:clamp(3px,.8vw,6px);
}
.slot{
  width:clamp(27px,4.2vw,34px); height:40px;
  display:grid; place-items:center;
  font-family:var(--font-display);
  font-size:19px; line-height:1;
  color:var(--px-dim);
  background:var(--screen);
  border:1px solid var(--stage-edge);
  border-radius:2px;
  transition:color .15s ease, border-color .15s ease, filter .15s ease;
}
.slot.is-filled{ color:var(--gold); }
.slot.is-active{
  border-color:var(--teal);
  animation:tealBreath 1.4s ease-in-out infinite;
}

@keyframes tealBreath{
  0%,100%{ filter:drop-shadow(0 0 0 rgba(62,198,192,0)); }
  50%    { filter:drop-shadow(0 0 5px rgba(62,198,192,.6)); }
}
.slot.is-gold{
  color:var(--gold);
  border-color:var(--gold);
  text-shadow:0 0 8px rgba(255,224,102,.6);
  animation:goldPop .5s ease;
  filter:drop-shadow(0 0 6px rgba(255,224,102,.5));
}
@keyframes goldPop{
  0%{ transform:scale(.9); }
  55%{ transform:scale(1.08); }
  100%{ transform:scale(1); }
}
#lockSlots.is-error .slot{
  border-color:var(--danger);
  animation:slotFlash .4s ease;
}
/* 文案留空时整块自动隐藏（:empty） */
#quhuiNotes:empty,
.scene-note-body:empty,
#demoNote:empty,
#videoNote:empty,
#prefaceLines:empty{ display:none; }
#videoNote{ margin-top:12px; }
/* 卷首题诗 .preface */
.preface{
  max-width:620px; margin:0 auto;
  padding:26px 24px 30px;
  text-align:center;
}
.preface:has(#prefaceLines:empty){ display:none; }
.preface-rule{
  display:flex; align-items:center; gap:14px;
  margin:0;
  font-family:var(--font-display);
  font-size:12px; letter-spacing:.4em; text-indent:.4em;
  color:var(--gold); opacity:.55;
}
.preface-rule::before,.preface-rule::after{
  content:""; flex:1;
  border-top:1px solid rgba(154,165,200,.28);
}
#prefaceLines{ margin:14px 0; }
#prefaceLines p{
  margin:0;
  font-family:var(--font-display);
  font-size:15px; line-height:2.1;
  letter-spacing:.12em;
  color:var(--px-dim);
}
#prefaceLines p.is-key{ color:var(--px-white); }
#prefaceLines p:nth-child(3){ margin-top:10px; }
@keyframes slotFlash{
  0%,100%{ filter:drop-shadow(0 0 0 rgba(224,72,58,0)); }
  50%    { filter:drop-shadow(0 0 7px rgba(224,72,58,.65)); }
}

.panel-attempt{
  font-family:var(--font-pixel);
  font-size:10px; letter-spacing:.15em;
  color:var(--px-dim);
  white-space:nowrap;
}
#attemptCount{ color:inherit; }

.panel-bars{ display:flex; gap:4px; height:8px; }
.panel-bars i{ display:block; height:100%; }
.bar-o{ width:44%; background:var(--orange); }
.bar-t{ width:30%; background:var(--teal); }
.bar-b{ width:18%; background:var(--blue); }

#attemptNote{
  min-height:1.6em;
  font-family:var(--font-pixel);
  font-size:9px; letter-spacing:.1em;
  color:var(--px-dim);
  line-height:1.6;
}
#attemptNote.is-zh{
  font-family:var(--font-display);
  font-size:13px; letter-spacing:.08em;
}
#attemptNote.is-error{ color:var(--danger); }

#statusLine{
  margin-top:14px;
  text-align:center;
  font-family:var(--font-pixel-zh);
  font-size:11px; letter-spacing:.12em;
  color:var(--px-dim);
  animation:pxBlink 1.2s steps(1,end) infinite;
}
#statusLine.is-success{
  color:var(--gold);
  animation-duration:.6s;
  filter:drop-shadow(0 0 6px rgba(255,224,102,.55));
}
@keyframes pxBlink{
  0%,49.9%{ opacity:1; }
  50%,100%{ opacity:0; }
}

/* 符令键盘 #tileRack */
#tileRack{
  margin-top:18px;
  width:min(560px,92vw);
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:10px;
  pointer-events:auto;
  transition:opacity .4s ease, transform .4s ease;
}
#tileRack.is-fading{ opacity:0; transform:translateY(8px); pointer-events:none; }
.tile{
  position:relative;
  height:52px;
  display:grid; place-items:center;
  font-family:var(--font-display);
  font-size:24px;
  color:var(--px-white);
  background:var(--stage-face);
  border:2px solid var(--stage-edge);
  border-radius:4px;
  transition:border-color .1s ease, transform .06s ease, filter .1s ease, opacity .25s ease;
}
.tile::before{
  content:"▶";
  position:absolute; left:8px; top:50%;
  transform:translateY(-50%);
  font-size:11px; line-height:1;
  color:var(--teal);
  opacity:0;
}
.tile:hover,.tile:focus-visible{ border-color:var(--teal); }
.tile:hover::before,.tile:focus-visible::before{ opacity:1; }
.tile:active{ transform:translateY(2px); filter:brightness(.85); }
.tile.is-used{ opacity:.32; pointer-events:none; }

#btnClear{
  position:relative;
  margin-top:12px;
  min-height:44px; padding:6px 14px 6px 22px;
  font-family:var(--font-display);
  font-size:14px; letter-spacing:.25em;
  color:var(--px-dim);
  transition:color .15s ease;
}
#btnClear::before{
  content:"▶";
  position:absolute; left:4px; top:50%;
  transform:translateY(-50%);
  font-size:10px; color:var(--teal); opacity:0;
}
#btnClear:hover,#btnClear:focus-visible{ color:var(--px-white); }
#btnClear:hover::before,#btnClear:focus-visible::before{ opacity:1; }

/* 控制簇 .ctrl-cluster */
.ctrl-cluster{ display:flex; gap:6px; margin-left:2px; }
.ctrl-cluster button{
  position:relative;
  width:32px; height:32px;
  display:grid; place-items:center;
  color:var(--px-dim);
  background:rgba(10,20,56,.55);
  border:1px solid var(--stage-edge);
  border-radius:2px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.35);
  transition:border-color .15s ease, color .15s ease,
             transform .06s ease, opacity .15s ease, filter .15s ease;
}
.ctrl-cluster button:hover,
.ctrl-cluster button:focus-visible{
  border-color:var(--teal); color:var(--px-white);
}
.ctrl-cluster button:active{ transform:translateY(1px); }
#btnBgm{
  font-family:var(--font-display);
  font-size:15px; line-height:1;
}
#btnSound{
  font-family:var(--font-pixel);
  font-size:6px; letter-spacing:.03em;
}

.ctrl-cluster button[aria-pressed="true"]{
  color:var(--gold);
  border-color:rgba(255,224,102,.65);
  filter:drop-shadow(0 0 4px rgba(255,224,102,.3));
}

.ctrl-cluster button[aria-pressed="false"]{
  opacity:.5;
}
.ctrl-cluster button[aria-pressed="false"]::after{
  content:"";
  position:absolute; left:5px; right:5px; top:50%;
  height:2px; margin-top:-1px;
  background:var(--danger);
  transform:rotate(-45deg);
  pointer-events:none;
}

#lockFoot{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; justify-content:center;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom));
  pointer-events:none;
}

/* 解锁编舞 */

.stage.is-shake{ animation:stageShake .4s ease; }
@keyframes stageShake{
  0%,100%{ transform:translate(0,0) rotate(0deg); }
  15%    { transform:translate(-10px,2px) rotate(-1.2deg); }
  30%    { transform:translate(9px,-2px) rotate(1deg); }
  45%    { transform:translate(-7px,1px) rotate(-.8deg); }
  60%    { transform:translate(6px,-1px) rotate(.6deg); }
  75%    { transform:translate(-3px,1px) rotate(-.3deg); }
}

#screenFlash{
  position:fixed; inset:0; z-index:40;
  background:var(--px-white); opacity:0; pointer-events:none;
}
#screenFlash.is-on{ animation:flashOnce .3s ease-out; }
@keyframes flashOnce{
  0%{ opacity:0; } 25%{ opacity:.85; } 100%{ opacity:0; }
}

.stage-screen{
  transition:transform 1.2s cubic-bezier(.55,.06,.68,.19),
             opacity 1.2s ease,
             filter 1.2s ease;
}
.stage-screen.is-entering{
  transform:scale(16);
  opacity:0;
  filter:blur(3px);
}

.stage{
  transition:transform .9s cubic-bezier(.55,.06,.68,.19),
             opacity .9s ease;
}
.stage.is-sink{ transform:translateY(90px); opacity:0; }
#btnClear{ transition:opacity .4s ease, transform .4s ease; }
#btnClear.is-fading{ opacity:0; transform:translateY(8px); pointer-events:none; }
.px-burst.px-zoom-spark{
  width:5px; height:5px;
  animation-duration:.7s;
}

body.is-unlocked .layer-far,
body.is-unlocked .layer-near,
body.is-unlocked .mist-a,
body.is-unlocked .mist-b,
body.is-unlocked #scene-lock{ display:none; }

/* 场景二：档案 #scene-archive */
#scene-archive{
  position:fixed; inset:0; z-index:16;
  overflow-y:auto; overflow-x:hidden;
  overscroll-behavior:contain;
  opacity:0; transition:opacity 1.2s ease;

  background:linear-gradient(180deg, rgba(10,20,56,.90), rgba(10,20,56,.95));
}
body.is-entering #scene-archive,
body.is-unlocked #scene-archive{ opacity:1; }

#scene-archive::-webkit-scrollbar{ width:10px; }
#scene-archive::-webkit-scrollbar-track{ background:var(--night-0); }
#scene-archive::-webkit-scrollbar-thumb{ background:var(--night-2); border:2px solid var(--night-0); }
#scene-archive{ scrollbar-width:thin; scrollbar-color:var(--night-2) var(--night-0); }

#scene-archive .stagger{
  opacity:0; transform:translateY(18px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1);
}
#scene-archive .stagger.is-inview{
  opacity:1; transform:translateY(0);
  transition-delay:var(--d,0ms);
}

/* 档案页四周装饰猴 .wanderer */
.wanderer{
  position:fixed; z-index:6;
  display:block; width:auto;
  pointer-events:none;
  opacity:.85;
  filter:drop-shadow(0 4px 0 rgba(0,0,0,.3));
  animation:idleBob 2s steps(2,end) infinite;
}
.pos-tl{ top:20px; left:20px;   height:76px; animation-duration:1.6s; }
.pos-tr{ top:20px; right:20px;  height:76px; animation-duration:2.2s; animation-delay:-.7s; }
.pos-ml{ top:44%;  left:24px;   height:64px; animation-duration:1.9s; animation-delay:-.3s; }
.pos-mr{ top:44%;  right:24px;  height:68px; animation-duration:1.75s; animation-delay:-1.1s; }
.pos-bl{ bottom:22px; left:20px;  height:56px; animation-duration:2.05s; animation-delay:-.5s; }
.pos-br{ bottom:22px; right:20px; height:56px; animation-duration:2.35s; animation-delay:-.9s; }

.archive-grid,#demoZone,#archiveFoot{ position:relative; z-index:2; }

/* 头部 */
#archiveHeader{
  position:sticky; top:0; z-index:5;
  display:flex; align-items:center; justify-content:center;
  gap:20px; flex-wrap:wrap;
  max-width:960px; margin:0 auto;
  padding:20px 24px;
  background:linear-gradient(180deg, rgba(10,20,56,.96), rgba(10,20,56,.84));
  border-bottom:1px solid rgba(90,98,114,.4);

  box-shadow:0 0 0 100vmax rgba(10,20,56,.9);
  clip-path:inset(0 -100vmax);
}
.brand{ display:flex; align-items:center; gap:14px; }
.brand-moon{ width:38px; height:44px; display:block; }
.brand-text h2{
  font-family:var(--font-display);
  font-size:clamp(18px,3.2vw,24px);
  font-weight:400; letter-spacing:.1em;
  line-height:1.2;
  color:var(--px-white);
  text-shadow:2px 2px 0 rgba(0,0,0,.45);
}
.brand-text .micro{ margin-top:0; }
#btnReseal{
  min-height:44px; padding:8px 18px;
  font-family:var(--font-display);
  font-size:14px; letter-spacing:.25em;
  color:var(--px-dim);
  background:var(--stage-face);
  border:2px solid var(--stage-edge);
  border-radius:4px;
  transition:border-color .15s ease, color .15s ease;
}
#btnReseal:hover,#btnReseal:focus-visible{
  border-color:var(--danger); color:var(--px-white);
}

/* 栏目卡容器 */
.archive-grid{
  max-width:960px; margin:0 auto;
  padding:clamp(20px,4vh,36px) 20px 8px;
  display:grid; gap:28px;
  grid-template-columns:1fr;
}

.stage-card{
  background:var(--stage-face);
  border:2px solid var(--stage-edge);
  border-top:4px solid var(--teal);
  border-radius:4px;
  box-shadow:0 14px 32px rgba(0,0,0,.4);
}
.card-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px;
  padding:14px 16px 10px;
  border-bottom:1px solid rgba(90,98,114,.35);
}
.card-title{
  font-family:var(--font-display);
  font-size:clamp(19px,3.4vw,24px);
  font-weight:400; letter-spacing:.14em;
  color:var(--px-white);
}
.card-body{ padding:16px; }

/* 壹 · 影像本体 */
.video-frame{
  position:relative;
  background:var(--screen);
  border:1px solid var(--stage-edge);
  padding:4px;
}
#bonusVideo{
  display:block; width:100%; aspect-ratio:960/443;
  background:var(--night-0);
}
.video-frame .scanlines{ inset:4px; }
#videoFallback{
  position:absolute; inset:4px; z-index:3;
  display:grid; place-items:center;
  padding:24px; text-align:center;
  font-size:14px; letter-spacing:.12em;
  color:var(--px-dim);
  background:var(--night-0);
}

/* 贰 · 曲绘设定 */
.art-hero{ text-align:center; }

.art-hero-frame{
  position:relative;
  display:block; width:100%;
  background:var(--screen);
  border:1px solid var(--stage-edge);
  padding:4px;
  cursor:zoom-in;
  transition:border-color .15s ease, filter .15s ease;
}
.art-hero-frame:hover,.art-hero-frame:focus-visible{
  border-color:var(--teal);
  filter:brightness(1.08);
}
#quhuiImg{
  display:block; width:100%; height:auto;
}

.zoom-hint{
  position:absolute; right:10px; bottom:10px;
  padding:3px 10px;
  font-family:var(--font-display);
  font-size:12px; letter-spacing:.15em;
  color:var(--px-white);
  background:rgba(11,13,20,.78);
  border:1px solid var(--stage-edge);
  border-radius:2px;
  pointer-events:none;
}

#quhuiCaption{
  display:inline-block;
  margin-top:12px; padding-bottom:3px;
  font-family:var(--font-display);
  font-size:18px; letter-spacing:.14em;
  color:var(--px-white);
  border-bottom:2px solid var(--teal);
}

#quhuiNotes{ margin-top:10px; text-align:center; }
.art-note{
  margin-top:6px;
  font-family:var(--font-display);
  font-size:13px; line-height:1.8;
  letter-spacing:.06em;
  text-align:center;
  color:var(--px-dim);
}

/* lightbox 遮罩 #lightbox */
#lightbox{
  position:fixed; inset:0; z-index:50;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px;
  padding:24px;
  background:rgba(10,20,56,.9);
  opacity:0; pointer-events:none;
  transition:opacity .25s ease;
  cursor:zoom-out;
}
#lightbox.is-open{ opacity:1; pointer-events:auto; }
#lightboxImg{
  display:block;
  max-width:94vw; max-height:82vh;
  width:auto; height:auto;
  background:var(--screen);
  border:4px solid var(--screen);
  outline:1px solid var(--stage-edge);
  box-shadow:0 22px 60px rgba(0,0,0,.6);
}
.lightbox-hint{
  font-family:var(--font-display);
  font-size:12px; letter-spacing:.2em;
  color:var(--px-dim);
  pointer-events:none;
}

body.no-scroll{ overflow:hidden; }
body.no-scroll #scene-archive{ overflow:hidden; }

/* 叁 · 场景设定 */
#changjingRoot{
  display:grid; gap:14px;
  grid-template-columns:1fr;
}
.scene-note{
  background:var(--screen);
  border:1px solid var(--stage-edge);
  border-left:4px solid var(--teal);
  padding:12px 14px;
  text-align:center;
}

.scene-img{
  display:block; width:100%; height:auto;
  margin-bottom:10px;
  background:var(--screen);
  border:1px solid var(--stage-edge);
  padding:4px;
  cursor:zoom-in;
  transition:border-color .15s ease, filter .15s ease;
}
.scene-img:hover{ border-color:var(--teal); filter:brightness(1.08); }

.scene-note-title{
  display:inline;
  font-family:var(--font-display);
  font-size:15px; letter-spacing:.12em;
  color:var(--teal);
  margin-bottom:0;
}
.scene-note-title::after{
  content:" - ";
  letter-spacing:0;
  color:var(--px-dim);
}
.scene-note-body{
  display:inline;
  font-family:var(--font-display);
  font-size:13px; line-height:1.9;
  letter-spacing:.06em;
  color:var(--px-white);
}
.scene-note-body p{ display:inline; margin:0; }
.scene-note-body em{ font-style:normal; }
.scene-note-body strong{ color:var(--gold); }

/* 肆 · 二创素材包 */
.souchang-empty{
  padding:18px 16px;
  text-align:center;
  font-family:var(--font-display);
  font-size:13px; letter-spacing:.2em;
  color:var(--px-dim);
  border:2px dashed var(--px-dim);
  border-radius:2px;
  opacity:.6;
}
.souchang-link{
  position:relative;
  display:block;
  padding:14px 16px 14px 30px;
  font-family:var(--font-display);
  font-size:16px; letter-spacing:.18em;
  color:var(--px-white);
  background:var(--screen);
  border:2px solid var(--stage-edge);
  border-radius:4px;
  text-decoration:none;
  transition:border-color .1s ease, transform .06s ease, filter .1s ease;
}
.souchang-link::before{
  content:"▶";
  position:absolute; left:10px; top:50%;
  transform:translateY(-50%);
  font-size:11px; line-height:1;
  color:var(--teal);
  opacity:0;
}
.souchang-link:hover,.souchang-link:focus-visible{ border-color:var(--teal); }
.souchang-link:hover::before,.souchang-link:focus-visible::before{ opacity:1; }
.souchang-link:active{ transform:translateY(2px); filter:brightness(.85); }
/* 素材包行：下载按钮 + 提取码小牌横排（窄屏自动换行） */
.souchang-row{
  display:flex; align-items:stretch; gap:10px; flex-wrap:wrap;
}
.souchang-row .souchang-link{ flex:1 1 220px; }
.souchang-code{
  flex:0 0 auto;
  display:grid; place-items:center;
  padding:0 16px;
  min-height:44px;
  font-family:var(--font-display);   /* 统一 TaikoPixel：中英文同字体不再混排 */
  font-size:13px; letter-spacing:.12em;
  color:var(--gold);
  background:var(--screen);
  border:1px dashed rgba(255,224,102,.5);
  border-radius:2px;
  cursor:pointer;
  transition:border-color .15s ease, color .15s ease, filter .1s ease;
}
.souchang-code:hover,.souchang-code:focus-visible{
  border-color:var(--gold); filter:drop-shadow(0 0 4px rgba(255,224,102,.3));
}
.souchang-code:active{ transform:translateY(1px); }
.souchang-code.is-copied{
  color:var(--teal);
  border-color:var(--teal); border-style:solid;
}

/* 暗格 #demoDoor / #demoPanel */
#demoZone{
  max-width:960px; margin:0 auto;
  padding:26px 20px 8px;
  display:flex; flex-direction:column; align-items:center;
}
#demoDoor{
  min-height:44px; padding:8px 16px;
  font-family:var(--font-pixel-zh);
  font-size:11px; letter-spacing:.2em;
  color:var(--px-dim);
  border:2px dashed var(--px-dim);
  border-radius:2px;
  opacity:.5;
  transition:opacity .15s ease, border-color .15s ease, color .15s ease;
}
#demoDoor:hover,#demoDoor:focus-visible{ opacity:1; color:var(--px-white); }
#demoDoor[aria-expanded="true"]{ opacity:1; border-color:var(--gold); color:var(--gold); }
#demoPanel{
  position:relative;
  margin-top:18px;
  width:min(560px,100%);
  padding:22px 20px 18px;
  background:var(--screen);
  border:2px solid var(--stage-edge);
  border-radius:4px;
  box-shadow:0 14px 32px rgba(0,0,0,.45);
  animation:dlgIn .25s steps(3,end);
}
@keyframes dlgIn{
  from{ opacity:0; transform:translateY(8px); }
  to  { opacity:1; transform:translateY(0); }
}
.demo-tag{
  position:absolute; top:-12px; left:14px;
  padding:2px 10px;
  font-family:var(--font-display);
  font-size:12px; letter-spacing:.25em;
  color:var(--screen);
  background:var(--gold);
  border-radius:2px;
}
#demoNote{
  margin-top:6px;
  font-family:var(--font-display);
  font-size:13px; line-height:1.9;
  letter-spacing:.06em;
  text-align:center;
  color:var(--px-dim);
}

/* 暗格像素播放器 #pxPlayer */
#pxPlayer{
  margin-top:14px;
  display:flex; flex-direction:column; gap:10px;
}

.px-row-top{
  display:flex; align-items:center; gap:12px;
}
#pxPlay{
  flex:0 0 48px; width:48px; height:48px;
  display:grid; place-items:center;
  font-family:var(--font-pixel);
  font-size:13px; line-height:1;
  color:var(--gold);
  background:var(--stage-face);
  border:2px solid var(--stage-edge);
  border-radius:2px;
  box-shadow:0 3px 0 rgba(0,0,0,.45);
  transition:border-color .15s ease, color .15s ease, filter .1s ease;
}
#pxPlay::before{ content:"▶"; }
#pxPlayer.is-playing #pxPlay::before{ content:"❚❚"; }
#pxPlay:hover,#pxPlay:focus-visible{
  border-color:var(--teal); color:var(--px-white);
}

#pxPlay:active{
  transform:translateY(2px);
  box-shadow:none;
  filter:brightness(.85);
}
#pxTrackName{
  flex:1 1 auto; min-width:0;
  font-family:var(--font-display);
  font-size:16px; letter-spacing:.1em;
  color:var(--px-white);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#pxTime{
  flex:0 0 auto;
  font-family:var(--font-pixel);
  font-size:8px; letter-spacing:.08em;
  color:var(--px-dim);
}

#pxPlayer.is-buffering #pxTime::before{
  content:"...";
  color:var(--gold);
}

#pxProgress{
  position:relative;
  height:12px;
  background:var(--screen);
  border:1px solid var(--stage-edge);
  cursor:pointer;
}
#pxProgress:focus-visible{ outline-offset:2px; }

#pxProgressFill{
  position:absolute; left:0; top:0; bottom:0;
  width:0%;
  background:repeating-linear-gradient(90deg,
    var(--gold) 0 4px,
    rgba(255,224,102,.32) 4px 6px);
  pointer-events:none;
}

.px-eq{
  display:flex; align-items:flex-end; gap:4px;
  height:18px;
}
.px-eq span{
  display:block; width:5px; height:4px;
  background:var(--teal);
  opacity:.85;
}

#pxPlayer.is-playing .px-eq span{ animation:pxEq .7s steps(4,end) infinite; }
#pxPlayer.is-playing .px-eq span:nth-child(2){ animation-duration:.55s; animation-delay:-.2s; }
#pxPlayer.is-playing .px-eq span:nth-child(3){ animation-duration:.8s;  animation-delay:-.35s; }
#pxPlayer.is-playing .px-eq span:nth-child(4){ animation-duration:.62s; animation-delay:-.1s; }
#pxPlayer.is-playing .px-eq span:nth-child(5){ animation-duration:.74s; animation-delay:-.5s; }
@keyframes pxEq{
  0%  { height:4px; }
  25% { height:16px; }
  50% { height:8px; }
  75% { height:13px; }
  100%{ height:4px; }
}

#pxPlayer.is-disabled{ opacity:.38; pointer-events:none; }

#demoAudio{ display:none; }
#demoFallback{
  margin-top:12px;
  padding:12px;
  font-size:13px; letter-spacing:.08em;
  color:var(--px-dim);
  border:1px dashed var(--stage-edge);
  text-align:center;
}

/* 页脚 */
#archiveFoot{
  text-align:center;
  padding:36px 20px calc(56px + env(safe-area-inset-bottom));
}
.foot-line{
  font-size:15px; letter-spacing:.15em;
  color:var(--px-dim);
}
#archiveFoot .micro{ margin-top:8px; }
#archiveFoot #btnReseal{ margin-bottom:14px; }

/* 像素鼠标 #pxCursor */
body.has-px-cursor,
body.has-px-cursor *{ cursor:none !important; }
#pxCursor{
  position:fixed; left:0; top:0; z-index:100;
  width:16px; height:16px;
  pointer-events:none;
  background:var(--px-white);

  clip-path:polygon(0% 0%, 0% 78%, 22% 60%, 38% 94%, 52% 86%, 36% 52%, 66% 52%);

  filter:drop-shadow(1px 1px 0 rgba(0,0,0,.65));
  opacity:0;
}

#pxCursor.is-hand{
  background:var(--teal);
  clip-path:polygon(29% 0%, 39% 0%, 41% 2%, 41% 33%, 46% 30%, 52% 30%, 55% 33%, 60% 33%, 64% 36%, 69% 38%, 73% 42%, 76% 47%, 78% 55%, 78% 100%, 29% 100%, 29% 62%, 20% 50%, 16% 46%, 18% 40%, 24% 40%, 29% 47%);
}

#pxCursor.is-media{
  background:var(--gold);
  clip-path:polygon(20% 8%, 20% 92%, 88% 50%);
}

#pxCursor.is-zoom{
  background:var(--moon-cream);
  clip-path:polygon(38% 0%, 62% 0%, 62% 38%, 100% 38%, 100% 62%, 62% 62%, 62% 100%, 38% 100%, 38% 62%, 0% 62%, 0% 38%, 38% 38%);
}

#pxCursor.is-down{
  background:var(--gold);
}

.px-burst{
  position:fixed; z-index:100;
  width:4px; height:4px;
  pointer-events:none;
  background:var(--gold);
  animation:pxBurst .3s steps(4,end) forwards;
}
@keyframes pxBurst{
  from{ transform:translate(0,0); opacity:1; }
  to  { transform:translate(var(--bx,0px),var(--by,0px)); opacity:0; }
}

.px-trail{
  position:fixed; z-index:99;
  width:3px; height:3px;
  pointer-events:none;
  background:var(--gold);
  animation:pxTrail .42s steps(3,end) forwards;
}
@keyframes pxTrail{
  from{ transform:translate(0,0); opacity:.9; }
  to  { transform:translate(var(--bx,0px),var(--by,0px)); opacity:0; }
}

/* 响应式 */

@media (max-width:899px){
  .wanderer{ height:44px; }
  .pos-ml,.pos-mr{ display:none; }
}
@media (max-width:719px){
  :root{ --trim-h:64px; }

  .cabinet{ margin-top:7vh; zoom:.72; }
  .stage-screen{
    border-width:6px; border-radius:12px;
    margin-bottom:-18px;
  }
  .leaf-cluster,.px-cloud{ transform:scale(.7); transform-origin:top left; }
  .leaf-r{ transform:scaleX(-1) scale(.7); transform-origin:top right; }

  .sprite-moon  { height:96px; margin-bottom:8px; }
  .sprite-luohou,.sprite-yanhou{ height:68px; }
  .stage-trim{ gap:clamp(16px,5vw,36px); }
  .stage-face{ margin:0 3%; padding:10px 10px 10px; }
  .panel-row{ gap:8px; }
  .panel{ padding:6px 8px; }
  #panelStatus{ min-width:0; flex:1 1 100%; }
  .slot{
    width:26px; height:36px;
    font-size:17px;
  }
  #lockSlots{ gap:4px; }
  .panel-label,.panel-attempt{ font-size:9px; }
  #statusLine{ font-size:10px; margin-top:10px; }
  #tileRack{ gap:5px; margin-top:12px; }
  .tile{ height:42px; font-size:18px; }
  .tile::before{ left:5px; font-size:9px; }
  #btnClear{ margin-top:8px; min-height:40px; }
  .ctrl-cluster button{ width:28px; height:28px; }

  #archiveHeader{ padding:10px 12px; gap:8px; }
  .brand{ gap:8px; }
  .brand-moon{ width:29px; height:33px; }
  .brand-text h2{
    font-size:17px; line-height:1.25;
    letter-spacing:.06em;
  }
  .brand-text .micro{ margin-top:0; line-height:1.5; }
  #btnReseal{
    min-height:36px; padding:4px 12px;
    font-size:12px; letter-spacing:.15em;
  }
  .archive-grid{ gap:20px; padding:16px 14px 8px; }
  .card-head{ padding:10px 12px 8px; }
  .card-body{ padding:12px; }
  #demoZone{ padding:18px 14px 8px; }
  #demoPanel{ padding:18px 14px 14px; }

  .micro{ font-size:7px; letter-spacing:.06em; }

  .wanderer{ height:30px; z-index:6; opacity:.9; }
  .pos-tl{ top:16%; left:2px; }
  .pos-tr{ top:38%; right:2px; }
  .pos-bl{ top:62%; left:2px; bottom:auto; }
  .pos-br{ top:84%; right:2px; bottom:auto; }
}

@media (min-width:720px) and (max-height:840px){
  :root{ --trim-h:64px; }
  .cabinet{ margin-top:1vh; }
  .stage-screen{ max-width:440px; border-width:8px; margin-bottom:-20px; }
  .sprite-moon{ height:132px; margin-bottom:12px; }
  .sprite-luohou,.sprite-yanhou{ height:92px; }
  .stage-face{ padding:12px 16px 12px; }
  .slot{ width:32px; height:38px; }
  .tile{ height:44px; font-size:20px; }
  #tileRack{ margin-top:12px; }
  #statusLine{ margin-top:10px; }
}

/* prefers-reduced-motion 减动效 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .sprite{ animation:none; }
  .wanderer{ animation:none; }
  #statusLine{ animation:none; opacity:1; }
  .mist,.mist-arch{ animation:none; filter:blur(30px); }
  .layer-far,.layer-near{ animation:none; }
  .px-eq span{ animation:none !important; }

}