@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;0,700;1,600&display=swap');

:root {
  --bg:#10100f;
  --panel:#191918;
  --panel2:#22211f;
  --border:#35332f;
  --text:#e8e4da;
  --muted:#918c81;
  --red:#b34239;
  --paper:#d8cfb9;
}

* {box-sizing:border-box;margin:0;padding:0}
body {background:var(--bg);color:var(--text);font:14px 'DM Sans',sans-serif}
button,input,textarea,select {font:inherit}
button {cursor:pointer}
.hidden {display:none!important}

.header {
  height:80px;padding:0 7%;display:flex;align-items:center;
  justify-content:space-between;border-bottom:1px solid var(--border)
}
.logo {color:var(--text);text-decoration:none;font-size:25px;font-weight:800;letter-spacing:5px}
.logo span,.eyebrow {color:var(--red)}
.header-right,.eyebrow,.hero-bottom,.side-label,.progress-text,.side-warning {
  font-size:10px;font-weight:700;letter-spacing:2px
}
.header-right,.hero-bottom,.side-label,.progress-text,.side-warning {color:var(--muted)}
.live-dot {display:inline-block;width:7px;height:7px;background:var(--red);border-radius:50%;margin-right:9px}

.hero {max-width:1500px;margin:auto;padding:100px 7% 45px}
.hero h1,.case-heading h1 {
  font:600 clamp(43px,6vw,83px)/1.15 'Playfair Display',serif;
  letter-spacing:-2px;margin:28px 0
}
.hero h1 em {color:#a34d44}
.hero>p {max-width:530px;font-size:15px;line-height:1.9;color:var(--muted)}
.hero-bottom {display:flex;justify-content:space-between;border-top:1px solid var(--border);margin-top:85px;padding-top:20px}

.cases {max-width:1500px;margin:auto;padding:45px 7% 110px}
.section-label {display:block;margin-bottom:25px}
.case-grid {display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.case-card {border:1px solid var(--border);background:var(--panel);overflow:hidden;cursor:pointer;transition:border-color .2s}
.case-card:hover {border-color:var(--red)}
.case-image {height:235px;background-size:cover;background-position:center;position:relative;filter:grayscale(65%)}
.case-image:after {content:"";position:absolute;inset:0;background:linear-gradient(transparent,rgba(0,0,0,.7))}
.case-stamp {
  position:absolute;z-index:1;top:20px;left:20px;border:1px solid #c16c62;
  color:#e7a79f;padding:8px 12px;font-size:10px;letter-spacing:2px;
  transform:rotate(-5deg);background:#171312cc
}
.case-info {padding:26px}
.case-info small {color:var(--red);letter-spacing:2px}
.case-info h2 {font:600 29px 'Playfair Display',serif;margin:15px 0}
.case-info p {color:var(--muted);line-height:1.8;min-height:75px}
.case-link {display:flex;justify-content:space-between;border-top:1px solid var(--border);padding-top:18px;margin-top:25px;letter-spacing:2px;font-size:10px}
footer {border-top:1px solid var(--border);padding:30px 7%;color:var(--muted);font-size:10px;letter-spacing:2px}

#game {max-width:1500px;margin:auto;padding:30px 7% 100px}
.back {background:none;border:0;color:var(--muted);font-size:11px;letter-spacing:2px;padding:15px 0}
.case-heading {margin:35px 0}
.case-heading h1 {font-size:clamp(40px,5vw,65px)}
.case-heading p {color:var(--muted);line-height:1.8}
.progress {height:3px;background:var(--border);margin:35px 0 12px}
#progressFill {width:0;height:100%;background:var(--red);transition:width .3s}
.progress-text {margin-bottom:35px}
.case-layout {display:grid;grid-template-columns:250px minmax(0,1fr);gap:45px}
.case-sidebar {border-top:1px solid var(--border);padding-top:25px}
.side-label {margin-bottom:25px}
.tab {
  display:flex;justify-content:space-between;width:100%;text-align:left;
  background:transparent;color:var(--muted);border:0;border-bottom:1px solid var(--border);
  padding:19px 12px;font-size:11px;letter-spacing:1px
}
.tab.active {color:#efb9ae;background:#28201e;border-left:2px solid var(--red)}
.tab:disabled {opacity:.35;cursor:not-allowed}
.side-warning {line-height:2;margin-top:40px}
.case-content {min-width:0;background:var(--panel);border:1px solid var(--border);padding:clamp(20px,4vw,45px);min-height:490px}
.content-title {font:600 35px 'Playfair Display',serif;margin:15px 0 25px}
.prose {color:#b9b5aa;font-size:15px;line-height:2}
.prose p {margin-bottom:20px}
.report {border-left:2px solid var(--red);background:#211f1c;padding:22px;margin:25px 0;color:#c7c0b2;line-height:1.9}
.document {
  background:var(--paper);color:#302c27;padding:30px;
  font:13px/1.9 'Courier New',monospace;white-space:pre-wrap;
  overflow-wrap:anywhere;box-shadow:5px 8px 0 #0d0c0b
}
.next-btn,.submit-btn {
  background:var(--red);border:1px solid var(--red);color:white;
  padding:16px 24px;margin-top:25px;font-weight:700;font-size:11px;letter-spacing:2px
}
.next-btn:disabled,.submit-btn:disabled {opacity:.35;cursor:not-allowed}
.secondary-btn {
  background:transparent;color:var(--text);border:1px solid var(--border);
  padding:13px 18px;font-size:11px;letter-spacing:1px;margin-top:15px
}
.evidence-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.evidence-item {text-align:left;background:#201f1d;border:1px solid var(--border);color:var(--text);padding:23px}
.evidence-item:hover {border-color:var(--red)}
.evidence-icon {display:block;font-size:29px;margin-bottom:18px}
.evidence-item small {color:var(--red);letter-spacing:2px}
.evidence-item h3 {margin:12px 0;font-size:17px}
.evidence-item p {font-size:12px;color:var(--muted);line-height:1.7}
.suspect {border:1px solid var(--border);padding:25px;margin-bottom:15px}
.suspect small {color:var(--red);letter-spacing:2px}
.suspect h3 {font:600 25px 'Playfair Display',serif;margin:12px 0}
.suspect p {color:var(--muted);line-height:1.9;margin:10px 0}
.statement {border-top:1px solid var(--border);padding-top:15px;font-style:italic}
.choice {
  display:block;width:100%;text-align:left;padding:19px;margin:12px 0;
  background:#22211f;border:1px solid var(--border);color:var(--text);line-height:1.6
}
.choice.selected {border-color:var(--red);background:#30211e}
.choice input {accent-color:var(--red);margin-right:12px}
.result {border:1px solid var(--red);padding:25px;margin-top:25px;line-height:1.9}
.result h3 {font:600 29px 'Playfair Display',serif;margin:15px 0}
.result p {color:#c9c2b6;margin-bottom:15px}

.modal {
  position:fixed;inset:0;z-index:100;background:#000e;
  display:flex;justify-content:center;align-items:center;padding:20px
}
.modal-inner {
  width:100%;max-width:650px;max-height:90vh;overflow-y:auto;
  background:#1b1a18;border:1px solid #554c42;padding:clamp(20px,4vw,45px);position:relative
}
.modal-close {position:absolute;right:20px;top:15px;background:none;border:0;color:white;font-size:20px}
.modal-inner h2 {font:600 31px 'Playfair Display',serif;margin:15px 0 25px}
#modalDescription {color:var(--muted);line-height:1.8;margin-top:20px}

.hint-box {background:#24211e;border:1px dashed #67564c;padding:22px;margin-top:30px}
.hint-box p {color:#d0c4b4;line-height:1.8;margin:15px 0}
.hint-item {border-top:1px solid var(--border);padding:14px 0}
.hint-item strong {font-size:10px;letter-spacing:2px;color:#dc8b7f}
.hint-item p {margin:8px 0 0}
.notice {color:#d9b3a7;font-size:12px;line-height:1.8;margin:15px 0}
.status-line {color:var(--muted);font-size:11px;letter-spacing:1px;margin:15px 0}
.success-line {color:#9cc3a3}

.phone {
  width:100%;max-width:345px;min-height:490px;background:#08090b;
  border:7px solid #383a3d;border-radius:38px;margin:30px auto;
  padding:25px 17px;color:white;box-shadow:0 15px 50px #0009
}
.phone-notch {width:90px;height:17px;background:#25272a;border-radius:20px;margin:-15px auto 35px}
.phone-time {text-align:center;color:#aaa;font-size:11px}
.phone-lock {font-size:35px;text-align:center;margin:25px 0 10px}
.phone-title {text-align:center;font-size:18px;font-weight:600;margin:12px 0}
.phone-dots {text-align:center;letter-spacing:12px;font-size:26px;margin:20px 0}
.keypad {display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:250px;margin:25px auto}
.key {aspect-ratio:1;border-radius:50%;border:1px solid #444;background:#26272a;color:white;font-size:23px}
.key:active {background:#555}
.phone-error {text-align:center;color:#ec8278;font-size:12px;min-height:35px}
.phone-app {background:#181a1e;border-radius:13px;padding:14px;margin:10px 0}
.phone-app h4 {font-size:13px;margin-bottom:8px}
.phone-app p {font-size:12px;line-height:1.7;color:#bbb}
.phone-tabs {display:flex;gap:5px;margin:20px 0;flex-wrap:wrap}
.phone-tabs button {flex:1;background:#25262b;border:0;border-radius:8px;padding:10px 5px;color:white;font-size:11px}
.phone-tabs button.active {background:#8f403b}
.chat {background:#272a30;border-radius:13px;padding:12px;margin:9px 0;max-width:90%;font-size:12px;line-height:1.6}
.chat.mine {background:#285b46;margin-left:auto}
.chat-time {font-size:10px;color:#aaa;margin-bottom:4px}
.phone-select {width:100%;background:#25262b;border:1px solid #444;border-radius:8px;padding:12px;color:white;margin-bottom:12px}

textarea {
  display:block;width:100%;min-height:100px;padding:15px;resize:vertical;
  background:#211f1d;border:1px solid var(--border);color:white;margin:12px 0 25px;line-height:1.7
}
.form-label {display:block;font-weight:700;margin:25px 0 12px}
.facit-lock {text-align:center;border:1px dashed var(--border);padding:55px 20px;margin:30px 0}
.facit-lock span {display:block;font-size:40px;margin-bottom:20px}
.facit-lock p {color:var(--muted);line-height:1.9}
.facit-section {border-bottom:1px solid var(--border);padding:20px 0}
.facit-section h3 {font:600 23px 'Playfair Display',serif;margin-bottom:12px}
.facit-section p {color:#c8c1b5;line-height:1.9}

@media(max-width:850px) {
  .header {padding:0 5%}
  .header-right {font-size:8px;letter-spacing:1px}
  .hero {padding:65px 5% 30px}
  .hero-bottom {font-size:8px;margin-top:60px}
  .cases {padding:40px 5% 70px}
  .case-grid {grid-template-columns:1fr}
  .case-layout {grid-template-columns:1fr;gap:20px}
  #game {padding:20px 5% 70px}
  .case-heading {margin:25px 0}
  .case-sidebar {display:grid;grid-template-columns:1fr 1fr;gap:5px}
  .side-label,.side-warning {grid-column:1/-1}
  .tab {font-size:9px;padding:14px 8px}
  .evidence-grid {grid-template-columns:1fr}
}