@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Special+Elite&display=swap');

:root{--night:#06111a;--paper:#e9dfca;--ink:#172129;--brass:#c29b54;--brass-light:#e1c47b;--accent:#c29b54;--stamp:#8b2524;--success:#4e745d;--danger:#9e312d;--shadow:rgba(0,0,0,.65)}
*{box-sizing:border-box}
html{min-height:100%;background:var(--night)}
body{margin:0;min-height:100svh;color:var(--ink);font-family:"Special Elite","Courier New",monospace;background:linear-gradient(180deg,rgba(2,9,14,.48),rgba(2,8,12,.82)),url("assets/nachtlicht-lighthouse.png") 72% 75%/cover fixed,var(--night);overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 50% -10%,transparent 0 36%,rgba(0,0,0,.42) 100%),repeating-linear-gradient(0deg,rgba(255,255,255,.015) 0 1px,transparent 1px 4px);z-index:0}
.atmosphere{position:fixed;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 0 46%,rgba(223,181,101,.08) 55%,transparent 66%);mix-blend-mode:screen}
.shell{position:relative;z-index:1;width:min(720px,100%);min-height:100svh;margin:0 auto;padding:max(18px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(22px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));display:grid;align-items:center}
.case-file{position:relative;isolation:isolate;overflow:hidden;padding:clamp(24px,6vw,48px);background:radial-gradient(circle at 22% 8%,rgba(255,255,255,.44),transparent 30%),repeating-linear-gradient(90deg,rgba(74,53,28,.025) 0 1px,transparent 1px 5px),linear-gradient(145deg,#efe7d5 0%,var(--paper) 44%,#d8c9ae 100%);border:1px solid rgba(224,197,139,.55);border-radius:5px 18px 7px 12px;box-shadow:0 28px 70px var(--shadow),inset 0 0 65px rgba(75,52,25,.13);transform:rotate(-.12deg)}
.case-file::before,.case-file::after{content:"";position:absolute;z-index:-1;pointer-events:none}
.case-file::before{inset:9px;border:1px solid rgba(68,47,28,.2);border-radius:2px 13px 4px 9px}
.case-file::after{width:210px;height:210px;right:-82px;bottom:-76px;border:4px double rgba(98,73,38,.16);border-radius:50%;box-shadow:inset 0 0 0 12px transparent,inset 0 0 0 14px rgba(98,73,38,.1),inset 0 0 0 34px transparent,inset 0 0 0 36px rgba(98,73,38,.1)}
.case-header,.status,footer{display:flex;align-items:center;justify-content:space-between;gap:12px}
.case-header{margin-bottom:24px}
.classification{display:inline-block;padding:5px 10px 3px;color:var(--stamp);border:3px double var(--stamp);font-family:"Oswald",sans-serif;font-size:14px;font-weight:700;letter-spacing:.16em;transform:rotate(-4deg);opacity:.9}
.case-number,.eyebrow,.status,footer{font-family:"Oswald","Arial Narrow",sans-serif;font-weight:600;letter-spacing:.13em;text-transform:uppercase}
.case-number{color:#5c554a;font-size:11px}
.brand-row{display:grid;grid-template-columns:72px 1fr;gap:18px;align-items:center}
.eyebrow{color:var(--stamp);font-size:12px}
h1,h2{font-family:"Oswald","Arial Narrow",sans-serif;text-transform:uppercase;letter-spacing:.025em;color:#101a21}
h1{margin:4px 0 0;font-size:clamp(38px,9vw,64px);line-height:.95}
h2{margin:0 0 12px;font-size:clamp(28px,7vw,42px);line-height:1.05}
.story,#prompt,#hint{line-height:1.65}
.story{margin:22px 0 0;color:#50575a;font-size:15px}
.selection-panel{margin-top:28px}
label{display:block;margin:20px 0 8px;font-family:"Oswald",sans-serif;font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#343b3e}
.select-frame{position:relative}.select-frame::after{content:"⌄";position:absolute;right:16px;top:50%;translate:0 -58%;pointer-events:none;font-size:22px;color:var(--brass)}
input,select,button{width:100%;min-height:52px;border-radius:3px;font:inherit;font-size:16px}
input,select{border:1px solid #9d8e74;background:rgba(255,253,245,.66);color:var(--ink);outline:none;box-shadow:inset 0 2px 8px rgba(69,50,30,.12)}
input{padding:15px 16px 12px;text-transform:uppercase}select{padding:14px 48px 12px 16px;appearance:none;cursor:pointer}
input:focus-visible,select:focus-visible{border-color:#8f6c2f;box-shadow:0 0 0 3px rgba(194,155,84,.24),inset 0 2px 8px rgba(69,50,30,.12)}
button{position:relative;margin-top:13px;padding:14px 18px 12px;overflow:hidden;border:1px solid #71551f;color:#fff8e8;background:linear-gradient(180deg,#17384b,#0b2636);box-shadow:inset 0 0 0 1px rgba(229,196,123,.25),0 5px 14px rgba(15,29,37,.25);font-family:"Oswald",sans-serif;font-weight:700;letter-spacing:.13em;text-transform:uppercase;cursor:pointer;touch-action:manipulation}
button::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 25%,rgba(225,196,123,.18) 50%,transparent 75%);transform:translateX(-120%);transition:transform .45s ease}button span{position:relative}button:hover::before{transform:translateX(120%)}button:active{transform:translateY(1px)}button:focus-visible{outline:3px solid rgba(139,37,36,.35);outline-offset:2px}
.status{margin-top:26px;padding-top:17px;border-top:1px solid rgba(77,58,35,.25);color:#55584f;font-size:11px}#typeLabel{color:var(--stamp)}
.progress{height:3px;margin:9px 0 20px;overflow:hidden;background:rgba(49,45,39,.14)}.progress span{display:block;width:var(--progress,0%);height:100%;background:linear-gradient(90deg,#9f793b,var(--brass-light));transition:width .35s ease}
.puzzle-sheet{position:relative;margin-top:8px;padding:clamp(20px,5vw,30px);background:rgba(246,240,224,.72);border:1px solid rgba(85,63,37,.22);box-shadow:0 8px 26px rgba(49,36,22,.12),inset 0 0 34px rgba(99,76,45,.06)}
.paper-clip{position:absolute;width:14px;height:48px;right:25px;top:-14px;border:2px solid #756d61;border-radius:9px;transform:rotate(8deg);opacity:.72}
#prompt{margin:0;color:#3e4648}#message{min-height:25px;margin:14px 0 0;font-weight:700;line-height:1.4}.ok{color:var(--success)}.bad{color:var(--danger)}
details{margin-top:18px;padding-top:16px;border-top:1px dashed #a99a7e;color:#545854}summary{display:flex;align-items:center;gap:9px;color:#30383b;font-family:"Oswald",sans-serif;font-weight:600;letter-spacing:.05em;cursor:pointer;list-style:none}summary::-webkit-details-marker{display:none}.hint-icon{display:inline-grid;width:25px;height:25px;place-items:center;border:1px solid var(--brass);border-radius:50%;color:#7a5b24}
.caesar{margin:17px 0 4px}.caesar output{display:block;padding:13px 14px;border:1px dashed #9e8255;background:rgba(220,204,172,.35);color:#684b1d;line-height:1.5;word-break:break-word}
footer{margin-top:26px;padding-top:13px;border-top:1px solid rgba(77,58,35,.2);color:#676158;font-size:9px}footer span:last-child{color:var(--stamp);border:1px solid currentColor;padding:3px 6px 2px;transform:rotate(-2deg)}
.lighthouse-mark{position:relative;width:66px;height:84px;filter:drop-shadow(0 4px 3px rgba(20,25,27,.18))}.tower{position:absolute;left:22px;bottom:8px;width:25px;height:53px;background:#17242a;clip-path:polygon(25% 0,75% 0,100% 100%,0 100%)}.tower::after{content:"";position:absolute;width:5px;height:7px;left:10px;bottom:6px;border-radius:4px 4px 0 0;background:var(--paper)}.lantern{position:absolute;left:18px;bottom:59px;width:33px;height:18px;border:4px solid #17242a;background:var(--brass-light)}.lantern::before,.lantern::after{content:"";position:absolute;left:-7px;width:39px;height:4px;background:#17242a}.lantern::before{top:-8px;clip-path:polygon(50% 0,100% 100%,0 100%);height:8px}.lantern::after{bottom:-7px}.beam{position:absolute;left:-23px;bottom:63px;width:47px;height:16px;background:linear-gradient(90deg,transparent,rgba(210,171,89,.52));clip-path:polygon(0 50%,100% 0,100% 100%)}.rocks{position:absolute;left:3px;bottom:2px;width:62px;height:16px;background:#17242a;clip-path:polygon(0 100%,8% 48%,23% 58%,34% 15%,45% 45%,57% 28%,70% 60%,83% 36%,100% 100%)}
[hidden]{display:none!important}
@media(max-width:520px){body{background-position:68% 80%;background-attachment:scroll}.shell{padding:10px;align-items:start}.case-file{min-height:calc(100svh - 20px);padding:23px 19px 20px;border-radius:3px 12px 5px 8px}.case-header{margin-bottom:20px}.brand-row{grid-template-columns:55px 1fr;gap:13px}.lighthouse-mark{width:53px;transform:scale(.82);transform-origin:left center}h1{font-size:clamp(34px,12vw,49px)}.story{margin-top:18px;font-size:14px}.puzzle-sheet{margin-inline:-5px;padding:22px 17px 20px}input,select,button{min-height:54px;font-size:16px}footer{margin-top:22px}}
@media(min-width:900px){.shell{padding-block:40px}.case-file{min-height:0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}
@media(prefers-contrast:more){.case-file{background:#f3ead8}input,select{background:#fffdf6;border-color:#4f4639}}