/* ===== Ermittlungsterminal · Villa Falkenhof · Stil A (dunkel) ===== */
@import url('tokens.css');

*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  font-family:var(--font-serif); color:var(--app-fg); background:var(--app-bg-0);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  -webkit-tap-highlight-color:transparent; user-select:none;
}
#app{ min-height:100%; background:var(--app-bg-grad); display:flex; flex-direction:column; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
.hidden{ display:none !important; }
.tw{ font-family:var(--font-typewriter); }
.brass{ color:var(--app-accent); }

/* glow + texture */
#app::before{ content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>"); }
#app > *{ position:relative; z-index:1; }

/* ================= INTRO ================= */
.intro{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:40px 24px; gap:6px; }
.intro .kicker{ font-family:var(--font-typewriter); letter-spacing:.32em; text-transform:uppercase; font-size:13px; color:var(--app-accent); }
.intro .crest-lg{ width:120px; height:120px; margin:10px 0; }
.intro .crest-lg *{ stroke:var(--app-accent); fill:none; stroke-width:1.2; }
.intro .crest-lg .fill{ fill:var(--app-accent); stroke:none; }
.intro h1{ font-family:var(--font-typewriter); font-size:clamp(30px,6vw,52px); letter-spacing:.02em; color:#f2e2bb; line-height:1.05; }
.intro h2{ font-family:var(--font-serif); font-style:italic; font-weight:400; font-size:clamp(16px,3vw,22px); color:var(--app-fg-soft); margin-bottom:18px; }
.intro .lead{ max-width:620px; font-size:17px; line-height:1.65; color:var(--app-fg); white-space:pre-line; }
.intro .lead strong{ color:var(--app-accent-bright); }
.btn-primary{ margin-top:24px; font-family:var(--font-typewriter); letter-spacing:.08em; font-size:16px;
  color:#1a130b; background:linear-gradient(#e7c887,#c79a4e); padding:15px 30px; border-radius:12px;
  box-shadow:0 10px 26px -10px #000a, inset 0 1px 0 #fff6; transition:.15s; }
.btn-primary:hover{ transform:translateY(-1px); filter:brightness(1.06); }
.btn-ghost{ font-family:var(--font-typewriter); font-size:13px; letter-spacing:.06em; color:var(--app-accent);
  border:1px solid var(--app-line); padding:10px 16px; border-radius:10px; transition:.15s; }
.btn-ghost:hover{ background:#ffffff0a; color:var(--app-accent-bright); }

/* ================= TOPBAR ================= */
.topbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px;
  border-bottom:1px solid var(--app-line); background:#140f0acc; backdrop-filter:blur(6px); position:sticky; top:0; }
.topbar .brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-typewriter); font-size:13px; letter-spacing:.1em; color:var(--app-accent); text-transform:uppercase; }
.topbar .brand .crest-sm{ width:26px; height:26px; } .topbar .crest-sm *{ stroke:var(--app-accent); fill:none; stroke-width:1.6; } .topbar .crest-sm .fill{ fill:var(--app-accent); stroke:none; }
.topbar .right{ display:flex; align-items:center; gap:14px; }
.stars{ font-size:15px; letter-spacing:1px; color:var(--app-accent-bright); white-space:nowrap; }
.iconbtn{ font-size:20px; min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; border-radius:9px; color:var(--app-fg-soft); }
.iconbtn:hover{ background:#ffffff0d; color:var(--app-fg); }

/* ================= ACT TABS + HEADER ================= */
.acttabs{ display:flex; gap:6px; padding:12px 16px 0; flex-wrap:wrap; }
.acttab{ font-family:var(--font-typewriter); font-size:12.5px; letter-spacing:.06em; padding:11px 16px; min-height:44px; display:inline-flex; align-items:center; border-radius:10px 10px 0 0;
  border:1px solid var(--app-line); border-bottom:none; color:var(--app-fg-soft); background:#1a140e; }
.acttab.active{ background:var(--app-panel); color:#f2e2bb; }
.acttab.locked{ opacity:.62; }
.acttab.locked::before{ content:"🔒 "; font-size:11px; }
.acthead{ margin:0 16px; padding:16px 18px; background:var(--app-panel); border:1px solid var(--app-line); border-radius:0 12px 12px 12px; }
.acthead h3{ font-family:var(--font-typewriter); font-size:18px; color:#f2e2bb; }
.acthead p{ color:var(--app-fg-soft); font-size:15px; margin-top:4px; font-style:italic; }

/* ================= PUZZLE GRID ================= */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; padding:16px; }
.pcard{ background:var(--app-panel); border:1px solid var(--app-line); border-radius:12px; padding:15px 16px; min-height:118px;
  display:flex; flex-direction:column; gap:8px; transition:.15s; position:relative; }
.pcard.available{ cursor:pointer; } .pcard.available:hover{ border-color:var(--app-accent); transform:translateY(-2px); box-shadow:0 12px 28px -16px #000; }
.pcard.locked{ background:#191309; } .pcard.locked .ptitle{ color:#bcae8e; } .pcard.locked .ptype{ color:#9c7d3e; } .pcard.solved{ border-color:#3f5a3a; }
.pcard .ptype{ font-family:var(--font-typewriter); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--app-accent); }
.pcard .ptitle{ font-size:18px; color:#f2e2bb; }
.pcard .pstat{ margin-top:auto; font-size:12.5px; color:var(--app-fg-soft); display:flex; align-items:center; gap:7px; }
.pcard .badge{ position:absolute; top:12px; right:14px; font-size:16px; }
.pcard.solved .badge{ color:var(--app-good); }
.pcard.locked .badge{ color:var(--app-fg-soft); }

/* envelope banner */
.envbanner{ margin:0 16px 4px; padding:13px 16px; border:1px dashed var(--app-accent); border-radius:12px; background:#c79a4e14;
  font-family:var(--font-typewriter); color:var(--app-accent-bright); display:flex; align-items:center; gap:10px; font-size:14px; }
.envbanner .big{ font-size:22px; }

/* fragments bar */
.fragbar{ display:flex; align-items:center; gap:8px; padding:10px 16px; color:var(--app-fg-soft); font-size:13px; }
.fragbar .feather{ width:30px; height:34px; border:1px solid var(--app-line); border-radius:6px; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-typewriter); font-size:16px; color:#2a2018; background:#3a3024; }
.fragbar .feather.got{ background:linear-gradient(#e7c887,#c79a4e); color:#1a130b; border-color:var(--app-accent); }

/* ================= MODAL ================= */
.scrim{ position:fixed; inset:0; background:#000a; backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center; padding:18px; z-index:40; }
.modal{ position:relative; width:min(560px,100%); max-height:92vh; overflow:auto; background:var(--app-bg-1); border:1px solid var(--app-accent); border-radius:16px;
  box-shadow:0 30px 70px -20px #000e; padding:22px 22px 24px; }
.modal .mtype{ font-family:var(--font-typewriter); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--app-accent); }
.modal h3{ font-family:var(--font-typewriter); font-size:22px; color:#f2e2bb; margin:4px 0 12px; }
.modal .prompt{ font-size:16px; line-height:1.6; color:var(--app-fg); margin-bottom:16px; }
.modal .close{ position:absolute; top:8px; right:8px; width:44px; height:44px; display:flex; align-items:center; justify-content:center; font-size:24px; border-radius:10px; color:var(--app-fg-soft); }
.modal .close:hover{ background:#ffffff0d; color:var(--app-fg); }
.modal h3{ padding-right:40px; }

/* code input */
.codewrap{ display:flex; gap:10px; align-items:center; margin:6px 0 4px; flex-wrap:wrap; }
.codeinput{ flex:1; min-width:160px; font-family:var(--font-typewriter); font-size:24px; letter-spacing:.14em; text-align:center;
  color:#f0d9a0; background:#0e0a07; border:1px solid var(--app-line); border-radius:10px; padding:13px 14px; outline:none; }
.codeinput:focus{ border-color:var(--app-accent); box-shadow:0 0 0 2px #c79a4e33; }
.submit{ font-family:var(--font-typewriter); font-size:15px; color:#1a130b; background:linear-gradient(#e7c887,#c79a4e); padding:13px 20px; border-radius:10px; }
.feedback{ min-height:22px; margin:10px 0; font-size:14.5px; }
.feedback.bad{ color:var(--app-bad); } .feedback.nudge{ color:var(--app-accent-bright); } .feedback.good{ color:var(--app-good); }

/* hints */
.hintbox{ margin-top:14px; border-top:1px solid var(--app-line); padding-top:12px; }
.hintbtn{ font-family:var(--font-typewriter); font-size:13px; color:var(--app-accent-bright); border:1px solid var(--app-accent); padding:10px 15px; border-radius:10px; }
.hintbtn:disabled{ opacity:.4; }
.hinttext{ margin-top:10px; padding:11px 14px; background:#241d1580; border-left:3px solid var(--app-accent); border-radius:0 8px 8px 0; font-size:14.5px; line-height:1.55; }
.hint-followup{ margin-top:8px; display:flex; gap:8px; align-items:center; font-size:13px; color:var(--app-fg-soft); }
.hint-followup button{ color:var(--app-accent); border:1px solid var(--app-line); padding:5px 11px; border-radius:8px; }

/* tools */
.tool-clock{ display:flex; flex-direction:column; align-items:center; gap:10px; margin:6px 0 14px; }
.tool-clock .playbtn{ font-family:var(--font-typewriter); font-size:15px; color:var(--app-accent-bright); border:1px solid var(--app-accent); padding:12px 18px; border-radius:12px; }
.tool-clock .chimes{ font-size:22px; letter-spacing:6px; color:var(--app-accent); min-height:28px; }
.cap{ font-size:12px; color:var(--app-fg-soft); }
.scene{ position:relative; width:100%; aspect-ratio:4/3; border-radius:12px; overflow:hidden; border:1px solid var(--app-line); margin-bottom:8px; }
.scene svg{ width:100%; height:100%; display:block; }
.redfilter{ position:absolute; inset:0; background:#d21f1f; mix-blend-mode:multiply; opacity:0; transition:opacity .25s; pointer-events:none; }
.scene.on .redfilter{ opacity:.92; }
.filterbtn{ font-family:var(--font-typewriter); font-size:13px; color:var(--app-accent-bright); border:1px solid var(--app-accent); padding:9px 14px; border-radius:10px; }

/* reveal on solve */
.solveflash{ text-align:center; padding:8px 0 2px; }
.solveflash .ok{ font-size:34px; color:var(--app-good); }
.solveflash .rv{ font-size:16px; line-height:1.6; color:var(--app-fg); margin-top:8px; white-space:pre-line; }
.solveflash .env{ margin-top:14px; font-family:var(--font-typewriter); color:var(--app-accent-bright); font-size:17px; }
.solveflash .frag{ margin-top:10px; font-size:14px; color:var(--app-accent); }

/* ================= FINALE ================= */
.finale{ position:fixed; inset:0; z-index:60; background:radial-gradient(120% 90% at 50% 10%, #241d15, #120d08 70%); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:40px 26px; gap:14px; overflow:auto; }
.finale .step{ opacity:0; transform:translateY(14px); transition:opacity 1s, transform 1s; max-width:680px; }
.finale .step.show{ opacity:1; transform:none; }
.finale .name{ font-family:var(--font-typewriter); font-size:clamp(28px,6vw,46px); color:#f2e2bb; letter-spacing:.04em; }
.finale .line{ font-style:italic; font-size:19px; color:var(--app-accent-bright); }
.finale .falk{ font-size:19px; line-height:1.6; color:var(--app-fg); }
.finale .epi{ font-size:16px; line-height:1.7; color:var(--app-fg-soft); max-width:620px; }
.scorecard{ margin-top:10px; padding:20px 26px; border:1px solid var(--app-accent); border-radius:16px; background:#1a140e; }
.scorecard .bigstars{ font-size:30px; color:var(--app-accent-bright); letter-spacing:3px; }
.scorecard .rank{ font-family:var(--font-typewriter); font-size:20px; color:#f2e2bb; margin-top:8px; }
.scorecard .detail{ font-size:13px; color:var(--app-fg-soft); margin-top:6px; }

/* ================= SETTINGS / RECAP ================= */
.sheet-pop{ position:fixed; inset:auto 0 0 0; background:var(--app-bg-1); border-top:1px solid var(--app-accent); border-radius:18px 18px 0 0; padding:20px 22px 28px; z-index:50; }
.sheet-pop h4{ font-family:var(--font-typewriter); color:var(--app-accent); font-size:13px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:12px; }
.row{ display:flex; align-items:center; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--app-line); font-size:15px; }
.toggle{ width:48px; height:27px; border-radius:20px; background:#3a3024; position:relative; transition:.15s; }
.toggle.on{ background:var(--app-accent); }
.toggle::after{ content:""; position:absolute; top:3px; left:3px; width:21px; height:21px; border-radius:50%; background:#f0e2c8; transition:.15s; }
.toggle.on::after{ left:24px; }
.recap{ font-size:15px; line-height:1.6; color:var(--app-fg); }
.recap b{ color:var(--app-accent-bright); }

@media (max-width:560px){ .grid{ grid-template-columns:1fr 1fr; } .pcard .ptitle{ font-size:16px; } }
@media (max-width:420px){ .grid{ grid-template-columns:1fr; } }

/* Fokus-Ring (Tastatur) */
:focus-visible{ outline:2px solid var(--app-accent-bright); outline-offset:2px; border-radius:6px; }

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .finale .step{ opacity:1 !important; transform:none !important; }
  .pcard.available:hover{ transform:none; }
}