/* ---------- 字體（全部自帶，內地可開） ---------- */
@font-face{font-family:"Pinyon";src:url(fonts/pinyon.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Cormorant";src:url(fonts/cormorant.woff2) format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Alice";src:url(fonts/alice.woff2) format("woff2");font-display:swap}
@font-face{font-family:"SongHK";src:url(fonts/songhk.woff2) format("woff2");font-display:swap}

:root{
  --paper:#f4eadb;
  --paper-2:#efe3d1;
  --diamond:rgba(207,200,192,.26);
  --gold:#a18154;
  --gold-l:#d8b878;
  --gold-d:#7d6038;
  --ink:#2a2523;
  --ink-2:#615856;
  --heart:#7f2830;
  --wine:#7a1f2b;
  --wine-d:#561420;
  --serif-zh:"SongHK","Noto Serif TC","Songti TC","PMingLiU",serif;
  --serif-en:"Cormorant","Times New Roman",serif;
  --alice:"Alice","Cormorant",serif;
  --script:"Pinyon","Snell Roundhand",cursive;
  --W:min(90vw,600px);
  --H:calc(var(--W) * .7043);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--serif-zh);color:var(--ink-2);background:var(--paper);
  -webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden;
  background-image:
    linear-gradient(45deg,var(--diamond) 25%,transparent 25%,transparent 75%,var(--diamond) 75%),
    linear-gradient(45deg,var(--diamond) 25%,transparent 25%,transparent 75%,var(--diamond) 75%);
  background-size:84px 84px;background-position:0 0,42px 42px;
}
body.is-locked{overflow:hidden;height:100vh}
img{display:block;max-width:100%;height:auto}
button{font:inherit;background:none;border:0;cursor:pointer;color:inherit}
a{color:inherit}

/* ================= 開場 ================= */
#intro{
  position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(22px,5vh,44px);
  background:radial-gradient(120% 90% at 50% 40%,#3b1a1c 0%,#1f0d0f 70%,#140809 100%);
  transition:opacity .9s ease, visibility .9s;
  padding:24px;
}
#intro.gone{opacity:0;visibility:hidden;pointer-events:none}
#intro::after{content:"";position:absolute;inset:0;background:var(--paper);opacity:0;pointer-events:none;transition:opacity .7s ease .25s}
#intro.zoom::after{opacity:1}
.intro-glow{position:absolute;inset:0;background:radial-gradient(40% 30% at 50% 45%,rgba(216,184,120,.16),transparent 70%);pointer-events:none}
.intro-kicker{font-family:var(--serif-en);letter-spacing:.42em;font-size:11px;color:rgba(216,184,120,.7);text-indent:.42em}

