:root { color-scheme: dark; font-family: Inter, "Microsoft YaHei", sans-serif; background: #080605; color: #fff5d3; } * { box-sizing: border-box; } body { margin: 0; min-width: 320px; } button { border: 0; font: inherit; cursor: pointer; } .is-hidden { display: none !important; }
.cinema { min-height: 100svh; position: relative; overflow: hidden; padding: 66px clamp(22px, 8vw, 130px) 19svh; background: radial-gradient(ellipse at 50% 24%, #42271d 0, #1a100e 47%, #070504 83%); isolation: isolate; }.cinema::before { content: ""; position: absolute; inset: 0; z-index: -2; opacity: .2; background: repeating-linear-gradient(90deg, transparent 0 9%, rgba(255,255,255,.04) 9.1% 9.3%); }.projection-beam { position: absolute; z-index: -1; top: -8%; left: 50%; width: 78vw; height: 82%; transform: translateX(-50%); clip-path: polygon(47% 0,53% 0,95% 100%,5% 100%); background: linear-gradient(rgba(255,246,198,.17),rgba(233,218,148,.025)); filter: blur(4px); animation: projector 7s ease-in-out infinite; }
.curtain { position: absolute; z-index: 5; top: 0; bottom: 0; width: clamp(34px,7vw,110px); background: repeating-linear-gradient(90deg,#30070b 0 15px,#6d1520 16px 31px,#260609 32px 45px); box-shadow: inset 0 0 30px #120204; pointer-events: none; }.curtain-left { left: 0; clip-path: polygon(0 0,100% 0,72% 100%,0 100%); }.curtain-right { right: 0; clip-path: polygon(0 0,100% 0,100% 100%,28% 100%); }.show-notice { position: absolute; top: 13px; left: 50%; z-index: 6; margin: 0; padding: 8px 16px; color: #472414; background: #e1c06f; box-shadow: 3px 4px 0 #491613; transform: translateX(-50%) rotate(-.5deg); font-size: 11px; font-weight: 900; letter-spacing: .08em; white-space: nowrap; }.show-notice span { color: #9b2525; margin-right: 8px; }.exit-sign { position: absolute; z-index: 7; top: 18%; right: 5vw; padding: 5px 8px; border: 1px solid #a4f1b0; color: #d5ffdb; background: #176330; box-shadow: 0 0 18px rgba(78,255,125,.35); font-size: 8px; }
.screen-frame { position: relative; z-index: 2; width: min(1180px,100%); height: min(72svh,780px); min-height: 540px; margin: 0 auto; overflow: auto; padding: clamp(22px,4vw,48px); border: 10px solid #392017; outline: 3px solid #795035; background: linear-gradient(145deg,#f3e7bd 0,#e6d29a 100%); color: #272319; box-shadow: 0 24px 90px #000, inset 0 0 80px rgba(102,70,27,.14); }.screen-frame::after { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .11; background-image: radial-gradient(#5a4426 .6px,transparent .6px); background-size: 5px 5px; }.screen-header { display: flex; justify-content: space-between; align-items: end; gap: 30px; padding-bottom: 20px; border-bottom: 1px solid #a89056; }.eyebrow { margin: 0 0 8px; color: #983a2e; font-size: 10px; font-weight: 900; letter-spacing: .18em; }.screen-header h1 { margin: 0; color: #282319; font-family: Georgia,"Songti SC",serif; font-size: clamp(31px,5vw,64px); letter-spacing: -.06em; }.screen-header h1 em { color: #9a382b; font-style: normal; }.screen-header > p { margin: 0; color: #7c673b; font-size: 11px; letter-spacing: .1em; }
.archive-nav { display: flex; gap: 8px; margin: 22px 0; overflow-x: auto; }.archive-nav button { flex: 0 0 auto; padding: 8px 13px; border: 1px solid #b29a60; color: #624e28; background: transparent; font-size: 11px; font-weight: 800; }.archive-nav button.active { color: #fff5d6; background: #78342d; border-color: #78342d; }.museum-layout { display: grid; grid-template-columns: minmax(0,1fr) 230px; gap: 26px; }.archive-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; }.archive-card { display: grid; gap: 7px; min-height: 155px; padding: 18px; color: #2f2a1e; background: rgba(255,250,229,.72); border: 1px solid #c7b47d; text-align: left; animation: card-in .55s both; animation-delay: var(--delay); transition: transform .2s ease,box-shadow .2s ease; }.archive-card:hover { transform: translateY(-4px) rotate(-.25deg); box-shadow: 6px 8px 0 rgba(102,62,32,.14); }.archive-card span,.archive-detail > span { color: #9b4436; font-size: 9px; font-weight: 900; letter-spacing: .12em; }.archive-card strong { font-family: Georgia,"Songti SC",serif; font-size: 20px; }.archive-card p { margin: 0; color: #665e46; font-size: 12px; line-height: 1.55; }.archive-card em { margin-top: auto; color: #917b4c; font-size: 9px; font-style: normal; }.program { position: sticky; top: 0; align-self: start; padding: 18px; color: #f7e9c2; background: #293423; border: 1px solid #596448; box-shadow: 7px 9px 0 rgba(78,40,25,.18); }.program > span { color: #dfbd54; font-size: 9px; font-weight: 900; letter-spacing: .16em; }.program > strong { display: block; margin-top: 10px; font-family: Georgia,"Songti SC",serif; font-size: 31px; }.program p,.program blockquote { color: #d3d9bc; font-size: 11px; line-height: 1.65; }.program blockquote { margin: 18px 0; padding-left: 11px; border-left: 2px solid #d5b94b; }.program button { width: 100%; padding: 10px; color: #2e321f; background: #e1c255; font-weight: 900; }.program small { display: block; min-height: 27px; margin-top: 8px; color: #c8b76f; line-height: 1.4; }.ticket-mark { margin-top: 12px; padding-top: 10px; border-top: 1px dashed #8c916c; color: #929b78; font-family: monospace; font-size: 9px; line-height: 1.5; }
.archive-detail { padding: 22px; background: rgba(255,251,231,.86); border: 2px dashed #9f854b; }.archive-detail h2 { margin: 7px 0 18px; font-family: Georgia,"Songti SC",serif; font-size: clamp(28px,4vw,44px); }.archive-detail img { display: block; width: 100%; max-height: 430px; margin-bottom: 18px; object-fit: contain; background: #ded1a8; }.detail-body { color: #403a2a; font-family: Georgia,"Songti SC",serif; font-size: 16px; line-height: 2; white-space: pre-line; }.detail-close { float: right; padding: 7px 10px; color: #fff3cf; background: #75352d; font-size: 10px; font-weight: 800; }
.audience { position: absolute; z-index: 4; left: 50%; display: flex; justify-content: center; align-items: end; gap: clamp(5px,1.5vw,20px); width: min(88vw,1300px); transform: translateX(-50%); pointer-events: none; }.audience-back { bottom: 6svh; opacity: .78; transform: translateX(-50%) scale(.8); }.audience-front { bottom: -6svh; }.seat { display: block; position: relative; width: clamp(72px,12vw,170px); height: clamp(80px,14svh,150px); border: 2px solid #160608; border-radius: 30px 30px 8px 8px; background: linear-gradient(90deg,#29070b,#6a1720 45%,#32090e); box-shadow: inset 0 0 18px #23060a,0 10px 22px #000; }.seat.person::before { content: ""; position: absolute; top: -25%; left: 50%; width: 42%; aspect-ratio: 1; border-radius: 50%; background: #080706; box-shadow: 0 19px 0 14px #080706; transform: translateX(-50%); }.seat.phone::after { content: ""; position: absolute; top: -18%; left: 65%; width: 12px; height: 21px; background: #67d4c0; box-shadow: 0 0 12px #67d4c0; }.audience-note { position: fixed; z-index: 7; right: 8vw; bottom: 15svh; width: min(270px,72vw); padding: 11px 15px; color: #3b2b19; background: #ead797; box-shadow: 5px 6px 0 rgba(39,10,10,.7); transform: rotate(1deg); }.audience-note span,.audience-note strong { display: block; }.audience-note span { color: #8c3029; font-size: 8px; font-weight: 900; letter-spacing: .13em; }.audience-note strong { margin-top: 4px; font-size: 12px; line-height: 1.5; }
@keyframes card-in { from { opacity: 0; transform: translateY(12px); } } @keyframes projector { 50% { opacity: .72; transform: translateX(-50%) scaleX(1.03); } }
@media (max-width:820px) { .cinema { overflow: auto; padding: 55px 8px 12svh; }.curtain { width: 24px; opacity: .84; }.exit-sign { display: none; }.screen-frame { width: 100%; height: auto; min-height: 82svh; padding: 22px 15px 120px; border-width: 6px; }.screen-header { display: block; }.screen-header > p { margin-top: 9px; }.museum-layout { display: block; }.archive-list { grid-template-columns: 1fr; }.program { position: static; margin-top: 15px; }.audience-back { display: none; }.audience-front { position: fixed; bottom: -5svh; width: 115vw; }.seat { width: 21vw; height: 10svh; min-height: 70px; }.audience-note { right: 12px; bottom: 7svh; }.archive-detail { padding: 18px 14px; }.detail-body { font-size: 15px; line-height: 1.85; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } }

.screening-open { margin-top: 8px; color: #fff5d6 !important; background: #913d31 !important; }
.screen-frame.game-open { overflow: hidden; }.screen-frame.game-open > .screen-header,.screen-frame.game-open > .archive-nav,.screen-frame.game-open > .museum-layout { display: none; }
.game-panel { height: 100%; min-height: 460px; color: #f9edc7; background: #171710; border: 1px solid #8f7a48; box-shadow: inset 0 0 70px rgba(0,0,0,.45); }.game-heading { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid #4e4b31; background: #24291d; }.game-heading h2 { margin: 3px 0 0; font-family: Georgia,"Songti SC",serif; font-size: 24px; }.game-heading button,.game-actions button { padding: 9px 12px; color: #f9edc7; background: #70342d; border: 1px solid #a86c50; font-weight: 800; }.game-layout { display: grid; grid-template-columns: minmax(0,1fr) 250px; height: calc(100% - 73px); min-height: 390px; }.game-stage { position: relative; min-height: 390px; overflow: hidden; background: #78bfe3; }.game-stage canvas { display: block; width: 100%; height: 100%; min-height: 390px; touch-action: none; }.game-controls { padding: 15px; overflow: auto; background: #25281d; border-left: 1px solid #4e4b31; }.mode-copy { margin: 0 0 12px; color: #ddd2a8; font-size: 11px; line-height: 1.6; }.character-picker { display: grid; gap: 7px; }.character-card { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 7px; width: 100%; padding: 8px; color: #e9debd; background: #353728; border: 1px solid #56573c; text-align: left; }.character-card.active { border-color: #e1c255; box-shadow: inset 3px 0 #e1c255; }.character-card .swatch { width: 14px; height: 14px; border-radius: 50%; }.character-card span,.character-card small { display: block; }.character-card small,.character-card .tag { color: #a9a17f; font-size: 8px; font-style: normal; }.character-feature { min-height: 36px; padding: 8px 0; color: #d6c36f; font-size: 10px; line-height: 1.5; }.game-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }.game-actions button:first-child { background: #9c4b32; }.game-score { margin-top: 12px; padding-top: 10px; border-top: 1px dashed #656044; color: #aaa17e; font-size: 10px; }.game-score strong { float: right; color: #f2ce58; font-size: 18px; }
.round-hud,.combo-hud,.field-event,.toast { position: absolute; z-index: 4; padding: 7px 10px; background: rgba(27,29,20,.88); border: 1px solid #e1c255; }.round-hud { top: 12px; left: 12px; }.round-hud span,.round-hud b,.combo-hud span,.combo-hud b,.field-event strong,.field-event span { display: block; }.round-hud span,.combo-hud span { color: #d0c48f; font-size: 8px; }.combo-hud { top: 12px; right: 12px; }.combo-hud.is-hot { background: #83392e; }.field-event { top: 64px; left: 50%; width: min(360px,80%); transform: translateX(-50%); text-align: center; }.field-event span { margin-top: 3px; color: #d8ceab; font-size: 10px; }.toast { left: 50%; bottom: 60px; opacity: 0; transform: translate(-50%,8px); transition: .2s; pointer-events: none; }.toast.show { opacity: 1; transform: translate(-50%,0); }.touch-controls { position: absolute; z-index: 5; left: 50%; bottom: 10px; display: flex; gap: 8px; transform: translateX(-50%); }.touch-controls button { width: 52px; height: 42px; color: #fff0bd; background: rgba(78,39,30,.9); border: 1px solid #e1c255; font-weight: 900; touch-action: none; }
.migration-panel { padding: 15px; color: #3c321f; background: #eadcae; }.migration-panel > strong { font-family: Georgia,"Songti SC",serif; font-size: 20px; }.migration-panel p { font-size: 11px; }.migration-meter { display: grid; grid-template-columns: 80px 35px 1fr; align-items: center; gap: 6px; margin: 5px 0; font-size: 9px; }.migration-meter i { height: 6px; background: linear-gradient(90deg,#8a3d30 var(--meter),#bcae7f var(--meter)); }.migration-actions { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; }.migration-actions button,.migration-choice-legend { padding: 8px; color: #3b3020; background: #f8edc6; border: 1px solid #9c8551; }.migration-actions strong,.migration-actions small { display: block; }.migration-actions small { margin-top: 3px; font-size: 8px; }.migration-choice-legend { display: grid; grid-template-columns: 13px 1fr; align-items: center; gap: 2px 7px; }.migration-choice-legend i { grid-row: 1 / 3; width: 11px; height: 28px; background: var(--choice-color); box-shadow: 0 0 9px var(--choice-color); }.migration-choice-legend small { grid-column: 2; }.touch-action:disabled { opacity: .48; cursor: default; }
.screen-transition,.dialog,.gallery-dialog,.settlement-dialog { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; background: rgba(9,6,5,.8); }.screen-transition { opacity: 0; visibility: hidden; pointer-events: none; color: #f6d873; text-align: center; transition: opacity .25s; }.screen-transition span,.screen-transition strong { display: block; }.cinema[data-view="entering-screen"] + .screen-transition,.cinema[data-view="returning-seat"] + .screen-transition { opacity: 1; visibility: visible; }.dialog-card,.gallery-card,.settlement-dialog article { width: min(720px,90vw); max-height: 85svh; overflow: auto; padding: 24px; color: #342b1d; background: #eee0b2; border: 3px solid #7b442f; box-shadow: 14px 18px 0 rgba(0,0,0,.35); }.gallery-card > button,.settlement-dialog button { padding: 8px 12px; color: #fff2cb; background: #73362e; }.gallery-card nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }.gallery-card nav button { padding: 7px 9px; color: #443923; background: #d9c792; }.gallery-entry { display: grid; gap: 4px; width: 100%; margin: 7px 0; padding: 12px; color: #3d3321; background: #f8edc9; border: 1px solid #b3a06d; text-align: left; }.gallery-entry span,.gallery-entry small,.gallery-entry em { font-size: 9px; font-style: normal; }.gallery-image { display: block; max-width: 100%; max-height: 55svh; margin: 12px auto; object-fit: contain; }.gallery-subtitles,.gallery-body { white-space: pre-line; line-height: 1.8; }.audience-reaction { position: fixed; z-index: 8; left: 8vw; bottom: 16svh; width: min(270px,72vw); padding: 11px 15px; color: #3b2b19; background: #f0dfa3; box-shadow: 5px 6px 0 rgba(39,10,10,.7); transform: rotate(-1deg); }.audience-reaction span,.audience-reaction strong { display: block; }.audience-reaction span { color: #8c3029; font-size: 8px; }.audience-reaction strong { margin-top: 4px; font-size: 11px; }
@media (max-width:820px) { .screen-frame.game-open { padding: 8px 8px 100px; }.game-panel { min-height: 720px; }.game-heading { padding: 11px; }.game-heading h2 { font-size: 18px; }.game-layout { display: flex; flex-direction: column; height: auto; }.game-stage,.game-stage canvas { min-height: 390px; height: 52svh; }.game-controls { border-top: 1px solid #4e4b31; border-left: 0; }.character-picker { grid-template-columns: repeat(3,1fr); }.character-card { display: block; text-align: center; }.character-card .swatch { display: block; margin: 0 auto 4px; }.character-card .tag { display: none; }.game-actions { grid-template-columns: repeat(3,1fr); }.migration-actions { grid-template-columns: 1fr; }.audience-reaction { left: 12px; bottom: 18svh; } }
.cinema[data-view="entering-screen"] ~ .screen-transition,.cinema[data-view="returning-seat"] ~ .screen-transition { opacity: 1; visibility: visible; }

/* Fixed cinema decorations must never intercept controls beneath them. */
button { touch-action: manipulation; }
.show-notice,.exit-sign,.audience-note,.audience-reaction { pointer-events: none; }

/* Homepage screening and responsive game controls. */
.screen-frame.game-open > .archive-panel { display: none; }
.game-heading small { display: block; margin-top: 4px; color: #aaa17e; font-size: 9px; letter-spacing: .04em; }
.game-layout { height: calc(100% - 82px); }
.game-stage canvas { user-select: none; }
.toast { bottom: 72px; }
.touch-controls { display: grid; grid-template-columns: repeat(4,52px); grid-template-rows: repeat(2,46px); gap: 6px; bottom: 10px; touch-action: none; user-select: none; }
.touch-controls button { position: relative; display: grid; place-items: center; width: 52px; height: 46px; padding: 0; border-radius: 12px; background: rgba(55,31,25,.9); border-color: rgba(236,202,93,.78); box-shadow: 0 4px 0 rgba(26,12,10,.82),inset 0 1px rgba(255,255,255,.12); line-height: 1; transition: transform .08s ease,background .08s ease,box-shadow .08s ease; }
.touch-controls button span { position: absolute; top: 5px; left: 6px; color: rgba(255,240,189,.62); font-size: 7px; }
.touch-controls button.is-pressed { background: #a94d34; box-shadow: 0 1px 0 rgba(26,12,10,.82),inset 0 0 14px rgba(255,216,94,.2); transform: translateY(3px) scale(.97); }
.touch-up { grid-column: 2; grid-row: 1; }
.touch-left { grid-column: 1; grid-row: 2; }
.touch-down { grid-column: 2; grid-row: 2; }
.touch-right { grid-column: 3; grid-row: 2; }
.touch-action { grid-column: 4; grid-row: 2; border-radius: 50% !important; color: #2f2118 !important; background: #e1c255 !important; }