@charset "UTF-8";
/* ============================================================
   人像魔术馆 · PORTRAIT ODDITORIUM
   视觉基调：霓虹年画 / Neon Nianhua
   纸本 · 朱砂 · 青绿 · 硬边墨线 · 木框铜钉
   ============================================================ */

:root{
  --ink:#15161C;
  --ink-soft:#2B2C35;
  --paper:#F4EBD8;
  --paper-2:#EFE2C9;
  --paper-3:#E6D3B2;
  --cream:#FFF9EA;
  --red:#DE3B2B;
  --red-deep:#A5261A;
  --yellow:#FFC338;
  --gold:#E3A93E;
  --green:#149B7E;
  --green-deep:#0C6656;
  --blue:#3355D8;
  --pink:#F16E9C;
  --purple:#6E4BE0;
  --wood:#8A5A32;
  --wood-deep:#4E2C16;

  --serif:"Noto Serif CJK SC","Noto Serif SC","Songti SC","SimSun",serif;
  --sans:"Noto Sans CJK SC","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --mono:"Noto Sans Mono CJK SC","SFMono-Regular",Consolas,monospace;

  --border:4px solid var(--ink);
  --shadow-sm:4px 4px 0 var(--ink);
  --shadow-md:8px 8px 0 var(--ink);
  --shadow-lg:12px 12px 0 var(--ink);
  --ease:cubic-bezier(.2,.9,.25,1);
  --ease-bounce:cubic-bezier(.17,1.4,.4,1);
}

*,*::before,*::after{box-sizing:border-box;}

html{-webkit-text-size-adjust:100%;}

body{
  margin:0;
  min-height:100vh;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body.is-locked{overflow:hidden;}

button{font:inherit;color:inherit;}

::selection{background:var(--yellow);color:var(--ink);}

/* ───────────── 世界：山水幕布 ───────────── */
.world{position:fixed;inset:0;z-index:0;pointer-events:none;}

.scenery{width:100%;height:100%;display:block;}

.wash{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(244,235,216,.38),rgba(244,235,216,.08) 42%,rgba(244,235,216,.52)),
    radial-gradient(120% 90% at 50% 10%,rgba(255,250,236,.55),transparent 60%);
}

.halftone{
  position:absolute;inset:0;
  background-image:radial-gradient(rgba(21,22,28,.16) 1.1px,transparent 1.2px);
  background-size:6px 6px;
  opacity:.35;
  mix-blend-mode:multiply;
}

.scanlines{
  position:absolute;inset:0;
  background:repeating-linear-gradient(180deg,rgba(21,22,28,.045) 0 1px,transparent 1px 4px);
  opacity:.5;
}

.vignette{
  position:absolute;inset:0;
  background:radial-gradient(115% 95% at 50% 45%,transparent 52%,rgba(63,40,18,.22) 100%);
}

.mist{animation:mistFloat 26s ease-in-out infinite alternate;}
@keyframes mistFloat{
  from{transform:translateX(-24px);}
  to{transform:translateX(28px);}
}

.birds{animation:birdsFly 18s linear infinite;}
@keyframes birdsFly{
  0%{transform:translate(-30px,10px);opacity:0;}
  12%{opacity:.65;}
  88%{opacity:.65;}
  100%{transform:translate(46px,-14px);opacity:0;}
}

.pavilion,.pine{animation:sway 9s ease-in-out infinite alternate;transform-origin:center bottom;transform-box:fill-box;}
@keyframes sway{from{transform:rotate(-.4deg);}to{transform:rotate(.4deg);}}

/* ───────────── 门厅 ───────────── */
.gate{
  position:relative;z-index:2;
  min-height:100svh;
  display:grid;place-items:center;
  padding:clamp(24px,5vw,72px) 20px;
  isolation:isolate;
}

.gate.is-closing .curtain--l{transform:translateX(-102%);}
.gate.is-closing .curtain--r{transform:translateX(102%);}
.gate.is-closing .gate-core{opacity:0;transform:translateY(-14px) scale(.985);}
.gate.is-closing{transition:opacity .35s .35s ease;opacity:0;}

.gate-core{
  position:relative;z-index:2;
  text-align:center;
  max-width:760px;
  padding:clamp(28px,5vw,56px) clamp(22px,4vw,58px);
  background:
    linear-gradient(180deg,rgba(255,250,238,.92),rgba(250,242,226,.88));
  border:var(--border);
  box-shadow:var(--shadow-lg),0 0 0 2px rgba(255,255,255,.5) inset;
  transition:opacity .4s ease,transform .5s var(--ease);
}

