#detective-root{width:min(520px,calc(100% - 24px));margin:10px auto 20px}#detective-root h1{font-size:27px;margin:8px 0;line-height:1.2}#detective-status{min-height:2.5em;font-size:16px;font-weight:700;margin:8px auto;max-width:470px}.mission-list{display:grid;gap:12px;margin:18px auto;max-width:440px}.mission-button{display:grid;grid-template-columns:90px minmax(0,1fr);align-items:center;text-align:left;gap:6px 16px;background:#fffdf2;color:#234653;border:2px solid #a2cfce;box-shadow:0 4px 0 #add9df;border-radius:14px;padding:12px;margin:0;min-height:118px;font-size:18px}.mission-button:hover:not(:disabled){background:#fff1c5}.mission-art{grid-row:1/3;display:grid;place-items:center;aspect-ratio:1}.mission-art img{width:86px;height:86px;object-fit:contain}.mission-shadow{filter:brightness(0) saturate(0);opacity:.8}.mission-done{font-size:13px;color:#337b48}.mission-back{display:block;margin:0;padding:5px 10px;min-height:40px;font-size:13px}.detective-stage{position:relative;aspect-ratio:640/330;width:100%;background:#e3f5ed;border-radius:20px;overflow:hidden}#detective-canvas{position:absolute;inset:0}#detective-canvas canvas{display:block;width:100%;height:100%}.detective-drop{position:absolute;display:grid;place-items:center;border:2px dashed #247787;border-radius:12px;background:transparent;pointer-events:none}.detective-drop span{display:grid;place-items:center;background:#fff9dcdd;color:#28616d;font-size:24px;border-radius:50%;width:34px;height:34px}.detective-drop.is-over{border:3px solid #b87923;background:#f6d76930}.detective-drop.is-solved{border-style:solid;border-color:#51996a}.detective-drop.is-solved span{display:none}#detective-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:10px auto;max-width:390px}.detective-choice{aspect-ratio:1;min-width:0;min-height:44px;background:#fffdf4;border:3px solid #a2cfce;box-shadow:0 4px 0 #add9df;border-radius:12px;margin:0;padding:8px;touch-action:none;user-select:none;-webkit-user-select:none}.detective-choice:hover:not(:disabled){background:#fff0bb}.detective-choice img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}.detective-choice.is-dragging{opacity:.4}.detective-ghost{position:fixed;z-index:50;width:85px;height:85px;transform:translate(-50%,-50%);pointer-events:none;object-fit:contain;filter:drop-shadow(0 4px 4px #23465340)}#detective-hint{font-size:13px;min-height:44px;padding:7px 12px;margin:2px}#detective-success{padding:12px;margin:10px auto;max-width:330px}#detective-success h2{font-size:24px}#detective-next,#detective-retry{background:#cc573d;box-shadow:0 4px 0 #a43f26}#detective-restart{background:#ffe06c;color:#624b19;box-shadow:0 2px 0 #c4a348}#detective-progress{font-size:14px;min-height:1.5em;margin:8px auto}@media(max-width:420px){#detective-root h1{font-size:24px}#detective-status{font-size:15px}#detective-choices{gap:8px;max-width:320px}.detective-choice{padding:6px}.mission-button{font-size:16px;grid-template-columns:75px minmax(0,1fr);padding:10px;gap:8px 12px}.mission-art img{width:72px;height:72px}}@media(max-height:760px) and (min-width:701px){#detective-root{max-width:460px}#detective-status{min-height:1.5em}#detective-choices{max-width:320px}}
#detective-choices .detective-choice{position:relative}
.choice-retry-icon{display:none;position:absolute;top:5px;right:5px;width:28px;height:28px;place-items:center;border-radius:50%;background:#bd4a47;color:#fff;font-size:25px;line-height:1;pointer-events:none}
.detective-choice.is-retry,.detective-choice.is-retry:hover:not(:disabled){border-color:#c46560;background:#fff0ed;box-shadow:0 4px 0 #d8a5a0;animation:detective-retry-nudge .32s ease-in-out}
.detective-choice.is-retry .choice-retry-icon{display:grid}
@keyframes detective-retry-nudge{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}60%{transform:translateX(4px)}80%{transform:translateX(-2px)}}
@media(prefers-reduced-motion:reduce){.detective-choice.is-retry{animation:none}}
.mission-list{grid-template-columns:repeat(3,minmax(0,1fr));max-width:520px;gap:10px}
.mission-button{grid-template-columns:minmax(0,1fr);text-align:center;justify-items:center;align-content:start;gap:5px;padding:10px 7px;font-size:14px;min-height:150px;line-height:1.3}
.mission-art{grid-row:auto}.mission-art img{width:76px;height:76px}
@media(max-width:420px){.mission-list{grid-template-columns:repeat(2,minmax(0,1fr))}.mission-button{grid-template-columns:minmax(0,1fr);font-size:14px;padding:9px;gap:5px}.mission-art img{width:70px;height:70px}}
.mission-example{position:relative;display:flex;align-items:center;justify-content:center;gap:3px;width:100%;height:88px;margin-bottom:3px;pointer-events:none}
.example-before,.example-result{position:relative;display:block;width:calc((100% - 22px)/2);height:76px;min-width:0}
.example-picture{position:relative;display:grid;grid-template-columns:repeat(var(--items),minmax(0,1fr));align-items:center;justify-items:center;width:100%;height:100%;min-width:0}
.example-object{display:grid;place-items:center;position:relative;min-width:0;width:100%;height:100%}
.example-object img{display:block;width:100%;height:100%;min-width:0;object-fit:contain}
.example-size-small img{width:45%;height:45%}.example-size-medium img{width:70%;height:70%}
.example-arrow{font-size:20px;color:#317e89;flex:0 0 16px;animation:mission-arrow 5s ease-in-out infinite}
.example-result,.example-arrival{animation:mission-result 5s ease-in-out infinite}
.example-tick{position:absolute;right:0;bottom:0;display:grid;place-items:center;width:19px;height:19px;border-radius:50%;background:#40865b;color:white;font-size:14px;font-weight:800;box-shadow:0 0 0 2px #fffdf2}
.example-incomplete{overflow:hidden}.example-missing{position:absolute;right:0;top:0;width:50%;height:100%;display:grid;place-items:center;background:#fffdf2;border:1px dashed #6c9ca2;border-radius:5px;font-size:20px;color:#317e89}
.example-missing-quarter{right:auto;left:0;width:50%;height:50%}
.example-compare,.example-sequence{display:flex;align-items:center;gap:4px;width:100%;height:80px}
.example-compare>span,.example-sequence>.example-picture,.example-arrival{position:relative;flex:1;min-width:0;height:100%}
.example-selected{border-radius:8px;outline:2px solid #62a77c;animation:mission-choice 5s ease-in-out infinite}
.example-motif{position:absolute;left:50%;top:60%;transform:translate(-50%,-50%);width:17px;height:17px;background:#cc574a;box-shadow:0 0 0 2px #fff9e6}.motif-circle{border-radius:50%}.motif-triangle{clip-path:polygon(50% 0,100% 100%,0 100%);box-shadow:none}
.example-crop .example-object{overflow:hidden;aspect-ratio:1;height:auto}.example-crop img{position:absolute;width:200%;height:200%;max-width:none;left:calc(var(--crop-x)*-100%);top:calc(var(--crop-y)*-100%)}
@keyframes mission-result{0%,15%{opacity:.15;transform:translateX(-7px) scale(.9)}35%,85%{opacity:1;transform:translateX(0) scale(1)}100%{opacity:.15;transform:translateX(-7px) scale(.9)}}
@keyframes mission-arrow{0%,15%,100%{transform:translateX(-2px)}35%,85%{transform:translateX(2px)}}
@keyframes mission-choice{0%,15%,100%{outline-color:transparent;background:transparent}35%,85%{outline-color:#62a77c;background:#e3f5ed}}
@media(prefers-reduced-motion:reduce){.example-result,.example-arrival,.example-arrow,.example-selected{animation:none}}
.mission-sample{grid-column:1/-1;display:grid;justify-items:center;padding:10px 16px;background:#fffdf2;border:2px solid #a2cfce;border-radius:16px;margin-bottom:4px}
.mission-sample-label{font-size:14px;font-weight:700;color:#317e89}.mission-sample .mission-example{max-width:180px;margin:4px 0 0}
.mission-button.is-completed,.mission-button.is-completed:hover:not(:disabled){background:#d5edce;border-color:#69a36b;box-shadow:0 4px 0 #93bd8e}
.mission-button.is-completed .mission-done{color:#2c6336;font-weight:800}
#detective-root.is-playing h1{display:table;max-width:100%;margin:12px auto 8px;padding:6px 14px;border:2px solid #83b8ba;border-radius:24px;background:#f9fcf0;font-size:15px;line-height:1.4;color:#38616a}
#detective-root.is-playing #detective-status{font-size:21px;line-height:1.35;min-height:2.7em;margin:10px auto 8px}
@media(max-width:420px){#detective-root.is-playing h1{font-size:13px;padding:5px 12px}#detective-root.is-playing #detective-status{font-size:19px}}