:root{color-scheme:dark;--bg:#101110;--fg:#eeeee7;--muted:#999e93;--accent:#d7eb8c;font-family:'Hiragino Kaku Gothic ProN','Noto Sans JP','Yu Gothic',sans-serif;background:var(--bg);color:var(--fg)}*{box-sizing:border-box}body{margin:0}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:3px solid #fff;outline-offset:5px}button:disabled{cursor:wait;opacity:.55}[hidden]{display:none!important}.shell{max-width:1160px;margin:auto;padding:0 48px;min-height:100svh;display:flex;flex-direction:column}.masthead{height:88px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #30332d;font-size:14px;letter-spacing:.12em}.wordmark{display:flex;align-items:center;gap:10px}.eye{color:var(--accent);font-size:24px}.edition{font-size:12px;color:var(--muted);letter-spacing:.16em}.screen{flex:1;animation:appear .35s ease both}.intro{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;padding:38px 30px}.eyebrow{font-size:14px;letter-spacing:.15em;color:var(--muted);line-height:1.8}h1{font-size:clamp(42px,5vw,66px);font-weight:800;line-height:1.35;letter-spacing:.05em;margin:26px 0}.period{color:var(--accent)}.instruction{font-size:16px;color:#c3c7bc;line-height:2;margin:24px 0 32px}.primary{background:var(--accent);color:#171c0c;border:0;border-radius:3px;padding:20px 24px;min-height:64px;font-weight:700;font-size:18px;display:flex;justify-content:space-between;gap:40px;align-items:center;width:100%;max-width:330px;transition:background .18s,transform .18s}.primary:hover{background:#e9f6b7;transform:translateY(-2px)}.primary:active{transform:translateY(1px)}.small{font-size:13px;color:var(--muted);line-height:1.6}.portrait{position:relative;width:100%;max-width:345px;justify-self:end}.portrait img{display:block;width:100%;max-height:64svh;object-fit:contain;filter:brightness(.72) saturate(.65)}.portrait-label{position:absolute;bottom:18px;left:0;right:0;text-align:center;font-size:13px;letter-spacing:.18em;text-shadow:0 1px 5px #000}.frame-corner{position:absolute;width:26px;height:26px;border-color:var(--accent);border-style:solid}.top{top:-7px;left:-7px;border-width:1px 0 0 1px}.bottom{right:-7px;bottom:-7px;border-width:0 1px 1px 0}footer{display:flex;justify-content:space-between;padding:20px 0;border-top:1px solid #30332d;color:#858c7e;font-size:12px;letter-spacing:.08em}.play{width:100%;max-width:450px;align-self:center;padding:16px 0 8px}.round-head{display:flex;justify-content:space-between;align-items:center;font-size:12px;letter-spacing:.14em;color:var(--muted);padding-bottom:10px}#counter{font-size:20px;color:var(--fg);font-variant-numeric:tabular-nums;letter-spacing:.05em}.progress{display:flex;gap:4px;margin-bottom:12px}.progress i{height:2px;flex:1;background:#373c31}.progress i.done{background:#829150}.progress i.current{background:var(--accent)}.stage{position:relative;background:#080908;width:100%;aspect-ratio:9/16;max-height:calc(100svh - 226px);margin:auto;overflow:hidden}.videos,.videos video,.cover{position:absolute;inset:0;width:100%;height:100%}.videos video{object-fit:contain;background:#080908}.cover{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;background:#101110;z-index:2}.answer{animation:appear .24s ease both}.answer .eyebrow{text-align:center;margin:0 0 32px}.answers{display:flex;flex-direction:column;gap:16px;width:100%}.answer-button{border:1px solid #667443;border-radius:3px;min-height:100px;width:100%;font-size:28px;font-weight:700;letter-spacing:.06em;display:flex;align-items:center;justify-content:center;gap:20px;transition:background .16s,transform .16s}.yes{background:var(--accent);color:#171c0c}.no{background:#1e211b;color:var(--fg);border-color:#555c4a}.answer-button:hover{filter:brightness(1.12)}.answer-button:active{transform:scale(.97)}.symbol{font-size:30px;font-weight:400}.answer .small{margin-top:28px}.feedback{gap:12px}.feedback span{font-size:76px;color:var(--accent);line-height:1}.feedback.wrong span{color:#d69a87}.feedback h2{font-size:38px;letter-spacing:.1em;margin:0}.transition{background:#050605;z-index:4;animation:blink .55s ease both;font-size:16px;letter-spacing:.15em;color:var(--accent)}.error{z-index:5;gap:20px;text-align:center}.play-hint{text-align:center;font-size:13px;color:var(--muted);margin:12px 0 0;min-height:20px}.result{align-content:center;text-align:center;padding:70px 0}.result h1{font-size:26px;font-weight:500;margin:16px 0 32px}.score{display:flex;align-items:baseline;justify-content:center;gap:10px;flex-wrap:wrap}.score strong{font-size:110px;line-height:1.2;font-weight:500;color:var(--accent);font-variant-numeric:tabular-nums}.score span{font-size:20px}.record{display:flex;justify-content:center;gap:9px;margin:28px 0 45px}.record span{width:24px;height:24px;display:grid;place-items:center;color:var(--accent);border-bottom:2px solid var(--accent);padding-bottom:8px;font-size:16px}.record span.miss{color:#a77467;border-color:#a77467}.result .primary{margin:auto}@keyframes appear{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}@keyframes blink{0%{clip-path:inset(50% 0)}30%,75%{clip-path:inset(0)}100%{clip-path:inset(50% 0)}}
@media(min-width:700px){.stage{width:min(100%,calc((100svh - 226px)*.5625))}}@media(max-width:699px){.shell{padding:0 20px}.masthead{height:64px;font-size:13px}.edition{font-size:10px;letter-spacing:.08em}.intro{gap:20px;padding:32px 0;grid-template-columns:1.15fr 1fr}.intro h1{font-size:clamp(32px,6.8vw,46px);margin:16px 0}.intro .eyebrow{font-size:12px;letter-spacing:0}.instruction{font-size:14px;margin:20px 0;line-height:1.8}.primary{font-size:17px;padding:18px;gap:16px}.portrait{align-self:start;margin-top:42px}.portrait-label{font-size:10px;bottom:10px;letter-spacing:0}.intro .small{font-size:12px}.play{max-width:none;padding-top:10px}.stage{max-height:calc(100svh - 172px);width:min(100%,calc((100svh - 172px)*.5625))}.progress{margin-bottom:8px}.round-head{padding-bottom:6px}.cover{padding:18px}.answer-button{min-height:90px;font-size:26px}.play-hint{margin-top:8px}footer{padding:14px 0;font-size:11px}.result{padding:40px 0}.result h1{font-size:24px}}@media(max-width:400px){.intro{grid-template-columns:1fr;position:relative;min-height:600px}.intro-copy{z-index:1}.portrait{position:absolute;right:0;top:10px;width:50%;opacity:.35}.intro h1{font-size:46px}.intro .primary{max-width:none;margin-top:44px}.intro .instruction{font-size:16px}.intro .eyebrow{font-size:13px}.portrait-label{display:none}.answer-button{font-size:22px;min-height:76px}.answer .eyebrow{font-size:12px;margin-bottom:20px}.answer .small{margin-top:20px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* 回答ボタンとゲージは映像の外側に常設する。 */
.play{max-width:450px;padding-top:12px}.stage{width:min(100%,calc((100svh - 330px)*.5625));max-height:none;min-width:150px}.time-panel{margin:12px 0}.time-label{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);margin-bottom:7px}#timeText{color:var(--fg);font-variant-numeric:tabular-nums}.time-gauge{height:7px;border-radius:4px;background:#34382d;overflow:hidden}#timeFill{width:100%;height:100%;background:var(--accent);transform-origin:left;will-change:transform}.time-gauge.urgent #timeFill{background:#e69b7e}.answer-controls{display:grid;grid-template-columns:1fr 1fr;gap:12px}.answer-controls .answer-button{font-size:22px;min-height:68px;letter-spacing:.02em}.answer-controls .answer-button:disabled{cursor:default;opacity:.4}.play-hint{margin-top:8px}.feedback h2{font-size:clamp(24px,5vw,38px)}
@media(max-width:699px){.play{padding-top:8px}.stage{width:min(100%,calc((100svh - 274px)*.5625));max-height:none}.time-panel{margin:10px 0}.answer-controls .answer-button{font-size:22px;min-height:64px}.time-label{font-size:13px}.cover{padding:12px}}
@media(max-height:540px) and (orientation:landscape){.stage{width:150px}.play{max-width:450px}}
/* 部屋への突入演出。ゲーム中の映像は常に元の比率で表示。 */
.tutorial{position:absolute;inset:0;z-index:3;background:#090a09}.tutorial img{width:100%;height:100%;object-fit:contain}.tutorial p{position:absolute;bottom:12px;left:8px;right:8px;margin:0;padding:10px 4px;background:#101110de;text-align:center;font-size:14px;letter-spacing:.04em}
.door{position:absolute;inset:0;z-index:8;perspective:700px;overflow:hidden}.door-leaf{position:absolute;top:0;width:50.5%;height:100%;background:linear-gradient(90deg,#171b18,#333a30);border:2px solid #68725a;box-shadow:inset 0 0 0 9px #1e241e;backface-visibility:hidden}.door-leaf.left{left:0;transform-origin:left;animation:door-left var(--door-ms) cubic-bezier(.4,0,.1,1) both}.door-leaf.right{right:0;transform-origin:right;animation:door-right var(--door-ms) cubic-bezier(.4,0,.1,1) both}.door span{position:absolute;top:38%;left:0;right:0;text-align:center;letter-spacing:.16em;font-size:14px;color:var(--accent);animation:door-label var(--door-ms) ease both}
@keyframes door-left{0%,12%{transform:rotateY(0)}100%{transform:rotateY(-105deg)}}@keyframes door-right{0%,12%{transform:rotateY(0)}100%{transform:rotateY(105deg)}}@keyframes door-label{0%,12%{opacity:1}45%,100%{opacity:0}}
.rush{position:absolute;inset:0;z-index:3;overflow:hidden;pointer-events:none}.rush canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform-origin:50% 44%;animation:room-through var(--rush-ms) cubic-bezier(.7,0,.9,.4) both}.is-rushing .videos{animation:room-arrival var(--rush-ms) cubic-bezier(.1,.7,.1,1) both}.speed-lines{position:absolute;inset:-70%;background:repeating-conic-gradient(from 4deg at 50% 50%,transparent 0deg 13deg,#dce9b68c 13.1deg 13.6deg,transparent 13.7deg 25deg);mask-image:radial-gradient(ellipse,transparent 0% 22%,#000 55%);animation:velocity var(--rush-ms) ease-out both}.room-frame{position:absolute;inset:20%;border:2px solid #d7eb8c77;box-shadow:0 0 30px #d7eb8c33;animation:tunnel-frame var(--rush-ms) ease-in both}
@keyframes room-through{0%{transform:scale(1);opacity:1;filter:blur(0)}60%{opacity:.85}100%{transform:scale(5);opacity:0;filter:blur(10px)}}@keyframes room-arrival{0%{transform:scale(.65);filter:brightness(.35) blur(4px)}100%{transform:scale(1);filter:brightness(1) blur(0)}}@keyframes velocity{0%{opacity:0;transform:scale(.55)}25%{opacity:.8}100%{opacity:0;transform:scale(2)}}@keyframes tunnel-frame{0%{transform:scale(.2);opacity:0}20%{opacity:1}100%{transform:scale(5);opacity:0}}
.explosion{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:hidden}.blast-core{position:absolute;inset:-15%;background:radial-gradient(circle at 50% 48%,#fff3b7 0%,#ffc14b 14%,#f46b27aa 32%,transparent 63%);animation:blast var(--blast-ms) ease-out both}.blast-ring{position:absolute;left:50%;top:48%;width:90px;height:90px;margin:-45px;border:9px solid #ffd080;border-radius:50%;box-shadow:0 0 25px #ff8d3a;animation:blast-ring var(--blast-ms) ease-out both}.sparks{position:absolute;inset:-50%;background:repeating-conic-gradient(transparent 0deg 19deg,#ffa349 20deg 21deg,transparent 22deg 36deg);mask-image:radial-gradient(transparent 0% 15%,#000 18% 30%,transparent 43%);animation:sparks var(--blast-ms) ease-out both}.is-exploding .videos{animation:impact var(--blast-ms) ease-out both}
@keyframes blast{0%{opacity:0;transform:scale(.15)}18%{opacity:.95}100%{opacity:0;transform:scale(1.5)}}@keyframes blast-ring{0%{opacity:1;transform:scale(.15)}100%{opacity:0;transform:scale(7)}}@keyframes sparks{0%{opacity:1;transform:scale(.3) rotate(0)}100%{opacity:0;transform:scale(2.2) rotate(15deg)}}@keyframes impact{0%,100%{transform:translate(0)}15%{transform:translate(-8px,5px)}30%{transform:translate(7px,-4px)}48%{transform:translate(-5px,2px)}65%{transform:translate(3px,-2px)}}
.stage .feedback{z-index:6;background:transparent;pointer-events:none;text-shadow:0 2px 16px #000,0 0 5px #000}.stage .feedback span{font-size:58px}.stage .feedback h2{font-size:30px}.stage .feedback{justify-content:flex-start;padding-top:24px}.feedback.wrong h2{color:#ffe7ce}
@media(prefers-reduced-motion:reduce){.door-leaf{display:none}.rush canvas,.room-frame,.speed-lines,.blast-core,.blast-ring,.sparks{display:none}.stage .feedback{background:#101110a6}}
/* 連続コマの爆発と、写真テクスチャを持つ壁の破断。 */
.rush .effect-canvas,.explosion .effect-canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;animation:none;transform:none;filter:none;opacity:1}.is-rushing .videos{animation:breach-arrival var(--rush-ms) ease-out both}.is-rushing{animation:wall-impact var(--rush-ms) linear both}.is-exploding .videos{animation:blast-impact var(--blast-ms) ease-out both}
@keyframes breach-arrival{0%,36%{transform:scale(.74);filter:brightness(.6)}100%{transform:scale(1);filter:brightness(1)}}@keyframes wall-impact{0%,34%,54%,100%{transform:translate(0)}37%{transform:translate(-6px,4px)}41%{transform:translate(5px,-3px)}46%{transform:translate(-3px,2px)}}@keyframes blast-impact{0%,100%{transform:translate(0)}8%{transform:translate(-7px,5px)}16%{transform:translate(6px,-4px)}25%{transform:translate(-4px,3px)}36%{transform:translate(2px,-1px)}50%{transform:translate(0)}}
@media(prefers-reduced-motion:reduce){.rush .effect-canvas,.explosion .effect-canvas{display:block}}
.sound-button{background:transparent;border:1px solid #626c50;border-radius:4px;color:var(--fg);min-height:44px;padding:8px 15px;font-size:14px;letter-spacing:.04em}.sound-button:hover{background:#252b20}.tutorial-next{max-width:none;margin:12px 0 0}.sound-button[aria-pressed="false"]{color:var(--muted)}