/* =========================================================
   INTERROGATION — Confessions of the Guilty
   AAA photoreal CSS  ©  happystoner5420 Games
   ========================================================= */

* { margin:0; padding:0; box-sizing:border-box; }
html, body {
  width:100%; height:100%; overflow:hidden;
  background:#000; color:#e8e8e8;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  letter-spacing:0.02em;
  -webkit-font-smoothing:antialiased;
  user-select:none;
  cursor: default;
}

#bgCanvas {
  position: fixed; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none;
}

.screen {
  position:fixed; inset:0;
  display:none;
  z-index:2;
}
.screen.active { display:block; }

/* ===== SHARED VIGNETTE / FILM GRAIN ===== */
.menu-vignette {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at center, rgba(0,0,0,0) 35%, rgba(0,0,0,0.85) 100%),
    linear-gradient(180deg, rgba(10,8,12,0.4), rgba(0,0,0,0.85));
  pointer-events:none;
}
.screen::after {
  content:"";
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.015) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
  pointer-events:none;
  animation: grain 0.18s steps(2) infinite;
}
@keyframes grain {
  0%   { transform: translate(0,0); }
  50%  { transform: translate(-1px,1px); }
  100% { transform: translate(1px,-1px); }
}

/* =========================================================
   MAIN MENU
   ========================================================= */
#mainMenu {
  background:
    radial-gradient(ellipse at 50% 60%, #1a1418 0%, #07060a 80%);
}
.menu-content {
  position:relative; z-index:3;
  width:100%; height:100%;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center; padding:40px;
}
.title {
  font-family: "Times New Roman", Georgia, serif;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:0.12em;
  line-height:1;
  text-shadow:
    0 0 20px rgba(220,40,40,0.45),
    0 4px 0 #1a0000,
    0 6px 25px rgba(0,0,0,0.9);
  animation: titleFlick 5s infinite;
}
.title-line1 {
  display:block;
  font-size: clamp(48px, 8vw, 120px);
  background: linear-gradient(180deg,#f8e9c8 0%,#c79862 55%,#5c3717 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter: drop-shadow(0 0 18px rgba(255,160,80,0.25));
}
.title-line2 {
  display:block;
  font-size: clamp(16px, 2vw, 28px);
  margin-top:14px;
  letter-spacing:0.4em;
  color:#9a1c1c;
  text-shadow: 0 0 12px rgba(220,30,30,0.6);
}
@keyframes titleFlick {
  0%,93%,100% { opacity:1; }
  94% { opacity:0.6; }
  95% { opacity:1; }
  96% { opacity:0.4; }
  97% { opacity:1; }
}
.subtitle {
  margin-top:30px;
  font-style:italic;
  color:#9aa0a8;
  font-size: clamp(12px, 1.2vw, 16px);
  max-width:640px;
}
.menu-buttons {
  margin-top:60px;
  display:flex; flex-direction:column; gap:16px;
  width:min(360px, 80vw);
}
.menu-btn {
  position:relative;
  padding:16px 24px;
  font-size: 17px;
  font-weight:600;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:#eadcb8;
  background: linear-gradient(180deg, rgba(60,40,30,0.65), rgba(20,12,10,0.85));
  border:1px solid rgba(200,150,100,0.35);
  border-radius:4px;
  cursor:pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow:
    inset 0 1px 0 rgba(255,220,180,0.1),
    0 4px 20px rgba(0,0,0,0.6);
  transition: all 0.25s ease;
  overflow:hidden;
}
.menu-btn::before {
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,220,180,0.18) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.55s ease;
}
.menu-btn:hover {
  color:#fff5d6;
  border-color: rgba(255,200,140,0.7);
  box-shadow:
    inset 0 1px 0 rgba(255,220,180,0.18),
    0 0 28px rgba(220,140,60,0.35),
    0 6px 30px rgba(0,0,0,0.8);
  transform: translateY(-2px);
}
.menu-btn:hover::before { transform: translateX(100%); }
.menu-btn:active { transform: translateY(0); }
.menu-btn.small { padding:12px 18px; font-size:14px; }