.gate-core::before,.gate-core::after{
  content:"";position:absolute;top:12px;bottom:12px;width:10px;
  background:repeating-linear-gradient(180deg,var(--red) 0 14px,transparent 14px 26px);
  opacity:.65;
}
.gate-core::before{left:10px;}
.gate-core::after{right:10px;}

.eyebrow{
  margin:0 0 18px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

.gate-titlewrap{position:relative;margin:0 0 22px;}

.gate-title{
  margin:0;
  font-family:var(--serif);
  font-weight:900;
  font-size:clamp(46px,9.2vw,104px);
  line-height:.98;
  letter-spacing:.04em;
  color:var(--ink);
  text-shadow:
    -3px 0 0 var(--paper) , 3px 0 0 var(--paper),
    0 -3px 0 var(--paper), 0 3px 0 var(--paper),
    10px 10px 0 rgba(21,22,28,.16);
  transform:rotate(-1.6deg);
}

.gate-en{
  margin:12px 0 0;
  font-family:var(--mono);
  font-size:clamp(11px,1.3vw,14px);
  letter-spacing:.52em;
  text-indent:.52em;
  color:var(--red-deep);
  font-weight:700;
}

.gate-seal{
  position:absolute;right:-6px;top:-18px;
  display:grid;place-items:center;
  width:64px;height:64px;
  background:var(--red);
  color:var(--cream);
  font-family:var(--serif);font-weight:900;font-size:15px;line-height:1.05;
  border:3px solid var(--red-deep);
  border-radius:6px;
  transform:rotate(9deg);
  box-shadow:3px 3px 0 rgba(21,22,28,.35);
  letter-spacing:.05em;
}
.gate-seal::after{
  content:"";position:absolute;inset:4px;border:1.5px solid rgba(255,249,234,.6);border-radius:3px;
}

.gate-lead{
  margin:0 auto 30px;
  max-width:30ch;
  font-size:clamp(14px,1.5vw,16.5px);
  line-height:1.9;
  color:var(--ink-soft);
}

.enter{
  position:relative;
  display:inline-flex;flex-direction:column;align-items:center;gap:4px;
  padding:16px 44px 14px;
  background:var(--ink);
  color:var(--cream);
  border:4px solid var(--ink);
  box-shadow:6px 6px 0 var(--red);
  cursor:pointer;
  transition:transform .18s var(--ease-bounce),box-shadow .18s var(--ease);
}
.enter::before{
  content:"";position:absolute;inset:5px;border:1.5px solid rgba(255,249,234,.35);pointer-events:none;
}
.enter:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--red);}
.enter:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--red);}
.enter-main{font-family:var(--serif);font-weight:900;font-size:22px;letter-spacing:.28em;text-indent:.28em;}
.enter-sub{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;color:rgba(255,249,234,.72);}

.gate-notes{
  list-style:none;
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;
  margin:30px 0 0;padding:14px 0 0;
  border-top:1.5px dashed rgba(21,22,28,.28);
  font-size:11.5px;letter-spacing:.12em;color:var(--ink-soft);
}

.curtain{
  position:absolute;top:0;bottom:0;width:52%;
  z-index:0;
  background:
    repeating-linear-gradient(90deg,rgba(0,0,0,.20) 0 6px,rgba(0,0,0,0) 6px 26px,rgba(255,255,255,.05) 26px 40px),
    linear-gradient(90deg,var(--red-deep),var(--red) 46%,var(--red-deep));
  transition:transform .95s cubic-bezier(.65,0,.2,1);
  box-shadow:inset 0 0 120px rgba(0,0,0,.35);
}
.curtain--l{left:0;transform-origin:left center;}
.curtain--r{right:0;transform-origin:right center;}
.curtain::after{
  content:"";position:absolute;top:0;bottom:0;width:0;
}
.curtain--l::after{right:0;border-right:3px solid rgba(0,0,0,.28);}
.curtain--r::after{left:0;border-left:3px solid rgba(0,0,0,.28);}

