:root{color-scheme:dark;--ink:#ecf5ff;--muted:#92adc0;--cyan:#62deff;--panel:rgba(9,21,32,.92)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#06101a;font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;color:var(--ink)}button{font:inherit;cursor:pointer}button:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}button:hover{background:#274654}button:active{transform:translateY(1px)}#game,#stage{width:100%;height:100%;position:relative}canvas{display:block;touch-action:none}.vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(2,8,16,.5),transparent 25%,transparent 66%,rgba(2,8,16,.75))}.topbar{position:absolute;top:28px;left:32px;right:32px;display:flex;justify-content:space-between;pointer-events:none}.eyebrow{font:10px/1.4 system-ui,sans-serif;letter-spacing:.2em;color:#80a9c2;margin:0}h1{font:400 35px/1 system-ui,sans-serif;letter-spacing:.14em;margin:9px 0 0}.subtitle{font-size:12px;letter-spacing:.12em;color:#b5cbd9;margin:10px 0 0}.system{text-align:right;font-size:11px;letter-spacing:.04em;padding-top:4px}.system small{display:block;color:var(--muted);margin-top:8px;font-size:10px}.online{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--cyan);margin-right:8px}.mission{position:absolute;top:156px;left:32px;width:260px;pointer-events:none}.mission p{font-size:13px;line-height:1.9;margin:10px 0}.mission small{font-size:10px;color:var(--muted)}.mission-progress{height:2px;background:#294253;margin:14px 0 9px}.mission-progress i{display:block;height:100%;width:0;background:var(--cyan);transition:width .5s}.reticle{position:absolute;left:52%;top:38%;width:34px;height:34px;transform:translate(-50%,-50%);pointer-events:none;opacity:.7}.reticle i{position:absolute;width:7px;height:7px;border-color:#c3e3f3;border-style:solid}.reticle i:nth-child(1){left:0;top:0;border-width:1px 0 0 1px}.reticle i:nth-child(2){right:0;top:0;border-width:1px 1px 0 0}.reticle i:nth-child(3){bottom:0;left:0;border-width:0 0 1px 1px}.reticle i:nth-child(4){right:0;bottom:0;border-width:0 1px 1px 0}.reticle span{position:absolute;left:16px;top:16px;width:2px;height:2px;background:#d5f5ff}.reticle.locked{opacity:0}.aim-hint{position:absolute;top:calc(38% + 36px);left:52%;transform:translateX(-50%);font-size:11px;color:#b9d5e5;white-space:nowrap;pointer-events:none}.target-box{position:absolute;pointer-events:none;border:1px solid rgba(98,222,255,.12);background:rgba(37,161,201,.08);z-index:2}.target-box i{position:absolute;width:13px;height:13px;border-color:var(--cyan);border-style:solid}.target-box i:nth-child(1){left:-1px;top:-1px;border-width:2px 0 0 2px}.target-box i:nth-child(2){right:-1px;top:-1px;border-width:2px 2px 0 0}.target-box i:nth-child(3){left:-1px;bottom:-1px;border-width:0 0 2px 2px}.target-box i:nth-child(4){right:-1px;bottom:-1px;border-width:0 2px 2px 0}.target-box span{position:absolute;bottom:calc(100% + 8px);left:0;font-size:10px;color:var(--cyan);white-space:nowrap}.target-box b{position:absolute;top:calc(100% + 6px);right:0;font:11px system-ui;color:var(--cyan)}.scan-line{position:absolute;left:0;right:0;top:0;height:1px;background:var(--cyan);animation:scan 1.15s linear infinite}.target-box.complete .scan-line{display:none}.target-box.complete{background:rgba(98,222,255,.04)}@keyframes scan{from{top:0}to{top:100%}}.connector{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}.connector path{fill:none;stroke:rgba(98,222,255,.6);stroke-width:1}.profile{position:absolute;right:32px;top:23%;width:320px;background:var(--panel);border:1px solid #335c72;padding:19px 20px 17px;z-index:3;box-shadow:0 12px 35px rgba(0,0,0,.2);animation:appear .25s ease-out}.profile[hidden]{display:none}@keyframes appear{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}.profile-top{display:flex;justify-content:space-between;gap:10px;color:var(--cyan);font:9px/1.5 system-ui;letter-spacing:.12em}.identity{display:flex;gap:15px;align-items:center;margin:18px 0}.identity img{width:76px;height:88px;object-fit:cover;background:#142b3b;border:1px solid #35566b}.identity span{font-size:10px;color:var(--muted)}.identity h2{font-size:21px;letter-spacing:.08em;font-weight:500;margin:7px 0}.identity p{font-size:11px;color:#b5cede;margin:0}.profile dl{font-size:12px;line-height:1.8;margin:0}.profile dl>div{padding:12px 0;border-top:1px solid #244252}.profile dt{font-size:9px;letter-spacing:.1em;color:var(--muted);margin-bottom:4px}.profile dd{margin:0}.record-status{font-size:11px;padding:10px;background:#103747;color:#9bebff;line-height:1.6}.profile.alert .record-status{background:#542d31;color:#ffc3b7}.profile.alert{border-color:#aa685e}.profile-note{font-size:9px;color:#7996aa;line-height:1.7;margin:12px 0 0}.controls{position:absolute;left:32px;bottom:26px;font-size:11px;color:#bcd0dc}.controls>div{display:flex;align-items:center;gap:5px;flex-wrap:wrap}.controls span{margin-right:10px}.controls p{margin:10px 0 0;font-size:10px;color:#92aebe}kbd{font:10px/1.4 system-ui;border:1px solid #3f596b;padding:2px 5px;border-radius:2px;color:#d5e8f5}.actions{position:absolute;right:32px;bottom:29px;display:flex;gap:8px}.actions button{background:rgba(13,29,41,.9);color:#cde5f1;border:1px solid #365567;border-radius:3px;padding:10px 13px;font-size:10px}.loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:13px;background:#0a1c29;padding:17px 22px;z-index:6;white-space:nowrap}.toast{position:absolute;top:106px;left:50%;transform:translateX(-50%);background:#142f40;border:1px solid #426379;padding:11px 20px;font-size:12px;z-index:5}.touch-controls{display:none}body.error .loading{color:#ffd0c7}body.scanning .aim-hint{opacity:0}@media(max-width:900px){.mission{top:139px;width:190px}.profile{width:270px;right:18px;padding:15px;top:22%}.actions{right:18px}.topbar{left:22px;right:22px}.controls{left:22px;max-width:50%}.mission{left:22px}.identity img{width:62px;height:75px}.identity h2{font-size:18px}}@media(max-width:640px){.topbar{top:20px;left:18px;right:18px}h1{font-size:27px}.system{display:none}.subtitle{font-size:10px}.mission{top:121px;left:18px;width:140px}.mission p{font-size:10px}.mission-progress{margin:8px 0}.profile{top:auto;bottom:156px;right:10px;width:200px;padding:10px}.profile dl>div{padding:7px 0}.profile dl{font-size:10px}.identity{margin:10px 0;gap:10px}.identity img{width:40px;height:48px}.identity h2{font-size:16px;margin:4px 0}.profile-note{font-size:8px;margin:8px 0 0}.profile-top{font-size:8px}.record-status{font-size:9px;padding:7px}.controls{display:none}.actions{bottom:18px;right:12px;flex-direction:column;gap:5px}.actions button{padding:8px 10px;font-size:9px}.touch-controls{display:block;position:absolute;bottom:21px;left:17px;text-align:center}.touch-controls button{width:37px;height:37px;margin:2px;border:1px solid #36556a;background:rgba(12,30,45,.9);color:#bfeaff;border-radius:4px}.aim-hint{font-size:9px;white-space:normal;width:180px;text-align:center}.target-box span{font-size:8px}.eyebrow{font-size:8px}.toast{top:85px;width:80%;font-size:10px}}

/* 捜索・追跡・逮捕。手錠は画面タッチとキーボードの両方に対応。 */
[hidden]{display:none!important}.actions{flex-wrap:wrap;max-width:520px;justify-content:flex-end}
.pursuit-hud{position:absolute;left:32px;bottom:184px;width:244px;background:rgba(10,24,35,.92);padding:14px 16px;pointer-events:none;border:1px solid #496372;z-index:3}
.pursuit-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.pursuit-heading strong{font-size:13px;font-weight:500}.pursuit-heading span{font:12px system-ui;color:#d8e5ed}.pursuit-hud p{font-size:10px;color:#b0c5d2;margin:12px 0 8px}.awareness-track{height:4px;background:#314553}.awareness-track i{display:block;height:100%;width:0;background:#e2b979}.pursuit-hud[data-state=fleeing] .awareness-track i{background:#ec8177}.pursuit-hud[data-state=arrested] .awareness-track i,.pursuit-hud[data-state=cuffing] .awareness-track i{background:#75d2b9}
.cuff-control{position:absolute;left:32px;bottom:87px;width:244px;z-index:4}.cuff-control>span{display:block;font-size:10px;color:#bad0de;margin-top:8px}.cuff-control button{width:100%;min-height:49px;display:flex;align-items:center;justify-content:center;gap:14px;background:#173e4e;border:1px solid #78c9df;border-radius:3px;color:#dcf4fa}.cuff-control button svg{width:44px;height:26px}.cuff-control button span{font-size:14px}.cuff-control button:disabled{opacity:.42;cursor:default;background:#122735;border-color:#4b6474}.cuff-control button:disabled:active{transform:none}.cuff-control button:enabled{background:#24594f;border-color:#95dec6;color:#f0fffa}
.suspect-marker{position:absolute;z-index:2;transform:translate(-50%,-50%);pointer-events:none;color:#ffc3ad}.suspect-marker span{font-size:11px;padding:5px 9px;background:rgba(74,30,26,.88);border:1px solid #c78877;white-space:nowrap}.suspect-marker:after{content:'';display:block;position:absolute;top:calc(100% + 7px);left:50%;width:8px;height:8px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:translateX(-50%) rotate(45deg)}.suspect-marker.captured{color:#c1f6df}.suspect-marker.captured span{background:#1c443c;border-color:#71bea5}.suspect-marker.offscreen:after{display:none}
.case-result{position:absolute;top:21%;left:50%;transform:translateX(-50%);width:min(370px,88vw);z-index:5;text-align:center;padding:25px 30px;background:rgba(11,37,39,.97);border:1px solid #78c2ab}.case-result h2{font-weight:500;font-size:30px;margin:12px 0;color:#dbffef}.case-result>p:not(.eyebrow){font-size:14px;margin:15px 0;line-height:1.8}.case-result small{display:block;color:#a1cabe;font-size:11px;line-height:1.8}.case-result button{margin-top:22px;padding:11px 25px;border:1px solid #85baa9;background:#244c44;color:#edfff8;border-radius:3px;font-size:12px}.case-result.escaped{background:rgba(45,29,30,.97);border-color:#b78b7c}.case-result.escaped h2{font-size:24px;color:#f3d1bf}.case-result.escaped small{color:#ccb3aa}
body.pursuing .mission p{color:#ffd1bb}
@media(max-width:900px){.pursuit-hud,.cuff-control{left:22px;width:200px}.actions{max-width:380px;bottom:26px}}
@media(max-width:640px){.pursuit-hud{top:231px;bottom:auto;left:18px;width:141px;padding:10px}.pursuit-heading{gap:5px}.pursuit-heading strong{font-size:11px}.pursuit-heading span{font-size:10px}.pursuit-hud p{font-size:9px}.cuff-control{left:18px;bottom:145px;width:141px}.cuff-control button{min-height:45px;gap:7px}.cuff-control button svg{width:35px}.cuff-control button kbd{display:none}.cuff-control>span{font-size:9px;line-height:1.7}.actions{bottom:18px;right:12px;max-width:112px;flex-direction:column;flex-wrap:nowrap}.actions button{min-height:31px}.has-target .profile{bottom:215px}.case-result{top:15%;padding:20px}.case-result h2{font-size:25px}.suspect-marker span{font-size:9px}.mission{width:160px}}

/* 心の声はクロコの頭に追従。丸い小さな点で考えている表情を示す。 */
.mission-title{font-size:23px;font-weight:600;line-height:1.4;margin:0 0 10px;color:#f3f2df;letter-spacing:.05em}
.thought-bubble{position:absolute;width:180px;padding:8px 11px;background:rgba(255,252,239,.92);color:#38372f;border:1.5px solid #635d50;border-radius:24px;transform:translateY(-100%);font-size:11px;line-height:1.5;text-align:center;pointer-events:none;z-index:4}
.thought-bubble:after,.thought-bubble:before{content:'';position:absolute;border:1.3px solid #635d50;background:#fffaea;border-radius:50%;pointer-events:none}
.thought-bubble:after{width:9px;height:9px;bottom:-13px;left:calc(var(--thought-tail,190px) - 9px)}
.thought-bubble:before{width:4px;height:4px;bottom:-24px;left:calc(var(--thought-tail,190px) - 1px)}
.cuff-control button:enabled{background:#203745;border-color:#718b9a;color:#e4eef5}.cuff-control button.ready:enabled{background:#24594f;border-color:#95dec6;color:#f0fffa}
@media(max-width:640px){.mission-title{font-size:20px}.thought-bubble{width:150px;padding:7px 10px;font-size:10px;line-height:1.5}.mission{width:165px}.pursuit-hud{top:248px}.cuff-control button{gap:6px}.cuff-control button kbd{display:inline-block;font-size:8px;padding:1px 3px}.cuff-control button svg{width:29px}.cuff-control button span{font-size:12px}}
.thought-bubble{text-wrap:balance;line-break:strict}
.subtitle{max-width:410px;line-height:1.7;letter-spacing:.02em}
/* 捜査結果は右へ寄せて、頭上の心の声をふさがない。 */
.case-result{left:auto;right:32px;transform:none;width:320px;top:23%}
@media(max-width:900px){.case-result{right:18px;width:270px}}
@media(max-width:640px){.case-result{right:10px;top:20%;width:200px;padding:15px}.case-result h2{font-size:21px}.case-result>p:not(.eyebrow){font-size:12px}.case-result small{font-size:9px}.case-result button{font-size:10px;padding:9px 14px;margin-top:15px}}
