:root{
  --curtain:#7C1913;
  --curtain-deep:#4E0E0A;
  --vermilion:#A3241C;
  --gold:#D8B45C;
  --gold-deep:#B8912F;
  --paper:#F3E7CE;
  --ink:#241B14;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{height:100%;}
body.under-construction-page{min-height:100%;}
body.under-construction-page{
  font-family:'Noto Sans SC', sans-serif;
  color:var(--paper);
  overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 0%, #5C120D 0%, var(--curtain-deep) 55%, #300805 100%);
  display:flex; align-items:center; justify-content:center;
  min-height:100vh;
  position:relative;
}

/* faint texture */
body.under-construction-page::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:0.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

.stage-wrap{
  position:relative; width:100%; max-width:920px; padding:0 24px;
  display:flex; flex-direction:column; align-items:center;
  z-index:1;
}

/* ---------- top curtain valance ---------- */
.valance{
  position:fixed; top:0; left:0; right:0; height:150px; z-index:5; pointer-events:none;
}
.valance svg{ width:100%; height:100%; display:block; }

/* ---------- side curtains ---------- */
.side-curtain{
  position:fixed; top:0; bottom:0; width:min(16vw,190px); z-index:4; pointer-events:none;
}
.side-curtain.left{ left:0; }
.side-curtain.right{ right:0; transform:scaleX(-1); }
.side-curtain svg{ width:100%; height:100%; }

/* ---------- lanterns hanging from valance ---------- */
.lantern{
  position:fixed; top:118px; z-index:6; width:52px;
  filter:drop-shadow(0 6px 8px rgba(0,0,0,0.4));
}
.lantern.l1{ left:8%; }
.lantern.l2{ right:8%; }

/* ---------- stage floor glow ---------- */
.footlight{
  position:absolute; bottom:-40px; left:50%; transform:translateX(-50%);
  width:640px; height:160px;
  background:radial-gradient(ellipse at center, rgba(216,180,92,0.35), transparent 70%);
  z-index:0;
}

/* ---------- content card ---------- */
.content{
  position:relative; z-index:2; text-align:center;
  margin-top:60px;
  display:flex; flex-direction:column; align-items:center;
}

.puppet-duo{ display:flex; align-items:flex-end; justify-content:center; gap:14px; margin-bottom:8px; }
.puppet-duo svg{ filter:drop-shadow(0 10px 16px rgba(0,0,0,0.45)); }
.puppet-a{ width:150px; }
.puppet-b{ width:168px; }

.under-construction-page .eyebrow{
  letter-spacing:0.4em; font-size:11px; text-transform:uppercase; color:var(--gold);
  margin-top:6px; font-weight:600;
}

.brush-title{
  font-family:'Ma Shan Zheng', cursive; font-size:clamp(38px,7vw,58px);
  color:var(--gold); line-height:1.1; margin-top:10px;
  text-shadow:0 2px 12px rgba(0,0,0,0.4);
}

.under-construction-page h1{
  font-family:'Noto Serif SC', serif; font-weight:900; font-size:clamp(20px,3.2vw,28px);
  color:#fff; margin-top:14px; letter-spacing:0.02em;
}
.under-construction-page h1 .fade{ display:block; font-family:'Cormorant Garamond',serif; font-weight:500; font-style:italic;
  font-size:15px; color:var(--gold); margin-top:8px; letter-spacing:0.06em;
}

.rule{
  width:90px; height:1px; background:var(--gold-deep); margin:22px auto; position:relative;
}
.rule::before,.rule::after{ content:"❖"; position:absolute; top:-8px; color:var(--gold); font-size:12px; }
.rule::before{ left:-20px; } .rule::after{ right:-20px; }

.msg{
  max-width:460px; font-size:13.5px; line-height:1.85; color:#EFDFC0;
}
.msg b{ color:var(--gold); font-weight:600; }

.progress{
  margin-top:26px; width:260px; height:6px; border-radius:4px;
  background:rgba(255,255,255,0.12); overflow:hidden; position:relative;
  border:1px solid rgba(216,180,92,0.4);
}
.progress .bar{
  position:absolute; left:-40%; top:0; bottom:0; width:40%; border-radius:4px;
  background:linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-deep));
  animation:loop 2.2s ease-in-out infinite;
}
@keyframes loop{
  0%{ left:-40%; }
  50%{ left:60%; }
  100%{ left:-40%; }
}

.footer-note{
  margin-top:26px; font-size:10.5px; letter-spacing:0.18em; text-transform:uppercase;
  color:rgba(239,223,192,0.6);
}

@media (max-width:640px){
  .under-construction-page .side-curtain{ width:60px; }
  .under-construction-page .lantern{ display:none; }
  .under-construction-page .puppet-a{ width:132px; }
  .under-construction-page .puppet-b{ width:148px; }
}