:root {
  --ink: #1c1a2e;
  --paper: #f1e7d0;
  --paper2: #e4d7ba;
  --yel: #f7c948;
  --red: #d8452f;
  --line: #1c1a2e;
  --safe-b: calc(env(safe-area-inset-bottom) + (100% - 100svh));
  --font: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', system-ui, sans-serif;   /* 読みやすさ優先でゴシック体（本人 2026-11-03） */
  --dot: 'DotGothic16', 'BIZ UDPGothic', system-ui, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; color: #fff; font-family: var(--font); font-weight: 500; -webkit-font-smoothing: antialiased; }
body { -webkit-user-select: none; user-select: none; }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
#app { position: fixed; inset: 0; overflow: hidden; background: #000; }
#gl { position: absolute; left: 0; top: 0; display: block; image-rendering: pixelated; touch-action: none; }
/* 一時停止中はセットもモニターの画もぼかして暗くする（止めた時間で段取りを考えるズルをさせない）。描画も止まっているので、ぼかすのは止まった1枚だけ */
body.paused #gl { filter: blur(14px) brightness(.4) saturate(.6); }
body.paused #monTop { opacity: .35; }

/* ─ 目印 ─ */
#marks { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; }
.mk {
  position: absolute; left: -26px; top: -26px; width: 52px; height: 52px; padding: 0; border: 0; background: none;
  pointer-events: auto; touch-action: none; display: grid; place-items: center; opacity: .45;
}
.mk b {
  position: relative; display: grid; place-items: center; width: 24px; height: 24px; font-size: 16px; font-weight: 400; line-height: 1;
  background: var(--paper); color: var(--ink); border: 2px solid var(--ink);
}
.mk.bl b { background: #ffb347; }
.mk.pl b { background: #bcd6ea; }
.mk.hi { opacity: 1; }
.mk.hi b { background: #fff06b; }
.mk.fi b { background: var(--red); color: #fff; width: 30px; height: 30px; }
.mk.near { opacity: 1; }
/* 光の枠（翼と終電だけ） */
.mk.now { opacity: 1; }
.mk.now::after { content: ''; position: absolute; left: 4px; top: 4px; right: 4px; bottom: 4px; border: 3px solid #fff36b; animation: mkFrame .36s steps(2) infinite; }
.mk.now b { background: #fff36b; }
@keyframes mkFrame { 50% { transform: scale(1.22); border-color: #fff; } }
.mk.st { opacity: 1; }
.mk.st b { width: 36px; height: 24px; background: #ff7a6b; color: #fff; font-size: 16px; }

#cTag, #cPin { position: absolute; left: 0; top: 0; pointer-events: none; }
#cTag { margin: -11px 0 0 -10px; width: 20px; height: 20px; display: grid; place-items: center; font-size: 14px; line-height: 1; background: var(--yel); color: var(--ink); border: 2px solid var(--ink); }
#cPin { margin: -18px 0 0 -8px; font-size: 16px; line-height: 1; color: var(--yel); text-shadow: 1px 1px 0 var(--ink), -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink); }
.pop {
  position: absolute; transform: translate(-50%, -100%); white-space: nowrap; font-size: 16px; padding: 1px 6px;
  background: var(--ink); color: #fff; border: 1px solid #fff; animation: pop .9s steps(9) forwards; pointer-events: none;
}
.pop.good { background: #fff36b; color: var(--ink); border-color: var(--ink); }
.pop.bad { background: var(--red); }
@keyframes pop { 0% { margin-top: 6px; } 25% { margin-top: -6px; } 80% { opacity: 1; } 100% { margin-top: -16px; opacity: 0; } }

/* ─ モニター ─ */
#takeHud { position: absolute; z-index: 4; left: 0; right: 0; top: 0; pointer-events: none; padding: calc(env(safe-area-inset-top) + 6px) 6px 0; }
#monitor { position: relative; width: 100%; aspect-ratio: 16 / 9; border: 3px solid var(--ink); outline: 2px solid #5a5668; background: transparent; }
#monitorView { position: absolute; inset: 0; }
#monTop { font-family: var(--dot); -webkit-font-smoothing: none; position: absolute; left: 6px; top: 4px; right: 6px; display: flex; justify-content: space-between; font-size: 16px; text-shadow: 1px 1px 0 #000, -1px 1px 0 #000, 1px -1px 0 #000, -1px -1px 0 #000; }
.rec::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 5px; background: #ff4a3a; animation: rec 1s steps(2) infinite; }
@keyframes rec { 50% { opacity: .15; } }
body[data-state=slate] .rec, body[data-state=cut] .rec { opacity: 0; }
#camBar { display: flex; gap: 4px; margin-top: 5px; pointer-events: auto; }
.camBtn {
  position: relative; flex: 1; min-height: 50px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  background: #2b2940; border: 2px solid var(--ink); outline: 1px solid #5a5668; touch-action: none; padding: 2px;
}
.camBtn b { font-size: 16px; font-weight: 400; line-height: 1.1; }
.camBtn span { font-size: 12px; line-height: 1.1; color: #c9c5dd; }
.camBtn i { position: absolute; right: 5px; top: 5px; width: 9px; height: 9px; background: #4a4760; }
.camBtn[data-q="1"] i { background: #e8a93a; }
.camBtn[data-q="2"] i { background: #5fe07a; }
.camBtn u { position: absolute; left: 0; bottom: 0; height: 5px; width: 100%; background: #8fd0ff; text-decoration: none; }
.camBtn.low u { background: #ff5a48; animation: rec .5s steps(2) infinite; }
.camBtn.on u { background: var(--ink); }
.camBtn.on.low u { background: #d8452f; }
#monOut { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 1px 12px 4px; line-height: 1.3;   /* ゴシック体の字が下に寄るので下を厚く */ font-size: 24px; white-space: nowrap; background: var(--red); color: #fff; border: 2px solid var(--ink); }
.camBtn.inked { background: #14121c; color: #6a6680; }
.camBtn.inked span { color: #6a6680; }
.camBtn.on { background: var(--yel); color: var(--ink); }
.camBtn.on.inked { background: #14121c; color: #d0ccdf; }
.camBtn.on span { color: var(--ink); }
#btnPause { width: 44px; flex: none; background: #2b2940; border: 2px solid var(--ink); outline: 1px solid #5a5668; }

@media (orientation: landscape) {
  #takeHud { left: auto; right: 8px; top: 8px; width: min(46vw, 620px); padding: 0; }
}

#tools { position: absolute; z-index: 4; left: 8px; bottom: calc(10px + var(--safe-b)); display: flex; gap: 4px; }
#tools button { min-width: 44px; height: 44px; padding: 0 6px; background: #2b2940cc; border: 2px solid var(--ink); font-size: 16px; }
#tools button.on { color: #8f8ba6; }
/* PC（マウスとキーボード）だけ、ボタンの左上に対応するキーを小さく添える。光らせない・押しても変わらない */
@media (hover: hover) and (pointer: fine) {
  #btnPause, #tools #btnL, #tools #btnR { position: relative; }
  #tools #btnL, #tools #btnR { padding: 0 2px 0 16px; }   /* 三角を右へ寄せて札とぶつけない */
  [data-key]::after {
    content: attr(data-key); position: absolute; left: 3px; top: 3px; min-width: 13px; height: 13px; padding: 0 2px; box-sizing: border-box;
    font-size: 10px; line-height: 11px; text-align: center; color: #c9c5dd; border: 1px solid #6a6680; border-radius: 2px; pointer-events: none;
  }
  .camBtn.on[data-key]::after { color: var(--ink); border-color: #1c1a2e88; }
}
body[data-state=title] #btnFollow, body[data-state=select] #btnFollow { display: none; }

/* ─ カチンコ ─ */
/* 跳ねて登場 → 腕を構えてウズウズ → カチン！で閉じる → 画面の外へ飛んでいく */
#slate { position: absolute; z-index: 6; left: 50%; top: 50%; width: min(86vw, 420px); transform: translate(-50%, -50%) rotate(-3deg); pointer-events: none; animation: slateIn .5s both; }
@keyframes slateIn {
  0% { transform: translate(-50%, 90vh) rotate(-16deg) scale(.8); }
  55% { transform: translate(-50%, -62%) rotate(4deg) scale(1.05); }
  78% { transform: translate(-50%, -46%) rotate(-5deg) scale(.98); }
  100% { transform: translate(-50%, -50%) rotate(-3deg) scale(1); }
}
#slate.clap { animation: slateHit .5s both; }
@keyframes slateHit {
  0% { transform: translate(-50%, -44%) rotate(-3deg) scale(1.12, .86); }
  18% { transform: translate(-52%, -55%) rotate(3deg) scale(.94, 1.1); }
  36% { transform: translate(-48%, -48%) rotate(-5deg) scale(1.05, .96); }
  58% { transform: translate(-51%, -51%) rotate(2deg) scale(1); }
  100% { transform: translate(-50%, -50%) rotate(-3deg) scale(1); }
}
#slate.leaving { animation: slateOut .36s ease-in both; }
@keyframes slateOut {
  0% { transform: translate(-50%, -50%) rotate(-3deg) scale(1); }
  28% { transform: translate(-50%, -42%) rotate(-8deg) scale(1.04); }
  100% { transform: translate(40%, -150vh) rotate(38deg) scale(.7); }
}
.clapTop, .clapMid { height: 30px; background: repeating-linear-gradient(115deg, #fff 0 26px, var(--ink) 26px 52px); border: 3px solid var(--ink); }
.clapMid { background: repeating-linear-gradient(65deg, #fff 0 26px, var(--ink) 26px 52px); border-top-width: 0; }
.clapTop { transform-origin: 3px 100%; transform: rotate(-26deg); animation: armWait .3s .5s steps(3) infinite alternate; }
@keyframes armWait { from { transform: rotate(-20deg); } to { transform: rotate(-36deg); } }
#slate.clap .clapTop { transform: rotate(0); animation: armSnap .1s steps(2) both; }
@keyframes armSnap { from { transform: rotate(-36deg); } to { transform: rotate(0); } }
/* カチン！の火花 */
#clapBurst { position: absolute; left: 92%; top: 26px; width: 0; height: 0; display: none; z-index: 2; }
#slate.clap #clapBurst { display: block; }
#clapBurst i { position: absolute; left: -3px; top: -3px; width: 7px; height: 30px; background: var(--yel); border: 1px solid var(--ink); transform-origin: 3px 3px; opacity: 0; animation: ray .34s steps(4) both; }
#clapBurst i:nth-child(1) { --a: 0deg; } #clapBurst i:nth-child(2) { --a: 45deg; } #clapBurst i:nth-child(3) { --a: 90deg; } #clapBurst i:nth-child(4) { --a: 135deg; }
#clapBurst i:nth-child(5) { --a: 180deg; } #clapBurst i:nth-child(6) { --a: 225deg; } #clapBurst i:nth-child(7) { --a: 270deg; } #clapBurst i:nth-child(8) { --a: 315deg; }
@keyframes ray { 0% { opacity: 1; transform: rotate(var(--a)) translateY(8px) scaleY(.4); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(46px) scaleY(1.1); } }
#clapBurst b { position: absolute; left: -46px; top: -56px; white-space: nowrap; font-weight: 400; font-size: 24px; color: var(--ink); background: #fff36b; border: 2px solid var(--ink); padding: 0 6px; animation: clink .45s steps(5) both; }
@keyframes clink { 0% { transform: scale(.3) rotate(-14deg); } 30% { transform: scale(1.25) rotate(6deg); } 60% { transform: scale(1) rotate(-3deg); } 100% { transform: scale(1) rotate(-3deg); } }
#slate.clap #slateWord { animation: wordPop .4s steps(5) both; }
@keyframes wordPop { 0% { transform: scale(2.1); } 50% { transform: scale(.9); } 100% { transform: scale(1); } }
#slate:not(.clap) #slateWord { animation: wordWait .6s steps(2) infinite; }
@keyframes wordWait { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { #slate, #slate.clap, .clapTop, #slateWord, #clapBurst i, #clapBurst b { animation-duration: .01s !important; animation-iteration-count: 1 !important; } }
.clapBody { background: var(--ink); color: #fff; border: 3px solid var(--ink); padding: 10px 14px; }
.clapBody p { margin: 0; }
#slateTitle { font-size: 16px; line-height: 1.5; border-bottom: 1px solid #fff; padding-bottom: 5px; }
.slateRow { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 16px; padding: 6px 0; }
.slateRow strong { font-size: 32px; font-weight: 400; }
#slateMod { font-size: 14px; line-height: 1.4; color: #ffd98a; border-top: 1px solid #fff; padding: 5px 0; }
#slateWord { font-size: 32px; text-align: center; color: var(--yel); }
#cutSign {
  position: absolute; z-index: 6; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-4deg); font-family: 'Dela Gothic One', sans-serif; font-size: clamp(48px, 13vw, 96px);
  color: var(--yel); -webkit-text-stroke: 0; text-shadow: 4px 4px 0 var(--ink), -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink); white-space: nowrap; pointer-events: none;
}

/* ─ 画面 ─ */
.scr { position: absolute; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center; padding: calc(env(safe-area-inset-top) + 12px) 16px calc(12px + var(--safe-b)); overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y pinch-zoom; }
/* 画面の入れ物はタッチを受ける。iPhone の Safari は、入れ物を pointer-events: none にすると中の札を触ってもスクロールしない（2026-11-03 映画評・撮影予定が動かなかった）。
   後ろのセットを触らせたい画面（タイトル・PC の撮影予定の右側）だけ、入れ物を素通しにして札だけ受ける */
.scr > * { pointer-events: auto; }
/* タイトル：上半分が映画のスクリーン、下半分が撮影所 */
#scrTitle { padding: 0; align-items: flex-start; overflow: hidden; pointer-events: none; }
#titleReel { position: absolute; left: 0; right: 0; top: 0; height: 50%; pointer-events: none !important; }
.perf { position: absolute; left: 0; right: 0; height: 12px; background: #000 repeating-linear-gradient(90deg, transparent 0 10px, #e8e0c8 10px 18px, transparent 18px 28px); background-size: 28px 6px; background-position: 0 3px; background-repeat: repeat-x; }
.perf.t { top: 0; }
.perf.b { bottom: 0; }
.titleBox { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -34px); text-align: center; width: min(92vw, 560px); padding: 0 8px; }
/* 読み込み画面（3Dより先に出す） */
#boot { position: fixed; inset: 0; z-index: 50; background: #0b0a10; color: #f1e7d0; display: flex; align-items: center; justify-content: center; font-family: var(--font); transition: opacity .4s; overflow: hidden; }
#boot.out { opacity: 0; pointer-events: none; }
#boot .strip { position: absolute; top: -40px; bottom: -40px; width: 34px; background: #000 repeating-linear-gradient(180deg, transparent 0 14px, #e8e0c8 14px 26px, transparent 26px 40px) center / 14px 40px repeat-y; animation: stripRun .5s steps(5) infinite; border-left: 3px solid #2a2834; border-right: 3px solid #2a2834; }
#boot .strip.l { left: 10px; }
#boot .strip.r { right: 10px; animation-direction: reverse; }
@keyframes stripRun { to { background-position-y: 40px; } }
.bootInner { text-align: center; width: min(76vw, 340px); }
#boot .leader { position: relative; width: min(52vw, 190px); aspect-ratio: 1; margin: 0 auto 14px; border-radius: 50%; border: 4px solid #f1e7d0; overflow: hidden; }
#boot .leader .sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(#6a6478 0 25%, transparent 25% 100%); animation: sweep 1s steps(24) infinite; }
@keyframes sweep { to { transform: rotate(360deg); } }
#boot .leader .cross { position: absolute; background: #f1e7d0; opacity: .7; }
#boot .leader .cross.h { left: 0; right: 0; top: 50%; height: 2px; }
#boot .leader .cross.v { top: 0; bottom: 0; left: 50%; width: 2px; }
#boot .leader b { position: absolute; inset: 0; display: grid; place-items: center; font-family: 'Noto Serif JP', serif; font-weight: 700; font-size: min(26vw, 92px); line-height: 1; }
.bootLoad { margin: 0 0 8px; font-size: 16px; }
.bootTrack { height: 8px; border: 2px solid #f1e7d0; }
.bootTrack i { display: block; width: 0; height: 100%; background: #f7c948; transition: width .25s steps(4); }
.bootGo { display: none; margin-top: 2px; }
#boot.ready .bootLoad, #boot.ready .bootTrack { display: none; }
#boot.ready .bootGo { display: flex; flex-direction: column; align-items: center; gap: 8px; }
#bootStart { min-height: 52px; width: 100%; font-size: 20px; color: var(--ink); background: var(--yel); border: 3px solid #000; box-shadow: 3px 3px 0 #000; }
#bootSound { min-height: 44px; padding: 0 16px; font-size: 16px; background: none; color: #f1e7d0; border: 2px solid #5a5668; }
.kicker { margin: 0; font-size: 16px; letter-spacing: .1em; color: #ffe6b8; text-shadow: 2px 2px 0 var(--ink); }
.kicker.dark { color: var(--red); text-shadow: none; }
h1 { margin: 0 0 6px; font-family: 'Dela Gothic One', sans-serif; font-weight: 400; font-size: clamp(32px, 9vw, 56px); line-height: 1.12; color: var(--yel); text-shadow: 4px 4px 0 var(--ink), -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 6px 7px 0 #b33a26; }
.lead { margin: 0 0 12px; font-size: 16px; line-height: 1.6; text-shadow: 2px 2px 0 var(--ink), -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink); }
.note { margin: 12px 0 0; font-size: 12px; color: #eee; text-shadow: 1px 1px 0 var(--ink); }
.btn { display: block; width: 100%; max-width: 340px; margin: 6px auto; min-height: 48px; padding: 8px 14px; font-size: 16px; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn.primary { background: var(--yel); }
.btn:focus-visible, .camBtn:focus-visible, .stageCard:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.panel { width: 100%; max-width: 480px; background: #2b2940; color: #fff; border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); padding: 14px; margin: auto; }
.panel.small { max-width: 320px; }
.panel h2 { margin: 0 0 10px; font-size: 24px; font-weight: 400; }
.panel.paper { background: var(--paper); color: var(--ink); }
#stageList { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.rankLine { margin: -4px 0 10px; font-size: 14px; line-height: 1.4; color: #ffd98a; }
.seriesHead { margin: 6px 0 2px !important; font-size: 16px !important; color: var(--yel); }
.seriesHead small { display: block; font-size: 12px; line-height: 1.4; color: #c9c5dd; }
.goalBar { display: block; height: 7px; margin-top: 3px; background: #1c1a2e; border: 1px solid #5a5668; }
.goalBar i { display: block; height: 100%; background: var(--yel); }
.stageCard.planned { padding: 5px 10px; font-size: 14px; background: #3a3750; color: #a9a5bd; border-style: dashed; border-color: #5a5668; }
/* 段取りの札 */
#rehCard { position: absolute; z-index: 7; left: 50%; bottom: calc(66px + var(--safe-b)); transform: translateX(-50%); width: min(92vw, 460px); padding: 10px 12px; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
#rehCard p { margin: 0; font-size: 16px; line-height: 1.5; }
#rehCard .btn { margin: 8px 0 0 auto; width: auto; min-width: 130px; }
#rehQuit { display: none; position: absolute; z-index: 7; right: 8px; bottom: calc(10px + var(--safe-b)); min-height: 44px; padding: 0 12px; background: #2b2940cc; border: 2px solid var(--ink); font-size: 14px; }
body.rehearsal #rehQuit { display: block; }
.rehTarget { outline: 3px solid #fff36b !important; outline-offset: 3px; animation: rehPulse .7s steps(2) infinite; }
@keyframes rehPulse { 50% { outline-color: #ff7a6b; } }
.stageCard { position: relative; display: block; width: 100%; text-align: left; background: var(--paper); color: var(--ink); border: 3px solid var(--ink); padding: 8px 10px; }
.thumb { position: absolute; right: 8px; top: 8px; width: 96px; aspect-ratio: 16 / 9; image-rendering: pixelated; border: 2px solid var(--ink); filter: grayscale(.55) contrast(1.1) sepia(.2); }
.stageCard small { display: block; font-size: 12px; color: var(--red); }
.stageCard strong { display: block; font-size: 16px; font-weight: 400; }
.stageCard em { display: block; font-style: normal; font-size: 24px; line-height: 1.3; }
.stageCard[disabled] { background: #57546b; color: #d6d3e3; cursor: default; }
.stageCard[disabled] small { color: #d6d3e3; }
.stageCard[disabled] em { font-size: 12px; line-height: 1.5; }
.cardFoot { display: flex; align-items: center; justify-content: space-between; margin-top: 5px; min-height: 16px; }
.stamps { display: flex; gap: 4px; }
.stamp { width: 14px; height: 14px; border: 2px solid var(--ink); }
.stamp.got { background: var(--red); }
.best { color: var(--red); font-size: 16px; }

.filmTitle { font-family: 'Noto Serif JP', serif; font-weight: 900 !important; line-height: 1.2; margin: 2px 0 8px !important; font-size: 30px !important; }
.filmTitle small { display: block; font-size: 18px; font-weight: 700; }
.blurb { margin: 0 0 10px; font-size: 16px; line-height: 1.55; }
.rules { list-style: none; margin: 0 0 10px; padding: 8px; background: var(--paper2); }
.rules li { display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 1.45; padding: 3px 0; }
.ico { flex: none; display: grid; place-items: center; min-width: 26px; height: 24px; padding: 0 3px; font-weight: 400; font-size: 14px; border: 2px solid var(--ink); }
.ico.bl { background: #ffb347; } .ico.cam { background: var(--yel); } .ico.st { background: #ff7a6b; color: #fff; }
.panel h3 { margin: 8px 0 5px; font-size: 16px; font-weight: 400; }
.missions { list-style: none; margin: 0 0 12px; padding: 0; }
.missions li { position: relative; padding: 4px 0 4px 24px; font-size: 14px; line-height: 1.4; }
.missions li::before { content: ''; position: absolute; left: 0; top: 5px; width: 14px; height: 14px; border: 2px solid var(--ink); }
.missions li.got::before { background: var(--red); }
.missions li.new { font-weight: 400; background: #ffe58a; }
.btnRow { display: flex; gap: 8px; }
.btnRow .btn { margin: 0; }
.pcNote { margin: 8px 0 0; font-size: 12px; color: #5a5668; }
@media (pointer: coarse) { .pcNote { display: none; } }

/* ─ 試写室 ─ */
#cinema { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; pointer-events: none; padding-top: max(9vh, 64px); }
#theater { position: absolute; left: 0; top: 0; width: 100%; height: 100%; image-rendering: pixelated; }
#filmWrap { position: relative; width: min(82vw, calc((100vh - 290px) * 16 / 9), 980px); }
@media (orientation: portrait) {
  #cinema { padding-top: 28vh; }   /* スクリーンと客席の間が空きすぎていたので下げた（本人 2026-11-03） */
  #filmWrap { width: 86vw; }
}
#filmScreen { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; }
.filmCard { position: absolute; inset: 0; background: #0b0a10; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; font-family: 'Noto Serif JP', serif; color: #f6e6c2; }
.filmCard p { margin: 0; }
.filmCard .studio { font-size: clamp(11px, 1.8vw, 14px); letter-spacing: .3em; margin-bottom: 3%; color: #fff; }
.filmCard .big { font-weight: 700; font-size: clamp(20px, 4.4vw, 40px); line-height: 1.2; color: #fff; white-space: nowrap; }
.filmCard .sub { font-weight: 500; font-size: clamp(14px, 2.8vw, 24px); margin-top: 2%; color: #fff; white-space: nowrap; }
.filmCard .fin { display: none; font-weight: 700; font-size: clamp(34px, 8vw, 72px); line-height: 1.1; color: #fff; }
.filmCard .credit { display: none; font-size: clamp(10px, 1.7vw, 13px); font-weight: 500; margin-top: 3%; padding: 0 16px; line-height: 1.5; }
.filmCard .leaderNum { display: none; width: 34%; aspect-ratio: 1; border: 3px solid #f6e6c2; border-radius: 50%; place-items: center; font-weight: 900; font-size: clamp(48px, 15vw, 130px); line-height: 1; }
.filmCard.leader .leaderNum { display: grid; }
.filmCard.leader .studio, .filmCard.leader .big, .filmCard.leader .sub { display: none; }
.filmCard.end .studio, .filmCard.end .big, .filmCard.end .sub, .filmCard.intro .leaderNum { display: none; }
.filmCard.end .fin, .filmCard.end .credit { display: block; }
.scope { position: absolute; left: 0; right: 0; height: 11%; background: #000; z-index: 1; }
.scope.t { top: 0; } .scope.b { bottom: 0; }
#filmCap {
  position: absolute; left: 0; right: 0; bottom: 13%; z-index: 2; text-align: center; padding: 0 8px;
  font-family: 'Noto Serif JP', serif; font-weight: 700; font-size: clamp(13px, 3vw, 26px); line-height: 1.2; color: #fff; white-space: nowrap;
  text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000; animation: capIn .3s steps(3);
}
#filmCap.big { font-size: clamp(16px, 3.8vw, 34px); }
@keyframes capIn { 0% { opacity: 0; } 100% { opacity: 1; } }
.filmCard { z-index: 3; }
#audience { position: absolute; left: 0; right: 0; bottom: 0; height: clamp(120px, 24vh, 210px); overflow: hidden; }
.audRow { position: absolute; left: -12px; right: -12px; display: flex; justify-content: space-around; }
.audRow.r0 { bottom: 62%; }
.audRow.r1 { bottom: 30%; }
.audRow.r2 { bottom: -8%; }
/* 座席。人が座っていると頭（b）が出る */
.audRow span { position: relative; display: block; width: 26px; height: 30px; background: #5e161c; border-top: 3px solid #8a2a2c; }
.audRow.r1 span { width: 34px; height: 40px; background: #4c1016; border-top-color: #72211f; }
.audRow.r2 span { width: 44px; height: 56px; background: #380b10; border-top-color: #561819; }
.audRow b { position: absolute; left: 22%; right: 22%; bottom: 72%; height: 62%; background: #0c0910; }
.audRow.r0 b { background: #18121c; }
.audRow.r1 b { background: #110c14; }
#audience.j1 b { animation: audJ .4s steps(4); }
#audience.j2 b { animation: audJ2 .7s steps(6); }
@keyframes audJ { 50% { transform: translateY(-9px); } }
@keyframes audJ2 { 30% { transform: translateY(-20px); } 60% { transform: translateY(-5px); } 80% { transform: translateY(-12px); } }
#btnSkip { position: absolute; right: 10px; bottom: calc(10px + var(--safe-b)); pointer-events: auto; min-height: 44px; padding: 4px 12px; background: #2b2940; border: 2px solid #5a5668; font-size: 16px; z-index: 2; }

/* ─ 映画評 ─ */
.news { max-width: 560px; }
.newsName { margin: 0; text-align: center; font-size: 16px; letter-spacing: .4em; border-bottom: 3px double var(--ink); padding-bottom: 4px; }
.news h2 { margin: 8px 0 2px; font-family: 'Noto Serif JP', serif; font-weight: 900; font-size: clamp(22px, 6vw, 30px); line-height: 1.25; }
.revTitle { margin: 0 0 8px; font-size: 14px; }
.newsMain { display: flex; gap: 10px; align-items: stretch; }
#still { width: 62%; aspect-ratio: 16 / 9; background: #222; image-rendering: pixelated; filter: grayscale(.55) contrast(1.1) sepia(.2); border: 2px solid var(--ink); }
.newsSide { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.newsSide p { margin: 0; }
.stars { font-size: 16px; color: var(--red); letter-spacing: .02em; white-space: nowrap; }
.moneyL { font-size: 12px; margin-top: 6px !important; }
.money { font-size: 24px; line-height: 1.2; }
.revBody { font-family: 'Noto Serif JP', serif; font-weight: 500; font-size: 14px; line-height: 1.75; margin: 8px 0; }
.bars { margin: 0 0 4px; }
.bars div { display: flex; align-items: center; gap: 6px; margin: 2px 0; }
.bars dt { width: 66px; font-size: 14px; }
.bars dd { flex: 1; margin: 0; height: 12px; border: 2px solid var(--ink); background: var(--paper2); }
.bars dd i { display: block; height: 100%; background: var(--red); }
.facts { margin: 4px 0 0; font-size: 12px; line-height: 1.5; }
.revNews { margin: 6px 0 0; padding: 3px 8px; font-size: 14px; line-height: 1.5; background: var(--ink); color: var(--yel); }
.btnCol .btn { max-width: none; }
.revDeal { margin: 0 0 8px; padding: 6px 10px; font-size: 14px; line-height: 1.5; border: 2px dashed #8a7a5a; color: var(--ink); }
.revDeal.won { font-size: 16px; background: var(--red); color: #fff; border: 2px solid var(--ink); animation: dealIn .5s steps(5) both; }
@keyframes dealIn { 0% { transform: scale(1.3) rotate(-2deg); opacity: 0; } 60% { transform: scale(.98) rotate(.6deg); opacity: 1; } 100% { transform: scale(1); } }

/* 3Dの準備ができるまで */
#app:not(.ready) .scr, #app:not(.ready) #tools { visibility: hidden; }

/* ─ タイトルロゴ（image/logo.svg を1文字ずつ組み直したもの）。
   上の段は赤い帯に白抜き、下の段は黄から橙の2色。1文字ずつ落ちてきて着地で揺れる ─ */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
h1.logo { margin: 0 auto 4px; width: min(86vw, 440px); line-height: 0; text-shadow: none; animation: lgShake .62s steps(10) 1.28s both; }
.logoSvg { width: 100%; height: auto; overflow: visible; }
.logoSvg .mv { transform-box: fill-box; transform-origin: 50% 100%; }
.logoSvg .ext { fill: #7a2418; stroke: #1c1a2e; stroke-width: 14; stroke-linejoin: round; transform: translate(9px, 11px); }
.logoSvg .out { fill: #1c1a2e; stroke: #1c1a2e; stroke-width: 15; stroke-linejoin: round; }
.logoSvg .row.b .face { fill: url(#lgFaceB); }
.logoSvg .row.t .face { fill: url(#lgFaceT); }
.logoSvg .row.t .ext { fill: #1c1a2e; }
.logoSvg .band polygon { fill: #d8452f; stroke: #1c1a2e; stroke-width: 9; stroke-linejoin: round; }
.logoSvg .band { transform-box: fill-box; transform-origin: 0 50%; animation: lgBand .32s steps(5) .1s both; }
.logoSvg .row.t .mv { animation: lgPop .4s steps(6) both; animation-delay: calc(.32s + var(--i) * .08s); }
.logoSvg .row.b .mv { animation: lgStomp .46s steps(7) both; animation-delay: calc(.86s + var(--i) * .12s); }
/* 「！」だけは着地のあとも時々ぐらつく */
.logoSvg .row.t .ch:last-child { transform-box: fill-box; transform-origin: 50% 100%; animation: lgWobble 3.6s steps(1) 2.2s infinite; }
.logoSvg .glint .bar { fill: #fff; opacity: .75; animation: lgGlint 5s steps(14) 2.4s infinite; }
@keyframes lgBand { from { transform: scaleX(0); } to { transform: none; } }
@keyframes lgPop { 0% { transform: translateY(-60px) scale(.3); opacity: 0; } 55% { transform: translateY(6px) scale(1.18, .82); opacity: 1; } 80% { transform: scale(.95, 1.06); } 100% { transform: none; opacity: 1; } }
@keyframes lgStomp { 0% { transform: translateY(-420px); opacity: 0; } 50% { transform: translateY(0) scale(1.22, .74); opacity: 1; } 72% { transform: translateY(-14px) scale(.94, 1.08); } 100% { transform: none; opacity: 1; } }
@keyframes lgShake { 0%, 100% { transform: none; } 10% { transform: translate(3px, 2px); } 20% { transform: translate(-3px, -1px); } 30% { transform: translate(2px, -2px); } 40% { transform: translate(-2px, 2px); } 50% { transform: translate(3px, 1px); } 60% { transform: translate(-2px, -2px); } 70% { transform: translate(2px, 1px); } 80% { transform: translate(-1px, 1px); } 90% { transform: translate(1px, 0); } }
@keyframes lgWobble { 0%, 88%, 100% { transform: none; } 90% { transform: rotate(-9deg); } 93% { transform: rotate(7deg); } 96% { transform: rotate(-3deg); } }
@keyframes lgGlint { 0% { transform: skewX(-20deg) translateX(0); } 22%, 100% { transform: skewX(-20deg) translateX(1180px); } }
/* 読み込み画面の後ろで先に終わらないよう、はじめるまで止めておく。2回目からは登場を省く */
h1.logo.wait, h1.logo.wait *, h1.logo.again, h1.logo.again .mv, h1.logo.again .band { animation: none !important; }
h1.logo.wait { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { h1.logo, h1.logo .mv, h1.logo .band, h1.logo .ch, h1.logo .bar { animation: none !important; } }

/* ─ 撮影チーム「怪獣活劇団」のロゴ（image/logo_team.svg） ─ */
.symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.teamMark { display: block; color: #f1e7d0; overflow: visible; }
.bootInner .teamMark { width: min(64vw, 260px); height: auto; margin: 0 auto 18px; animation: tmIn .5s steps(6) .1s both; }
.filmCard .studio .teamMark { width: clamp(110px, 22vw, 200px); height: auto; margin: 0 auto; color: #fff; }
@keyframes tmIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .bootInner .teamMark { animation: none; } }

/* タイトルの下のクレジットとリンク（ゲーム紹介・ライセンス・ゲーム一覧） */
#credit { margin: 14px auto 0; max-width: 94vw; font-size: 12px; line-height: 1.8; color: #eee; text-shadow: 1px 1px 0 var(--ink), -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink); }
#credit a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
#credit .cr-group { white-space: nowrap; }
#credit .cr-note { display: block; font-size: 11px; opacity: .85; }

/* 読み込み画面：どこを押してもはじまる */
#boot.ready { cursor: pointer; }
#bootStart small { display: block; font-size: 12px; font-weight: 500; margin-top: 1px; opacity: .75; }
button { font-family: inherit; font-weight: 700; }
/* 上映の頭のカウントダウン：丸だけだと「0」に見えるので、本物のリーダーのように十字線と回る扇を入れる */
.filmCard .leaderNum { position: relative; z-index: 0; isolation: isolate; overflow: hidden; border-width: 4px;
  background: linear-gradient(#f6e6c2, #f6e6c2) center / 2px 100% no-repeat, linear-gradient(#f6e6c2, #f6e6c2) center / 100% 2px no-repeat; }
.filmCard .leaderNum::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: conic-gradient(rgba(120, 112, 136, .8) 0 25%, transparent 25% 100%); animation: sweep .35s steps(12) infinite; }
.filmCard .leaderNum::after { content: ''; position: absolute; inset: 12%; z-index: -1; border-radius: 50%; border: 2px solid rgba(246, 230, 194, .45); }
@media (prefers-reduced-motion: reduce) { .filmCard .leaderNum::before { animation: none; } }
/* PC：撮影予定と台本を左に寄せ、右側にセットを見せる（main.js の wideSelect と同じ条件） */
@media (min-width: 900px) and (orientation: landscape) and (hover: hover) {
  #scrSelect, #scrBrief { pointer-events: none; }   /* 右側のセットを触れるように（マウスの PC だけ） */
  #scrSelect, #scrBrief { justify-content: flex-start; padding-left: max(24px, 3vw); }
  #scrSelect .panel, #scrBrief .panel { margin: auto 0; max-width: 440px; }
}
/* カウントダウンの丸と数字は、どちらも上映の画面の高さで決める（丸だけ小さくなって数字がはみ出していた） */
#filmScreen { container-type: size; }   /* .filmCard 自身に付けると縮んでしまうので、外側の画面を基準にする */
.filmCard .leaderNum { flex: none; width: 52cqh; height: 52cqh; font-size: 34cqh; line-height: 1; padding-bottom: .06em; }
/* 次に怪獣が立ち止まる仕掛けの札（光らせない・どれが次かだけ） */
.mk.next { opacity: 1; z-index: 1; }
/* 下向きの矢印つきの吹き出しで、目印の上をゆっくり上下する（本人案。押すタイミングとは関係なく一定に動く） */
.mk.next::before, .mk.next::after { box-sizing: border-box; position: absolute; left: 50%; pointer-events: none; animation: mkBob .9s ease-in-out infinite alternate; }
.mk.next::before { content: '次'; top: -15px; margin-left: -12px; width: 24px; padding: 1px 0; text-align: center; font-size: 11px; font-weight: 700; line-height: 1.2; color: #fff; background: var(--red); border: 2px solid var(--ink); }
.mk.next::after { content: ''; top: 3px; margin-left: -6px; width: 12px; height: 7px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 7px solid var(--ink); }
@keyframes mkBob { from { transform: translateY(-3px); } to { transform: translateY(2px); } }
@media (prefers-reduced-motion: reduce) { .mk.next::before, .mk.next::after { animation: none; } }
/* タイトルロゴを少し上へ（本人 2026-11-03）。下の文とボタンも一緒に上げて、間を空けない */
.titleBox { transform: translate(-50%, calc(-34px + clamp(-40px, -4.5vh, -18px))); }
/* 縮む枠：振りかぶりが始まると目印の外に大きく出て、振り下ろしの瞬間に目印の大きさまで縮む（本人 2026-11-03） */
.mk .ring { position: absolute; left: 12px; top: 12px; width: 28px; height: 28px; box-sizing: border-box; border: 3px solid #fff36b; pointer-events: none; opacity: 0; transform-origin: 50% 50%; }
.mk.timing { opacity: 1; z-index: 2; }
.mk.timing .ring { opacity: .9; }
.mk.just .ring { opacity: 1; border-color: #fff; background: rgba(255, 243, 107, .45); box-shadow: 0 0 0 2px var(--ink); }
.mk.just b { background: #fff36b; }

/* ─ エンディング（号外 → 打ち上げとスタッフロール → 記念写真） ─ */
#ending { position: absolute; inset: 0; z-index: 9; pointer-events: none; overflow: hidden; }
#ending button { pointer-events: auto; }
.btn.small { min-height: 40px; font-size: 14px; max-width: 240px; }
#endPaper { position: absolute; left: 50%; top: 50%; width: min(88vw, 460px); text-align: center; transform: translate(-50%, -50%) rotate(-2deg); animation: endPaperIn .5s steps(5) both; }
#endPaper h2 { font-size: clamp(22px, 6.4vw, 32px); }
#endPaper .nb { display: inline-block; }   /* 文節の途中で折り返さない */
#endPaper.gone { animation: endPaperOut .45s steps(5) forwards; }
@keyframes endPaperIn { from { transform: translate(-50%, -50%) rotate(-14deg) scale(.2); opacity: 0; } }
@keyframes endPaperOut { to { transform: translate(-50%, 60%) rotate(4deg); opacity: 0; } }
#endRoll { position: absolute; top: 0; bottom: 0; right: 0; width: 42%; overflow: hidden; transition: opacity .6s; -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent); }
#endRoll.gone { opacity: 0; }
#endRollIn { position: absolute; left: 0; right: 0; top: 0; padding: 0 16px; text-align: center; color: #fff; text-shadow: 2px 2px 0 var(--ink), -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink); will-change: transform; }
#endRollIn p { margin: 0; }
.rollTop { font-family: 'Noto Serif JP', serif; font-weight: 900; font-size: 22px; margin-bottom: 26px !important; }
.rollSeries { margin-top: 26px !important; margin-bottom: 6px !important; font-size: 13px; letter-spacing: .2em; color: var(--yel); }
.rollWork { font-size: 15px; line-height: 1.5; margin-bottom: 4px !important; }
.rollWork span { display: block; }
.rollWork .rollRes { font-size: 13px; color: #ffd98a; }
.rollWork.big { font-family: 'Noto Serif JP', serif; font-weight: 900; font-size: 22px; }
@media (orientation: portrait) {
  #endRoll { top: 0; bottom: auto; left: 0; right: 0; width: auto; height: 42%; }
}
#endFin { position: absolute; left: 0; right: 0; top: 9%; text-align: center; opacity: 0; transform: scale(.8); transition: opacity .5s steps(5), transform .5s steps(5); }
#endFin.on { opacity: 1; transform: none; }
#endFin .teamMark { width: min(56vw, 300px); height: auto; margin: 0 auto 6px; filter: drop-shadow(2px 2px 0 var(--ink)); }
#endFin .fin { margin: 0; font-family: 'Noto Serif JP', serif; font-weight: 900; font-size: clamp(44px, 11vw, 88px); line-height: 1.1; color: #fff; text-shadow: 3px 3px 0 var(--ink), -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink); }
#ending.fin { background: linear-gradient(rgba(10, 8, 16, .62), rgba(10, 8, 16, .3) 34%, transparent 52%); transition: background .6s; }
#endFlash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
#endFlash.on { animation: endFlash .9s ease-out; }
@keyframes endFlash { 0% { opacity: .95; } 100% { opacity: 0; } }
#btnEndSkip { position: absolute; right: 10px; bottom: calc(10px + var(--safe-b)); min-height: 44px; padding: 4px 12px; background: #2b2940cc; border: 2px solid #5a5668; font-size: 15px; }
#btnEndBack { position: absolute; left: 50%; bottom: calc(18px + var(--safe-b)); transform: translateX(-50%); width: min(80vw, 300px); margin: 0; }
body[data-state=ending] #tools { display: none; }
@media (prefers-reduced-motion: reduce) { #endPaper, #endPaper.gone, #endFlash.on { animation-duration: .01s !important; } }