.detective-shell { max-width: 72rem; }
.detective-welcome { border-color: rgba(245, 158, 11, .35); }
.detective-hero-art { display:grid; min-height:25rem; place-content:center; gap:1rem; text-align:center; color:#fff; background:radial-gradient(circle at 50% 30%,#465b86,#172033 70%); font-size:1.25rem; }
.detective-bot { position:relative; font-size:8rem; filter:drop-shadow(0 1rem 1rem rgba(0,0,0,.3)); }
.detective-bot span { position:absolute; top:-1rem; right:1.5rem; font-size:4rem; transform:rotate(10deg); }
.detective-clues { color:#ffd65c; font-size:2rem; letter-spacing:.5rem; }
.detective-intro-scene { display:flex; min-height:11rem; align-items:center; justify-content:center; gap:clamp(.5rem,3vw,2rem); overflow:hidden; border:2px dashed #b7c5dc; border-radius:1.5rem; background:linear-gradient(#dff5ff 60%,#dff2d8 60%); font-size:clamp(2rem,6vw,4.5rem); }
.detective-intro-path { color:#667085; font-size:clamp(1rem,3vw,2rem); letter-spacing:.25rem; }
.detective-intro-goal { opacity:.65; }
.detective-collection-count { padding:.7rem 1.1rem; border:2px solid #f2c94c; border-radius:999px; background:#fff8d8; color:#5c4300; font-weight:700; white-space:nowrap; }
.detective-rank,.detective-rank-reward { display:inline-flex; width:max-content; margin-top:.45rem; padding:.4rem .8rem; border:2px solid #8b5cf6; border-radius:999px; color:#5630a6; background:#f5f0ff; font-weight:900; }.detective-rank-reward { margin:.3rem auto .8rem; }
.detective-save-status { display:inline-flex; width:max-content; align-items:center; padding:.45rem .75rem; border:1px solid #b8c5d8; border-radius:999px; color:#475467; background:#fff; font-size:.78rem; font-weight:800; white-space:nowrap; }.detective-save-status[data-save-state="syncing"] { color:#2445b5; border-color:#9eb2ed; background:#edf3ff; }.detective-save-status[data-save-state="device"] { color:#705600; border-color:#e7ca62; background:#fff8d8; }
.detective-case-list { display:grid; gap:.9rem; }
.detective-case-card { display:grid; grid-template-columns:3rem 4rem minmax(0,1fr) auto auto; align-items:center; gap:1rem; padding:1rem; border:2px solid #dce5f3; border-radius:1.2rem; background:#f9fbff; }
.detective-case-card.is-solved { border-color:#84d3ad; background:#f0fff7; }
.detective-case-card.is-locked { opacity:.58; filter:grayscale(.65); }
.detective-case-number { display:grid; width:3rem; aspect-ratio:1; place-items:center; border-radius:50%; color:#fff; background:#3157d5; font-weight:900; }
.detective-case-icon { font-size:2.7rem; text-align:center; }
.detective-case-copy p,.detective-case-copy h2 { margin:0; }
.detective-case-copy p:first-child { color:#3157d5; font-size:.72rem; font-weight:900; letter-spacing:.08em; }
.detective-case-copy h2 { font-size:1.25rem; }
.detective-case-status { font-weight:800; }
.detective-collection { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.8rem; }
.detective-bug-card { min-height:8rem; display:grid; place-items:center; align-content:center; gap:.35rem; padding:.8rem; border:2px dashed #c8d3e4; border-radius:1rem; text-align:center; background:#f7f9fc; }
.detective-bug-card span { font-size:2.4rem; }
.detective-bug-card.is-unlocked { border-style:solid; border-color:#f2c94c; background:linear-gradient(145deg,#fffbe8,#fff2b3); box-shadow:0 .6rem 1.4rem rgba(179,132,0,.13); }
.detective-bug-card:not(.is-unlocked) strong { color:#98a2b3; }
.detective-game { max-width:78rem; margin:auto; }
.detective-game-header { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:1rem; margin-bottom:1rem; }
.detective-game-layout { display:grid; grid-template-columns:minmax(30rem,1.08fr) minmax(25rem,.92fr); gap:1rem; min-height:calc((100vh / .75) - 10rem); }
.detective-scene-panel,.detective-workbench { min-width:0; padding:1rem; border:1px solid #d7e1ef; border-radius:1.4rem; background:#fff; box-shadow:0 1rem 2.4rem rgba(30,58,104,.08); }
.detective-scene-panel { display:flex; flex-direction:column; }
.detective-brief { display:flex; align-items:center; gap:.8rem; padding:.8rem 1rem; border-radius:1rem; background:#fff8d8; }
.detective-brief>span { font-size:2rem; }.detective-brief small { display:block; color:#705600; font-weight:700; }
.detective-scene { position:relative; display:grid; min-height:25rem; flex:1; place-items:center; overflow:hidden; margin:.8rem 0; border:3px solid #172033; border-radius:1.2rem; background:#eef5ff; }
.detective-status { min-height:3.2rem; display:grid; place-items:center; padding:.6rem 1rem; border:1px solid #d7e1ef; border-radius:1rem; text-align:center; font-weight:800; }
.detective-status.is-good { border-color:#74c69d; color:#145c3b; background:#eafaf1; }.detective-status.is-clue { border-color:#f2c94c; color:#604800; background:#fff8d8; }
.detective-trace { margin-top:.65rem; padding:.7rem 1rem; border-radius:1rem; background:#172033; color:#fff; }
.detective-trace ol { max-height:7rem; margin:.3rem 0 0; overflow:auto; font-family:ui-monospace,monospace; font-size:.82rem; }
.detective-workbench { display:flex; flex-direction:column; gap:.75rem; }
.detective-file { min-height:0; padding:.8rem; border:2px solid #dce5f3; border-radius:1rem; background:#f8fafc; }
.detective-timeline { display:grid; max-height:22rem; gap:.55rem; margin:.7rem 0 0; padding:0; overflow:auto; list-style:none; }
.detective-command { display:grid; grid-template-columns:2.25rem minmax(0,1fr) auto; align-items:center; gap:.7rem; min-height:3.5rem; padding:.55rem .8rem; border:2px solid #d9e3f2; border-radius:.9rem; background:#fff; font-weight:850; cursor:pointer; transition:.15s; }
.detective-command b { display:grid; width:2.25rem; aspect-ratio:1; place-items:center; border-radius:50%; color:#fff; background:#3157d5; }.detective-command small { color:#667085; }
.detective-command.is-active { border-color:#f2af00; background:#fff7d6; box-shadow:0 0 0 3px rgba(255,214,92,.35); transform:translateX(.15rem); }
.detective-command.is-suspect { border-color:#e5484d; background:#fff1f1; }.detective-command.is-suspect::after { content:'📌'; font-size:1.2rem; }
.detective-command.is-missing { border-style:dashed; color:#3157d5; background:#edf3ff; }
.detective-command.is-swap-choice { border-color:#8b5cf6; background:#f4f0ff; }
.detective-command.is-hint-candidate { box-shadow:inset 0 0 0 3px rgba(242,175,0,.38); }
.detective-toolbar { display:grid; grid-template-columns:repeat(3,1fr); gap:.55rem; }
.detective-toolbar button { min-height:3.6rem; padding:.5rem; border:2px solid #3157d5; border-radius:.9rem; color:#2445b5; background:#fff; font-weight:850; }.detective-toolbar button span { display:block; font-size:.75rem; }.detective-toolbar button:hover:not(:disabled),.detective-toolbar button.is-on { color:#fff; background:#3157d5; }.detective-toolbar button:disabled { opacity:.42; }
.detective-repair { padding:.8rem 1rem; border:2px solid #8b5cf6; border-radius:1rem; background:#f7f4ff; }
.detective-repair button { min-height:2.8rem; border:0; border-radius:.8rem; color:#fff; background:#6d3fc0; font-weight:800; }
.detective-hint-button { min-height:2.8rem; border:1px solid #e6b600; border-radius:.9rem; color:#604800; background:#fff8d8; font-weight:800; }.detective-hint { padding:.75rem 1rem; border-radius:.9rem; color:#604800; background:#fff8d8; }
.detective-solved-card { border-top:8px solid #f2c94c; }.detective-unlocked-card { display:inline-flex; align-items:center; gap:.8rem; margin:.6rem auto 1rem; padding:.75rem 1.2rem; border:2px solid #f2c94c; border-radius:1rem; background:#fff8d8; }.detective-unlocked-card span { font-size:2.4rem; }.detective-unlocked-card small,.detective-unlocked-card strong { display:block; }
.detective-result-stars { margin:.5rem 0; color:#e9a900; font-size:2rem; letter-spacing:.15rem; }
.detective-boss-bugs { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; margin-top:.7rem; }.detective-boss-bugs span { padding:.55rem; border:2px solid #f4a3a6; border-radius:.8rem; text-align:center; color:#8e1b20; background:#fff1f1; font-weight:900; }.detective-boss-bugs span.is-fixed { border-color:#74c69d; color:#145c3b; background:#eafaf1; }
/* Scene visuals */
.direction-scene { position:relative; width:min(100%,32rem); aspect-ratio:5/4; display:grid; grid-template-columns:repeat(5,1fr); grid-template-rows:repeat(4,1fr); background:linear-gradient(135deg,#dff3d7,#edf8e9); }
.direction-cell { display:grid; place-items:center; border:1px solid rgba(64,115,71,.2); font-size:2.3rem; }.direction-cell.is-target { background:#fff6b7; }.scene-robot { position:absolute; display:grid; width:3.8rem; aspect-ratio:1; place-items:center; border:3px solid #3157d5; border-radius:1rem; background:#ffd65c; font-size:2rem; transition:all .3s ease; transform:translate(-50%,-50%); }.scene-robot i { position:absolute; top:-.6rem; right:-.55rem; display:grid; width:1.4rem; aspect-ratio:1; place-items:center; border-radius:50%; color:#fff; background:#3157d5; font-size:.75rem; font-style:normal; }
.scene-robot.is-bonk { animation:detective-bonk .42s ease-in-out 2; border-color:#e5484d; }.scene-impact { position:absolute; z-index:2; left:70%; bottom:70%; width:max-content; padding:.25rem .45rem; border:2px solid #e5484d; border-radius:.6rem; color:#8e1b20; background:#fff; font-size:.75rem; font-weight:950; }
.drink-machine { display:flex; align-items:end; gap:3rem; }.drink-box { font-size:6rem; }.drink-glass { position:relative; width:7rem; height:10rem; overflow:visible; border:8px solid #9eb1ca; border-top:0; border-radius:0 0 1.5rem 1.5rem; background:#fff; }.drink-liquid { position:absolute; right:0; bottom:0; left:0; height:var(--fill,0%); max-height:100%; border-radius:0 0 1rem 1rem; background:#43c7e8; transition:height .35s; }.drink-overflow { position:absolute; top:-1.2rem; left:-1.5rem; font-size:3rem; animation:splash .55s infinite alternate; }
.lift-building { position:relative; display:grid; width:22rem; grid-template-rows:repeat(4,4.7rem); border:5px solid #374151; border-radius:1rem; overflow:hidden; background:#dce5f3; }.lift-floor { position:relative; display:flex; align-items:center; justify-content:flex-end; padding-right:1rem; border-top:2px solid #9aabc2; font-weight:900; }.lift-car { position:absolute; left:3rem; display:grid; width:7rem; height:3.8rem; place-items:center; border:4px solid #3157d5; border-radius:.6rem .6rem 0 0; color:#fff; background:#4f73df; font-size:1.7rem; transition:bottom .35s; }
.dance-stage { text-align:center; }.dance-target { display:flex; gap:.5rem; margin-bottom:2rem; }.dance-target span { padding:.6rem 1rem; border-radius:999px; background:#fff; font-weight:900; }.dance-bot { font-size:7rem; display:inline-block; transform:translateY(var(--jump,0)); transition:transform .3s; }.dance-bot.is-turning { animation:detective-dance-spin .42s ease-in-out; }.dance-moves { margin-top:1rem; min-height:2rem; font-size:1.25rem; font-weight:900; }
.controller-scene { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:3rem; }.keyboard-key { display:grid; min-width:11rem; min-height:7rem; place-items:center; border:0; border-radius:1rem; box-shadow:0 .6rem 0 #9ca3af; background:#fff; font-size:1.7rem; font-weight:900; }.keyboard-key.is-pressed { transform:translateY(.5rem); box-shadow:0 .1rem 0 #9ca3af; }.game-character { font-size:7rem; }.game-character.is-jump { animation:detective-controller-jump .56s ease-in-out; }
.traffic-scene { width:min(95%,40rem); }.traffic-ipo { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; align-items:center; gap:.5rem; margin-bottom:2rem; }.traffic-ipo span { display:grid; min-height:5.5rem; place-items:center; padding:.7rem; border:2px solid #cbd8ea; border-radius:1rem; text-align:center; background:#fff; font-weight:900; }.traffic-ipo small { color:#3157d5; }.traffic-ipo .is-bug { border-color:#ef777b; background:#fff1f1; }.traffic-ipo .is-safe { border-color:#74c69d; background:#eafaf1; }.traffic-road { position:relative; height:7rem; overflow:hidden; border-radius:1rem; background:linear-gradient(#8aa0b7 48%,#fff 48% 53%,#8aa0b7 53%); }.traffic-light { position:absolute; z-index:2; top:.8rem; left:1rem; font-size:3.5rem; }.traffic-car { position:absolute; right:65%; bottom:.6rem; font-size:3.5rem; transition:right .5s ease; }.traffic-car.is-moving { right:5%; }.traffic-car.is-stopped { right:62%; animation:traffic-brake .45s ease; }.traffic-crossing { position:absolute; right:25%; bottom:2.2rem; color:#fff; font-size:2rem; transform:rotate(90deg); }
.garden-case-scene { position:relative; width:min(95%,34rem); min-height:20rem; overflow:hidden; border-radius:1.5rem; background:linear-gradient(#ccefff 55%,#bfe5a8 55%); }.garden-cloud { position:absolute; top:1rem; left:50%; padding:.5rem 1rem; border-radius:999px; background:#fff; font-weight:900; transform:translateX(-50%); }.garden-bot { position:absolute; bottom:3rem; left:18%; font-size:6rem; }.garden-bot em { position:absolute; right:-1rem; bottom:0; font-size:2.5rem; font-style:normal; }.garden-plant { position:absolute; right:17%; bottom:2rem; display:grid; place-items:center; font-size:7rem; }.garden-plant small { padding:.25rem .6rem; border-radius:999px; background:#fff; font-size:.75rem; font-weight:900; }.garden-plant.is-dry { filter:grayscale(.75) sepia(.5); transform:rotate(8deg); }.garden-plant.is-fresh { animation:garden-grow .55s ease; }.garden-puddle { position:absolute; bottom:1rem; left:42%; font-size:3rem; animation:splash .5s infinite alternate; }
.door-case-scene { position:relative; display:grid; width:min(95%,34rem); min-height:21rem; place-items:center; overflow:hidden; border-radius:1.2rem; background:linear-gradient(#d8ebff 70%,#c7d1dc 70%); }.door-person { position:absolute; z-index:2; bottom:2rem; left:5%; font-size:5rem; }.door-person.is-near { left:24%; }.door-person.is-passing { animation:detective-door-pass .42s ease-in-out forwards; }.door-person.is-passed { left:74%; }.auto-door { position:relative; z-index:3; display:flex; width:12rem; height:15rem; overflow:hidden; border:8px solid #3c4b60; background:rgba(200,234,255,.22); }.auto-door span { width:50%; border:2px solid #7890a8; background:rgba(255,255,255,.82); transition:transform .4s; }.auto-door.is-open span:first-child { transform:translateX(-90%); }.auto-door.is-open span:last-child { transform:translateX(90%); }.door-sensor { position:absolute; z-index:4; top:1rem; padding:.4rem .8rem; border-radius:999px; background:#fff; font-weight:900; }.door-case-scene>strong { position:absolute; z-index:4; right:1rem; bottom:1rem; }
.courier-scene { position:relative; display:grid; width:min(95%,42rem); min-height:18rem; grid-template-columns:auto 1fr auto 1fr auto; align-items:end; padding:3rem 1.5rem 4rem; border-radius:1.4rem; background:linear-gradient(#dff3ff 62%,#d7e9c9 62%); }.courier-stop { display:grid; place-items:center; z-index:1; }.courier-stop span { font-size:4rem; }.courier-stop small { padding:.2rem .5rem; border-radius:999px; background:#fff; font-weight:900; }.courier-path { align-self:center; border-top:6px dotted #68788c; }.courier-bot { position:absolute; bottom:1rem; font-size:4rem; transform:translateX(-50%); transition:left .45s; }.courier-bot em { position:absolute; right:-1rem; font-size:2rem; font-style:normal; }.courier-empty,.courier-delivered { position:absolute; top:1rem; right:1rem; padding:.6rem 1rem; border-radius:999px; background:#fff; font-weight:900; }.courier-delivered { color:#145c3b; background:#eafaf1; }
.detective-wire-board { display:grid; grid-template-columns:1fr 1.2fr 1fr; gap:.6rem; }.detective-wire-column,.detective-wire-links { display:grid; gap:.45rem; }.detective-wire-column strong { text-align:center; }.detective-wire-column button { min-height:2.6rem; border:2px solid #3157d5; color:#2445b5; background:#fff; }.detective-wire-column button.is-selected { color:#fff; background:#3157d5; }.detective-wire-links { align-content:end; }.detective-wire-links span { display:grid; min-height:2.6rem; place-items:center; border-radius:.7rem; color:#8e1b20; background:#fff1f1; font-size:.75rem; font-weight:900; }.detective-wire-links span.is-correct { color:#145c3b; background:#eafaf1; }
.controller-lab { display:grid; width:min(95%,40rem); grid-template-columns:1.1fr .9fr; gap:1.5rem; }.controller-map-preview { display:grid; gap:.7rem; }.controller-map-preview span { padding:.8rem; border:2px solid #ef777b; border-radius:.8rem; background:#fff1f1; font-weight:900; }.controller-map-preview span.is-correct { border-color:#74c69d; background:#eafaf1; }.controller-test-stage { display:grid; min-height:16rem; place-items:center; align-content:center; gap:1rem; border:2px solid #cbd8ea; border-radius:1rem; background:#fff; }.controller-test-keys { display:flex; gap:.45rem; }.controller-test-keys button { min-width:3rem; min-height:2.8rem; padding:.4rem .7rem; border:0; border-radius:.55rem; box-shadow:0 .3rem 0 #090e19; color:#fff; background:#172033; font-weight:900; cursor:pointer; transition:.12s; }.controller-test-keys button:first-child { min-width:6rem; }.controller-test-keys button:hover:not(:disabled) { background:#3157d5; }.controller-test-keys button:active:not(:disabled) { transform:translateY(.25rem); box-shadow:0 .05rem 0 #090e19; }.controller-test-keys button.is-tested { box-shadow:0 .3rem 0 #0d6840; background:#198754; }.controller-test-keys button:disabled { opacity:.45; cursor:not-allowed; }.controller-test-bot { font-size:5rem; transform:translateX(var(--controller-x)); transition:transform .3s; }.controller-test-bot.is-jump { animation:detective-mapping-jump .56s ease-in-out; }
.delivery-scene { position:relative; width:min(100%,36rem); aspect-ratio:6/4; display:grid; grid-template-columns:repeat(6,1fr); grid-template-rows:repeat(4,1fr); background:linear-gradient(135deg,#e9edf5,#f8fafc); }.delivery-cell { display:grid; place-items:center; border:1px solid #c9d3e2; font-size:2.2rem; }.delivery-cell.is-delivery { color:#145c3b; background:#dff7e8; }.delivery-cell small { display:block; font-size:.55rem; font-weight:900; }.scene-robot em { position:absolute; right:-1.2rem; bottom:-.8rem; font-size:1.5rem; font-style:normal; }
.detective-notebook { border:2px solid #d6c28f; background:linear-gradient(90deg,rgba(49,87,213,.035) 1px,transparent 1px),#fffdf6; background-size:2rem 2rem; }.detective-notebook-bugs { display:grid; grid-template-columns:repeat(5,1fr); gap:.7rem; }.detective-notebook-bugs>div { display:grid; min-height:5rem; place-items:center; padding:.7rem; border:2px solid #f2c94c; border-radius:1rem; text-align:center; background:#fff8d8; }.detective-debug-flow { display:flex; align-items:center; justify-content:center; gap:.7rem; }.detective-debug-flow>div { display:grid; min-width:8rem; min-height:7rem; place-items:center; align-content:center; gap:.5rem; padding:.7rem; border:2px solid #dce5f3; border-radius:1rem; text-align:center; background:#fff; }.detective-debug-flow span { font-size:2rem; }.detective-debug-flow i { color:#3157d5; font-size:1.5rem; font-style:normal; font-weight:900; }.detective-definition { padding:1.3rem; border:3px solid #3157d5; border-radius:1.3rem; background:#edf3ff; }.detective-definition h2 { color:#2445b5; font-size:2.5rem; font-weight:950; letter-spacing:.12em; }.detective-definition p:last-child { margin:0; font-size:1.25rem; font-weight:750; }.detective-mini-challenge { padding:1.2rem; border:2px dashed #8b5cf6; border-radius:1.2rem; background:#f8f5ff; }.detective-mini-program { display:grid; grid-template-columns:2.5rem 1fr; gap:.5rem; max-width:32rem; }.detective-mini-program span { display:grid; place-items:center; border-radius:50%; color:#fff; background:#3157d5; font-weight:900; }.detective-mini-program b { padding:.7rem 1rem; border:2px solid #dce5f3; border-radius:.8rem; background:#fff; }.detective-mini-program b.is-bug { border-color:#ef777b; background:#fff1f1; }.detective-badge-award { padding:2rem; border-radius:1.4rem; background:radial-gradient(circle,#fff8d8,#fff 65%); }
.detective-confetti { position:fixed; inset:0; z-index:1056; overflow:hidden; pointer-events:none; }.detective-confetti i { position:absolute; top:-1rem; left:var(--x); width:.7rem; height:1.1rem; background:var(--color); animation:detective-confetti-fall 2s var(--delay) ease-in forwards; }
.detective-new-scene { display:grid; width:min(100%,34rem); min-height:20rem; place-items:center; align-content:center; gap:1.2rem; padding:1.4rem; border-radius:1.4rem; background:linear-gradient(145deg,#e9f3ff,#f9fbff); }
.new-scene-display,.new-scene-machine { min-width:min(100%,20rem); padding:.65rem 1rem; border:2px solid #d7e1ef; border-radius:999px; text-align:center; background:#fff; font-weight:900; }.new-scene-main { font-size:6rem; transition:.35s; }.new-scene-main.is-trouble { animation:detective-bonk .42s ease-in-out 2; }
.freezer-case { background:linear-gradient(145deg,#dff7ff,#edf3ff); }.freezer-case .new-scene-machine { color:#145c6b; border-color:#80d7e5; }
.cinema-case { color:#172033; background:#fff8d8; transition:.35s; }.cinema-case.lights-off { color:#fff; background:#172033; }.cinema-screen { display:grid; width:min(100%,24rem); min-height:9rem; place-items:center; border:6px solid #3b465b; border-radius:.8rem; background:#fff; color:#172033; font-size:1.4rem; font-weight:950; }.cinema-seats { font-size:2.5rem; letter-spacing:.4rem; }
.copy-stack { display:flex; min-height:3.5rem; align-items:center; justify-content:center; gap:.4rem; font-size:2.5rem; }.copy-stack span.is-extra { padding:.15rem; border:3px solid #e5484d; border-radius:.5rem; background:#fff1f1; animation:detective-bonk .42s ease-in-out 1; }
.drone-route { position:relative; display:flex; width:min(100%,28rem); min-height:10rem; align-items:end; justify-content:space-between; }.drone-route>span { display:grid; place-items:center; font-size:4rem; }.drone-route small { font-size:.65rem; font-weight:950; }.drone-route i { align-self:center; color:#3157d5; font-size:1.5rem; font-style:normal; letter-spacing:.15rem; }.drone-route b { position:absolute; top:1rem; transform:translateX(-50%); font-size:3rem; transition:left .4s ease; }.drone-route b em { font-size:1.3rem; font-style:normal; }
.packing-line { display:flex; align-items:center; gap:.5rem; }.packing-line span { display:grid; min-width:5.3rem; min-height:5.3rem; place-items:center; align-content:center; border:2px solid #d7e1ef; border-radius:1rem; background:#fff; font-size:2.2rem; }.packing-line span.is-done { border-color:#74c69d; background:#eafaf1; }.packing-line small { display:block; font-size:.6rem; font-weight:950; }.packing-line i { color:#3157d5; font-size:1.25rem; font-style:normal; font-weight:950; }
@keyframes splash { to { transform:translateY(.5rem) rotate(8deg); } }
@keyframes detective-bonk { 25% { transform:translate(-58%,-50%) rotate(-7deg); } 75% { transform:translate(-43%,-50%) rotate(6deg); } }
@keyframes detective-dance-spin { 0% { transform:rotate(0deg) scale(1); } 50% { transform:rotate(180deg) scale(1.08); } 100% { transform:rotate(360deg) scale(1); } }
@keyframes detective-controller-jump { 0%,100% { transform:translateY(0) scaleY(1); } 15% { transform:translateY(.35rem) scaleY(.9); } 50% { transform:translateY(-4rem) scaleY(1.05); } 85% { transform:translateY(.15rem) scaleY(.96); } }
@keyframes detective-mapping-jump { 0%,100% { transform:translateX(var(--controller-x)) translateY(0); } 50% { transform:translateX(var(--controller-x)) translateY(-3.5rem); } }
@keyframes traffic-brake { 0% { transform:translateX(3rem) rotate(0); } 70% { transform:translateX(0) rotate(-5deg); } 100% { transform:none; } }
@keyframes garden-grow { 0% { transform:scale(.65) rotate(8deg); } 70% { transform:scale(1.12) rotate(-3deg); } 100% { transform:scale(1); } }
@keyframes detective-door-pass { 0% { left:24%; transform:scale(1); } 50% { left:49%; transform:scale(.88); } 100% { left:74%; transform:scale(1); } }
@keyframes detective-confetti-fall { to { transform:translateY(105vh) rotate(720deg); opacity:.85; } }
@media (max-width:991.98px) { .detective-game-layout { grid-template-columns:1fr; min-height:auto; }.detective-scene { min-height:24rem; }.detective-collection { grid-template-columns:repeat(3,1fr); }.detective-case-card { grid-template-columns:3rem 4rem 1fr; }.detective-case-status,.detective-case-card>a { grid-column:3; }.detective-hero-art { min-height:18rem; }.detective-notebook-bugs { grid-template-columns:repeat(3,1fr); }.detective-debug-flow { flex-wrap:wrap; }.detective-debug-flow i { transform:rotate(90deg); } }
@media (max-width:575.98px) { .detective-game-header { grid-template-columns:auto 1fr; }.detective-game-header .detective-collection-count { grid-column:1/-1; }.detective-scene { min-height:20rem; }.detective-collection,.detective-notebook-bugs { grid-template-columns:repeat(2,1fr); }.detective-toolbar { grid-template-columns:repeat(2,1fr); }.detective-case-card { grid-template-columns:2.6rem 1fr; }.detective-case-icon { grid-row:1/3; }.detective-case-copy,.detective-case-status,.detective-case-card>a { grid-column:2; }.controller-scene { grid-template-columns:1fr; gap:1rem; }.keyboard-key { min-width:9rem; min-height:5rem; }.detective-intro-path { display:none; }.detective-boss-bugs { grid-template-columns:1fr; } }