.env-stage{position:relative;width:var(--W);height:var(--H);perspective:1400px}
.env{
  position:absolute;inset:0;border-radius:4px;overflow:visible;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  transition:transform .55s cubic-bezier(.6,.05,.4,1);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.65),0 8px 18px rgba(0,0,0,.35);
}
/* 酒紅格紋 */
.env-front,.back-inner,.pocket,.flap{
  background-color:var(--wine);
  background-image:
    repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 7px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 7px),
    repeating-linear-gradient(0deg,rgba(0,0,0,.06) 0 3px,transparent 3px 22px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.06) 0 3px,transparent 3px 22px),
    radial-gradient(120% 100% at 50% 30%,#86262f 0%,#6d1a25 100%);
}
.env-front{display:flex;flex-direction:column;align-items:center;padding-top:calc(var(--H)*.15);text-align:center}
.env-frame{position:absolute;inset:3.4%;border:1px solid var(--gold-l);pointer-events:none}
.env-frame::after{content:"";position:absolute;inset:5px;border:1px solid rgba(216,184,120,.75)}
.env-frame .d{position:absolute;width:9px;height:9px;background:var(--gold-l);transform:rotate(45deg)}
.env-frame .tl{left:-5px;top:-5px}.env-frame .tr{right:-5px;top:-5px}.env-frame .bl{left:-5px;bottom:-5px}.env-frame .br{right:-5px;bottom:-5px}
.gold-text,.env-eyebrow,.env-script{
  background:linear-gradient(100deg,#b8894a 0%,#f0d79b 38%,#c99a55 60%,#f3dea6 82%,#a87c40 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.env-eyebrow{font-family:var(--serif-en);font-weight:500;letter-spacing:.32em;font-size:calc(var(--W)*.026);text-indent:.32em}
.env-script{font-family:var(--script);font-size:calc(var(--W)*.088);line-height:1.25;margin-top:calc(var(--H)*.04);padding:0 .2em}
.env-rule{display:flex;align-items:center;gap:8px;margin-top:calc(var(--H)*.03)}
.env-rule span{width:calc(var(--W)*.1);height:1px;background:var(--gold-l)}
.env-rule i{width:7px;height:7px;background:var(--gold-l);transform:rotate(45deg)}
.env-label{
  position:relative;margin-top:calc(var(--H)*.085);width:42%;padding:calc(var(--H)*.04) 6px;
  border:1px dashed rgba(244,234,219,.0);
}
.lab-corner{position:absolute;width:14px;height:14px;border-color:var(--gold-l);border-style:solid;border-width:0}
.lab-corner.c1{left:0;top:0;border-left-width:1px;border-top-width:1px}
.lab-corner.c2{right:0;top:0;border-right-width:1px;border-top-width:1px}
.lab-corner.c3{left:0;bottom:0;border-left-width:1px;border-bottom-width:1px}
.lab-corner.c4{right:0;bottom:0;border-right-width:1px;border-bottom-width:1px}
.lab-to{font-size:calc(var(--W)*.022);color:rgba(240,215,155,.8);letter-spacing:.3em}
.lab-name{font-size:calc(var(--W)*.038);color:#f6e7c6;letter-spacing:.14em;margin-top:4px;word-break:break-all}
.lab-en{font-family:var(--serif-en);font-size:calc(var(--W)*.019);letter-spacing:.24em;color:rgba(240,215,155,.7);margin-top:4px}

/* 背面 */
.env-back{transform:rotateY(180deg)}
.back-inner{position:absolute;inset:0;border-radius:4px;filter:brightness(.72)}
.card-clip{position:absolute;left:7%;right:7%;bottom:6%;top:calc(var(--W) * -1.35);overflow:hidden;z-index:3;pointer-events:none}
.card-peek{
  position:absolute;left:0;right:0;top:calc(var(--W)*1.35 + var(--H)*.07);
  transition:transform 1.25s cubic-bezier(.3,.7,.2,1);
  box-shadow:0 -6px 20px rgba(0,0,0,.25);
}
.card-peek img{width:100%;border-radius:3px}
.pocket{
  position:absolute;inset:0;z-index:4;border-radius:0 0 4px 4px;
  clip-path:polygon(0 0,50% 54%,100% 0,100% 100%,0 100%);
  filter:brightness(1.02);
}
.pocket::after{ /* 金線 */
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top right,transparent calc(50% - .8px),rgba(216,184,120,.6) 50%,transparent calc(50% + .8px)) left top/50% 54% no-repeat,
             linear-gradient(to top left,transparent calc(50% - .8px),rgba(216,184,120,.6) 50%,transparent calc(50% + .8px)) right top/50% 54% no-repeat;
}
.flap{
  position:absolute;left:0;right:0;top:0;height:62%;z-index:5;
  clip-path:polygon(0 0,100% 0,50% 100%);
  transform-origin:50% 0;transition:transform .8s cubic-bezier(.5,0,.3,1);
  filter:brightness(1.1);
}
.flap.open{transform:rotateX(180deg)}
.flap.behind{z-index:2}
.seal{
  position:absolute;left:50%;top:60%;width:calc(var(--W)*.27);height:calc(var(--W)*.27);z-index:6;
  transform:translate(-50%,-50%);border-radius:50%;filter:drop-shadow(0 5px 8px rgba(0,0,0,.4));
}
.seal-half{
  position:absolute;inset:0;border-radius:50%;
  background:url(assets/logo-sq.webp) center/86% no-repeat,radial-gradient(circle at 40% 34%,#fffaf2 0%,#f7efe2 62%,#ece0cc 100%);
  box-shadow:inset 0 0 0 2px #a18154,inset 0 0 0 5px #f7efe2,inset 0 0 0 6px rgba(161,129,84,.75);
  transition:transform .6s ease,opacity .6s ease;
}
.seal-half.l{clip-path:polygon(0 0,52% 0,46% 40%,55% 62%,48% 100%,0 100%)}
.seal-half.r{clip-path:polygon(52% 0,100% 0,100% 100%,48% 100%,55% 62%,46% 40%)}
.seal.broken .seal-half.l{transform:translate(-30%,40%) rotate(-28deg);opacity:0}
.seal.broken .seal-half.r{transform:translate(30%,46%) rotate(24deg);opacity:0}

/* 動作 */
#intro.flip .env-front{transform:rotateY(-180deg)}
#intro.flip .env-back{transform:rotateY(0)}
#intro.rise .card-peek{transform:translateY(calc(var(--W) * -.62))}
#intro.zoom .env-stage{transition:transform 1s cubic-bezier(.6,0,.3,1),opacity 1s;transform:translateY(12vh) scale(1.6);opacity:0}

.open-btn{display:flex;flex-direction:column;align-items:center;gap:6px;color:#f0d79b;animation:pulse 2.4s ease-in-out infinite;transition:opacity .4s}
.open-zh{font-size:15px;letter-spacing:.3em;text-indent:.3em}
.open-en{font-family:var(--serif-en);font-size:11px;letter-spacing:.4em;text-indent:.4em;opacity:.7}
#intro.flip .open-btn,#intro.flip .skip-btn,#intro.flip .intro-kicker{opacity:0!important;animation:none;pointer-events:none}
.skip-btn{position:absolute;bottom:max(18px,env(safe-area-inset-bottom));right:20px;font-size:12px;color:rgba(240,215,155,.5);letter-spacing:.15em;transition:opacity .4s}
@keyframes pulse{0%,100%{opacity:.6;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}

/* 飄落撲克牌花色／玫瑰花瓣 */
#confetti{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
#confetti i{position:absolute;top:-40px;font-style:normal;will-change:transform;animation:fall linear forwards}
#confetti i.petal{width:12px;height:16px;border-radius:70% 0 70% 0;background:linear-gradient(135deg,#d24a5e,#8f2134)}
@keyframes fall{
  0%{transform:translate3d(0,0,0) rotate(0)}
  100%{transform:translate3d(var(--dx),110vh,0) rotate(var(--rot))}
}

/* ================= 主頁：跌落兔子洞 ================= */
#main{position:relative}
#hole{position:relative;height:calc(var(--vh,100vh) * 13)}
.stage{position:sticky;top:0;height:var(--vh,100vh);overflow:hidden;contain:paint}
.bg{position:absolute;inset:0;background:var(--paper)}
.bg::after{ /* 洞壁暗角 */
  content:"";position:absolute;inset:0;opacity:var(--dark,0);
  background:radial-gradient(60% 55% at 50% 50%,#3d2018 0%,#26120f 55%,#140908 100%);
}
.walls{position:absolute;inset:0;opacity:var(--dark,0);pointer-events:none}
.wall{position:absolute;top:-300px;bottom:-300px;width:16vw;max-width:150px;
  background-image:
    repeating-linear-gradient(180deg,transparent 0 190px,rgba(161,129,84,.55) 190px 193px,rgba(40,20,14,.9) 193px 204px,transparent 204px 300px),
    repeating-linear-gradient(180deg,rgba(255,220,170,.035) 0 2px,transparent 2px 13px);
  will-change:transform}
.wall.l{left:0;-webkit-mask-image:linear-gradient(90deg,#000 30%,transparent);mask-image:linear-gradient(90deg,#000 30%,transparent)}
.wall.r{right:0;-webkit-mask-image:linear-gradient(270deg,#000 30%,transparent);mask-image:linear-gradient(270deg,#000 30%,transparent)}
.specks{position:absolute;inset:0;opacity:var(--dark,0)}
.specks i{position:absolute;top:0;width:1.5px;border-radius:2px;background:linear-gradient(rgba(240,215,155,0),rgba(240,215,155,.55));will-change:transform}
.objs{position:absolute;inset:0;opacity:var(--objs,0)}
.objs img{position:absolute;top:0;left:0;max-width:none;will-change:transform;filter:drop-shadow(0 8px 10px rgba(0,0,0,.35))}

/* 入口 */
.entry{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:24px 0 30px}
.cover-card{position:relative;width:min(86vw,calc((var(--vh,100vh) - 150px) * .711),460px);border-radius:6px;overflow:hidden;
  box-shadow:0 30px 50px -28px rgba(80,50,30,.55),0 4px 14px rgba(80,50,30,.12);transform-origin:46% 50%;will-change:transform}
.cover-card img{width:100%}
.iris{position:absolute;left:46%;top:50%;width:40%;aspect-ratio:1;margin:-20% 0 0 -20%;border-radius:50%;
  background:radial-gradient(circle,#0c0605 0%,#1d0e0b 48%,#3a1d16 66%,rgba(58,29,22,0) 72%);transform:scale(0);will-change:transform}
.scroll-cue{display:flex;flex-direction:column;align-items:center;gap:10px;font-size:13px;letter-spacing:.24em;text-indent:.24em;color:var(--gold-d)}
.scroll-cue i{width:1px;height:36px;background:linear-gradient(var(--gold),transparent);animation:drop 1.8s ease-in-out infinite;transform-origin:top}
@keyframes drop{0%{transform:scaleY(0)}60%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

.fall-title{position:absolute;left:0;right:0;top:50%;text-align:center;opacity:0;color:#f0d79b;pointer-events:none}
.ft-script{font-family:var(--script);font-size:clamp(34px,10vw,56px);line-height:1.2}
.ft-zh{font-size:14px;letter-spacing:.6em;text-indent:.6em;margin-top:6px;color:rgba(240,215,155,.75)}

.rabbit-fall{position:absolute;z-index:2;left:50%;top:0;width:min(36vw,190px);margin-left:calc(min(36vw,190px) / -2);opacity:0;will-change:transform;
  filter:drop-shadow(0 14px 16px rgba(0,0,0,.4))}

/* 啤牌 */
.deck{position:absolute;inset:0;pointer-events:none;z-index:3}
.pcard{position:absolute;left:50%;top:50%;width:360px;height:504px;margin:-252px 0 0 -180px;opacity:0;will-change:transform,opacity;pointer-events:none}
.pcard.live{pointer-events:auto}
.flip{position:absolute;inset:0;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;will-change:transform}
.face{position:absolute;inset:0;border-radius:16px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;
  box-shadow:0 30px 50px -18px rgba(0,0,0,.6),0 6px 14px rgba(0,0,0,.3)}
.face.back{transform:rotateY(180deg);background:var(--paper)}
.face.back img{width:100%;height:100%;object-fit:cover}
.face.front{background:var(--paper);text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:34px 30px;
  background-image:
    linear-gradient(45deg,var(--diamond) 25%,transparent 25%,transparent 75%,var(--diamond) 75%),
    linear-gradient(45deg,var(--diamond) 25%,transparent 25%,transparent 75%,var(--diamond) 75%);
  background-size:60px 60px;background-position:0 0,30px 30px}
.face.front::before,.paper::before{content:"";position:absolute;inset:10px;border:2px solid var(--gold);border-radius:9px;pointer-events:none}
.face.front::after,.paper::after{content:"";position:absolute;inset:15px;border:1px solid var(--gold);border-radius:6px;opacity:.85;pointer-events:none}
.cc{position:absolute;display:flex;flex-direction:column;align-items:center;line-height:1;font-family:var(--alice);color:var(--gold)}
.cc b{font-weight:400;font-size:17px}
.cc em{font-style:normal;font-size:11px;color:var(--heart);margin-top:3px}
.cc.tl{left:24px;top:24px}
.cc.br{right:24px;bottom:24px;transform:rotate(180deg)}

.paper{position:relative;width:100%;background:var(--paper);border-radius:12px;padding:56px 26px 40px;text-align:center;
  box-shadow:0 26px 46px -30px rgba(80,50,30,.55),0 2px 10px rgba(80,50,30,.08);display:flex;flex-direction:column;align-items:center}

/* 牌面內容 */
.sprig{width:62%;margin-bottom:24px}
.zh-title{font-weight:400;font-size:19px;letter-spacing:.2em;text-indent:.2em;color:var(--ink);line-height:1.9}
.en-caps{font-family:var(--serif-en);font-weight:500;font-size:10.5px;letter-spacing:.3em;text-indent:.3em;color:var(--ink-2);margin-top:8px;line-height:1.8}
.en-caps.gold{color:var(--gold)}
.names{width:92%;margin:26px 0 12px}
.divider{width:46%;margin:24px 0 22px}
.divider.key{width:50%;margin:26px 0 16px}
.dateline{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:100%;font-family:var(--alice);color:var(--ink-2)}
.dateline span{font-size:15px;letter-spacing:.06em;padding:8px 0}
.dateline span:first-child{border-right:1px solid var(--gold);padding-right:12px;text-align:right}
.dateline span:last-child{border-left:1px solid var(--gold);padding-left:12px;text-align:left}
.dateline b{font-weight:400;font-size:52px;padding:0 20px;color:var(--ink)}
.year{font-family:var(--alice);font-size:15px;letter-spacing:.5em;text-indent:.5em;color:var(--gold);margin-top:14px}
.zh-date{margin-top:18px;font-size:14px;letter-spacing:.26em;text-indent:.26em;color:var(--ink-2);line-height:2}
.sec-title{font-weight:400;font-size:20px;letter-spacing:.4em;text-indent:.4em;color:var(--ink);margin:6px 0 4px}
.timeline{list-style:none;width:100%;margin-top:24px;display:flex;flex-direction:column;gap:20px}
.timeline li{display:grid;grid-template-columns:26px 48px 1fr 1fr;align-items:center;gap:6px;text-align:center}
.tl-ico{width:22px;height:22px;justify-self:center;display:flex;align-items:center;justify-content:center}
.tl-ico img{max-height:22px;width:auto}
.tl-ico svg{width:22px;height:22px;color:var(--gold)}
.tl-time{font-family:var(--alice);font-size:14px;color:var(--gold);letter-spacing:.04em}
.tl-ev b{display:block;font-weight:400;font-size:13.5px;letter-spacing:.2em;color:var(--ink)}
.tl-ev small,.tl-pl small{display:block;font-family:var(--serif-en);font-size:8.5px;letter-spacing:.24em;color:var(--ink-2);margin-top:3px}
.tl-pl b{display:block;font-weight:400;font-size:12.5px;letter-spacing:.2em;color:var(--ink)}
.tl-pl small{letter-spacing:.04em;font-size:10.5px;font-style:italic}
.tl-pl.en-only small{font-size:11px;margin-top:0;line-height:1.35}
.venue-zh{font-size:15px;letter-spacing:.3em;text-indent:.3em;color:var(--ink);margin-top:2px}
.venue-zh.big{font-size:17px;margin-top:14px}
.script-line{font-family:var(--script);font-size:25px;color:var(--heart);line-height:1.3}
.face .rabbit{width:46%;margin:6px 0 2px;animation:hop 2.6s ease-in-out infinite}
@keyframes hop{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-5px) rotate(-1.5deg)}}
.countdown{display:grid;grid-template-columns:repeat(4,1fr);width:100%;margin-top:12px;border-top:1px solid rgba(161,129,84,.45);border-bottom:1px solid rgba(161,129,84,.45)}
.countdown div{padding:10px 0 8px;display:flex;flex-direction:column;align-items:center;gap:3px}
.countdown div+div{border-left:1px solid rgba(161,129,84,.3)}
.countdown b{font-family:var(--alice);font-weight:400;font-size:27px;color:var(--ink);font-variant-numeric:tabular-nums}
.countdown span{font-size:11px;letter-spacing:.3em;text-indent:.3em;color:var(--gold-d)}
.count-note{margin-top:12px;font-size:12.5px;letter-spacing:.12em;color:var(--ink-2)}
.btn-line{display:inline-flex;align-items:center;justify-content:center;margin-top:16px;min-height:44px;padding:10px 20px;background:rgba(244,234,219,.8);
  border:1px solid var(--gold);border-radius:999px;font-size:12.5px;letter-spacing:.2em;color:var(--gold-d);text-decoration:none;transition:background .25s,color .25s}
.btn-line:hover,.btn-line:focus-visible{background:var(--gold);color:var(--paper)}
:focus-visible{outline:2px solid var(--heart);outline-offset:3px}
.venue-door{width:62px;color:var(--gold);margin-top:18px}
.door-svg{width:100%;height:auto}
.addr{margin-top:12px;font-family:var(--serif-en);font-size:14px;letter-spacing:.06em;color:var(--ink-2)}
.addr.sub{margin-top:4px;font-family:var(--serif-zh);font-size:12.5px;letter-spacing:.14em}
.map-btns{display:flex;gap:12px;justify-content:center;margin-top:4px}
.map-btns .btn-line{min-width:118px;padding:10px 14px}
.map-hint{margin-top:12px;font-size:11.5px;letter-spacing:.14em;color:rgba(97,88,86,.8)}

/* 落地 */
.floor{position:absolute;z-index:1;left:-10%;right:-10%;bottom:0;height:34%;perspective:500px;opacity:0;transform:translateY(100%);will-change:transform}
.floor i{position:absolute;inset:0 0 -40%;transform:rotateX(62deg);transform-origin:50% 0;
  background-color:#efe3d1;
  background-image:linear-gradient(45deg,#2a2523 25%,transparent 25%,transparent 75%,#2a2523 75%),linear-gradient(45deg,#2a2523 25%,transparent 25%,transparent 75%,#2a2523 75%);
  background-size:80px 80px;background-position:0 0,40px 40px;opacity:.9;
  -webkit-mask-image:linear-gradient(transparent,#000 35%);mask-image:linear-gradient(transparent,#000 35%)}

.land-title{position:absolute;z-index:3;left:0;right:0;top:22%;text-align:center;opacity:0;pointer-events:none}
.land-zh{font-size:20px;letter-spacing:.4em;text-indent:.4em;color:var(--ink);margin-top:8px}
.land-sub{font-size:12.5px;letter-spacing:.24em;text-indent:.24em;color:var(--gold-d);margin-top:14px}
html.rm .land-title{display:none}
/* 深度計 */
.gauge{position:absolute;right:max(8px,env(safe-area-inset-right));top:18%;bottom:18%;width:26px;display:flex;flex-direction:column;align-items:center;gap:8px;
  opacity:var(--gauge,0);color:rgba(240,215,155,.7);font-size:10px;letter-spacing:.1em;writing-mode:horizontal-tb;pointer-events:none}
.g-line{position:relative;flex:1;width:1px;background:linear-gradient(rgba(216,184,120,.7),rgba(216,184,120,.25))}
.g-line b{position:absolute;left:50%;top:0;margin:-7px 0 0 -6px;width:12px;text-align:center;font-weight:400;font-size:11px;line-height:14px;color:#c4465a;will-change:transform}

/* 洞底大廳 */
.hall{position:relative;display:flex;flex-direction:column;align-items:center;padding:28px 18px 0;overflow:hidden}
.hall .paper{max-width:420px;z-index:1}
.rsvp-text{margin-top:16px;font-size:13.5px;letter-spacing:.14em;line-height:2;color:var(--ink-2)}
.drinkme{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;margin-top:20px;text-decoration:none;transition:transform .3s}
.drinkme:hover{transform:translateY(-3px) rotate(-2deg)}
.bottle{width:92px;height:auto;filter:drop-shadow(0 10px 12px rgba(120,30,40,.25));animation:sway 3.4s ease-in-out infinite;transform-origin:50% 90%}
.bheart{fill:#f6dfe3;font-size:18px}
@keyframes sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
.tag{position:relative;margin-top:-10px;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:10px 22px 9px;background:#fbf5ea;border:1px solid #3a2a28;border-radius:3px;box-shadow:0 6px 12px -6px rgba(0,0,0,.25);transform:rotate(-4deg)}
.tag::before{content:"";position:absolute;left:-8px;top:50%;width:8px;height:1px;background:#3a2a28}
.tag-zh{font-size:15px;letter-spacing:.3em;text-indent:.3em;color:var(--ink)}
.tag-en{font-family:var(--serif-en);font-size:9.5px;letter-spacing:.28em;color:var(--heart)}
.glass-table{width:72%;margin-top:18px;height:14px;position:relative}
.glass-table::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;border-radius:3px;background:linear-gradient(90deg,rgba(161,129,84,.25),rgba(255,255,255,.7),rgba(161,129,84,.25));border:1px solid rgba(161,129,84,.6)}
.glass-table i{position:absolute;left:50%;top:6px;width:1px;height:8px;background:var(--gold)}
.checker{width:140%;height:120px;margin-top:-30px;perspective:420px;position:relative}
.checker::before{content:"";position:absolute;inset:0;transform:rotateX(58deg);transform-origin:50% 0;
  background-image:linear-gradient(45deg,rgba(42,37,35,.85) 25%,transparent 25%,transparent 75%,rgba(42,37,35,.85) 75%),linear-gradient(45deg,rgba(42,37,35,.85) 25%,transparent 25%,transparent 75%,rgba(42,37,35,.85) 75%);
  background-size:70px 70px;background-position:0 0,35px 35px;
  -webkit-mask-image:linear-gradient(#000,transparent);mask-image:linear-gradient(#000,transparent)}

/* 頁尾 */
.foot{display:flex;flex-direction:column;align-items:center;padding:10px 0 calc(30px + env(safe-area-inset-bottom));text-align:center}
.cheshire{width:120px;color:var(--gold);opacity:0;transition:opacity 2.4s ease .3s}
.foot.on .cheshire{opacity:.9}
.foot-script{font-family:var(--script);font-size:28px;color:var(--ink);margin-top:10px}
.replay{margin-top:22px;font-size:12px;letter-spacing:.24em;color:var(--gold-d);border-bottom:1px solid rgba(161,129,84,.5);padding:6px 2px}

.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}

@media (min-width:900px){
  body{background-size:110px 110px;background-position:0 0,55px 55px}
  .paper{padding:64px 40px 48px}
}

/* 減少動態：靜態排列 */
html.rm #hole{height:auto}
html.rm .stage{position:relative;height:auto;overflow:visible;contain:none;padding:24px 0 10px}
html.rm .bg,html.rm .walls,html.rm .specks,html.rm .objs,html.rm .fall-title,html.rm .rabbit-fall,html.rm .floor,html.rm .gauge,html.rm .iris,html.rm .scroll-cue{display:none}
html.rm .entry{position:relative;padding:10px 0 30px}
html.rm .deck{position:relative;display:flex;flex-direction:column;align-items:center;gap:28px;pointer-events:auto}
html.rm .pcard{position:relative;left:auto;top:auto;margin:0;opacity:1;pointer-events:auto;width:calc(360px * var(--s,1));height:calc(504px * var(--s,1))}
html.rm .pcard .flip{width:360px;height:504px;transform:scale(var(--s,1));transform-origin:0 0}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
}
@media (max-width:480px){.gauge{width:14px;right:4px}.gauge span{display:none}}

/* Drink Me 按鈕 */
button.drinkme{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ================= 回覆表格 ================= */
.rsvp-modal{position:fixed;inset:0;z-index:80}
.rsvp-modal[hidden]{display:none}
.rm-backdrop{position:absolute;inset:0;background:rgba(32,16,14,.62);animation:fadeIn .35s ease}
.rm-wrap{position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;justify-content:center;align-items:flex-start;
  padding:max(18px,env(safe-area-inset-top)) 14px calc(24px + env(safe-area-inset-bottom));pointer-events:none}
.rm-card{position:relative;pointer-events:auto;width:100%;max-width:440px;margin:auto 0;background:var(--paper);border-radius:16px;
  padding:40px 28px 30px;text-align:center;display:flex;flex-direction:column;align-items:center;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6);animation:cardIn .5s cubic-bezier(.2,.8,.2,1)}
.rm-card[hidden]{display:none}
.rm-card::before{content:"";position:absolute;inset:10px;border:2px solid var(--gold);border-radius:9px;pointer-events:none}
.rm-card::after{content:"";position:absolute;inset:15px;border:1px solid var(--gold);border-radius:6px;opacity:.85;pointer-events:none}
@keyframes fadeIn{from{opacity:0}}
@keyframes cardIn{from{opacity:0;transform:translateY(30px) scale(.96)}}
.rm-x{position:absolute;right:20px;top:18px;z-index:2;width:40px;height:40px;font-size:24px;line-height:40px;color:var(--gold-d)}
.rm-logo{width:46%;margin:0 0 6px}
.rm-sub{font-size:12px;letter-spacing:.14em;color:var(--ink-2);margin:6px 0 4px;line-height:1.8}
.fld{position:relative;z-index:1;width:100%;border:0;margin-top:16px;text-align:left;display:block}
.fl{display:flex;align-items:baseline;gap:8px;font-size:13.5px;letter-spacing:.14em;color:var(--ink);margin-bottom:7px;padding:0}
.fl i{font-style:normal;font-family:var(--serif-en);font-size:9.5px;letter-spacing:.24em;color:var(--gold)}
.fld input,.fld select,.fld textarea{width:100%;font:inherit;font-size:16px;color:var(--ink);background:#fbf6ee;border:1px solid rgba(161,129,84,.55);
  border-radius:8px;padding:11px 12px;outline:none;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
.fld select{background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.fld textarea{resize:vertical;min-height:80px}
.fld input::placeholder,.fld textarea::placeholder{color:rgba(97,88,86,.55)}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--heart);box-shadow:0 0 0 3px rgba(127,40,48,.12)}
.fld.bad input,.fld.bad .seg span{border-color:#b3394a}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.seg label{position:relative}
.seg input{position:absolute;opacity:0;width:1px;height:1px}
.seg span{display:flex;align-items:center;justify-content:center;min-height:46px;border:1px solid rgba(161,129,84,.55);border-radius:8px;background:#fbf6ee;
  font-size:14px;letter-spacing:.2em;text-indent:.2em;color:var(--ink-2);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.seg input:checked+span{background:var(--heart);border-color:var(--heart);color:#fbf1e4}
.seg input:focus-visible+span{outline:2px solid var(--heart);outline-offset:2px}
.fld.off{display:none}
.rm-err{position:relative;z-index:1;min-height:20px;margin-top:12px;font-size:12.5px;letter-spacing:.08em;color:#a32b3c}
.btn-solid{position:relative;z-index:1;margin-top:6px;min-height:48px;width:100%;border-radius:999px;background:var(--heart);color:#fbf1e4;
  font-size:14px;letter-spacing:.24em;transition:background .2s,opacity .2s}
.btn-solid:hover{background:#6a1f27}
.btn-solid[disabled]{opacity:.6;cursor:wait}
.done-msg{margin-top:14px;font-size:14px;letter-spacing:.12em;line-height:2;color:var(--ink-2)}
.done-sum{position:relative;z-index:1;width:100%;margin-top:16px;border-top:1px solid rgba(161,129,84,.4);text-align:left}
.done-sum div{display:grid;grid-template-columns:96px 1fr;gap:10px;padding:9px 2px;border-bottom:1px solid rgba(161,129,84,.25);font-size:13px;line-height:1.6}
.done-sum dt{color:var(--gold-d);letter-spacing:.12em}
.done-sum dd{color:var(--ink);word-break:break-word}
.rm-done .btn-line{position:relative;z-index:1;margin-top:22px}
.rm-done .replay{position:relative;z-index:1;margin-top:14px}
body.modal-open{overflow:hidden}

/* ================= 後台 ================= */
.admin{min-height:100vh;padding:28px 16px 40px;max-width:1100px;margin:0 auto;color:var(--ink)}
.admin h1{font-weight:400;font-size:22px;letter-spacing:.3em}
.admin .a-sub{font-size:12px;color:var(--ink-2);margin-top:6px;letter-spacing:.1em}
.a-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:22px 0}
.a-stats div{background:var(--paper);border:1px solid rgba(161,129,84,.45);border-radius:10px;padding:14px}
.a-stats b{display:block;font-family:var(--alice);font-weight:400;font-size:28px;font-variant-numeric:tabular-nums}
.a-stats span{font-size:12px;letter-spacing:.14em;color:var(--gold-d)}
.a-tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.a-tools .btn-line{margin-top:0}
.a-table-wrap{overflow-x:auto;margin-top:16px;background:var(--paper);border:1px solid rgba(161,129,84,.45);border-radius:10px}
.a-table{width:100%;border-collapse:collapse;font-size:13px;min-width:860px}
.a-table th,.a-table td{padding:10px 12px;border-bottom:1px solid rgba(161,129,84,.22);text-align:left;vertical-align:top}
.a-table th{font-weight:400;color:var(--gold-d);letter-spacing:.12em;white-space:nowrap;background:#efe3d1}
.a-table td.num{font-variant-numeric:tabular-nums;text-align:right}
.a-empty{padding:28px;text-align:center;color:var(--ink-2)}
.a-gate{max-width:360px;margin:12vh auto 0;text-align:center}
.a-gate input{width:100%;font:inherit;font-size:16px;padding:11px 12px;border:1px solid rgba(161,129,84,.55);border-radius:8px;background:#fbf6ee;margin-top:16px}
.a-gate .btn-solid{margin-top:12px}

/* ---------- 背景音樂掣（右上角） ---------- */
.music-btn{position:fixed;z-index:70;top:max(14px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));
  width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(251,244,232,.82);border:1px solid rgba(161,129,84,.55);color:var(--gold-d);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 2px 10px rgba(60,30,20,.12);
  -webkit-tap-highlight-color:transparent;transition:opacity .3s,transform .2s}
.music-btn:active{transform:scale(.94)}
.music-btn:focus-visible{outline:2px solid var(--gold-l);outline-offset:2px}
.music-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.music-btn .slash{display:none}
.music-btn.is-muted .wave{display:none}
.music-btn.is-muted .slash{display:inline}
.music-btn:not(.is-muted) .wave{animation:bgmWave 2.4s ease-in-out infinite}
@keyframes bgmWave{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.music-btn .wave{animation:none!important}}

/* 卡牌正／背面由 JS 切換，避免瀏覽器 3D 背面失效時兩面重疊 */
.flip .face.back{visibility:hidden}
.flip.show-back .face.back{visibility:visible}
.flip.show-back .face.front{visibility:hidden}