/* 曜室入口網｜劇場大廳（2026-10-21）
   跟排盤站同一套紙（style.css 的顏色、紙紋、剪紙邊、紙片按鈕、十四主星），這裡只放大廳自己的版面與動畫。
   招牌只有一個：開場布幕拉開、「曜室」蓋章落下、主星從地板冒出來；其他地方安靜、字一定清楚。
   動畫只動 transform／opacity；系統開了「減少動態」就全部直接停在最後的樣子。 */
body.lobby { background: var(--paper) var(--art-grain); background-size: 160px; }

/* ═══════════ 舞台（夜藍）═══════════ */
.hall-stage {
  position: relative; isolation: isolate; overflow: hidden; text-align: center; color: var(--cream);
  padding: 92px 20px 0; min-height: 500px;
  background: radial-gradient(70% 55% at 50% 42%, #33557c 0%, var(--night) 58%, var(--night-deep) 100%);
}
.hall-valance { position: absolute; z-index: 6; top: 0; left: 0; right: 0; height: 70px; background: var(--art-valance) repeat-x left top / 216px 70px; }
/* 兩片布幕：開場往兩邊收，最後留一點掛在兩側 */
.hall-curtain {
  position: absolute; z-index: 5; top: 0; bottom: 0; width: 56%;
  background: var(--wine) var(--art-curtain) repeat-x left top / 120px 100%;
  animation: curtain-l 1.5s cubic-bezier(.62, 0, .22, 1) .2s both;
}
.hall-curtain-l { left: 0; }
.hall-curtain-r { right: 0; animation-name: curtain-r; }
@keyframes curtain-l { from { transform: translateX(0); } to { transform: translateX(-90%); } }
@keyframes curtain-r { from { transform: translateX(0); } to { transform: translateX(90%); } }
/* 聚光燈：從上面打下來，開幕時亮起 */
.hall-spot {
  position: absolute; z-index: 0; inset: 0; pointer-events: none;
  background: radial-gradient(38% 46% at 50% 36%, rgba(255, 233, 180, .28), rgba(255, 233, 180, .08) 60%, transparent 76%);
  animation: spot-on 1.2s ease 1s both;
}
@keyframes spot-on { from { opacity: 0; } to { opacity: 1; } }

.hall-head { position: relative; z-index: 2; }
/* 「曜室」：一枚燙金的手寫大字，布幕拉開後蓋章落下 */
.hall-brand {
  font-size: clamp(76px, 24vw, 112px); line-height: 1.05; letter-spacing: .16em; text-indent: .16em; color: #fff6df;
  text-shadow: 0 2px 0 #b9862c, 0 4px 0 rgba(23, 39, 66, .55), 0 0 28px rgba(255, 214, 140, .35);
  animation: brand-stamp .7s cubic-bezier(.3, 1.5, .5, 1) 1.15s both;
}
@keyframes brand-stamp { from { opacity: 0; transform: scale(1.6) rotate(-4deg); } to { opacity: 1; transform: none; } }
.hall-en {
  margin-top: 6px; font-size: 14px; font-weight: 700; letter-spacing: .5em; text-indent: .5em; color: var(--gold-soft);
  animation: rise .6s ease 1.5s both;
}
.hall-tag {
  margin-top: 16px; font-size: 19px; line-height: 1.7; font-weight: 600; color: #fdf4e3;
  text-shadow: 0 1px 2px rgba(10, 20, 40, .5);
  animation: rise .6s ease 1.65s both;
}
.hall-tag b { color: var(--gold-soft); letter-spacing: .06em; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* 十四主星：從舞台地板一個一個冒出來，之後輕輕上下晃 */
.hall-cast {
  position: relative; z-index: 2; display: flex; justify-content: center; align-items: flex-end; gap: 2px;
  height: 92px; margin: 26px -20px 0; overflow: hidden;
}
.hall-cast .cast {
  width: 64px; height: 64px; margin-bottom: -6px;
  animation: pop-up .55s cubic-bezier(.3, 1.6, .5, 1) both, bob 2.6s ease-in-out infinite alternate;
  animation-delay: calc(1.75s + var(--i, 0) * 70ms), calc(2.6s + var(--i, 0) * 170ms);
}
@keyframes pop-up { from { transform: translateY(110%); } to { transform: none; } }
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(-7px); } }
/* 手機只站七位（中間那排），桌機全部站出來 */
.hall-cast .cast:nth-child(-n+3), .hall-cast .cast:nth-child(n+11) { display: none; }
.hall-floor { position: relative; z-index: 3; display: block; height: 56px; margin: 0 -20px; background: var(--art-floor) repeat-x left top / 216px 56px; }