.gate-lantern{
  position:absolute;top:12%;width:86px;height:86px;z-index:1;
  border-radius:50%;
  background:radial-gradient(circle at 40% 34%,#FF8A62,var(--red) 62%,var(--red-deep));
  border:4px solid #7E1B12;
  box-shadow:0 0 42px 10px rgba(224,59,43,.35),inset -10px -12px 20px rgba(0,0,0,.28);
  animation:lanternSwing 4.6s ease-in-out infinite alternate;
  transform-origin:top center;
}
.gate-lantern::before,.gate-lantern::after{
  content:"";position:absolute;left:50%;translate:-50% 0;
}
.gate-lantern::before{top:-26px;width:3px;height:26px;background:#5A2A12;}
.gate-lantern::after{
  bottom:-40px;width:10px;height:44px;
  background:linear-gradient(180deg,var(--yellow),var(--red));
  border-radius:0 0 6px 6px;
  box-shadow:0 0 0 2px rgba(21,22,28,.2);
}
.lantern--l{left:8%;}
.lantern--r{right:8%;}
@keyframes lanternSwing{from{transform:rotate(-7deg);}to{transform:rotate(7deg);}}

.reveal{opacity:0;animation:reveal .9s var(--ease) forwards;}
.reveal.r1{animation-delay:.15s;}
.reveal.r2{animation-delay:.3s;}
.reveal.r3{animation-delay:.48s;}
.reveal.r4{animation-delay:.62s;}
.reveal.r5{animation-delay:.78s;}
@keyframes reveal{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}

/* ───────────── 展厅 ───────────── */
.hall{
  position:relative;z-index:2;
  max-width:1220px;
  margin:0 auto;
  padding:clamp(28px,4.4vw,56px) clamp(18px,3.4vw,40px) 34px;
  animation:hallIn .8s var(--ease) both;
}
@keyframes hallIn{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}

.hall-head{
  display:flex;justify-content:space-between;align-items:flex-end;gap:28px;
  flex-wrap:wrap;
  padding-bottom:20px;
  border-bottom:3px solid var(--ink);
  margin-bottom:34px;
}
.hall-head__main h2{
  margin:6px 0 6px;
  font-family:var(--serif);font-weight:900;
  font-size:clamp(28px,4vw,46px);
  letter-spacing:.02em;line-height:1.1;
}
.kicker{
  margin:0;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.3em;
  color:var(--red-deep);
}
.hall-head__sub{margin:0;font-size:13px;color:var(--ink-soft);letter-spacing:.04em;}

.hall-head__side{display:flex;align-items:flex-end;gap:16px;}

.stamp-card{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:10px 14px;
  border:2px solid var(--ink);
  background:rgba(255,249,234,.86);
  transform:rotate(-2.2deg);
  box-shadow:var(--shadow-sm);
  text-align:center;
}
.stamp-card__top{font-family:var(--mono);font-size:9px;letter-spacing:.36em;color:var(--red-deep);}
.stamp-card__body{font-size:11.5px;line-height:1.5;letter-spacing:.08em;}

.hall-tools{display:flex;flex-direction:column;gap:8px;}
.btn{
  display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;
  padding:10px 16px;
  border:3px solid var(--ink);
  background:var(--cream);
  cursor:pointer;
  line-height:1.2;
  transition:transform .16s var(--ease-bounce),box-shadow .16s var(--ease),background .16s;
  box-shadow:var(--shadow-sm);
  letter-spacing:.06em;
}
.btn span{font-size:14px;font-weight:700;}
.btn small{font-family:var(--mono);font-size:8.5px;letter-spacing:.22em;opacity:.62;}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink);}
.btn--ghost{background:rgba(255,249,234,.92);}
.btn--icon{flex-direction:row;align-items:center;gap:8px;padding:9px 14px;}
.btn--icon span{font-size:12px;font-weight:600;}
.btn--solid{background:var(--ink);color:var(--cream);}
.btn--solid small{color:rgba(255,249,234,.62);}
.btn--line{background:transparent;}

.grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,2.6vw,36px);
}

