:root{--color-paper:oklch(97% .025 85);--color-paper-2:oklch(92% .045 85);--color-ink:oklch(29% .04 62);--color-muted:oklch(44% .035 62);--color-accent:oklch(39% .065 150);--color-accent-hover:oklch(32% .06 150);--color-accent-ink:oklch(98% .02 85);--color-rule:oklch(75% .045 80);--color-focus:oklch(49% .14 40);--color-shadow:oklch(25% .045 80/.18);--color-backdrop:oklch(22% .035 140/.55);--color-clear:transparent;--font-display:Georgia, "Times New Roman", serif;--font-body:"Trebuchet MS", Verdana, sans-serif;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;--radius-sm:8px;--radius-lg:24px;--dur-micro:.12s;--ease-out:cubic-bezier(.16, 1, .3, 1)}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow-x:clip}body{color:var(--color-ink);background:var(--color-paper);font:16px/1.5 var(--font-body)}button{font:700 15px var(--font-body);color:var(--color-ink);background:var(--color-paper);border:1px solid var(--color-rule);border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;touch-action:manipulation;min-height:48px;transition:transform var(--dur-micro) var(--ease-out);padding:12px 18px}button:hover{background:var(--color-paper-2)}button:active{transform:translateY(1px)}button:disabled{opacity:.65;cursor:default}button:focus-visible,summary:focus-visible,canvas:focus-visible{outline:3px solid var(--color-focus);outline-offset:4px}.primary{background:var(--color-accent);color:var(--color-accent-ink);border-color:var(--color-accent);padding:16px 26px}.primary:hover{background:var(--color-accent-hover)}h1,h2,.wordmark{font-family:var(--font-display);letter-spacing:-.035em;overflow-wrap:anywhere;min-width:0;font-style:normal;line-height:1.05}h2{margin:12px 0 24px;font-size:clamp(30px,5vw,42px)}p{margin:0 0 20px}.hidden,[hidden]{display:none!important}#renderCanvas{touch-action:none;outline:none;width:100%;height:100dvh;display:block}#welcome{background:var(--color-paper) url(/assets/ui/cloverbrook.webp) center/cover;align-items:center;padding:clamp(20px,5vw,80px);display:flex;position:fixed;inset:0}.title-card{background:var(--color-paper);width:400px;box-shadow:0 6px 24px var(--color-shadow);border-radius:48% 48% 20px 20px/12% 12% 20px 20px;padding:40px 48px 36px}.paw-print{color:var(--color-accent);margin-bottom:12px;font-size:34px}.edition{letter-spacing:.11em;text-transform:uppercase;color:var(--color-muted);font-size:12px;font-weight:700}h1{margin:12px 0 22px;font-size:86px}h1 span{letter-spacing:.015em;margin-top:8px;font-size:27px;display:block}.intro{font:25px/1.3 var(--font-display);margin-bottom:28px}.title-card .primary{justify-content:space-between;width:100%;display:flex}.start-note{color:var(--color-muted);max-width:25ch;margin:16px 0 0;font-size:12px}.postcard{background:var(--color-paper);box-shadow:0 3px 10px var(--color-shadow);padding:18px 30px;position:absolute;bottom:12vh;right:6vw;transform:rotate(-4deg)}.postcard span{font:28px var(--font-display);display:block}.postcard small{color:var(--color-muted)}footer{background:var(--color-paper);border-radius:var(--radius-sm);justify-content:space-between;padding:8px 14px;font-size:12px;display:flex;position:absolute;bottom:20px;left:5vw;right:5vw}#hud{pointer-events:none;padding:24px;position:fixed;inset:0}.game-header{align-items:flex-start;gap:24px;display:flex}.wordmark{background:var(--color-paper);border-radius:var(--radius-sm);box-shadow:0 2px 8px var(--color-shadow);padding:12px 20px;font-size:37px}.wordmark span{letter-spacing:.02em;margin-top:3px;font-size:14px;display:block}.location{background:var(--color-paper);border-radius:var(--radius-lg);text-align:center;margin:auto;padding:8px 32px;font-size:15px;font-weight:700}.location small{color:var(--color-muted);font-size:11px;font-weight:400;display:block}#hud button{pointer-events:auto;box-shadow:0 2px 8px var(--color-shadow)}.case-slip{background:var(--color-paper);border:1px solid var(--color-rule);width:230px;box-shadow:0 2px 8px var(--color-shadow);padding:18px 22px;position:absolute;top:140px;left:24px}.case-slip span,.case-slip strong{display:block}.case-label{font:18px var(--font-display);margin-bottom:10px}.case-slip strong{font-size:14px}.case-slip #clueCount{color:var(--color-muted);margin-top:6px;font-size:12px}.bottom-bar{left:24px;right:24px;bottom:max(24px, env(safe-area-inset-bottom));align-items:center;gap:16px;display:flex;position:absolute}.bottom-bar button{align-items:center;gap:10px;display:flex}.bottom-bar svg,.inspect svg{fill:none;stroke:currentColor;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;width:22px;height:22px}#notebookCount{font-variant-numeric:tabular-nums;color:var(--color-muted);font-size:12px}.desktop-help{border-radius:var(--radius-sm);background:var(--color-paper);margin:auto;padding:8px 12px;font-size:12px}.inspect{align-items:center;gap:12px;min-width:145px;display:flex;position:absolute;bottom:96px;right:24px}.inspect:not(:disabled){color:var(--color-accent-ink);background:var(--color-accent);border-color:var(--color-accent)}#feedback{background:var(--color-paper);border-radius:var(--radius-sm);width:max-content;max-width:calc(100% - 40px);box-shadow:0 2px 8px var(--color-shadow);text-align:center;padding:12px 20px;font-size:14px;position:absolute;bottom:150px;left:50%;transform:translate(-50%)}#feedback:empty{display:none}#mobileJoystickArea{pointer-events:auto;touch-action:none;width:124px;height:124px;display:none;position:absolute;bottom:96px;left:24px}.stick-ring{border:2px solid var(--color-paper);background:var(--color-shadow);border-radius:50%;position:absolute;inset:0}#mobileJoystickThumb{background:var(--color-paper);border:1px solid var(--color-rule);border-radius:50%;place-items:center;width:64px;height:64px;display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#mobileJoystickThumb svg{width:36px;fill:var(--color-accent)}dialog{border-radius:var(--radius-lg);background:var(--color-paper);color:var(--color-ink);width:min(500px,100% - 32px);max-height:calc(100dvh - 48px);box-shadow:0 12px 60px var(--color-shadow);border:0;padding:40px;overflow:auto}dialog::backdrop{background:var(--color-backdrop)}dialog .close{background:var(--color-clear);border:0;width:48px;padding:0;font-size:26px;position:absolute;top:12px;right:12px}dialog .edition{margin-top:16px}dialog p{font-size:15px}.text-button{background:var(--color-clear);border:0;margin-top:12px;padding-left:0;text-decoration:underline;display:block}ol{counter-reset:clues;padding:0;list-style:none}li{counter-increment:clues;border-top:1px solid var(--color-rule);padding:16px 0 16px 38px;font-size:14px;position:relative}li:before{content:counter(clues, decimal-leading-zero);color:var(--color-muted);font-size:12px;position:absolute;left:0}li strong{margin-bottom:4px;display:block}.ending{color:var(--color-accent);font-weight:700}#loadingOverlay{background:var(--color-paper);z-index:400;place-items:center;padding:24px;display:grid;position:fixed;inset:0}.loading-card{width:min(440px,100%);max-height:calc(100dvh - 48px);overflow:auto}progress{width:100%;accent-color:var(--color-accent);height:12px}#loadingHint{margin-top:12px;font-size:13px}details{margin-top:20px}summary{cursor:pointer;min-height:44px}textarea{width:100%;height:160px;color:var(--color-ink);background:var(--color-paper-2);border:1px solid var(--color-rule);padding:10px;font-size:12px}#streamingStatus{color:var(--color-ink);background:var(--color-paper);border-radius:var(--radius-sm);pointer-events:none;padding:6px 12px;font-size:12px;position:fixed;bottom:80px;left:50%;transform:translate(-50%)}@media (pointer:coarse),(width<=768px){#mobileJoystickArea{display:block}.desktop-help{display:none}.bottom-bar{justify-content:space-between}}@media (width<=600px){#welcome{padding:20px 20px max(70px, env(safe-area-inset-bottom));background-position:58%;align-items:flex-end}.title-card{width:min(320px,100%);margin:auto auto 0;padding:22px 28px 24px}.paw-print{display:none}h1{margin:8px 0 16px;font-size:64px}h1 span{font-size:22px}.intro{margin-bottom:20px;font-size:21px}.title-card .edition{margin-bottom:8px;font-size:10px}.start-note{max-width:none;font-size:11px}.postcard{display:none}footer{font-size:10px;bottom:16px;left:20px;right:20px}footer span{display:none}#hud{padding:16px;padding-top:max(16px, env(safe-area-inset-top))}.game-header{gap:8px}.wordmark{padding:10px 13px;font-size:27px}.wordmark span{font-size:11px}.location{margin:3px auto;padding:8px 12px;font-size:12px}.location small{font-size:9px}#menuButton{padding:10px 12px;font-size:12px}.case-slip{width:186px;padding:12px 14px;top:100px;left:16px}.case-label{margin-bottom:5px;font-size:16px}.case-slip strong{font-size:12px}.case-slip #clueCount{font-size:11px}.bottom-bar{left:16px;right:16px;bottom:max(16px, env(safe-area-inset-bottom))}.bottom-bar button{padding:10px 13px;font-size:13px}.inspect{min-width:132px;padding:12px;font-size:13px;bottom:95px;right:16px}#mobileJoystickArea{bottom:88px;left:20px}#feedback{font-size:13px;bottom:235px}dialog{padding:28px 24px}}@media (height<=620px){.title-card{width:340px;padding:18px 32px}.paw-print,.intro,.start-note{display:none}h1{font-size:64px}.case-slip{top:106px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important}}.sound-toggle{align-items:center;gap:var(--space-2);cursor:pointer;min-height:44px;font-size:14px;display:flex}.sound-toggle input{width:20px;height:20px;accent-color:var(--color-accent);margin:0}.start-sound{margin-top:var(--space-2)}.sound-settings{margin:var(--space-6) 0;padding:var(--space-4) 0;border:0;border-top:1px solid var(--color-rule)}.sound-settings legend{padding:0 var(--space-2) 0 0;font-weight:700}.sound-settings label:not(.sound-toggle){justify-content:space-between;font-size:14px;display:flex}.sound-settings output{color:var(--color-muted);font-variant-numeric:tabular-nums}.sound-settings input[type=range]{width:100%;min-height:44px;accent-color:var(--color-accent);margin:0 0 var(--space-2);display:block}input:focus-visible{outline:3px solid var(--color-focus);outline-offset:4px}