/* ═══════════ 大廳（紙）═══════════ */
.hall { width: 100%; max-width: 560px; margin: 0 auto; padding: 30px 16px 40px; }
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1); }
.reveal.in { opacity: 1; transform: none; }

/* 今日上演：一張貼在牆上的大海報 */
.bill { margin: 0 0 46px; }
.bill-lift { --tint: 70, 50, 30; position: relative; }
.bill-poster {
  --pp: #fffaf0; position: relative; display: block; padding: 42px 22px 38px; color: var(--ink); text-decoration: none;
  background-color: var(--pp); background-image: var(--art-grain); background-size: 160px;
  -webkit-mask-box-image: var(--edge-card) 32 fill / 16px round; mask-border: var(--edge-card) 32 fill / 16px round;
  transform: rotate(-1.2deg); transform-origin: 50% 0;
  transition: transform .45s cubic-bezier(.5, 0, .3, 1), opacity .45s ease;
}
.bill-poster::before { /* 海報內框：朱紅細框，像劇院海報 */
  content: ""; position: absolute; inset: 10px; border: 2px solid rgba(200, 85, 61, .55); outline: 1px solid rgba(200, 85, 61, .3); outline-offset: 3px; pointer-events: none;
}
/* 膠帶貼在海報外面（海報本身有剪紙遮罩，貼在裡面會被切掉）：一半在海報上、一半貼到牆上 */
.bill-tape { position: absolute; z-index: 3; top: -12px; left: 50%; width: 118px; height: 26px; margin-left: -59px; background: rgba(217, 164, 65, .82); transform: rotate(-4deg); box-shadow: 0 1px 1px rgba(80, 50, 20, .15); }
/* 劇院海報的燈泡：上下各一排，兩組輪流亮 */
.bill-lights { position: absolute; left: 18px; right: 18px; height: 12px; pointer-events: none;
  background: radial-gradient(circle, #fff3c4 0 2.5px, #e2b04a 3px 4.5px, transparent 5px) 0 0 / 24px 12px repeat-x; }
.bill-lights::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle, #fffbe8 0 3px, rgba(255, 228, 150, .7) 3.5px 6px, transparent 6.5px) 12px 0 / 24px 12px repeat-x;
  animation: bulbs 1.1s steps(1) infinite; }
.bill-lights-top { top: 18px; }
.bill-lights-bottom { bottom: 14px; }
@keyframes bulbs { 50% { opacity: 0; } }
.bill-kicker {
  display: inline-block; padding: 2px 12px 1px; color: #b4432f; border: 2.5px solid currentColor; border-radius: 5px; outline: 1px solid currentColor; outline-offset: 2px;
  font-size: 20px; letter-spacing: .2em; text-indent: .2em; transform: rotate(-3deg); background: rgba(255, 250, 240, .6);
}
.bill-title { display: block; margin: 10px 0 4px; font-size: clamp(52px, 15vw, 64px); line-height: 1.15; color: var(--night); letter-spacing: .06em; }
/* 說明字與皇冠左右分開排：角色不准壓到字 */
.bill-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bill-sub { display: block; font-size: 17px; line-height: 1.75; font-weight: 600; color: var(--ink-soft); }
.bill-free {
  position: absolute; top: 44px; right: 20px; width: 64px; height: 64px; display: grid; place-items: center; transform: rotate(10deg);
  border-radius: 50%; border: 2.5px solid #b4432f; outline: 1px solid #b4432f; outline-offset: 2px; color: #b4432f;
  font-size: 18px; font-weight: 800; letter-spacing: .1em; text-indent: .1em; background: rgba(255, 250, 240, .7);
}
.bill-star { flex: 0 0 auto; }
.bill-star .cast { width: 92px; height: 92px; animation: bob 2.2s ease-in-out infinite alternate; }
.bill-go { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; min-height: 56px; padding: 10px 16px 14px; font-size: 19px; font-weight: 800; letter-spacing: .12em; }
.bill-go::after { content: "→"; font-weight: 800; }
.bill-poster:hover { transform: rotate(-.4deg) translateY(-3px); }
/* 「曜室」落下時迸出的小金星 */
.hall-sparks { position: absolute; left: 50%; top: 4px; width: 0; height: 0; }
.hall-sparks i { position: absolute; width: 10px; height: 10px; margin: -5px; opacity: 0; background: #ffe39a;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: spark 1s ease-out 1.5s both; }
.hall-sparks i:nth-child(1) { --x: -150px; --y: 6px; } .hall-sparks i:nth-child(2) { --x: 150px; --y: 10px; }
.hall-sparks i:nth-child(3) { --x: -110px; --y: 96px; } .hall-sparks i:nth-child(4) { --x: 118px; --y: 92px; }
.hall-sparks i:nth-child(5) { --x: -40px; --y: -22px; } .hall-sparks i:nth-child(6) { --x: 52px; --y: -18px; }
@keyframes spark { 0% { opacity: 0; transform: translate(0, 50px) scale(.3); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1.3) rotate(90deg); } }
/* 點了：海報從右下角被撕起來、往上飄走 */
.bill-poster.tearing { transform: rotate(-9deg) translate(-12px, -46px) scale(.94); opacity: 0; }

/* 售票口：一塊木頭招牌＋一排戲票 */
.box-office { margin: 0 0 46px; }
/* 售票口：條紋遮雨棚＋木頭招牌 */
.bo-head { margin: 0 0 22px; }
.bo-awning { display: block; height: 34px; margin: 0 -6px;
  background: repeating-linear-gradient(90deg, #c8553d 0 26px, #fff1d6 26px 52px);
  -webkit-mask: radial-gradient(13px 10px at 13px 24px, #000 98%, transparent) 0 0 / 26px 34px repeat-x, linear-gradient(#000 0 24px, transparent 24px);
  mask: radial-gradient(13px 10px at 13px 24px, #000 98%, transparent) 0 0 / 26px 34px repeat-x, linear-gradient(#000 0 24px, transparent 24px);
  filter: drop-shadow(0 3px 0 rgba(120, 60, 40, .25)); }
.bo-sign {
  position: relative; margin: -2px auto 0; padding: 14px 18px 12px; text-align: center; color: #fff6df;
  background: #6e4a30 var(--art-grain); background-size: 160px; box-shadow: inset 0 -5px 0 #4f331f, 0 6px 10px rgba(70, 40, 20, .2);
  -webkit-mask-box-image: var(--edge-card) 32 fill / 12px round; mask-border: var(--edge-card) 32 fill / 12px round;
}
.bo-sign h2 { font-size: 40px; line-height: 1.2; letter-spacing: .3em; text-indent: .3em; color: #ffe3a3; text-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
.bo-sign p { margin-top: 2px; font-size: 16px; font-weight: 600; color: #fdf1d8; }

.tickets { list-style: none; display: grid; gap: 16px; }
.tix-li { opacity: 0; transform: translateY(26px) rotate(var(--tilt, 0deg)); transition: opacity .55s ease, transform .55s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i, 0) * 90ms); }
.tix-li.in { opacity: 1; transform: rotate(var(--tilt, 0deg)); }
.tix-li:nth-child(odd) { --tilt: -.6deg; }
.tix-li:nth-child(even) { --tilt: .5deg; }
/* 一張戲票：左邊是彩色票根（價格），右邊是票面（名稱與說明），中間一排打孔線 */
.tix {
  --tc: var(--verm); position: relative; display: grid; grid-template-columns: 98px minmax(0, 1fr); min-height: 128px;
  color: var(--ink); text-decoration: none; filter: drop-shadow(0 2px 0 rgba(var(--tint), .22)) drop-shadow(0 8px 10px rgba(var(--tint), .16));
  transition: transform .2s ease;
}
.tix:hover { transform: translateY(-3px) rotate(-.4deg); }
/* 點了：票根沿著打孔線撕下來掉下去 */
.tix-stub { transition: transform .38s cubic-bezier(.5, 0, .7, .4), opacity .38s ease; transform-origin: 100% 0; }
.tix.tearing .tix-stub { transform: translate(-8px, 30px) rotate(-14deg); opacity: 0; }
.tix:active { transform: translateY(1px); }
.tix-stub, .tix-face {
  background-image: var(--art-grain); background-size: 160px;
  -webkit-mask-box-image: var(--edge-card) 32 fill / 12px round; mask-border: var(--edge-card) 32 fill / 12px round;
}
.tix-stub {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 12px 6px;
  background-color: var(--tc); color: #fffaf0; border-right: 3px dashed rgba(255, 250, 240, .75); text-align: center;
}
.tix-stub small { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-indent: .12em; opacity: .95; }
.tix-stub b { font-size: 34px; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; text-shadow: 0 1px 0 rgba(0, 0, 0, .18); }
.tix-face { position: relative; padding: 14px 16px; background-color: #fffaf0; }
.tix-name { display: block; padding-right: 58px; font-family: var(--hand); font-size: 27px; line-height: 1.25; color: var(--pine-deep); }
/* 說明只在空格處換行（不把「感情」拆成兩行） */
.tix-pitch { display: block; margin-top: 6px; font-size: 15.5px; line-height: 1.65; font-weight: 500; color: var(--ink-soft); word-break: keep-all; overflow-wrap: anywhere; }
.tix-note { display: inline-block; word-break: keep-all; margin-top: 6px; padding: 1px 8px; font-size: 13px; font-weight: 700; color: #8f4f3e; background: #fbead8; border-radius: 3px; }
.tix-go { display: block; margin-top: 8px; font-size: 15px; font-weight: 800; color: var(--verm-deep); letter-spacing: .06em; }
.tix-go::after { content: " →"; }
.tix-star { position: absolute; right: 6px; top: 10px; }
.tix-star .cast { width: 56px; height: 56px; }
.tix:hover .tix-star .cast { animation: hop .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes hop { 40% { transform: translateY(-10px) rotate(-6deg); } }
/* 劃線價：票根最上面劃掉的價格 */
.tix-stub .tix-was { font-size: 13px; letter-spacing: .04em; text-indent: 0; }
.tix-stub b.long { font-size: 27px; }
.tix-was s { text-decoration-thickness: 1.5px; }
/* 還沒開賣的票：整張變灰、不能點，價格與說明照樣看得清楚 */
.tix.locked { cursor: default; }
.tix.locked .tix-stub, .tix.locked .tix-star, .tix.locked .tix-face > :not(.drop-tag) { filter: grayscale(1); }   /* 降價標籤不變灰 */
.tix.locked:hover, .tix.locked:active { transform: none; }
.tix.locked:hover .tix-star .cast { animation: none; }
.tix.locked .tix-star { opacity: .6; }
.tix.locked .tix-go { color: var(--ink-soft); }
.tix.locked .tix-go::after { content: none; }

.bo-cta { margin-top: 22px; text-align: center; }
.bo-all { display: flex; align-items: center; justify-content: center; min-height: 58px; padding: 12px 16px 16px; font-size: 19px; font-weight: 800; letter-spacing: .14em; text-decoration: none; }
.bo-note { margin-top: 10px; font-size: 15px; font-weight: 600; color: var(--muted); }

/* 牆上兩塊招牌：用圖釘釘著，點一下會晃 */
.notices { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 30px; }
.board {
  --pp: #f3e2bd; position: relative; display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 22px 10px 16px; min-height: 186px; color: var(--ink); text-decoration: none;
  background-color: var(--pp); background-image: var(--art-grain); background-size: 160px;
  -webkit-mask-box-image: var(--edge-card) 32 fill / 14px round; mask-border: var(--edge-card) 32 fill / 14px round;
  filter: drop-shadow(0 2px 0 rgba(var(--tint), .24)) drop-shadow(0 8px 10px rgba(var(--tint), .16));
  transform-origin: 50% 8px;
}
.board-ig { --pp: #dfeaf2; }
.board.reveal.in:nth-child(1) { transform: rotate(-1.5deg); }
.board.reveal.in:nth-child(2) { transform: rotate(1.4deg); }
.board:hover, .board:focus-visible { animation: swing .8s ease; }
@keyframes swing { 25% { rotate: 3deg; } 60% { rotate: -2deg; } 85% { rotate: 1deg; } }
.board-pin { position: absolute; top: 8px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--verm); box-shadow: inset -2px -2px 0 var(--verm-deep), 0 2px 2px rgba(0, 0, 0, .2); }
.board-star .cast { width: 64px; height: 64px; }
.board-title { margin-top: 2px; font-size: 28px; line-height: 1.2; color: var(--pine-deep); letter-spacing: .1em; text-indent: .1em; }
.board-sub { margin-top: 6px; font-size: 14.5px; line-height: 1.6; font-weight: 600; color: var(--ink-soft); }

.hall-foot { padding: 10px 0 24px; text-align: center; font-size: 13px; letter-spacing: .3em; color: var(--muted); }

/* ═══════════ 寬螢幕 ═══════════ */
@media (min-width: 720px) {
  .hall-stage { padding-top: 110px; min-height: 560px; }
  .hall-cast { height: 110px; }
  .hall-cast .cast { width: 78px; height: 78px; }
  .hall-cast .cast:nth-child(-n+3), .hall-cast .cast:nth-child(n+11) { display: inline-block; }
  .hall { max-width: 760px; padding-top: 44px; }
  .bill { max-width: 560px; margin-left: auto; margin-right: auto; }
  .tickets { grid-template-columns: 1fr 1fr; }
  .tickets .tix-li:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 8px); }   /* 單數張：最後一張置中 */
  .bo-cta { max-width: 420px; margin-left: auto; margin-right: auto; }
  .notices { max-width: 560px; margin-left: auto; margin-right: auto; }
}

/* ═══════════ 訂購頁（/order）═══════════ */
.ord-top {
  position: relative; overflow: hidden; padding: 82px 16px 26px; text-align: center; color: var(--cream);
  background: radial-gradient(70% 90% at 50% 30%, #33557c, var(--night) 60%, var(--night-deep));
}
.ord-top .hall-valance { height: 62px; background-size: 192px 62px; }
.ord-back { position: absolute; z-index: 7; left: 12px; top: 70px; display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; color: #fdf1d8; font-size: 15px; font-weight: 700; text-decoration: none; }
.ord-title { font-size: clamp(40px, 12vw, 52px); line-height: 1.2; letter-spacing: .2em; text-indent: .2em; color: #fff6df; text-shadow: 0 2px 0 #b9862c, 0 0 22px rgba(255, 214, 140, .3); animation: brand-stamp .6s cubic-bezier(.3, 1.5, .5, 1) .15s both; }
.ord-sub { margin-top: 6px; font-size: 17px; font-weight: 600; color: #fdf4e3; }
.ord-main { padding-top: 26px; padding-bottom: 40px; }
.ord-pick { --pp: #fff1d2; margin: 0 0 18px; padding: 12px 16px; font-size: 16px; font-weight: 700; color: var(--pine-deep); background: var(--pp) var(--art-grain); background-size: 160px;
  -webkit-mask-box-image: var(--edge-card) 32 fill / 12px round; mask-border: var(--edge-card) 32 fill / 12px round; }
.ord-pick small { display: block; font-size: 13.5px; font-weight: 600; color: var(--muted); }
.ord-steps { display: flex; gap: 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.ord-steps li { flex: 1; padding: 6px 4px 8px; text-align: center; font-size: 13px; font-weight: 700; color: var(--muted); background: #f1e3c4 var(--art-grain); background-size: 160px;
  -webkit-mask-box-image: var(--edge-card) 32 fill / 10px round; mask-border: var(--edge-card) 32 fill / 10px round; }
.ord-steps li.now { background-color: var(--verm); color: #fffaf0; }
.ord-go { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 56px; margin-top: 16px; padding: 10px 16px 14px; font-size: 18px; font-weight: 800; letter-spacing: .12em; }
.ord-help { margin-top: 18px; font-size: 14.5px; line-height: 1.8; color: var(--muted); }
.ord-help a { font-weight: 700; }

/* ═══════════ 減少動態：全部直接停在最後的樣子 ═══════════ */
@media (prefers-reduced-motion: reduce) {
  .hall-curtain { display: none; }
  .hall-spot, .hall-brand, .hall-en, .hall-tag, .hall-cast .cast, .bill-star .cast, .ord-title, .bill-lights::after { animation: none; }
  .hall-sparks { display: none; }
  .reveal, .tix-li { opacity: 1; transform: none; transition: none; }
  .tix-li { transform: rotate(var(--tilt, 0deg)); }
  .board:hover, .board:focus-visible, .tix:hover .tix-star .cast { animation: none; }
  .bill-poster { transition: none; }
}
@supports not ((-webkit-mask-box-image: none) or (mask-border: none)) {
  .bill-poster, .bo-sign, .tix-stub, .tix-face, .board, .ord-pick, .ord-steps li { border-radius: 10px; }
}
/* 不能拆開的詞（三題試讀、直接私訊）：手機窄螢幕不會只剩一個字掉到下一行 */
body.lobby .nb { white-space: nowrap; }
/* 404 頁：回首頁、直接訂購兩顆按鈕置中 */
.lost { display: grid; justify-items: center; gap: 14px; padding-top: 30px; text-align: center; }
.lost .paper-btn { width: min(100%, 300px); }
.lost-title { font-size: clamp(34px, 10vw, 46px); }
.ord-steps li { white-space: nowrap; }