*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;width:100%;height:100%;background:#080a0c;overflow:hidden;overscroll-behavior:none}body{color:#d9d6d0;font-family:"Yu Mincho","Hiragino Mincho ProN",serif;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}#game{width:100%;height:100%;height:100dvh;position:relative;overflow:hidden;touch-action:none;outline:none;cursor:grab}.void{position:absolute;inset:0;background:radial-gradient(ellipse at 45% 38%,#353b3a 0,#202729 23%,#111719 45%,#080b0d 78%)}.void:after{content:"";position:absolute;inset:0;background:linear-gradient(112deg,#0c1014 8%,transparent 30%,transparent 68%,#080b0d 80%);opacity:.85}#hands{position:absolute;height:110%;width:100%;left:0;top:-12%;filter:drop-shadow(12px 20px 18px #0009);opacity:.88;transition:opacity 2s;transform-origin:50% 48%}#held,#holder{transform-box:fill-box;transform-origin:center;transition:transform 1.6s cubic-bezier(.6,0,1,.4),opacity 1.8s}body.holding #hands{animation:tremble 5s ease-in-out infinite}body.holding #game{cursor:grabbing}body.falling #held{transform:translate(55px,900px) rotate(12deg);opacity:0}body.falling #holder{transform:translate(-70px,-80px) rotate(-8deg)}body.ended #hands{opacity:0}body.ended .void{transition:opacity 3s;opacity:0}.grain{position:absolute;inset:0;pointer-events:none;opacity:.13;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23n)' opacity='.4' d='M0 0h160v160H0z'/%3E%3C/svg%3E")}#dialogue{position:absolute;bottom:max(6vh,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(90%,620px);min-height:132px;padding:24px 25px;background:linear-gradient(130deg,#111619f2,#080c0ee8);border:1px solid #77797366;box-shadow:0 12px 55px #0008;transition:opacity .65s}#line{font-size:clamp(16px,2.4vw,19px);line-height:1.95;letter-spacing:.065em;margin:0;white-space:pre-wrap;overflow-wrap:anywhere}#hint{font-family:system-ui,sans-serif;font-size:11px;letter-spacing:.18em;color:#8b928f;margin:18px 0 0;text-align:center}#hint:empty{display:none}body.ended #dialogue{opacity:0;pointer-events:none}@keyframes tremble{0%,100%{transform:rotate(-.25deg) translate(0,0)}30%{transform:rotate(.3deg) translate(1px,3px)}65%{transform:rotate(-.15deg) translate(-1px,1px)}}@media(min-width:800px){#hands{max-width:690px;left:50%;margin-left:-345px}}@media(max-height:550px){#dialogue{bottom:20px;padding:15px 20px;min-height:90px;width:min(88%,700px)}#line{font-size:15px;line-height:1.6}#hands{top:-25%;height:135%}}@media(prefers-reduced-motion:reduce){body.holding #hands{animation:none}}
/* Photographic scene replaces the initial illustrated hands. */
#hands{inset:0;top:0;left:0;margin:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 43%;opacity:.95;filter:brightness(.8);transition:opacity .7s,filter .7s,transform 1.3s;pointer-events:none}body.holding #hands{animation:photo-breathe 5s ease-in-out infinite}body.falling #hands{opacity:0;transform:scale(1.09) translateY(20px);filter:brightness(.1) blur(8px)}#dialogue{z-index:2}#invasion{position:absolute;inset:0;z-index:5;overflow:hidden;pointer-events:none}#invasion span{position:absolute;white-space:nowrap;line-height:1.1;font-weight:600;text-shadow:0 2px 7px #000;animation:ink-in .3s ease-out both}body.ended #invasion{display:none}@keyframes ink-in{from{opacity:0}to{}}@keyframes photo-breathe{0%,100%{transform:scale(1.02) translate(0,0)}50%{transform:scale(1.025) translate(1px,2px)}}@media(min-aspect-ratio:1/1){#hands{object-fit:contain;background:#080b0d}}@media(prefers-reduced-motion:reduce){body.holding #hands,#invasion span{animation:none}}