/* 展柜 */
.booth{
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  gap:14px;
  padding:0;
  background:none;border:0;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.booth-frame{
  position:relative;
  width:100%;
  aspect-ratio:1/1.05;
  border-radius:50% 50% 44% 44%/50% 50% 40% 40%;
  background:var(--paper-2);
  box-shadow:
    0 0 0 9px var(--wood),
    0 0 0 13px var(--wood-deep),
    0 0 0 15px var(--gold),
    0 18px 0 -2px rgba(21,22,28,.16),
    0 26px 40px -18px rgba(21,22,28,.45);
  transition:transform .35s var(--ease-bounce),box-shadow .35s var(--ease),filter .3s;
  overflow:hidden;
  isolation:isolate;
}
.booth-frame::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:
    radial-gradient(circle at 26% 18%,rgba(255,255,255,.35),transparent 42%),
    linear-gradient(180deg,transparent 58%,rgba(21,22,28,.16));
  pointer-events:none;
  z-index:3;
}
.booth-frame::before{
  content:"";position:absolute;inset:0;z-index:2;
  border-radius:inherit;
  background:
    radial-gradient(circle at 50% 5.6%, #FFF9EA 0 3.2px, #4E2C16 3.4px 5px, transparent 5.2px),
    radial-gradient(circle at 11% 26%, #FFF9EA 0 3.2px, #4E2C16 3.4px 5px, transparent 5.2px),
    radial-gradient(circle at 89% 26%, #FFF9EA 0 3.2px, #4E2C16 3.4px 5px, transparent 5.2px),
    radial-gradient(circle at 11% 74%, #FFF9EA 0 3.2px, #4E2C16 3.4px 5px, transparent 5.2px),
    radial-gradient(circle at 89% 74%, #FFF9EA 0 3.2px, #4E2C16 3.4px 5px, transparent 5.2px);
  pointer-events:none;
}

.booth-moon{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 100% at 50% 8%,rgba(255,252,240,.92),rgba(244,235,216,0) 58%),
    linear-gradient(180deg,var(--acc-soft,#DCEAE4),var(--acc-wash,#F4EBD8));
}
.booth-moon::after{
  content:"";position:absolute;right:11%;top:15%;
  width:30%;aspect-ratio:1;border-radius:50%;
  background:var(--acc2,#FFC338);
  opacity:.32;
  box-shadow:0 0 0 10px rgba(255,249,234,.18);
}
.booth-moon::before{
  content:"";position:absolute;left:-10%;right:-10%;bottom:0;height:42%;
  background:
    radial-gradient(80% 120% at 50% 100%,rgba(20,155,126,.30),transparent 70%),
    repeating-linear-gradient(90deg,rgba(21,22,28,.06) 0 2px,transparent 2px 10px);
  clip-path:polygon(0 52%,14% 30%,30% 46%,46% 18%,62% 42%,78% 24%,100% 44%,100% 100%,0 100%);
}

.booth-portrait{
  position:absolute;inset:0;
  display:grid;place-items:center;
  padding:7% 6% 3%;
  z-index:1;
}
.booth-portrait svg{width:100%;height:100%;display:block;overflow:visible;}

.booth-num{
  position:absolute;top:8%;left:6%;z-index:4;
  min-width:38px;height:38px;
  display:grid;place-items:center;
  background:var(--red);color:var(--cream);
  border:3px solid var(--ink);
  font-family:var(--serif);font-weight:900;font-size:19px;
  transform:rotate(-8deg);
  box-shadow:3px 3px 0 rgba(21,22,28,.55);
}

.booth-tag{
  position:absolute;right:5%;top:13%;z-index:4;
  writing-mode:vertical-rl;
  font-family:var(--mono);font-size:9px;letter-spacing:.28em;
  color:var(--ink-soft);
  opacity:.72;
}

.booth-plaque{
  position:relative;
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:min(94%,300px);
  padding:9px 12px;
  background:var(--ink);
  color:var(--cream);
  border:3px solid var(--ink);
  box-shadow:0 0 0 3px var(--cream),0 0 0 6px var(--ink),0 8px 0 rgba(21,22,28,.15);
  transform:rotate(-.8deg);
}
.booth-plaque b{
  font-family:var(--serif);font-weight:900;font-size:19px;letter-spacing:.14em;
}
.booth-plaque i{
  font-style:normal;font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;
  opacity:.6;
}

.booth-bubble{
  position:absolute;left:50%;bottom:22%;translate:-50% 0;
  min-width:180px;max-width:86%;
  padding:9px 13px;
  background:var(--cream);
  border:2.5px solid var(--ink);
  box-shadow:4px 4px 0 rgba(21,22,28,.75);
  font-size:12px;line-height:1.45;
  text-align:left;
  opacity:0;transform:translate(-50%,10px) rotate(-1deg);
  transition:opacity .26s ease,transform .32s var(--ease-bounce);
  pointer-events:none;
  z-index:5;
}
.booth-bubble::after{
  content:"";position:absolute;left:26px;bottom:-11px;
  width:14px;height:14px;background:var(--cream);
  border-right:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);
  transform:rotate(45deg);
}

.booth:hover .booth-frame,
.booth:focus-visible .booth-frame{
  transform:translateY(-8px) rotate(-.7deg);
  box-shadow:
    0 0 0 9px var(--wood),
    0 0 0 13px var(--wood-deep),
    0 0 0 15px var(--gold),
    0 24px 0 -2px rgba(21,22,28,.14),
    0 34px 50px -18px rgba(21,22,28,.5);
}
.booth:hover .booth-bubble,
.booth:focus-visible .booth-bubble{opacity:1;transform:translate(-50%,0) rotate(-1deg);}
.booth:focus-visible{outline:none;}
.booth:focus-visible .booth-plaque{outline:3px dashed var(--red);outline-offset:6px;}

/* 人像呼吸与微动 */
.portrait{animation:breathe 5.4s ease-in-out infinite;}
@keyframes breathe{
  0%,100%{transform:translateY(0) rotate(0deg);}
  50%{transform:translateY(-1.2%) rotate(.5deg);}
}
.portrait .blink{animation:blink 5.6s infinite;transform-box:fill-box;transform-origin:center;}
@keyframes blink{
  0%,92%,100%{transform:scaleY(1);}
  94%,96%{transform:scaleY(.06);}
}
.portrait .floaty{animation:floaty 4.2s ease-in-out infinite;transform-box:fill-box;}
@keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
.portrait .wobble{animation:wobble 3.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center;}
@keyframes wobble{0%,100%{transform:rotate(-2deg);}50%{transform:rotate(2deg);}}
.portrait .spark{animation:spark 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center;}
@keyframes spark{0%,100%{opacity:.35;transform:scale(.86);}50%{opacity:1;transform:scale(1.12);}}
.portrait .sweat{animation:sweat 2.6s ease-in infinite;}
@keyframes sweat{0%{transform:translate(0,0);opacity:0;}20%{opacity:1;}100%{transform:translate(-8px,26px);opacity:0;}}
.portrait .steam{animation:steam 3.4s ease-in-out infinite;}
@keyframes steam{0%{transform:translateY(4px);opacity:.15;}50%{opacity:.55;}100%{transform:translateY(-16px);opacity:0;}}

/* 新换上的道具来点弹跳 */
.slot-pop{animation:slotPop .55s var(--ease-bounce);transform-box:fill-box;transform-origin:center;}
@keyframes slotPop{0%{transform:scale(.4) rotate(-14deg);opacity:0;}100%{transform:scale(1) rotate(0);opacity:1;}}

/* 大笑 */
.portrait.is-laughing{animation:laugh .42s ease-in-out infinite;}
@keyframes laugh{
  0%,100%{transform:rotate(-3deg) scale(1.02);}
  50%{transform:rotate(3deg) scale(1.06);}
}

/* ───────────── 内厅 ───────────── */
.stage{
  position:fixed;inset:0;z-index:50;
  display:grid;place-items:center;
  padding:clamp(12px,3vw,34px);
  animation:stageIn .35s var(--ease) both;
}
@keyframes stageIn{from{opacity:0;}to{opacity:1;}}
.stage[hidden]{display:none;}

.stage-veil{
  position:absolute;inset:0;
  background:rgba(14,14,18,.78);
  backdrop-filter:blur(5px) saturate(.8);
}

.stage-card{
  position:relative;
  width:min(1080px,100%);
  max-height:calc(100svh - 2*clamp(12px,3vw,34px));
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);
  gap:clamp(18px,2.6vw,38px);
  padding:clamp(18px,2.4vw,34px);
  background:
    radial-gradient(120% 90% at 30% 10%,#FFFBF0,rgba(255,251,240,0) 55%),
    var(--paper);
  border:4px solid var(--ink);
  box-shadow:14px 14px 0 rgba(21,22,28,.9),0 0 0 2px rgba(255,255,255,.35) inset;
  overflow:auto;
  animation:cardIn .5s var(--ease-bounce) both;
}
@keyframes cardIn{from{transform:translateY(24px) scale(.96);opacity:0;}to{transform:none;opacity:1;}}
.stage-card::before{
  content:"";position:absolute;inset:8px;border:1.5px dashed rgba(21,22,28,.24);pointer-events:none;
}

.stage-close{
  position:absolute;top:-18px;right:-18px;z-index:6;
  width:52px;height:52px;
  display:grid;place-items:center;
  background:var(--red);color:var(--cream);
  border:3px solid var(--ink);
  font-size:30px;line-height:1;
  cursor:pointer;
  box-shadow:4px 4px 0 var(--ink);
  transition:transform .15s var(--ease-bounce);
}
.stage-close:hover{transform:rotate(90deg);}

.stage-left{
  position:relative;
  display:grid;place-items:center;
  padding:14px 6px 6px;
  min-height:360px;
}
.stage-halo{
  position:absolute;inset:6% 4%;
  border-radius:50%;
  background:radial-gradient(circle at 50% 50%,var(--halo,#FFC338) 0%,rgba(255,195,56,0) 68%);
  opacity:.55;
  filter:blur(2px);
}
.stage-portrait{
  position:relative;
  width:100%;
  max-width:440px;
  aspect-ratio:1/1;
  display:grid;place-items:center;
  cursor:pointer;
}
.stage-portrait svg{width:100%;height:100%;overflow:visible;}

.stage-clickhint{
  position:absolute;bottom:-2px;left:50%;translate:-50% 0;
  margin:0;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;
  color:var(--ink-soft);opacity:.65;white-space:nowrap;
}

.stage-right{display:flex;flex-direction:column;min-width:0;padding:10px 4px 4px;}

.stage-meta{display:flex;align-items:center;gap:10px;}
.stage-num{
  display:grid;place-items:center;
  width:42px;height:42px;
  background:var(--ink);color:var(--cream);
  font-family:var(--serif);font-weight:900;font-size:20px;
  transform:rotate(-6deg);
}
.stage-collect{font-family:var(--mono);font-size:9px;letter-spacing:.28em;color:var(--red-deep);}

.stage-name{
  margin:12px 0 0;
  font-family:var(--serif);font-weight:900;
  font-size:clamp(30px,4.4vw,50px);
  line-height:1.02;letter-spacing:.02em;
}
.stage-en{
  margin:6px 0 0;
  font-family:var(--mono);font-size:11px;letter-spacing:.3em;
  color:var(--ink-soft);
}
.stage-line{
  margin:18px 0 0;
  padding:14px 16px 14px 18px;
  border-left:6px solid var(--red);
  background:rgba(222,59,43,.07);
  font-size:14.5px;line-height:1.75;
  position:relative;
}
.stage-tags{
  display:flex;flex-wrap:wrap;gap:8px;
  list-style:none;margin:16px 0 0;padding:0;
}
.stage-tags li{
  padding:4px 10px;
  border:2px solid var(--ink);
  background:var(--cream);
  font-size:11px;letter-spacing:.08em;
  box-shadow:2px 2px 0 rgba(21,22,28,.7);
}

.stage-props{margin-top:20px;}
.stage-props__title{
  margin:0 0 8px;
  font-family:var(--mono);font-size:9px;letter-spacing:.24em;color:var(--ink-soft);
}
.prop-row{display:flex;flex-wrap:wrap;gap:8px;}
.prop-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 12px;
  border:2.5px solid var(--ink);
  background:var(--cream);
  font-size:12px;letter-spacing:.06em;
  cursor:pointer;
  box-shadow:3px 3px 0 rgba(21,22,28,.8);
  transition:transform .14s var(--ease-bounce),background .14s;
}
.prop-chip b{font-weight:600;}
.prop-chip:hover{transform:translate(-1px,-1px);background:#FFF3CE;}
.prop-chip:active{transform:translate(1px,1px);}
.prop-chip .dot{width:8px;height:8px;border-radius:50%;background:var(--red);}

.stage-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;}
.stage-actions .btn{flex:1 1 44%;min-width:150px;align-items:center;text-align:center;padding:12px 14px;}
.stage-actions .btn span{font-size:15px;}

.stage-foot{
  margin:18px 0 0;
  font-size:10.5px;letter-spacing:.14em;color:var(--ink-soft);opacity:.62;
  border-top:1.5px dashed rgba(21,22,28,.22);
  padding-top:10px;
}

/* 拍立得浮层 */
.polaroid-sheet{
  position:fixed;inset:0;z-index:80;
  display:grid;place-items:center;
  background:rgba(14,14,18,.82);
  padding:20px;
  animation:stageIn .3s ease both;
}
.polaroid-sheet img{
  max-width:min(420px,86vw);max-height:72vh;
  border:4px solid var(--ink);
  box-shadow:12px 12px 0 rgba(0,0,0,.55);
  background:#FFF9EA;
  animation:cardIn .45s var(--ease-bounce) both;
}
.polaroid-bar{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap;justify-content:center;}
.polaroid-bar a,.polaroid-bar button{
  padding:10px 18px;border:3px solid var(--ink);
  background:var(--cream);color:var(--ink);
  font-size:13px;letter-spacing:.08em;cursor:pointer;
  box-shadow:4px 4px 0 var(--ink);
  text-decoration:none;
  transition:transform .15s var(--ease-bounce);
}
.polaroid-bar a:hover,.polaroid-bar button:hover{transform:translate(-2px,-2px);}
.polaroid-bar .is-primary{background:var(--ink);color:var(--cream);}

/* Emoji 粒子 */
.emoji-layer{position:fixed;inset:0;z-index:70;pointer-events:none;overflow:hidden;}
.emoji-bit{
  position:absolute;
  font-size:26px;
  will-change:transform,opacity;
  animation:emojiFly 1.5s cubic-bezier(.15,.7,.3,1) forwards;
}
@keyframes emojiFly{
  0%{transform:translate(-50%,-50%) scale(.3) rotate(0);opacity:0;}
  16%{opacity:1;}
  100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.15) rotate(var(--rot));opacity:0;}
}

.toast{
  position:fixed;left:50%;bottom:26px;translate:-50% 0;z-index:90;
  padding:11px 20px;
  background:var(--ink);color:var(--cream);
  border:3px solid var(--cream);
  box-shadow:5px 5px 0 rgba(0,0,0,.35);
  font-size:13px;letter-spacing:.08em;
  opacity:0;transform:translate(-50%,16px);
  transition:opacity .25s ease,transform .35s var(--ease-bounce);
  pointer-events:none;
  max-width:90vw;text-align:center;
}
.toast.is-on{opacity:1;transform:translate(-50%,0);}

/* ───────────── 响应式 ───────────── */
@media (max-width:980px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .stage-card{grid-template-columns:1fr;gap:14px;}
  .stage-left{min-height:300px;}
  .stage-portrait{max-width:340px;}
}

@media (max-width:640px){
  .grid{grid-template-columns:1fr;gap:26px;}
  .hall-head__side{width:100%;justify-content:space-between;}
  .booth-frame{aspect-ratio:1/1.02;}
  .gate-lantern{display:none;}
  .gate-title{font-size:clamp(40px,13vw,64px);}
  .stage-card{padding:16px;max-height:calc(100svh - 20px);}
  .stage-left{min-height:206px;}
  .stage-portrait{max-width:240px;}
  .studio-hint{display:none;}
  .studio-sliders{margin-top:10px;}
  .stage-close{top:-10px;right:-6px;width:44px;height:44px;font-size:26px;}
  .stage-actions .btn{flex:1 1 100%;}
  .stage-clickhint{display:none;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important;animation-iteration-count:1 !important;transition-duration:.001s !important;}
}
/* 隐藏属性兜底 */
[hidden]{display:none !important;}

.booth-frame{display:block;}
.booth-moon{display:block;}
.booth-portrait{display:block;}

/* 舞台来源锚点（供后续微动效使用，不影响布局） */
.stage{--from-x:50vw;--from-y:40vh;}


/* ───────────── 门厅氛围层 ───────────── */
.gate::before{
  content:"";position:absolute;top:0;left:0;right:0;height:64px;z-index:1;
  background:
    radial-gradient(circle at 50% 0, var(--red-deep) 0 16px, transparent 17px) 0 44px/40px 22px repeat-x,
    linear-gradient(180deg,var(--red-deep),var(--red));
  border-bottom:3px solid #7E1B12;
  box-shadow:0 10px 30px rgba(0,0,0,.28);
  pointer-events:none;
}
.gate::after{
  content:"";position:absolute;top:0;left:50%;translate:-50% 0;
  width:min(900px,90vw);height:70%;
  background:radial-gradient(60% 80% at 50% 0,rgba(255,244,214,.30),transparent 70%);
  z-index:0;pointer-events:none;
}

/* 入馆印章 */
.entry-stamp{
  position:fixed;left:50%;top:44%;z-index:60;
  width:168px;height:168px;border-radius:50%;
  display:grid;place-items:center;text-align:center;
  border:7px solid var(--red);
  color:var(--red);
  background:rgba(244,235,216,.82);
  box-shadow:0 0 0 4px rgba(222,59,43,.22) inset;
  font-family:var(--serif);font-weight:900;font-size:38px;line-height:1.05;
  letter-spacing:.06em;
  pointer-events:none;
  opacity:0;
  animation:stampDown 1.5s cubic-bezier(.2,.9,.3,1.15) forwards;
}
.entry-stamp small{
  display:block;margin-top:6px;
  font-family:var(--mono);font-size:10px;letter-spacing:.3em;
  font-weight:400;
}
@keyframes stampDown{
  0%{opacity:0;transform:translate(-50%,-50%) rotate(-16deg) scale(2.5);}
  28%{opacity:1;transform:translate(-50%,-50%) rotate(-14deg) scale(1);}
  72%{opacity:1;transform:translate(-50%,-50%) rotate(-14deg) scale(1);}
  100%{opacity:0;transform:translate(-50%,-50%) rotate(-14deg) scale(1.05);}
}


/* ───────────── 页脚与落款 ───────────── */
.hall-foot{
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:10px 24px;
  margin-top:clamp(26px,3.4vw,42px);
  padding-top:16px;
  border-top:2px solid var(--ink);
  font-family:var(--mono);
  font-size:10px;letter-spacing:.16em;
  color:var(--ink-soft);
}
.hall-foot__right{opacity:.58;}

.credit{
  position:relative;
  margin:20px 0 6px;
  padding-top:14px;
  text-align:center;
  font-size:11.5px;
  letter-spacing:.2em;
  color:var(--ink-soft);
}
.credit::before{
  content:"";
  position:absolute;top:0;left:50%;translate:-50% 0;
  width:38px;height:1px;
  background:var(--ink);
  opacity:.45;
}
.credit b{
  font-family:var(--serif);
  font-weight:900;
  font-size:13px;
  letter-spacing:.14em;
  color:var(--ink);
  padding:0 2px;
}

@media (max-width:640px){
  .hall-foot{font-size:9px;letter-spacing:.1em;}
  .credit{font-size:10.5px;letter-spacing:.12em;}
}

/* ───────────── 「你自己」：展位与装裱台 ───────────── */
@media (min-width:981px){
  .booth--mine{grid-column:2 / 3;}
}

.booth--empty .booth-frame{
  background:
    repeating-linear-gradient(45deg,rgba(255,249,234,.62) 0 12px,rgba(228,207,172,.42) 12px 24px);
}
.booth--empty .booth-moon{display:none;}
.booth--empty .booth-frame::after{
  background:radial-gradient(circle at 26% 18%,rgba(255,255,255,.4),transparent 46%);
}

.upload-hint{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  padding:12%;text-align:center;color:var(--ink);
}
.upload-plus{
  width:66px;height:66px;border-radius:50%;
  display:grid;place-items:center;
  border:3px dashed var(--ink);
  background:rgba(255,249,234,.66);
  font-size:34px;line-height:1;
  transition:transform .35s var(--ease-bounce),background .2s ease;
}
.booth:hover .upload-plus{transform:rotate(90deg) scale(1.06);background:var(--yellow);}
.upload-txt{font-size:13px;font-weight:700;letter-spacing:.08em;line-height:1.65;}
.upload-txt small{
  display:block;margin-top:2px;
  font-family:var(--mono);font-size:9px;font-weight:400;letter-spacing:.12em;opacity:.62;
}

.stage-portrait.is-editable{cursor:grab;}
.stage-portrait.is-editable.is-dragging{cursor:grabbing;}

.studio{margin-top:16px;}
.studio-title{
  margin:0 0 10px;
  font-family:var(--mono);font-size:9px;letter-spacing:.24em;color:var(--ink-soft);
}
.studio-modes{display:flex;flex-wrap:wrap;gap:6px;}
.studio-modes button{
  padding:6px 12px;
  border:2px solid var(--ink);
  background:var(--cream);
  font-size:11.5px;letter-spacing:.06em;
  cursor:pointer;
  box-shadow:2px 2px 0 rgba(21,22,28,.55);
  transition:transform .14s var(--ease-bounce),background .14s ease;
}
.studio-modes button:hover{transform:translate(-1px,-1px);}
.studio-modes button.is-on{background:var(--ink);color:var(--cream);box-shadow:2px 2px 0 var(--red);}

.studio-sliders{display:grid;gap:7px;margin-top:12px;}
.studio-sliders label{
  display:flex;align-items:center;gap:10px;
  font-size:11px;letter-spacing:.1em;color:var(--ink-soft);
}
.studio-sliders label span{width:34px;flex:none;}
.studio-sliders input[type="range"]{
  flex:1;min-width:0;height:20px;accent-color:#DE3B2B;cursor:pointer;
}
.studio-sliders input[type="range"]:disabled{opacity:.32;cursor:not-allowed;}

.studio-tools{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px;}
.studio-tools .btn{
  flex:1 1 auto;
  flex-direction:row;align-items:center;justify-content:center;
  padding:8px 12px;
  font-size:12px;
  letter-spacing:.04em;
}
.studio-hint{
  margin:10px 0 0;
  font-size:10px;line-height:1.7;letter-spacing:.05em;
  color:var(--ink-soft);opacity:.7;
}

@media (max-width:640px){
  .studio-modes button{padding:5px 10px;font-size:11px;}
  .studio-tools .btn{flex:1 1 46%;}
}