.menu-footer {
  position:absolute; bottom:24px;
  font-size:11px; color:#555;
  letter-spacing:0.3em; text-transform:uppercase;
}

/* =========================================================
   CASE SELECT
   ========================================================= */
#caseSelect {
  background:
    radial-gradient(ellipse at center, #14101a 0%, #050308 80%);
}
.case-content {
  position:relative; z-index:3;
  width:100%; height:100%;
  padding: 60px 40px;
  display:flex; flex-direction:column; align-items:center;
  overflow-y:auto;
}
.case-header {
  font-family:"Times New Roman", serif;
  font-size: clamp(28px, 4vw, 48px);
  letter-spacing:0.25em;
  color:#e9d8a8;
  text-shadow: 0 0 18px rgba(220,150,60,0.25);
}
.case-sub {
  margin-top:10px;
  color:#888;
  font-style:italic;
  font-size: 14px;
}
.case-grid {
  margin-top:40px;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:24px;
  width:min(1200px, 100%);
}
.case-card {
  position:relative;
  padding:24px;
  background:
    linear-gradient(180deg, rgba(45,35,25,0.92), rgba(20,15,12,0.95)),
    repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 6px);
  border:1px solid rgba(180,140,90,0.35);
  border-radius:6px;
  cursor:pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,220,180,0.1),
    0 8px 30px rgba(0,0,0,0.7);
  transition: all 0.3s ease;
  min-height:240px;
  display:flex; flex-direction:column;
}
.case-card::before {
  content:"CONFIDENTIAL";
  position:absolute; top:10px; right:10px;
  font-size:9px; letter-spacing:0.3em;
  color:#a52020; border:1px solid #a52020;
  padding:3px 6px; border-radius:2px;
  transform: rotate(8deg);
  opacity:0.85;
}
.case-card:hover {
  transform: translateY(-4px);
  border-color:#d8a050;
  box-shadow:
    inset 0 1px 0 rgba(255,220,180,0.18),
    0 0 30px rgba(220,140,60,0.3),
    0 14px 40px rgba(0,0,0,0.8);
}
.case-card .case-num {
  font-size:11px; color:#999; letter-spacing:0.3em;
}
.case-card .case-title {
  margin-top:6px;
  font-family:"Times New Roman", serif;
  font-size:24px;
  color:#f3e2b8;
  text-transform:uppercase; letter-spacing:0.05em;
}
.case-card .case-charge {
  margin-top:10px;
  font-size:12px; color:#d04040;
  letter-spacing:0.18em;
}
.case-card .case-desc {
  margin-top:14px;
  font-size:13px; line-height:1.5;
  color:#bfb39a;
  flex-grow:1;
}
.case-card .case-difficulty {
  margin-top:16px;
  display:flex; align-items:center; gap:6px;
  font-size:11px; color:#888; letter-spacing:0.2em;
}
.diff-dot {
  width:10px; height:10px; border-radius:50%;
  background:#332;
  border:1px solid #555;
}
.diff-dot.on { background: linear-gradient(180deg,#ff8050,#a02010); border-color:#d04020; box-shadow:0 0 8px rgba(220,80,40,0.6); }

.back-btn {
  margin-top:40px;
  background:transparent;
  color:#a8a8a8;
  border:1px solid #444;
  padding:10px 18px;
  letter-spacing:0.2em;
  cursor:pointer;
  border-radius:3px;
  transition: all 0.2s;
}
.back-btn:hover { color:#fff; border-color:#888; }

/* =========================================================
   INFO PANELS (How to Play, Credits)
   ========================================================= */
.info-panel {
  position:relative; z-index:3;
  width:min(800px, 92%);
  margin: 60px auto;
  padding: 40px;
  background:
    linear-gradient(180deg, rgba(30,22,18,0.95), rgba(15,10,12,0.97));
  border:1px solid rgba(180,140,90,0.3);
  border-radius:8px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.8);
  max-height: 85vh; overflow-y:auto;
}
.info-panel h2 {
  font-family:"Times New Roman", serif;
  font-size:32px;
  letter-spacing:0.25em;
  color:#e9d8a8;
  text-align:center;
  margin-bottom:24px;
  text-shadow: 0 0 14px rgba(220,150,60,0.25);
}
.how-list { list-style:none; }
.how-list > li {
  padding: 12px 0;
  border-bottom: 1px dashed rgba(160,120,80,0.2);
  line-height:1.65;
  color:#cfc6b0;
}
.how-list > li:last-child { border-bottom:none; }
.how-list ul { margin-top:8px; padding-left:20px; }
.how-list ul li { padding:4px 0; font-size:14px; color:#b0a890; }
.how-list b { color:#f3e2b8; }

/* Credits */
.credits-panel { text-align:center; }
.credit-block { margin: 24px 0; }
.credit-block h3 {
  font-family:"Times New Roman", serif;
  font-size:26px;
  color:#f3e2b8;
  letter-spacing:0.18em;
  text-shadow: 0 0 12px rgba(220,150,60,0.3);
}
.credit-role {
  margin-top:14px;
  font-size:11px; letter-spacing:0.4em;
  color:#888; text-transform:uppercase;
}
.credit-block p:not(.credit-role) {
  font-size:18px; color:#d8d0b8;
  margin-top:4px;
}
.credit-tag { margin-top:30px; font-size:12px; color:#777; font-style:italic; line-height:1.7;}

/* =========================================================
   GAME SCREEN — INTERROGATION ROOM
   ========================================================= */
#gameScreen { background:#000; }

.room {
  position:absolute; inset:0;
  perspective: 1000px;
  overflow:hidden;
}

.room-wall {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 50% 38%, #4a3826 0%, #1d1410 35%, #06040a 75%),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.06) 0 2px, transparent 2px 4px);
  background-blend-mode: multiply;
}
.room-wall::before {
  /* tiles */
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(0deg, rgba(0,0,0,0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.18) 1px, transparent 1px);
  background-size: 80px 80px;
  opacity:0.6;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
}
.room-wall::after {
  /* water stains */
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 18% 22%, rgba(40,30,20,0.55), transparent 25%),
    radial-gradient(ellipse at 82% 30%, rgba(30,20,15,0.5), transparent 22%),
    radial-gradient(ellipse at 70% 80%, rgba(20,10,10,0.4), transparent 30%);
  mix-blend-mode: multiply;
}

.room-floor {
  position:absolute;
  bottom:0; left:0; right:0; height:30%;
  background: linear-gradient(180deg, #100a08 0%, #050303 100%);
  transform: perspective(700px) rotateX(45deg);
  transform-origin: top center;
  box-shadow: inset 0 10px 30px rgba(0,0,0,0.9);
}

.one-way-mirror {
  position:absolute;
  top:8%; left:50%; transform:translateX(-50%);
  width: 38%; height: 22%;
  background:
    linear-gradient(135deg, rgba(80,90,110,0.25) 0%, rgba(20,25,40,0.6) 50%, rgba(80,90,110,0.25) 100%);
  border:8px solid #1c1410;
  border-image: linear-gradient(135deg, #2a1d12, #0a0606) 1;
  box-shadow:
    inset 0 0 80px rgba(0,0,0,0.85),
    inset 0 0 20px rgba(120,140,170,0.15),
    0 0 30px rgba(0,0,0,0.6);
}
.one-way-mirror::before {
  /* faint reflection of the lamp */
  content:"";
  position:absolute;
  top:30%; left:55%;
  width:30%; height:40%;
  background: radial-gradient(ellipse, rgba(255,210,140,0.1), transparent 70%);
  filter: blur(4px);
}

/* ===== LAMP ===== */
.lamp {
  position:absolute;
  top:0; left:50%;
  transform: translateX(-50%);
  width:160px; height:200px;
  z-index:3;
  animation: lampSway 6s ease-in-out infinite;
  transform-origin: top center;
}
@keyframes lampSway {
  0%,100% { transform: translateX(-50%) rotate(-1deg); }
  50%     { transform: translateX(-50%) rotate(1.2deg); }
}
.lamp-cord {
  position:absolute; top:0; left:50%;
  width:2px; height:90px;
  background: linear-gradient(180deg,#000 0%,#222 100%);
  transform: translateX(-50%);
}
.lamp-shade {
  position:absolute;
  top:80px; left:50%;
  width:140px; height:55px;
  transform: translateX(-50%);
  background:
    linear-gradient(180deg, #1a1410 0%, #2c2018 60%, #0a0604 100%);
  border-radius: 50% 50% 12% 12% / 70% 70% 30% 30%;
  box-shadow:
    inset 0 -10px 20px rgba(255,180,80,0.2),
    inset 0 6px 12px rgba(0,0,0,0.6),
    0 4px 20px rgba(0,0,0,0.7);
}
.lamp-light {
  position:absolute;
  top:128px; left:50%;
  width:80px; height:30px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, #fff2c0 0%, #ffb060 50%, transparent 75%);
  border-radius:50%;
  filter: blur(3px);
  animation: lampFlicker 3.7s infinite;
}
.lamp-glow {
  position:absolute;
  top:40px; left:50%;
  width:900px; height:900px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255,200,120,0.18) 0%, rgba(255,160,80,0.08) 25%, transparent 55%);
  pointer-events:none;
  animation: lampFlicker 3.7s infinite;
  z-index:2;
}
@keyframes lampFlicker {
  0%,100% { opacity:1; }
  47% { opacity:1; }
  48% { opacity:0.55; }
  49% { opacity:1; }
  73% { opacity:0.85; }
  74% { opacity:0.5; }
  75% { opacity:1; }
}

/* ===== SMOKE ===== */
.smoke {
  position:absolute;
  bottom:38%;
  width:200px; height:200px;
  border-radius:50%;
  background: radial-gradient(circle, rgba(180,180,180,0.18), transparent 70%);
  filter: blur(20px);
  pointer-events:none;
  animation: smokeRise 14s linear infinite;
  opacity:0;
}
.smoke-1 { left:20%; animation-delay:0s; }
.smoke-2 { left:55%; animation-delay:5s; }
.smoke-3 { left:78%; animation-delay:9s; }
@keyframes smokeRise {
  0%   { transform: translateY(0) scale(0.6); opacity:0; }
  20%  { opacity:0.5; }
  100% { transform: translateY(-400px) scale(1.6); opacity:0; }
}

/* ===== TABLE ===== */
.table {
  position:absolute;
  bottom:6%; left:50%;
  transform: translateX(-50%);
  width: 70%;
  height: 22%;
  z-index:4;
}
.table-top {
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, #4a3220 0%, #2a1a10 70%, #150a06 100%),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.12) 0 1px, transparent 1px 4px);
  background-blend-mode: multiply;
  border-radius: 12px 12px 4px 4px / 80% 80% 6% 6%;
  box-shadow:
    inset 0 4px 0 rgba(255,200,140,0.06),
    inset 0 -20px 30px rgba(0,0,0,0.7),
    0 8px 0 #0a0604,
    0 18px 40px rgba(0,0,0,0.8);
  transform: perspective(600px) rotateX(38deg);
  transform-origin: top center;
}
.table-shadow {
  position:absolute;
  bottom:-30px; left:5%; right:5%;
  height:30px;
  background: radial-gradient(ellipse, rgba(0,0,0,0.7), transparent 70%);
  filter: blur(8px);
}
.case-folder {
  position:absolute;
  top:25%; left:22%;
  width:140px; height:90px;
  background: linear-gradient(180deg,#a87444 0%, #6b441c 100%);
  transform: perspective(400px) rotateX(38deg) rotate(-8deg);
  border-radius:3px;
  box-shadow:
    inset 0 1px 0 rgba(255,220,160,0.25),
    0 6px 18px rgba(0,0,0,0.7);
}
.folder-tab {
  position:absolute; top:-8px; left:14px;
  width:34px; height:10px;
  background: linear-gradient(180deg,#a87444,#7a4f24);
  border-radius:3px 3px 0 0;
}
.folder-label {
  position:absolute; top:24px; left:14px; right:14px;
  font-size:10px; letter-spacing:0.2em;
  color:#1a0e08; font-weight:bold;
  text-transform:uppercase;
}
.coffee-cup {
  position:absolute;
  top:18%; right:18%;
  width:40px; height:48px;
  background: linear-gradient(180deg,#e8e0d0 0%,#a89878 100%);
  border-radius:4px 4px 18px 18px / 4px 4px 8px 8px;
  transform: perspective(400px) rotateX(38deg);
  box-shadow: inset 0 6px 0 #2a1a10, 0 6px 14px rgba(0,0,0,0.6);
}
.coffee-steam {
  position:absolute;
  top:-30px; left:50%;
  width:14px; height:30px;
  background: radial-gradient(ellipse, rgba(220,220,220,0.4), transparent 70%);
  filter: blur(5px);
  transform: translateX(-50%);
  animation: steamRise 3s infinite ease-out;
}
@keyframes steamRise {
  0%   { opacity:0; transform: translate(-50%, 10px) scale(0.6); }
  50%  { opacity:0.7; }
  100% { opacity:0; transform: translate(-50%, -30px) scale(1.4); }
}

/* =========================================================
   DETECTIVE (pure CSS character)
   ========================================================= */
.detective {
  position:absolute;
  bottom: clamp(450px, 53vh, 520px);
  left:50%;
  transform: translateX(-50%);
  width: clamp(190px, 19vw, 260px);
  aspect-ratio: 1 / 1;
  z-index:5;
  pointer-events:none;
  animation: detIdle 6s ease-in-out infinite;
}
@keyframes detIdle {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50%     { transform: translateX(-50%) translateY(-4px); }
}
.detective.lean {
  animation: detLean 0.8s forwards;
}
@keyframes detLean {
  to { transform: translateX(-50%) translateY(-10px) scale(1.03); }
}
.detective.angry .detective-photo {
  filter:
    drop-shadow(0 18px 32px rgba(0,0,0,0.78))
    saturate(1.02)
    contrast(1.1)
    brightness(0.92);
}
.detective.smug .detective-photo {
  transform: translateY(-2px) scale(1.02);
  filter:
    drop-shadow(0 18px 32px rgba(0,0,0,0.76))
    saturate(0.92)
    contrast(1.08);
}
.detective.angry .det-brow-l { transform: rotate(20deg) translateY(-2px); }
.detective.angry .det-brow-r { transform: rotate(-20deg) translateY(-2px); }
.detective.smug  .det-mouth  { border-radius: 0 0 60% 0 / 0 0 100% 0; height:6px; width:30px; }
.detective.shake { animation: detShake 0.4s; }
@keyframes detShake {
  0%,100%{transform:translateX(-50%) translateY(0);}
  25%{transform:translateX(-51.5%) translateY(-1px);}
  75%{transform:translateX(-48.5%) translateY(1px);}
}

.det-shadow {
  position:absolute;
  left:50%;
  bottom:8px;
  width:78%;
  height:12%;
  background: radial-gradient(ellipse, rgba(0,0,0,0.7), transparent 72%);
  filter: blur(14px);
  transform: translateX(-50%);
}
.detective-photo {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center bottom;
  border-radius: 0;
  opacity:0.96;
  user-select:none;
  transition: transform 0.25s ease, filter 0.25s ease, opacity 0.25s ease;
  filter:
    drop-shadow(0 18px 32px rgba(0,0,0,0.75))
    saturate(0.88)
    contrast(1.05)
    brightness(1.04);
}
.det-body {
  position:absolute;
  bottom:0; left:50%;
  width:200px; height:200px;
  transform: translateX(-50%);
  background:
    linear-gradient(180deg, #2a2a32 0%, #14141a 100%);
  border-radius: 30% 30% 8% 8% / 40% 40% 6% 6%;
  box-shadow:
    inset 0 4px 0 rgba(255,255,255,0.05),
    inset 0 -20px 30px rgba(0,0,0,0.7),
    0 -4px 18px rgba(255,180,80,0.18);
}
.det-tie {
  position:absolute;
  bottom:60px; left:50%;
  width:24px; height:90px;
  transform: translateX(-50%);
  background: linear-gradient(180deg,#6a1010 0%, #2a0404 100%);
  clip-path: polygon(20% 0, 80% 0, 100% 100%, 50% 115%, 0 100%);
  box-shadow: inset 0 -10px 12px rgba(0,0,0,0.5);
}
.det-collar {
  position:absolute;
  bottom:140px; left:50%;
  width:80px; height:40px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #d8d0c0 0%, #8a8276 100%);
  clip-path: polygon(0 0, 100% 0, 60% 100%, 40% 100%);
}
.det-neck {
  position:absolute;
  bottom:165px; left:50%;
  width:46px; height:30px;
  transform: translateX(-50%);
  background: linear-gradient(180deg,#9a6840 0%,#6e4828 100%);
  border-radius: 30% 30% 10% 10%;
  box-shadow: inset 0 -6px 8px rgba(0,0,0,0.4);
}
.det-head {
  position:absolute;
  bottom:185px; left:50%;
  width:130px; height:160px;
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse at 35% 30%, #c8956a 0%, #8a5a36 60%, #4a3018 100%);
  border-radius: 48% 48% 42% 42% / 55% 55% 45% 45%;
  box-shadow:
    inset -10px -8px 24px rgba(0,0,0,0.5),
    inset 8px 6px 16px rgba(255,220,180,0.15),
    0 -8px 24px rgba(255,180,80,0.15);
}
.det-hair {
  position:absolute;
  top:-6px; left:0; right:0; height:55px;
  background:
    linear-gradient(180deg, #1a1410 0%, #0a0604 100%);
  border-radius: 60% 60% 10% 10% / 80% 80% 20% 20%;
  box-shadow: inset 0 -6px 12px rgba(255,255,255,0.05);
}
.det-brow {
  position:absolute;
  top:48px;
  width:30px; height:6px;
  background: #1a1006;
  border-radius:3px;
  transition: transform 0.3s ease;
}
.det-brow-l { left:22px; transform: rotate(-6deg); }
.det-brow-r { right:22px; transform: rotate(6deg); }
.det-eye {
  position:absolute;
  top:60px;
  width:24px; height:14px;
  background: #f0e8d8;
  border-radius:50%;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.4);
  overflow:hidden;
}
.det-eye-l { left:24px; }
.det-eye-r { right:24px; }
.det-pupil {
  position:absolute;
  top:3px; left:7px;
  width:9px; height:9px;
  background: radial-gradient(circle, #1a4a2a 30%, #0a1a14 100%);
  border-radius:50%;
  animation: pupilDart 5s infinite;
}
@keyframes pupilDart {
  0%,40%,100% { transform: translate(0,0); }
  45% { transform: translate(-3px,1px); }
  60% { transform: translate(3px,-1px); }
  80% { transform: translate(0,1px); }
}
.det-nose {
  position:absolute;
  top:78px; left:50%;
  width:14px; height:30px;
  transform: translateX(-50%);
  background: linear-gradient(180deg,transparent,rgba(0,0,0,0.25));
  border-radius: 40% 40% 50% 50%;
  box-shadow: -3px 2px 5px rgba(0,0,0,0.2);
}
.det-mouth {
  position:absolute;
  bottom:24px; left:50%;
  width:36px; height:4px;
  transform: translateX(-50%);
  background:#3a1a10;
  border-radius:2px;
  transition: all 0.3s;
}
.det-stubble {
  position:absolute;
  bottom:8px; left:18%; right:18%;
  height:30px;
  background:
    radial-gradient(circle at 20% 50%, rgba(20,10,8,0.4) 0 1px, transparent 2px) 0 0/6px 6px,
    radial-gradient(circle at 60% 50%, rgba(20,10,8,0.4) 0 1px, transparent 2px) 0 0/5px 5px;
  opacity:0.6;
  border-radius: 50%;
}

/* =========================================================
   HUD (meters + case tag)
   ========================================================= */
.hud {
  position:absolute;
  top:0; left:0; right:0;
  padding: 18px 24px;
  display:flex; justify-content:space-between; align-items:center;
  z-index:10;
  background: linear-gradient(180deg, rgba(0,0,0,0.7), transparent);
  pointer-events:none;
}
.meter { width: 280px; pointer-events:auto; }
.meter-label {
  font-size:10px; letter-spacing:0.4em;
  color:#aaa; margin-bottom:4px;
}
.meter-bar {
  height:14px;
  background: linear-gradient(180deg,#0a0606,#000);
  border:1px solid rgba(180,140,90,0.3);
  border-radius:2px;
  overflow:hidden;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.8);
  position:relative;
}
.meter-fill {
  height:100%;
  width:100%;
  background: linear-gradient(180deg,#5ac879 0%, #2a8040 100%);
  transition: width 0.6s cubic-bezier(.6,-0.1,.4,1.4), background 0.6s;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.18);
}
.suspicion-fill {
  width:0%;
  background: linear-gradient(180deg, #f0c050 0%, #c08020 100%);
}
.meter-val {
  font-size:11px; color:#ddd;
  letter-spacing:0.2em; margin-top:4px;
  text-align:right;
}
.case-tag {
  pointer-events:auto;
  padding:8px 16px;
  background: rgba(20,12,8,0.85);
  border:1px solid rgba(180,140,90,0.4);
  border-radius:3px;
  font-size:12px; letter-spacing:0.3em;
  color:#e9d8a8;
  text-transform:uppercase;
  box-shadow: 0 2px 12px rgba(0,0,0,0.6);
}

.suspicion-warn .meter-fill { background: linear-gradient(180deg,#ff6040,#a01010) !important; box-shadow: inset 0 0 0 rgba(255,255,255,0.18), 0 0 14px rgba(220,40,30,0.7) !important; animation: warnPulse 0.8s infinite; }
@keyframes warnPulse {
  0%,100% { filter:brightness(1); }
  50%     { filter:brightness(1.4); }
}

/* =========================================================
   SPEECH PANEL & CHOICES
   ========================================================= */
.speech-panel {
  position:absolute;
  bottom: 220px;
  left: 50%;
  transform: translateX(-50%);
  width: min(820px, 92%);
  padding: 18px 24px 22px;
  background: linear-gradient(180deg, rgba(15,10,12,0.92), rgba(5,3,5,0.96));
  border:1px solid rgba(180,140,90,0.35);
  border-radius:6px;
  box-shadow:
    inset 0 1px 0 rgba(255,220,180,0.1),
    0 10px 40px rgba(0,0,0,0.85);
  z-index:11;
  backdrop-filter: blur(4px);
}
.speech-name {
  font-size:11px; letter-spacing:0.4em;
  color:#d8a050;
  text-transform:uppercase;
  margin-bottom:8px;
}
.speech-text {
  font-family: "Times New Roman", Georgia, serif;
  font-size:18px; line-height:1.55;
  color:#f0e6cc;
  min-height:60px;
  font-style:italic;
}
.speech-text::after { content:""; display:inline-block; width:8px; height:18px; background:#d8a050; vertical-align:bottom; margin-left:4px; animation: caret 0.7s infinite step-end; opacity:0; }
.speech-text.typing::after { opacity:1; }
@keyframes caret { 50% { opacity:0; } }
.question-counter {
  margin-top:10px;
  font-size:10px; letter-spacing:0.3em;
  color:#777; text-transform:uppercase;
  text-align:right;
}

.choices {
  position:absolute;
  bottom: 22px; left:50%;
  transform: translateX(-50%);
  width: min(820px, 92%);
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  z-index:11;
}
.choice-btn {
  position:relative;
  padding: 14px 16px;
  text-align:left;
  background: linear-gradient(180deg, rgba(35,28,22,0.92), rgba(15,10,8,0.95));
  border:1px solid rgba(180,140,90,0.3);
  border-left:4px solid #555;
  border-radius:3px;
  color:#e8dec0;
  font-size:14px;
  line-height:1.45;
  cursor:pointer;
  transition: all 0.2s;
  font-family: inherit;
  backdrop-filter: blur(2px);
}
.choice-btn:hover {
  border-color:#d8a050;
  background: linear-gradient(180deg, rgba(60,42,28,0.95), rgba(25,16,10,0.97));
  transform: translateX(2px);
  box-shadow: 0 4px 18px rgba(0,0,0,0.6);
}
.choice-btn .ctype {
  display:inline-block;
  font-size:9px; letter-spacing:0.3em;
  padding:2px 6px;
  border-radius:2px;
  margin-bottom:6px;
}
.choice-btn[data-type="deny"]      { border-left-color:#3a8050; }
.choice-btn[data-type="deny"]      .ctype { background:#1a3a25; color:#7adc9a; }
.choice-btn[data-type="deflect"]   { border-left-color:#d0a040; }
.choice-btn[data-type="deflect"]   .ctype { background:#3a2a10; color:#f0c060; }
.choice-btn[data-type="aggressive"]{ border-left-color:#c04040; }
.choice-btn[data-type="aggressive"].ctype { background:#3a1010; color:#ff7050; }
.choice-btn[data-type="truthbend"] { border-left-color:#4a80c0; }
.choice-btn[data-type="truthbend"] .ctype { background:#10243a; color:#7ab4f0; }

.in-game-menu, .ingame-menu-btn {
  position:absolute; top:14px; right:50%; transform:translateX(50%);
  z-index:12;
}
.ingame-menu-btn {
  top: 76px; right: 24px; transform:none;
  padding: 6px 12px;
  font-size:11px; letter-spacing:0.3em;
  background: rgba(20,12,8,0.85);
  color:#bbb;
  border:1px solid rgba(180,140,90,0.4);
  border-radius:3px;
  cursor:pointer;
}
.ingame-menu-btn:hover { color:#fff; border-color:#d8a050; }

/* =========================================================
   PAUSE & END OVERLAYS
   ========================================================= */
.pause-overlay, .end-overlay {
  position:absolute; inset:0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(8px);
  display:none;
  align-items:center; justify-content:center;
  z-index: 20;
}
.pause-overlay.active, .end-overlay.active { display:flex; }
.pause-box, .end-box {
  width: min(520px, 90%);
  padding:30px;
  background: linear-gradient(180deg, rgba(40,28,22,0.96), rgba(12,8,8,0.98));
  border:1px solid rgba(180,140,90,0.4);
  border-radius:6px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.9);
  text-align:center;
}
.pause-box h3, .end-box h2 {
  font-family:"Times New Roman", serif;
  letter-spacing:0.25em;
  color:#e9d8a8;
  margin-bottom:14px;
}
.end-box h2 { font-size:34px; text-shadow: 0 0 14px rgba(220,150,60,0.3); }
.end-box p, .pause-box p { color:#cfc6b0; line-height:1.6; margin-bottom:20px; font-size:15px; }
.pause-buttons { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

.end-box.win h2 { color:#7adc9a; text-shadow: 0 0 18px rgba(80,220,120,0.4); }
.end-box.lose h2 { color:#ff5040; text-shadow: 0 0 18px rgba(220,50,40,0.45); }

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 720px) {
  .meter { width: 130px; }
  .speech-text { font-size:15px; }
  .choices { grid-template-columns: 1fr; bottom:14px; }
  .speech-panel { bottom: 320px; }
  .detective {
    bottom: clamp(430px, 70vh, 500px);
    width: clamp(130px, 26vw, 165px);
  }
  .lamp-glow { width:600px; height:600px; }
}