:root{--color-primary: #B67A2E;--color-primary-dark: #8A5A1F;--color-secondary: #2F4858;--color-secondary-light: #497D91;--color-background: #0F0E0E;--color-surface: #1E1B1A;--color-panel: #2E2B28;--color-overlay: rgba(15, 14, 14, .8);--color-text: #E9E6E1;--color-text-muted: #B3A899;--color-text-invert: #0F0E0E;--color-accent: #D4A017;--color-danger: #7C1D18;--color-success: #3C7A5B;--color-success-15: #3C7A5B15;--color-warning: #E0B050;--ca-red: color-mix(in srgb, #FF2828 55%, var(--color-danger) 45%);--ca-blue: color-mix(in srgb, #28B4FF 55%, var(--color-secondary-light) 45%);--ca-red-rgb: 196, 35, 33;--ca-blue-rgb: 55, 155, 206;--ca-alpha: .24;--ca-alpha-hover: .32;--alpha-02: .02;--alpha-04: .04;--alpha-08: .08;--alpha-12: .12;--alpha-16: .16;--alpha-24: .24;--primary-04: rgba(182,122,46,.04);--primary-12: rgba(182,122,46,.12);--primary-24: rgba(182,122,46,.24);--secondary-08: rgba(47,72,88,.08);--secondary-16: rgba(47,72,88,.16);--accent-16: rgba(212,160,23,.16);--bg-80: rgba(15,14,14,.8);--ink-64: rgba(18,18,18,.64);--paper-92: rgba(231,216,195,.92);--paper-62: rgba(231,216,195,.3);--color-gray-100: #F1ECE5;--color-gray-300: #C7BBAE;--color-gray-500: #8B8178;--color-gray-700: #4C4845;--color-gray-900: #1C1A18;--color-metal: #6F6761;--color-wood: #5A3C2C;--color-paper: #E7D8C3;--color-ink: #121212;--button-bg: var(--color-primary);--button-hover: var(--color-primary-dark);--link-color: var(--color-secondary-light);--link-hover: var(--color-accent);--border-color: var(--color-gray-700);--font-heading: "Merriweather", Georgia, serif;--font-body: "Merriweather", Georgia, serif;--font-typewriter-rough: "Special Elite", "Courier Prime", "Courier New", monospace;--font-typewriter-clean: "Cutive Mono", "Courier Prime", "Courier New", monospace;--fs-xs: clamp(.75rem, .7rem + .2vw, .85rem);--fs-sm: clamp(.875rem, .82rem + .3vw, 1rem);--fs-md: clamp(1rem, .95rem + .4vw, 1.125rem);--fs-lg: clamp(1.125rem, 1rem + .7vw, 1.375rem);--fs-h3: clamp(1.125rem, 1.2vw + .6rem, 1.45rem);--fs-h2: clamp(1.35rem, 1.6vw + .8rem, 1.75rem);--fs-h1: clamp(1.9rem, 2.4vw + 1rem, 2.8rem);--lh-tight: 1.15;--lh-normal: 1.45;--lh-loose: 1.7;--radius-xs: 6px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--radius-pill: 999px;--border-thin: 1px;--border: 1px solid var(--border-color);--outline-focus: 2px solid rgba(212,160,23,.5);--shadow-soft: 0 2px 8px rgba(0,0,0,.25);--shadow-md: 0 6px 18px rgba(0,0,0,.35), 0 1px 0 rgba(212,160,23,.08);--shadow-hard: 0 14px 32px rgba(0,0,0,.5);--shadow-soft-light: 0 2px 8px var(--paper-62);--shadow-md-light: 0 6px 18px var(--paper-62), 0 1px 0 var(--color-paper);--shadow-hard-light: 0 14px 32px var(--paper-62);--drop-shadow-soft: 1px 2px 3px rgba(0,0,0,.25);--drop-shadow-md: 3px 6px 9px rgba(0,0,0,.35);--drop-shadow-hard: 6px 12px 18px rgba(0,0,0,.5);--drop-shadow-soft-light: 1px 2px 3px var(--paper-62);--drop-shadow-md-light: 3px 6px 9px var(--paper-62);--drop-shadow-hard-light: 6px 12px 18px var(--paper-62);--glass-tint: rgba(231,216,195,.08);--glass-stroke: rgba(231,216,195,.18);--glass-highlight: rgba(212,160,23,.15);--ease-out: cubic-bezier(.22,1,.36,1);--ease-in: cubic-bezier(.4,0,.7,.2);--dur-fast: .12s;--dur: .22s;--dur-slow: .38s;--space-01: .125rem;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-6: 1.5rem;--space-8: 2rem;--space-12: 3rem;--header-top: clamp(12px, 2.8vh, 40px)}*{margin:0;padding:0;box-sizing:border-box;font-size:inherit}html{font-size:16px}body{background:var(--color-panel);color:var(--color-text);font-family:var(--font-typewriter-clean);font-size:var(--fs-md);line-height:var(--lh-normal)}body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;background:radial-gradient(120% 95% at 50% 14%,transparent 48%,rgba(0,0,0,.55) 90%)}body:after{content:"";position:fixed;inset:-2%;pointer-events:none;z-index:1;background:repeating-linear-gradient(0deg,rgba(255,255,255,.015) 0 2px,transparent 2px 4px),repeating-linear-gradient(90deg,rgba(0,0,0,.015) 0 3px,transparent 3px 6px);mix-blend-mode:soft-light;opacity:.25;animation:grainShift 6s steps(6) infinite}@keyframes grainShift{to{transform:translate(-6px,-6px)}}h1{font-family:var(--font-typewriter-rough);font-size:var(--fs-h1);color:var(--color-primary);font-weight:700;text-transform:uppercase}h2{font-family:var(--font-typewriter-clean);font-size:var(--fs-h2);color:var(--color-secondary-light);font-weight:600;letter-spacing:.05em;margin-top:var(--space-4);margin-bottom:var(--space-3)}h3{font-family:var(--font-typewriter-clean);font-size:var(--fs-h3);color:var(--color-text);font-weight:600}small{font-size:var(--fs-xs);color:var(--color-text-muted)}.one-evidence:focus-visible,.button:focus-visible,a:focus-visible{outline:var(--outline-focus);outline-offset:4px}.ink{color:var(--color-ink)}.card{background-color:var(--color-panel);border:var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);padding:var(--space-4)}.button{display:inline-flex;align-items:center;gap:.5rem;padding:.625rem 1rem;background:var(--button-bg);color:var(--color-text);border-radius:var(--radius-md);border:none;box-shadow:var(--shadow-md);transition:transform var(--dur) var(--ease-out),filter var(--dur) var(--ease-out),background var(--dur) var(--ease-out)}.button:hover{background:var(--button-hover);transform:translateY(-.0625rem)}.button:active{transform:translateY(0);filter:brightness(.96)}.button:focus-visible{outline:var(--outline-focus)}.link{color:var(--link-color);text-decoration:none}.link:hover{color:var(--link-hover);text-decoration:underline}.backdrop{background:var(--bg-80);-webkit-backdrop-filter:blur(.125rem);backdrop-filter:blur(.125rem)}.glass{background:var(--paper-92);border:.0625rem solid var(--accent-16);box-shadow:0 .0625rem 0 var(--accent-16) inset}.noir-ca{filter:drop-shadow(1px 0 0 rgba(var(--ca-red-rgb),var(--ca-alpha))) drop-shadow(-1px 0 0 rgba(var(--ca-blue-rgb),var(--ca-alpha)))}.noir-ca:hover{filter:drop-shadow(1.5px 0 0 rgba(var(--ca-red-rgb),var(--ca-alpha-hover))) drop-shadow(-1.5px 0 0 rgba(var(--ca-blue-rgb),var(--ca-alpha-hover)))}.noir-ca-soft{filter:drop-shadow(.5px 0 1px rgba(var(--ca-red-rgb),var(--ca-alpha))) drop-shadow(-.5px 0 1px rgba(var(--ca-blue-rgb),var(--ca-alpha)))}.sweep{position:relative;overflow:hidden}.sweep:after{content:"";position:absolute;inset:-20% -120%;background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.1) 50%,transparent 60%);transform:translate(-30%) rotate(8deg);transition:transform .9s var(--ease-out);pointer-events:none}.sweep:hover:after{transform:translate(35%) rotate(8deg)}.crt{position:relative;isolation:isolate}.crt:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(transparent 95%,#ffffff0f) 0 0/100% 2px,linear-gradient(#0000001f,#0000001f);mix-blend-mode:overlay;opacity:.7}.crt:after{content:"REC 03:12";position:absolute;top:.5rem;right:.75rem;font:600 .75rem/1 var(--font-typewriter-clean);color:#ff4646e6;letter-spacing:.06em;text-shadow:0 0 .4em rgba(255,0,0,.35)}.stamp-pop{display:inline-block;transform:scale(.98) rotate(-1.5deg);filter:contrast(1.05) saturate(.95);animation:stampIn .5s var(--ease-out) forwards}@keyframes stampIn{0%{transform:scale(.8) rotate(-6deg);opacity:0}60%{transform:scale(1.03) rotate(-2deg);opacity:1}to{transform:scale(.98) rotate(-1.5deg)}}.app-container{min-height:100vh;display:flex;justify-content:center;align-items:center}.screen-fade{animation:fadeIn .5s ease-in}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}a:focus-visible,button:focus-visible,.cta-button:focus-visible{outline:var(--outline-focus);outline-offset:.25rem}.intro{min-block-size:100svh;display:grid;place-items:center;padding:var(--space-4);position:relative;z-index:2}.intro:before{background:radial-gradient(120% 95% at 50% 14%,transparent 54%,rgba(0,0,0,.55) 92%)}.intro:after{opacity:.18;animation:grainShift 8s steps(6) infinite}.intro-paper{position:relative;width:80vw;max-width:950px;height:70svh;display:flex;flex-direction:column;align-items:center;background:linear-gradient(transparent 0,rgba(0,0,0,.06) 2px,transparent 2px) top left/100% 28px no-repeat,color-mix(in oklab,var(--color-paper) 90%,#000 10%);color:var(--color-ink);border-radius:var(--radius-md);box-shadow:0 10px 30px #00000073,inset 0 0 0 1px #0000001f,inset 0 0 40px #0000001a;padding:var(--space-8) clamp(.875rem,1vw + .5rem,1.25rem)}.intro-paper.dense{--rule: clamp(18px, 1.6vh, 24px)}.typewriter-container{width:100%;display:flex;justify-content:flex-start;align-items:flex-start;flex:1}.typewriter-text{font-family:var(--font-typewriter-clean);font-size:var(--fs-lg);line-height:var(--lh-normal);color:var(--color-ink);letter-spacing:.02em;word-spacing:.15em;text-shadow:.5px .5px 0 rgba(0,0,0,.08);white-space:pre-wrap;word-wrap:break-word}.cursor{color:var(--color-ink);font-weight:600;transform:translateY(.05em);animation:cursorBlink .9s step-end infinite;font-weight:700;margin-left:.125rem}@keyframes cursorBlink{0%,50%{opacity:1}51%,to{opacity:0}}.cta-button{padding:var(--space-3) var(--space-6);font-family:var(--font-typewriter-clean);font-size:var(--fs-md);font-weight:600;color:var(--color-text);letter-spacing:.05em;text-transform:uppercase;background-image:linear-gradient(to right,var(--color-metal),var(--color-wood));border:none;border-radius:var(--radius-sm);cursor:pointer;transition:transform var(--dur) var(--ease-out),background var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out);margin-top:var(--space-3);min-inline-size:12ch}.cta-button.pop-in{animation:popIn .6s cubic-bezier(.68,-.55,.265,1.55) both}.tw-reveal{overflow:hidden;white-space:nowrap;border-right:.08em solid currentColor;animation:twType 1.6s steps(24,end) var(--tw-delay,0ms) both,twCaret .75s step-end infinite}@keyframes twType{0%{width:0}to{width:100%}}@keyframes twCaret{50%{border-color:transparent}}.flicker-soft{text-shadow:0 0 .15em rgba(212,160,23,.25);animation:flicker 2.8s linear infinite}@keyframes flicker{0%,to{opacity:1;filter:none}8%{opacity:.96}12%{opacity:.85;filter:brightness(1.05)}13%{opacity:.98}22%{opacity:.9}55%{opacity:.97}57%{opacity:.8;filter:brightness(1.08)}60%{opacity:1;filter:none}}@keyframes popIn{0%{opacity:0;transform:translateY(1.25rem) scale(.9)}50%{transform:translateY(-.3125rem) scale(1.05)}to{opacity:1;transform:translateY(0) scale(1)}}.cta-button:hover{background-image:linear-gradient(to right,var(--color-wood),var(--color-metal));transform:translateY(-.125rem) scale(1.02);box-shadow:var(--shadow-hard),0 0 0 1px var(--glass-stroke) inset}.cta-button:active{transform:translateY(0) scale(.98);box-shadow:var(--shadow-soft)}.cta-button:focus-visible{outline:var(--outline-focus);outline-offset:.25rem}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.cursor{opacity:1!important}}@media(min-width:900px){.intro-paper{aspect-ratio:4 / 3}}@media(max-width:860px){.intro-paper{width:90vw;min-height:28rem}}@media(max-width:768px){.intro{padding:var(--space-3)}.intro-paper{inline-size:92vw;min-block-size:22rem;padding:var(--space-8) var(--space-6)}}@media(max-width:480px){.intro-paper{inline-size:95vw;min-block-size:19rem;padding:var(--space-4) var(--space-3)}}@media(max-width:350px){.cta-button{animation:none}}.game-header{display:grid;grid-template-columns:1fr;align-items:center;gap:1rem 1.25rem;padding:.5rem 0;position:relative;max-width:950px;margin:calc(var(--header-top) + env(safe-area-inset-top,0px)) auto 2.5rem;padding:.5rem 0 .75rem;border-bottom:1px solid rgba(255,255,255,.08)}.game-header:after{content:"";position:absolute;inset:calc(100% - 4px) 0 auto 0;height:100px;pointer-events:none;background:radial-gradient(120% 80% at 50% -10%,#ffffff14,#0000 60%);mix-blend-mode:soft-light;opacity:.35}.game-header h1{letter-spacing:.02em;line-height:1.1;text-shadow:0 2px 0 rgba(0,0,0,.35);margin:.25rem 0 0;text-align:center}.game-header h2{margin:.25rem 0 0;letter-spacing:.015em}.clue-counter{font-size:var(--fs-md);opacity:.9;justify-self:flex-end;margin-left:auto}.clue-message{margin-top:.25rem;font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em}.game-main h2{margin:0 .5rem .75rem;color:var(--color-text-muted);font-size:var(--fs-lg);letter-spacing:.03em;text-transform:uppercase;text-shadow:0 1px 0 rgba(0,0,0,.4);filter:contrast(1.05) brightness(1.02)}.game-header .progress-wrap{display:flex;justify-content:normal;justify-self:stretch;flex-wrap:wrap}progress{appearance:none;-webkit-appearance:none;-moz-appearance:none;display:block;width:180px;margin:0;padding:var(--space-1);padding-bottom:var(--space-01);border:0;background:var(--color-gray-700);border-radius:var(--radius-pill);box-shadow:inset 0 1px 1px #00000080,0 1px #fff3;height:var(--space-4);overflow:hidden}progress::-moz-progress-bar:hover{filter:brightness(1.5)}.progress-wrap{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;justify-self:end}.progress-labels{display:flex;gap:.5rem;align-items:center;font-family:var(--font-typewriter-clean);font-size:var(--fs-xs);color:var(--color-text-muted)}progress{box-shadow:inset 0 1px 1px #00000059}progress::-webkit-progress-value,progress::-moz-progress-bar{box-shadow:none;transition:filter .4s linear}.game-header .progress-wrap:before{content:"CASE " attr(data-case);display:inline-block;margin-right:.5rem;font:700 .75rem/1 var(--font-typewriter-clean);letter-spacing:.08em;color:#ffffffbf;padding:.2rem .5rem;border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-pill);transform:translateY(-1px)}progress::-moz-progress-bar{background:var(--progress-color);border-radius:var(--radius-pill);box-shadow:inset 0 -2px 4px #0006,0 2px 5px #0000004d}progress::-webkit-progress-bar{background:transparent}progress::-webkit-progress-value{background:var(--progress-color);border-radius:var(--radius-pill);box-shadow:inset 0 -2px 4px #0006,0 2px 5px #0000004d;transition:filter .4s linear}progress::-webkit-progress-value:hover{filter:brightness(1.1)}progress:focus-visible{outline:var(--outline-focus)}.game-main{max-width:960px;margin:0 auto}@media(prefers-reduced-motion:reduce){progress{scroll-behavior:auto}}@media(max-width:950px){.game-header{padding:.5rem 1rem}}@media(max-width:720px){.game-header{grid-template-columns:1fr}.game-header .progress-wrap{justify-self:start}.game-header h1{font-size:clamp(1.75rem,2.8vw + 1.2rem,2.6rem)}}.board{display:grid;--r1: 30rem;--r2: 16rem;--r3: 42rem;--r4: 24rem;--r5: 24rem;--r6: 34rem;--gy: 1rem;row-gap:var(--gy);column-gap:1rem;grid-template-columns:repeat(2,1fr);grid-template-rows:var(--r1) var(--r2) var(--r3) var(--r4) var(--r5) var(--r6);max-width:950px;margin:var(--space-4) auto var(--space-12)}.one-evidence{--img-max: 100%}.one-evidence img{max-height:var(--img-max);height:auto;object-fit:contain}.one-evidence{position:relative;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,240,200,.06);border-radius:var(--radius-lg);padding:1rem;cursor:pointer;background:var(--color-surface);transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out),filter .4s var(--ease-out);overflow:hidden;box-sizing:border-box;box-shadow:0 4px 16px #00000080,inset 0 0 12px #00000040}.one-evidence:before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(to bottom right,#ffe6b414,#0003);mix-blend-mode:overlay;pointer-events:none}.one-evidence.completed:after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--color-success-15) url(/Detective-game/assets/stamp-sirRY4WS.webp);background-size:contain;background-position:center;background-repeat:no-repeat;background-blend-mode:screen;pointer-events:none;z-index:1}.one-evidence.completed{filter:none;pointer-events:none}.one-evidence img{filter:drop-shadow(var(--drop-shadow-md-light)) saturate(.6);max-width:100%;width:auto;display:block;transition:transform .6s ease-out,filter .6s ease-in-out}.one-evidence.completed img{filter:saturate(.2)}.one-evidence:hover{transform:scale(1.02)}.one-evidence:hover img{transform:scale(1.02);filter:drop-shadow(var(--drop-shadow-hard-light)) saturate(1)}.one-evidence.skew-1{transform:rotate(-.4deg)}.one-evidence.skew-2{transform:rotate(.5deg)}.one-evidence.skew-3{transform:rotate(-.8deg)}.newspaper{grid-area:1 / 1 / 2 / 2;height:var(--r1)}.ticket{grid-area:2 / 1 / 3 / 2;height:var(--r2)}.old-map{grid-area:1 / 2 / 3 / 3;height:calc(var(--r1) + var(--r2) + var(--gy));--img-max: 70%}.security-footage{grid-area:3 / 1 / 4 / 2;height:var(--r3)}.interrogations{grid-area:3 / 2 / 4 / 3;padding:6rem 3rem;height:var(--r3)}.medical-notes{grid-area:4 / 1 / 6 / 2;height:calc(var(--r4) + var(--r5) + var(--gy))}.old-photo{grid-area:4 / 2 / 5 / 3;height:var(--r4);--img-max: 70%}.pin:before{content:"";position:absolute;top:.35rem;right:.5rem;width:.6rem;height:.6rem;border-radius:50%;background:var(--color-accent);box-shadow:inset 0 -1px 2px #0006,0 2px 4px #0006}.watch{grid-area:5 / 2 / 6 / 3;height:var(--r5);--img-max: 70%}.notebook{grid-area:6 / 1 / 7 / 2;padding:3rem 1rem;height:var(--r6)}.incident-report{grid-area:6 / 2 / 7 / 3;height:var(--r6)}.evidence-paper{position:relative;background:linear-gradient(transparent 0,rgba(0,0,0,.06) 2px,transparent 2px) top left/100% 28px no-repeat,color-mix(in oklab,var(--color-paper) 90%,#000 10%);color:var(--color-ink);border-radius:var(--radius-md);box-shadow:0 10px 30px #00000073,inset 0 0 0 1px #0000001f,inset 0 0 40px #0000001a;padding:clamp(.875rem,1vw + .5rem,1.25rem)}.evidence-paper h3{color:var(--color-ink)}.evidence-paper:after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(130% 80% at 50% -10%,rgba(0,0,0,.08),transparent 50%),radial-gradient(140% 90% at 50% 110%,rgba(0,0,0,.1),transparent 50%);mix-blend-mode:multiply}.evidence-paper.tear{position:relative;overflow:visible}.evidence-paper.tear:before{content:"";position:absolute;left:-1px;right:-1px;top:-10px;height:26px;background:var(--color-surface);border-top-left-radius:inherit;border-top-right-radius:inherit;z-index:1;-webkit-mask:radial-gradient(12px 7px at 8% 95%,#000 60%,transparent 61%) top left / 110px 18px repeat-x,radial-gradient(12px 7px at 28% 95%,#000 60%,transparent 61%) top left / 110px 18px repeat-x,radial-gradient(12px 7px at 48% 95%,#000 60%,transparent 61%) top left / 110px 18px repeat-x,radial-gradient(12px 7px at 68% 95%,#000 60%,transparent 61%) top left / 110px 18px repeat-x,radial-gradient(12px 7px at 88% 95%,#000 60%,transparent 61%) top left / 110px 18px repeat-x,linear-gradient(#000,#000);mask:radial-gradient(12px 7px at 8% 95%,#000 60%,transparent 61%) top left / 110px 18px repeat-x,radial-gradient(12px 7px at 28% 95%,#000 60%,transparent 61%) top left / 110px 18px repeat-x,radial-gradient(12px 7px at 48% 95%,#000 60%,transparent 61%) top left / 110px 18px repeat-x,radial-gradient(12px 7px at 68% 95%,#000 60%,transparent 61%) top left / 110px 18px repeat-x,radial-gradient(12px 7px at 88% 95%,#000 60%,transparent 61%) top left / 110px 18px repeat-x,linear-gradient(#000,#000)}@media(max-width:648px){.board{display:flex;flex-direction:column;gap:1rem;align-items:center;margin:1rem}.board .one-evidence{width:100%;height:auto}}.solved{color:var(--color-success)}.clues-found{color:var(--color-text);text-transform:uppercase}.final-report{overflow-y:auto;scrollbar-color:var(--ink-64) var(--primary-12);scrollbar-width:thin}.final-report h2{color:var(--color-ink)}