/* 紙の「ゲシュタルトおじさん」を黒を主役にしたWeb版へ。 */
:root{--bg:#111111;--fg:#faf8ee;--muted:#b5b3ab;--accent:#efca08;font-family:'Arial Black','Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif}
.shell{max-width:1120px;padding:0 40px}.masthead{height:76px;border-bottom:2px solid #45443f;letter-spacing:0;font-weight:900;font-size:16px}.wordmark{gap:12px}.web-badge{font-size:12px;letter-spacing:.06em;border:1px solid var(--accent);padding:4px 7px;color:var(--accent);white-space:nowrap}
.sound-button{border:1px solid #77766e;border-radius:0;font-weight:700}.sound-button:hover{background:#2d2c27}
.intro{grid-template-columns:1.15fr 1fr;gap:70px;padding:42px 24px 54px}.intro .eyebrow{font-size:clamp(19px,2.3vw,27px);font-weight:900;letter-spacing:.03em;color:var(--accent);margin:0 0 18px}
.brand-title{margin:0 0 18px;line-height:1}.brand-title img{display:block;width:100%;max-width:440px;height:auto;filter:grayscale(1) invert(1) contrast(8);mix-blend-mode:screen}
.instruction{font-size:19px;font-weight:800;line-height:1.7;color:var(--fg);margin:16px 0 24px}.rule-note{border:1px solid #626057;max-width:400px;display:flex;align-items:stretch}.rule-note>span{writing-mode:vertical-rl;background:#f4f1e6;color:#111;padding:12px 9px;font-size:14px;font-weight:900;letter-spacing:.12em}.rule-note p{margin:0;padding:12px 16px;line-height:1.8;font-size:15px;font-weight:800}.small,.intro .small{font-size:14px;line-height:1.7}.primary{border-radius:0;background:var(--accent);color:#111;font-size:20px;font-weight:900;max-width:400px;border:2px solid var(--accent);box-shadow:4px 4px 0 #776409;min-height:64px}.primary:hover{background:#ffe043}.primary:active{transform:translate(2px,2px);box-shadow:2px 2px 0 #776409}
.portrait{width:100%;max-width:340px;transform:rotate(3deg);background:#f4f1e6;border:8px solid #f4f1e6;border-radius:8px;box-shadow:11px 12px 0 #000;margin:0;align-self:center}.portrait img{filter:none;width:100%;max-height:none;object-fit:contain}.portrait-label{position:static;display:block;color:#111;font-size:16px;letter-spacing:.02em;text-shadow:none;font-weight:900;padding:14px 3px 7px}.photo-tag{position:absolute;top:-28px;left:-22px;background:var(--accent);color:#111;z-index:1;padding:9px 14px;font-size:16px;font-weight:900;transform:rotate(-7deg)}
footer{border-top:2px solid #45443f;font-size:12px;color:var(--muted);font-weight:700;letter-spacing:0}.play{max-width:450px}.round-head{font-size:14px;color:var(--accent);font-weight:900;letter-spacing:.02em}#counter{font-weight:900}.progress i{height:4px;background:#3e3d37}.progress i.done{background:#99841e}.stage{background:#000;outline:2px solid #ddd9cb;outline-offset:2px}.videos video{background:#000}.time-label{font-size:14px;font-weight:700}.time-gauge{height:9px;border-radius:0;background:#3e3d37}.time-gauge.urgent #timeFill{background:#efca08}.answer-controls{gap:12px}.answer-controls .answer-button{border-radius:0;font-size:24px;font-weight:900;min-height:68px;border:2px solid var(--accent)}.yes{color:#111;background:var(--accent)}.no{color:var(--fg);background:#191919;border-color:#eeebdf!important}.play-hint{font-size:14px}.tutorial p{background:#111e;color:var(--fg);font-weight:900}.door-leaf{background:linear-gradient(90deg,#171717,#333);border-color:#77715b;box-shadow:inset 0 0 0 9px #202020}.door span{font-size:18px;font-weight:900;letter-spacing:.04em}.feedback h2{font-weight:900}.feedback.wrong span,.record span.miss{color:#fff2dc}.record span.miss{border-color:#827c70}.result .eyebrow{color:var(--accent);font-weight:900;font-size:16px}.result h1{font-weight:900;font-size:clamp(25px,4vw,38px)}.score strong{font-weight:900}.record span{width:26px;height:30px;font-weight:900}.cover{background:#111}.stage .feedback{background:transparent}
@media(max-width:699px){.shell{padding:0 18px}.masthead{height:64px;font-size:14px}.wordmark{gap:7px}.web-badge{font-size:12px;padding:3px 5px}.sound-button{padding:8px 10px}.intro{display:grid;grid-template-columns:minmax(0,1fr) 110px;gap:18px;padding:30px 0;min-height:0}.intro-copy{min-width:0}.intro .eyebrow{font-size:18px;line-height:1.7;margin:0 0 14px}.intro .brand-title{margin:0 0 18px;font-size:inherit}.brand-title img{max-width:340px}.intro .instruction{font-size:16px;margin:14px 0 18px;line-height:1.8}.rule-note p{padding:10px;font-size:14px}.rule-note>span{padding:10px 6px}.intro .primary{max-width:none;margin-top:18px;font-size:18px;padding:16px}.portrait{position:relative;top:auto;right:auto;opacity:1;width:100%;border-width:4px;align-self:start;margin-top:44px;transform:rotate(4deg);box-shadow:5px 6px 0 #000}.portrait-label{display:block;font-size:12px;padding:8px 0 4px;letter-spacing:0}.photo-tag{font-size:12px;padding:6px;top:-18px;left:-12px;white-space:nowrap}.intro .small{font-size:14px}.play{max-width:450px}.stage{width:min(100%,calc((100svh - 286px)*.5625))}.answer-controls .answer-button{font-size:22px;min-height:64px}.result{padding:40px 0}footer{gap:16px;font-size:12px}.record{gap:6px}}
@media(max-width:380px){.intro{grid-template-columns:minmax(0,1fr) 90px;gap:12px}.intro .eyebrow{font-size:16px}.wordmark{font-size:12px}.rule-note p{font-size:14px;padding:8px}.photo-tag{display:none}}

/* 失敗時は画面全体を暗転し、静けさから一度だけ急接近する。 */
.game-over{position:fixed;inset:0;z-index:100;background:#000;overflow:hidden;display:grid;place-items:center}
.game-over[hidden]{display:none}
.game-over-image{width:min(100vw,70vh);height:100%;display:grid;place-items:center;opacity:0;transform-origin:50% 43%;animation:ominous-approach var(--game-over-ms) linear both}
.game-over-image img{width:100%;max-height:100%;object-fit:contain;filter:brightness(.8) saturate(.35);mask-image:radial-gradient(ellipse 65% 65% at 50% 48%,#000 40%,transparent 85%);-webkit-mask-image:radial-gradient(ellipse 65% 65% at 50% 48%,#000 40%,transparent 85%)}
.game-over-caption{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;margin:0;color:#faf8ee;font-size:clamp(32px,8vw,64px);font-weight:900;letter-spacing:.12em;opacity:0;animation:ominous-caption var(--game-over-ms) linear both}
.game-over-caption span{font-size:18px;font-weight:500;letter-spacing:.2em;color:#aaa}
@keyframes ominous-approach{0%,12%{opacity:0;transform:scale(.92)}25%{opacity:.25;transform:scale(.96)}60%{opacity:.8;transform:scale(1.08)}66%{opacity:1;transform:scale(1.1)}73%{opacity:1;transform:scale(2.7)}77%,100%{opacity:0;transform:scale(2.8)}}
@keyframes ominous-caption{0%,80%{opacity:0}88%,100%{opacity:1}}
@media(prefers-reduced-motion:reduce){.game-over-image{animation:ominous-still var(--game-over-ms) linear both}.game-over-caption{animation:ominous-caption var(--game-over-ms) linear both}}
@keyframes ominous-still{0%,12%,77%,100%{opacity:0}30%,65%{opacity:.65}}

/* タイトルはロゴと写真だけ。画面全体が遊び方への入口。 */
.on-splash .masthead,.on-splash footer{display:none}
.splash{display:grid;place-items:center;min-height:100svh}
.splash-entry{appearance:none;background:none;border:0;color:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(12px,3svh,28px);width:100%;min-height:100svh;padding:24px 0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.splash-entry:focus-visible{outline:2px solid var(--accent);outline-offset:-8px}
.splash-logo{display:block;margin:0;width:min(65vw,290px,36svh)}
.splash-logo img{width:100%;height:auto;display:block}
.splash-portrait{display:block;width:auto;height:min(57svh,540px);max-width:100%;object-fit:contain;box-shadow:0 16px 48px #0005;transition:filter .2s}
.splash-entry:hover .splash-portrait{filter:brightness(1.06)}
.rules-screen{width:100%;max-width:500px;align-self:center;padding:32px 0 36px;align-content:center}
.rules-screen .eyebrow{color:var(--accent);font-size:16px;font-weight:900;margin:0 0 8px}
.rules-screen h1{font-size:clamp(30px,6vw,42px);margin:0 0 24px}
.rules-list{padding-left:1.5em;margin:0 0 30px;display:grid;gap:22px;font-size:18px;line-height:1.75}
.rules-list li{padding-left:6px}.rules-list li::marker{color:var(--accent);font-weight:900}
.rules-list strong{color:var(--fg)}.rules-list small{display:block;margin-top:6px;font-size:14px;line-height:1.8;color:var(--muted)}
.rules-screen .primary{max-width:none}
@media(max-height:650px){.rules-screen{padding:20px 0}.rules-list{gap:14px;margin-bottom:22px}.rules-screen h1{margin-bottom:18px}}

.smile-reaction{position:absolute;inset:0;z-index:2;background:#080908;pointer-events:none;animation:smile-appear var(--smile-ms) ease-out both}
.smile-reaction img{display:block;width:100%;height:100%;object-fit:contain}
@keyframes smile-appear{0%{opacity:0}25%,100%{opacity:1}}
@media(prefers-reduced-motion:reduce){.smile-reaction{animation:none}}

/* 入力→笑顔→突破を0秒・0.5秒・1秒の短いリズムに。 */
.smile-reaction{animation:none}
.smile-reaction img{animation:smile-bounce var(--smile-ms) ease-out both;transform-origin:50% 45%}
.is-celebrating .feedback{animation:answer-stamp 1s linear both}
.is-rushing{animation:rhythm-impact var(--rush-ms) linear both}
.is-rushing .videos{animation:rhythm-arrival var(--rush-ms) linear both}
@keyframes smile-bounce{0%{transform:scale(.98)}35%{transform:scale(1.035)}70%{transform:scale(.995)}100%{transform:scale(1)}}
@keyframes answer-stamp{0%{opacity:1;transform:scale(.8)}8%{opacity:1;transform:scale(1.08)}16%,40%{opacity:1;transform:scale(1)}52%,100%{opacity:0;transform:scale(1)}}
@keyframes rhythm-impact{0%,37%,55%,100%{transform:translateY(0)}39%{transform:translateY(3px)}44%{transform:translateY(-2px)}49%{transform:translateY(1px)}}
@keyframes rhythm-arrival{0%,37.5%{transform:scale(.78);filter:brightness(.75)}72%{transform:scale(.97);filter:brightness(1)}90%,100%{transform:scale(1);filter:brightness(1)}}
@media(prefers-reduced-motion:reduce){.smile-reaction img,.is-celebrating .feedback,.is-rushing,.is-rushing .videos{animation:none;transform:none;filter:none}}

/* 映像の突破を前進カットに接続。末尾のみ次の部屋に短く溶かす。 */
.rush.video-breach #rushFrame{display:block;animation:wall-approach var(--approach-ms) ease-in both}
.rush.video-breach #rushFrame[hidden]{display:none}
#wallBreak{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#080908}
#wallBreak[hidden]{display:none}
@keyframes wall-approach{from{transform:scale(1);opacity:1}to{transform:scale(5);opacity:0}}
@media(prefers-reduced-motion:reduce){.rush.video-breach #rushFrame{animation:none;opacity:0}}

/* 衝突の一瞬だけ強く揺らし、破断の短いタメから加速する。 */
@keyframes rhythm-impact{0%,37%,57%,100%{transform:translate(0)}38.5%{transform:translate(-6px,4px)}42%{transform:translate(5px,-3px)}47%{transform:translate(-3px,2px)}52%{transform:translate(1px,-1px)}}

/* Recording-friendly play view: the portrait gets all remaining vertical space. */
.splash-logo img{filter:grayscale(1) invert(1) contrast(8) sepia(1) saturate(8) !important}
.on-play .shell{padding:6px 12px max(8px,env(safe-area-inset-bottom));max-width:620px;height:100svh;min-height:0}
.on-play .masthead{height:30px;min-height:30px;flex:0 0 30px;padding:0;justify-content:flex-end}
.on-play .wordmark,.on-play footer,.on-play #progress,.on-play #playHint{display:none}
.on-play .sound-button{font-size:11px;min-height:26px;padding:3px 9px}
.on-play .play{padding:0;width:100%;max-width:540px;min-height:0;flex:1;display:flex;flex-direction:column;align-items:center;gap:0}
.on-play .round-head{height:24px;min-height:24px;margin:0;width:100%;font-size:13px;display:flex;align-items:center;justify-content:space-between}
.on-play #counter{margin-left:auto;font-size:13px;letter-spacing:.08em}
.on-play .stage{width:min(100%,calc((100svh - 160px - env(safe-area-inset-bottom))* .5625));aspect-ratio:9/16;flex:none;min-width:0;max-height:none;margin:0 auto;outline:none;border:0;border-radius:3px}
.on-play .time-panel{width:100%;margin:9px 0 9px}
.on-play .time-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.on-play .time-gauge{height:4px;border-radius:2px}
.on-play .answer-controls{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:12px;flex:none}
.on-play .answer-button{position:relative;isolation:isolate;overflow:visible;min-height:64px;height:64px;padding:10px 4px;font-size:clamp(19px,5vw,25px);border-radius:7px;background:#202020!important;color:#fff!important;border:1px solid #767676!important;box-shadow:0 3px 0 #070707;transition:background .05s,transform .05s}
.on-play .answer-button:disabled{opacity:.45}
.on-play .answer-button.is-selected{background:#f6ce25!important;color:#111!important;border-color:#ffe96d!important;opacity:1;animation:choice-hit .2s ease-out both;box-shadow:0 0 22px #f6ce2560}
.on-play .answer-button.is-selected::after{content:'';position:absolute;inset:-2px;border:2px solid #ffe064;border-radius:inherit;pointer-events:none;animation:choice-ring .2s ease-out both}
@keyframes choice-hit{0%{transform:translateY(4px) scale(.95)}60%{transform:translateY(1px) scale(1.025)}100%{transform:translateY(1px) scale(1)}}
@keyframes choice-ring{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.14,1.4)}}
.on-play .round-head .feedback{position:static;inset:auto;width:auto;height:auto;display:flex;flex-direction:row;align-items:center;gap:5px;background:none;backdrop-filter:none;padding:0;color:#f6ce25;animation:none;pointer-events:none;text-shadow:none}
.on-play .round-head .feedback span,.on-play .round-head .feedback h2{font-size:14px;line-height:1;margin:0;font-weight:800}
.on-play .round-head .feedback.wrong{color:#ff776a}
.on-play .tutorial-next{width:100%;min-height:64px;margin:14px 0 0;font-size:22px}
@media(prefers-reduced-motion:reduce){.on-play .answer-button.is-selected{transform:translateY(2px)}.on-play .answer-button.is-selected::after{display:none}}
/* The dedicated 3D scene owns camera motion; avoid doubling it in CSS. */
.stage.is-rushing,.stage.is-rushing .videos{animation:none!important;filter:none!important}
#breachCanvas{width:100%;height:100%;display:block}
/* Unified success timeline: mark → smile fly-through → impact → arrival. */
.success-mark{position:absolute;left:50%;top:76%;z-index:15;pointer-events:none;color:#ffda32;font-family:Arial,sans-serif;font-weight:900;font-size:clamp(76px,22vw,128px);line-height:1;transform:translate(-50%,-50%);text-shadow:0 3px 0 #563d00,0 0 22px #ffd53355;will-change:transform,opacity}
.stage.is-celebrating .smile-reaction{z-index:12;transform-origin:50% 44%;will-change:transform,opacity;background:#000}
.stage.is-celebrating .smile-reaction img{animation:none!important}
.stage.is-rushing .videos{transform:var(--arrival-transform,none)}

/* Graphic success: keep the circle crisp and let the tunnel pass over the portrait. */
.stage.is-celebrating .rush{z-index:13}
.success-mark{font-family:Arial,sans-serif;text-shadow:0 0 18px #ffda3266}

/* The portrait crosses in front of the physical wall before impact. */
.stage.is-celebrating .rush{z-index:11}
/* Game over: the photographs take over the play field, then the entire interface. */
.answer-controls .answer-button.is-wrong{background:#a42426!important;border-color:#ff6666!important;color:#fff!important;position:relative}
.answer-button.is-wrong::after{content:'×';position:absolute;inset:0;display:grid;place-items:center;font-size:58px;background:#a42426e8;color:#fff}
.game-over.takeover{background:transparent;pointer-events:none;display:block}
#takeoverCanvas{display:block;position:absolute;inset:0;width:100%;height:100%}
.takeover-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(82vw,520px);margin:0;filter:drop-shadow(0 6px 0 #000) drop-shadow(0 0 25px #000)}
.takeover-logo img{max-width:none;filter:grayscale(1) invert(1) contrast(8) sepia(1) saturate(8)}
.game-over.is-result{z-index:0}
.game-over.is-result::after{content:'';position:absolute;inset:0;background:#0009}
.game-over.is-result .takeover-logo{display:none}
body.occupied .shell{position:relative;z-index:1;justify-content:center}
body.occupied .masthead,body.occupied footer{display:none}
body.occupied .result{flex:0;width:min(100%,480px);align-self:center;background:#101010ed;border:1px solid #ffffff24;padding:28px 20px;margin:24px 0}
/* A large spoken choice, readable in a recording before its verdict. */
.stage{container-type:inline-size}
.declaration{position:absolute;inset:0;z-index:25;display:flex;align-items:center;justify-content:center;padding:0 3%;pointer-events:none;background:radial-gradient(ellipse at center,#0002,#0006)}
#declarationText{display:flex;flex-direction:column;align-items:center;white-space:nowrap;font-family:'Arial Black','Hiragino Kaku Gothic ProN','Noto Sans JP','Yu Gothic',sans-serif;font-weight:1000;font-style:italic;color:#ffdb28;line-height:1;transform:rotate(-8deg) skewX(-8deg);filter:drop-shadow(4px 6px 0 #000);animation:choice-declare-left .233333s cubic-bezier(.14,.9,.2,1) both}
.shout-kicker{font-size:clamp(32px,15cqw,66px);letter-spacing:.10em;-webkit-text-stroke:1px currentColor;line-height:1.1;margin-bottom:8px}
#declarationChoice{font-size:clamp(68px,33cqw,148px);letter-spacing:-.13em;-webkit-text-stroke:2px currentColor;line-height:1.08;text-shadow:3px 3px 0 #111,-3px -3px 0 #111,3px -3px 0 #111,-3px 3px 0 #111}
.declaration[data-choice="no"] #declarationText{color:#fff;transform:rotate(6deg) skewX(-8deg);animation-name:choice-declare-right}
@keyframes choice-declare-left{0%{opacity:0;transform:translateX(-36%) rotate(-14deg) skewX(-8deg) scale(1.55)}24%{opacity:1;transform:translateX(1%) rotate(-8deg) skewX(-8deg) scale(.97)}45%,100%{opacity:1;transform:rotate(-8deg) skewX(-8deg) scale(1)}}
@keyframes choice-declare-right{0%{opacity:0;transform:translateX(36%) rotate(13deg) skewX(-8deg) scale(1.55)}24%{opacity:1;transform:translateX(-1%) rotate(6deg) skewX(-8deg) scale(.97)}45%,100%{opacity:1;transform:rotate(6deg) skewX(-8deg) scale(1)}}
.is-declaring::after{content:'';position:absolute;inset:0;z-index:24;pointer-events:none;box-shadow:inset 0 0 65px #0006}
.takeover-logo .logo-ghost{display:none;position:absolute;inset:0;width:100%;height:100%}
.takeover-logo.is-glitching{animation:logo-failure .12s steps(2,end) infinite}
.takeover-logo.is-glitching .logo-ghost{display:block}
.takeover-logo .ghost-top{clip-path:inset(12% 0 63%);transform:translateX(17px)}
.takeover-logo .ghost-bottom{clip-path:inset(58% 0 18%);transform:translateX(-12px)}
@keyframes logo-failure{0%{transform:translate(-51%,-50%) skewX(2deg)}50%{transform:translate(-48%,-50%) skewX(-3deg)}100%{transform:translate(-50%,-50%)}}
@media(prefers-reduced-motion:reduce){.declaration span{animation:none;transform:none}.takeover-logo.is-glitching{animation:none}}

/* Big success seal and an explicit, reachable opening action. */
.success-mark{top:46%;width:84%;height:auto;aspect-ratio:1;font-size:inherit;line-height:0;filter:drop-shadow(0 0 15px #ffda3266)}
.success-mark svg{display:block;width:100%;height:100%;overflow:visible}
.splash-entry{cursor:default;gap:clamp(10px,2svh,20px);padding:18px 0}
.splash-logo{width:min(62vw,250px,28svh)}
.splash-portrait{height:min(48svh,440px)}
.splash-start{width:min(82vw,330px);min-height:60px;justify-content:center;gap:22px;font-size:22px;margin-top:4px}
@media(max-height:600px){.splash-entry{padding:12px 0;gap:9px}.splash-logo{width:min(50vw,22svh)}.splash-portrait{height:42svh}.splash-start{min-height:48px;padding:10px 18px;font-size:19px}}
@media(prefers-reduced-motion:reduce){#declarationText{animation:none!important;transform:none!important}}
/* Larger sound hit area and safe areas, with a matching portrait-height budget. */
.on-play .shell{padding:max(6px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
.on-play .masthead{height:44px;min-height:44px;flex-basis:44px;border-bottom:1px solid #353535}
.on-play .sound-button{min-width:72px;min-height:44px;font-size:14px;padding:8px 12px;border-color:#666}
.on-play .stage{width:min(100%,calc((100svh - 168px - max(6px,env(safe-area-inset-top)) - env(safe-area-inset-bottom))* .5625))}
.on-play .answer-button:focus-visible{outline:3px solid #ffe064;outline-offset:3px}
.game-over.takeover{background:#000}
body.occupied .result{background:#101010fa;border-color:#efca0845;box-shadow:0 16px 60px #000a}
.result .small{color:#d0cec5}
.result .record{margin:22px 0 30px}
.result .score{margin:16px 0}
.result .score strong{font-size:clamp(76px,20vw,110px)}
.result .primary{min-height:64px}
@media(max-height:620px){body.occupied .result{padding:20px 16px;margin:14px 0}.result h1{margin:10px 0 18px}.result .record{margin:18px 0 24px}}
/* Resolve the title once, then let the viewer read it in stillness. */
.takeover-logo.is-glitching{animation:none}
.takeover-logo .ghost-top{transform:translateX(9px)}
.takeover-logo .ghost-bottom{transform:translateX(-6px)}
.game-over.takeover::after{content:'';position:absolute;inset:0;background:#0009;opacity:0;pointer-events:none;transition:opacity .32s ease}
.game-over.takeover.is-result::after{opacity:1}

.takeover-logo.is-glitching .ghost-top{transform:translateX(var(--tear-x,16px))}
.takeover-logo.is-glitching .ghost-bottom{transform:translateX(calc(var(--tear-x,16px) * -1))}

.takeover-skip{position:absolute;inset:0;z-index:30;width:100%;height:100%;padding:0;border:0;border-radius:0;background:transparent;cursor:pointer;color:#eee;touch-action:manipulation}
.takeover-skip span{position:absolute;bottom:max(28px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);white-space:nowrap;background:#000b;border:1px solid #777;border-radius:30px;padding:10px 20px;font:600 15px/1.5 sans-serif}
.takeover-skip:focus-visible{outline:2px solid #ffda32;outline-offset:-5px}

.takeover-skip{pointer-events:auto}

/* Swipe recording variant: direction and choice remain visible in recordings. */
.stage.swipe-mode{touch-action:pan-y;user-select:none;-webkit-user-select:none;isolation:isolate}
.swipe-mode .videos{transform-origin:50% 80%;transition:transform .18s ease-out;will-change:transform}
.swipe-mode.swipe-dragging .videos{transition:none;cursor:grabbing}
.swipe-mode:not(.swipe-dragging){cursor:grab}
.swipe-stamp{position:absolute;top:18%;left:50%;transform:translateX(-50%) rotate(-9deg);z-index:2;border:5px solid currentColor;padding:9px 14px;color:#ffda32;background:#111b;font-size:clamp(30px,8vw,52px);font-weight:900;white-space:nowrap;pointer-events:none;text-shadow:2px 2px #000}
.swipe-stamp[data-choice="no"]{color:#fff;transform:translateX(-50%) rotate(9deg)}
.swipe-out-right .videos{animation:swipe-exit-right .24s cubic-bezier(.25,.7,.5,1) forwards!important}
.swipe-out-left .videos{animation:swipe-exit-left .24s cubic-bezier(.25,.7,.5,1) forwards!important}
@keyframes swipe-exit-right{to{transform:translateX(125%) rotate(15deg);opacity:0}}
@keyframes swipe-exit-left{to{transform:translateX(-125%) rotate(-15deg);opacity:0}}
.on-play .answer-button{gap:8px}
@media(prefers-reduced-motion:reduce){.swipe-out-right .videos,.swipe-out-left .videos{animation:none!important;opacity:0}.swipe-stamp,.swipe-stamp[data-choice="no"]{transform:translateX(-50%)}.swipe-mode .videos{transition:none}}

/* Keep actions near the top, above the photograph, in in-app browsers. */
:root{--visible-height:100svh}
@supports(height:100dvh){:root{--visible-height:min(100svh,100dvh)}}
.on-splash .shell{min-height:var(--visible-height)}
.splash{min-height:var(--visible-height);align-items:start}
.splash-entry{min-height:0;justify-content:flex-start;padding:max(16px,env(safe-area-inset-top)) 0 max(40px,env(safe-area-inset-bottom));gap:14px}
.splash-logo{width:min(62vw,250px,25svh)}
.splash-start{margin:0 0 2px;min-height:60px;padding:14px 18px;flex:none}
.splash-portrait{height:min(48svh,440px);max-height:calc(var(--visible-height) - 260px);max-width:100%;object-fit:contain}
.on-play .shell{height:var(--visible-height)}
.on-play .answer-controls{margin:8px 0 4px}
.on-play .tutorial-next{margin:8px 0 4px;max-width:none;flex:none}
.on-play .round-head{flex:none}
.on-play .time-panel{flex:none;margin:4px 0 8px}
.on-play .stage{width:min(100%,max(90px,calc((var(--visible-height) - 210px - max(6px,env(safe-area-inset-top)) - env(safe-area-inset-bottom))* .5625)))}
@media(max-height:500px){
 .splash-entry{gap:10px}
 .splash-logo{width:min(45vw,20svh)}
 .splash-portrait{max-height:calc(var(--visible-height) - 180px)}
}