/* Stable dialogue geometry; text never changes the panel dimensions. */
#dialogue{height:196px;min-height:196px;max-height:196px;padding:20px 22px;overflow:hidden}
#line{font-size:16px;line-height:1.85;letter-spacing:.04em}
#hint{position:absolute;bottom:18px;left:16px;right:16px;margin:0}
@media(max-height:550px){#dialogue{height:154px;min-height:154px;max-height:154px;padding:14px 18px;bottom:16px}#line{font-size:15px;line-height:1.55}#hint{bottom:12px}}
/* Two matched photographic frames, both preloaded by the document. */
#released-hands{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 43%;opacity:0;filter:brightness(.8);pointer-events:none;transform:scale(1.02)}
body.falling #hands{opacity:0;transition:none;animation:none}
body.falling #released-hands{opacity:1;animation:release-to-dark 2.4s ease-in forwards}
body.ended #released-hands{opacity:0}
@keyframes release-to-dark{0%,35%{opacity:1;filter:brightness(.8);transform:scale(1.02)}100%{opacity:0;filter:brightness(.1);transform:scale(1.045)}}
@media(min-aspect-ratio:1/1){#released-hands{object-fit:contain;background:#080b0d}}
@media(prefers-reduced-motion:reduce){body.falling #released-hands{animation:release-to-dark-still 2.4s ease-in forwards}@keyframes release-to-dark-still{0%,35%{opacity:1}100%{opacity:0}}}
#title-screen[hidden]{display:none}#title-screen{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#070b0edb;padding:32px 24px;overflow-y:auto;touch-action:pan-y;text-align:center}#title-screen h1{font-size:clamp(26px,6vw,38px);font-weight:400;letter-spacing:.12em;margin:0 0 48px}#start-button{font:inherit;font-size:18px;letter-spacing:.2em;padding:16px 48px;color:#eee8dd;border:1px solid #777d75;background:#161d20;cursor:pointer;touch-action:manipulation}#guidelines{width:min(430px,100%);margin-top:30px;text-align:left;font-family:system-ui,sans-serif;font-size:12px;line-height:1.85;color:#a8afac}#guidelines summary{text-align:center;cursor:pointer;list-style-position:inside;padding:12px}#guidelines div{padding:4px 8px}#guidelines p{margin:12px 0}body.title-screen #dialogue{visibility:hidden}#start-button:focus-visible,#guidelines summary:focus-visible{outline:2px solid #c4c7bf;outline-offset:4px}
body.title-screen #game,body.ended #game{touch-action:pan-y}@media(max-height:550px){#title-screen{justify-content:flex-start}#title-screen h1{margin-bottom:24px}}

/* サイト共通の注意書き */
.title-note{font-family:system-ui,sans-serif;font-size:12px;line-height:1.8;letter-spacing:.1em;color:#a8afac;margin:0}
#start-button+.title-note{margin-top:24px}

/* クリア画面（監視カメラなど最近のゲームと同じ並び） */
#result[hidden]{display:none}
#result{position:absolute;inset:0;z-index:8;display:flex;overflow-y:auto;touch-action:pan-y;text-align:center;background:#080a0c;color:#d9d6d0;padding:calc(env(safe-area-inset-top,0px) + 24px) 16px calc(env(safe-area-inset-bottom,0px) + 40px)}
.end-in{margin:auto;width:100%;max-width:430px}
#clear-title{margin:0;font-size:clamp(28px,8.5vw,48px);font-weight:400;letter-spacing:.2em;white-space:nowrap;outline:none}
#end2{margin:24px 0 0;font-size:16px;line-height:1.9;letter-spacing:.12em;opacity:0;transition:opacity 2s}
#end2.on{opacity:.9}
.more{margin-top:28px;opacity:0;visibility:hidden;transition:opacity 1.5s}
.more.on{opacity:1;visibility:visible}
.time{margin:0;font-size:15px;letter-spacing:.2em;font-variant-numeric:tabular-nums}
.ed-title{margin:18px 0 8px;font-size:13px;letter-spacing:.15em;opacity:.75}
.eds{list-style:none;margin:0;padding:0;font-size:13px;line-height:1.9;letter-spacing:.08em;opacity:.55}
.eds .got{opacity:.8}
.eds .now{opacity:1;color:#fff}
.btn{font:inherit;font-size:14px;letter-spacing:.3em;color:#d9d6d0;background:#171b1d;border:1px solid #686d6880;padding:10px 22px;margin-top:18px;cursor:pointer;display:inline-block;text-decoration:none;touch-action:manipulation}
.btn+.btn{margin-left:12px}
.btn:focus-visible{outline:2px solid #c4c7bf;outline-offset:3px}
.support{margin:0 auto;max-width:430px;text-align:center;font-family:system-ui,sans-serif;font-size:13px}
.support summary{display:inline-block;margin-top:18px;padding:10px 22px;border:1px solid #e5484d;color:#e5484d;font-size:14px;font-weight:600;letter-spacing:.2em;cursor:pointer;list-style:none}
.support summary::-webkit-details-marker{display:none}
.support summary:hover,.support[open] summary{background:rgba(229,72,77,.12)}
.support p{text-align:left;white-space:pre-line;margin:14px 0 0;padding:16px 18px;background:#111619;border:1px solid #2a3033;line-height:1.9;letter-spacing:.03em}
.support a{color:inherit}
.shareico{display:inline-block;width:1.35em;height:1.35em;vertical-align:-.3em;margin:0 1px;color:#fff}
.thanks{white-space:pre-line;margin:26px 0 0;font-size:12px;line-height:1.9;letter-spacing:.04em;opacity:.85}
.thanks a,.credit a{color:inherit}
.credit{margin:12px 0 0;font-size:12px;letter-spacing:.04em;opacity:.85}
@media(prefers-reduced-motion:reduce){#end2,.more{transition:none}}