/* ============================================
   INTERROGATOR SIMULATOR - Noir Theme CSS
   ============================================ */

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg-darkest: #0a0a0c;
  --bg-dark: #12131a;
  --bg-mid: #1a1c28;
  --bg-panel: #161824;
  --bg-card: #1e2035;
  --border: #2a2d45;
  --border-light: #3a3d55;
  --text-primary: #d4d4d8;
  --text-secondary: #8b8da0;
  --text-dim: #5a5c70;
  --text-bright: #f0f0f5;
  --accent-yellow: #c9a227;
  --accent-yellow-dim: #8a7020;
  --accent-red: #c43030;
  --accent-red-bright: #ff4444;
  --accent-green: #2a8a4a;
  --accent-green-bright: #44cc66;
  --accent-blue: #2a5a8a;
  --accent-orange: #c97027;
  --lamp-yellow: #f5d47a;
  --lamp-glow: rgba(245, 212, 122, 0.08);
  --rec-red: #ff2020;
  --font-title: 'Special Elite', 'Courier New', monospace;
  --font-body: 'Inter', -apple-system, sans-serif;
  --font-mono: 'Courier Prime', 'Courier New', monospace;
}

html, body {
  height: 100%;
  background: var(--bg-darkest);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  overflow: hidden;
  user-select: none;
}

#app { height: 100vh; width: 100vw; position: relative; }

.screen { display: none; height: 100%; width: 100%; position: absolute; top: 0; left: 0; }
.screen.active { display: flex; }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-dark); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-light); }

/* --- TITLE SCREEN --- */
#title-screen {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--bg-darkest);
  position: relative;
  overflow: hidden;
}

#title-screen::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse at 50% 30%, rgba(245, 212, 122, 0.06) 0%, transparent 60%);
  pointer-events: none;
}

.title-lamp {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 80px;
  background: linear-gradient(to bottom, var(--border), var(--accent-yellow-dim));
}
.title-lamp::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 20px;
  background: var(--accent-yellow-dim);
  border-radius: 0 0 50% 50%;
  box-shadow: 0 5px 40px rgba(245, 212, 122, 0.3), 0 10px 80px rgba(245, 212, 122, 0.1);
}

.title-content {
  text-align: center;
  z-index: 1;
  animation: fadeInUp 1s ease-out;
}

.title-silhouette {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 60px;
  margin-bottom: 40px;
  opacity: 0.3;
  height: 100px;
}

.silhouette-detective {
  width: 40px;
  height: 80px;
  background: var(--text-dim);
  border-radius: 50% 50% 5px 5px;
  position: relative;
}
.silhouette-detective::before {
  content: '';
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 25px;
  height: 25px;
  background: var(--text-dim);
  border-radius: 50%;
}

.silhouette-table {
  width: 120px;
  height: 8px;
  background: var(--text-dim);
  border-radius: 2px;
  margin-bottom: 30px;
}

.silhouette-suspect {
  width: 35px;
  height: 70px;
  background: var(--text-dim);
  border-radius: 50% 50% 5px 5px;
  position: relative;
}
.silhouette-suspect::before {
  content: '';
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 22px;
  background: var(--text-dim);
  border-radius: 50%;
}

.game-title {
  font-family: var(--font-title);
  font-size: 64px;
  letter-spacing: 8px;
  color: var(--text-bright);
  text-shadow: 0 0 40px rgba(245, 212, 122, 0.2);
  line-height: 1.1;
  margin-bottom: 12px;
}
.game-title span {
  font-size: 48px;
  color: var(--accent-yellow);
  letter-spacing: 16px;
}

.game-subtitle {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-secondary);
  font-style: italic;
  margin-bottom: 50px;
}

.title-menu {
  display: flex;
  gap: 24px;
  justify-content: center;
  margin-bottom: 50px;
}

.menu-btn {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 24px 32px;
  width: 280px;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.menu-btn:hover {
  border-color: var(--accent-yellow);
  background: var(--bg-card);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.mode-icon { font-size: 28px; margin-bottom: 4px; }
.mode-label {
  font-family: var(--font-title);
  font-size: 18px;
  letter-spacing: 2px;
  color: var(--text-bright);
}
.mode-desc {
  font-size: 12px;
  color: var(--text-secondary);
}

.title-footer {
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 1px;
}
.mature-warning {
  color: var(--accent-red);
  margin-top: 6px;
  font-weight: 600;
}

/* --- BRIEFING SCREEN --- */
#briefing-screen {
  flex-direction: column;
  background: var(--bg-dark);
}

.briefing-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 32px;
  background: var(--bg-darkest);
  border-bottom: 1px solid var(--border);
}

.precinct-badge {
  font-family: var(--font-title);
  font-size: 16px;
  letter-spacing: 3px;
  color: var(--accent-yellow);
}

.day-display {
  font-family: var(--font-mono);
  font-size: 24px;
  color: var(--text-bright);
  font-weight: 700;
}

.briefing-content {
  flex: 1;
  display: flex;
  padding: 24px 32px;
  gap: 32px;
  overflow: hidden;
}

.briefing-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
}

.briefing-right {
  width: 380px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.memo-board {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  padding: 20px;
}
.memo-board h2 {
  font-family: var(--font-title);
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--accent-yellow);
  margin-bottom: 12px;
}
.memo-text {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.6;
  white-space: pre-wrap;
}

.personal-messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.personal-msg {
  background: var(--bg-card);
  border-left: 3px solid var(--accent-yellow-dim);
  padding: 12px 16px;
  animation: slideIn 0.3s ease-out;
}
.personal-msg .msg-from {
  font-size: 11px;
  color: var(--accent-yellow);
  font-weight: 600;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.personal-msg .msg-text {
  font-size: 13px;
  color: var(--text-secondary);
  font-style: italic;
}

.stats-dashboard {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  padding: 20px;
}
.stats-dashboard h2 {
  font-family: var(--font-title);
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--accent-yellow);
  margin-bottom: 16px;
}

.stat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.stat-icon { font-size: 18px; width: 24px; text-align: center; }
.stat-label { font-size: 12px; color: var(--text-secondary); width: 140px; }
.stat-bar {
  flex: 1;
  height: 8px;
  background: var(--bg-darkest);
  border-radius: 4px;
  overflow: hidden;
}
.stat-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-green), var(--accent-green-bright));
  border-radius: 4px;
  transition: width 0.5s ease;
}
.ia-fill { background: linear-gradient(90deg, var(--accent-orange), var(--accent-red-bright)); }
.money-fill { background: linear-gradient(90deg, var(--accent-yellow-dim), var(--accent-yellow)); }
.stat-value {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-bright);
  width: 36px;
  text-align: right;
}

.case-queue {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  padding: 20px;
  flex: 1;
  overflow-y: auto;
}
.case-queue h2 {
  font-family: var(--font-title);
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--accent-yellow);
  margin-bottom: 12px;
}

.queue-suspect {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-bottom: 1px solid var(--border);
}
.queue-suspect:last-child { border-bottom: none; }

.queue-portrait {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  color: var(--text-bright);
  flex-shrink: 0;
}
.queue-info { flex: 1; }
.queue-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-bright);
}
.queue-summary {
  font-size: 11px;
  color: var(--text-secondary);
}

.btn-begin-shift {
  background: var(--accent-yellow);
  color: var(--bg-darkest);
  border: none;
  padding: 16px;
  font-family: var(--font-title);
  font-size: 18px;
  letter-spacing: 3px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}
.btn-begin-shift:hover {
  background: #dbb432;
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(201, 162, 39, 0.3);
}

/* --- INTERROGATION SCREEN --- */
#interrogation-screen {
  flex-direction: column;
  background: var(--bg-darkest);
}

.interrog-room {
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Room Background */
.room-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.room-mirror {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--border), var(--border-light), var(--border), transparent);
  opacity: 0.3;
}

.room-light {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
}
.light-cone {
  width: 0;
  height: 0;
  border-left: 200px solid transparent;
  border-right: 200px solid transparent;
  border-top: 500px solid rgba(245, 212, 122, 0.015);
  filter: blur(20px);
}

.room-recording {
  position: absolute;
  top: 12px;
  right: 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--rec-red);
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 10;
}
.rec-dot {
  width: 8px;
  height: 8px;
  background: var(--rec-red);
  border-radius: 50%;
  animation: recBlink 1.5s infinite;
}

/* Top Bar */
.interrog-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background: rgba(10, 10, 12, 0.9);
  border-bottom: 1px solid var(--border);
  z-index: 5;
  min-height: 48px;
}

.suspect-info-bar {
  display: flex;
  align-items: center;
  gap: 16px;
}
.suspect-name-bar {
  font-family: var(--font-title);
  font-size: 16px;
  color: var(--text-bright);
  letter-spacing: 1px;
}
.suspect-mood {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 3px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.mood-calm { background: var(--accent-blue); color: var(--text-bright); }
.mood-nervous { background: var(--accent-orange); color: var(--text-bright); }
.mood-hostile { background: var(--accent-red); color: var(--text-bright); }
.mood-terrified { background: #8a2a8a; color: var(--text-bright); }
.mood-smug { background: #2a6a2a; color: var(--text-bright); }
.mood-vulnerable { background: #5a5a8a; color: var(--text-bright); }
.mood-defensive { background: #8a6a2a; color: var(--text-bright); }
.mood-anxious { background: #6a4a2a; color: var(--text-bright); }
.mood-flirtatious { background: #8a2a5a; color: var(--text-bright); }
.mood-unreadable { background: var(--bg-card); color: var(--text-secondary); }
.mood-broken_relieved { background: #4a4a7a; color: var(--text-bright); }
.mood-more_nervous { background: var(--accent-orange); color: var(--text-bright); }
.mood-angry { background: var(--accent-red); color: var(--text-bright); }
.mood-defeated { background: #4a3a3a; color: var(--text-secondary); }
.mood-cooperative { background: var(--accent-green); color: var(--text-bright); }
.mood-panicked { background: var(--accent-red-bright); color: var(--text-bright); }
.mood-resigned { background: #4a4a4a; color: var(--text-secondary); }
.mood-cold { background: #2a3a4a; color: var(--text-bright); }
.mood-amused { background: #3a5a3a; color: var(--text-bright); }
.mood-rattled { background: #6a3a2a; color: var(--text-bright); }
.mood-furious { background: #aa1a1a; color: var(--text-bright); }
.mood-none { background: var(--bg-card); color: var(--text-secondary); }
.mood-confident { background: #3a5a3a; color: var(--text-bright); }
.mood-calculating { background: #3a4a5a; color: var(--text-bright); }
.mood-dismissive { background: #5a5a4a; color: var(--text-bright); }
.mood-shaken { background: #6a4a3a; color: var(--text-bright); }
.mood-cornered { background: #7a3a2a; color: var(--text-bright); }
.mood-desperate { background: #8a2a2a; color: var(--text-bright); }
.mood-cracking { background: #6a3a4a; color: var(--text-bright); }
.mood-broken { background: #4a3a4a; color: var(--text-secondary); }
.mood-guarded { background: #4a4a5a; color: var(--text-bright); }
.mood-measured { background: #3a4a4a; color: var(--text-bright); }
.mood-stone_cold { background: #2a3a3a; color: var(--text-secondary); }
.mood-sorrowful { background: #4a3a5a; color: var(--text-secondary); }
.mood-pleading { background: #5a4a6a; color: var(--text-bright); }
.mood-indignant { background: #6a5a3a; color: var(--text-bright); }

.pressure-meter {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pressure-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 1px;
}
.pressure-bar {
  width: 100px;
  height: 6px;
  background: var(--bg-darkest);
  border-radius: 3px;
  overflow: hidden;
}
.pressure-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-yellow-dim), var(--accent-yellow), var(--accent-red-bright));
  border-radius: 3px;
  transition: width 0.5s ease;
}

.round-counter {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-secondary);
}

.ia-warning {
  font-size: 12px;
  color: var(--accent-red-bright);
  font-weight: 700;
  animation: iaPulse 1.5s infinite;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Main Content */
.interrog-main {
  flex: 1;
  display: flex;
  z-index: 2;
  overflow: hidden;
}

/* Case File Panel (Left) */
.case-file-panel {
  width: 280px;
  background: var(--bg-panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.panel-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
}
.panel-tab {
  flex: 1;
  padding: 10px 4px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}
.panel-tab:hover { color: var(--text-secondary); }
.panel-tab.active {
  color: var(--accent-yellow);
  border-bottom-color: var(--accent-yellow);
}

.panel-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  font-size: 12px;
  line-height: 1.6;
}

.panel-section { margin-bottom: 16px; }
.panel-section h4 {
  font-family: var(--font-title);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--accent-yellow-dim);
  margin-bottom: 6px;
  text-transform: uppercase;
}
.panel-section p {
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: 12px;
}

.evidence-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 10px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.2s;
}
.evidence-item:hover {
  border-color: var(--accent-yellow);
  background: var(--bg-mid);
}
.evidence-item.presented {
  border-color: var(--accent-yellow-dim);
  opacity: 0.6;
}
.evidence-type {
  font-size: 10px;
  color: var(--accent-yellow);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
  font-weight: 600;
}
.evidence-desc {
  font-size: 11px;
  color: var(--text-secondary);
  font-family: var(--font-mono);
}

/* Dialogue Area (Center) */
.dialogue-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.suspect-portrait-container {
  display: flex;
  justify-content: center;
  padding: 16px 0 8px;
}

.suspect-portrait {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  font-weight: 700;
  color: var(--text-bright);
  border: 2px solid var(--border);
  transition: all 0.3s;
  position: relative;
}
.suspect-portrait.scared {
  animation: portraitShake 0.3s;
}
.suspect-portrait.angry {
  border-color: var(--accent-red);
}

.dialogue-log {
  flex: 1;
  overflow-y: auto;
  padding: 8px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dialogue-entry {
  animation: fadeIn 0.3s ease-out;
}

.dialogue-detective {
  padding: 10px 16px;
  background: rgba(42, 90, 138, 0.15);
  border-left: 3px solid var(--accent-blue);
  margin-right: 40px;
}
.dialogue-detective .speaker {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent-blue);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.dialogue-suspect {
  padding: 10px 16px;
  background: rgba(201, 162, 39, 0.08);
  border-left: 3px solid var(--accent-yellow-dim);
  margin-left: 40px;
}
.dialogue-suspect .speaker {
  font-size: 10px;
  font-weight: 700;
  color: var(--accent-yellow);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.dialogue-text {
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.6;
}

.dialogue-body-language {
  font-size: 11px;
  color: var(--text-dim);
  font-style: italic;
  margin-top: 6px;
  padding-left: 12px;
  border-left: 2px solid var(--border);
}

.dialogue-action {
  text-align: center;
  padding: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-red);
  font-style: italic;
  animation: fadeIn 0.3s;
}

.dialogue-system {
  text-align: center;
  padding: 6px;
  font-size: 11px;
  color: var(--text-dim);
  font-style: italic;
}

/* Dialogue Options (Original Mode) */
.dialogue-options {
  padding: 12px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 200px;
  overflow-y: auto;
}

.dialogue-option {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 10px 16px;
  text-align: left;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 10px;
}
.dialogue-option:hover {
  border-color: var(--accent-yellow);
  background: var(--bg-mid);
  transform: translateX(4px);
}
.dialogue-option:active {
  transform: translateX(2px);
}
.option-tactic {
  font-size: 10px;
  color: var(--accent-yellow-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  min-width: 80px;
}
.option-text {
  flex: 1;
}

/* Chat Input (Chatbot Mode) */
.chat-input-area {
  padding: 12px 24px;
  display: flex;
  gap: 8px;
  background: var(--bg-panel);
  border-top: 1px solid var(--border);
}
#chat-input {
  flex: 1;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  color: var(--text-bright);
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 14px;
  outline: none;
}
#chat-input:focus { border-color: var(--accent-yellow); }
#chat-input::placeholder { color: var(--text-dim); }

.btn-send {
  background: var(--accent-yellow);
  color: var(--bg-darkest);
  border: none;
  padding: 12px 24px;
  font-family: var(--font-title);
  font-size: 14px;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-send:hover { background: #dbb432; }
.btn-send:disabled {
  background: var(--border);
  color: var(--text-dim);
  cursor: not-allowed;
}

/* Tactics Panel (Right) */
.tactics-panel {
  width: 250px;
  background: var(--bg-panel);
  border-left: 1px solid var(--border);
  padding: 12px;
  overflow-y: auto;
}
.tactics-panel h3 {
  font-family: var(--font-title);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--accent-yellow-dim);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tactic-warning {
  font-size: 10px;
  color: var(--accent-red);
}

.tactics-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
}

.tactic-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 8px 10px;
  text-align: left;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tactic-btn:hover {
  border-color: var(--accent-yellow-dim);
  background: var(--bg-mid);
}
.tactic-btn.physical:hover {
  border-color: var(--accent-red);
}
.tactic-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.tactic-btn .tactic-icon { font-size: 16px; width: 24px; text-align: center; }
.tactic-btn .tactic-name { font-size: 11px; font-weight: 600; }
.tactic-btn .tactic-desc {
  display: none;
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 2px;
  line-height: 1.3;
}
.tactic-btn:hover:not(:disabled) .tactic-desc {
  display: block;
}
.tactic-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  position: relative;
}
.tactic-btn:disabled::after {
  content: 'USED';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 9px;
  color: var(--text-dim);
  letter-spacing: 1px;
  font-weight: 700;
}

.physical-count {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 8px;
}
.physical-bar {
  height: 4px;
  background: var(--bg-darkest);
  border-radius: 2px;
  margin-top: 6px;
  overflow: hidden;
}
.physical-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-orange), var(--accent-red-bright));
  border-radius: 2px;
  transition: width 0.3s;
}

/* Verdict Toggle Button */
.verdict-toggle {
  display: none;
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: var(--accent-yellow);
  color: var(--bg-darkest);
  border: none;
  padding: 8px 18px;
  font-family: var(--font-title);
  font-size: 12px;
  letter-spacing: 2px;
  cursor: pointer;
  z-index: 6;
  transition: all 0.2s;
  box-shadow: 0 2px 12px rgba(201, 162, 39, 0.3);
}
.verdict-toggle:hover {
  background: #dbb432;
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(201, 162, 39, 0.4);
}
.verdict-toggle.active {
  display: block;
}

/* Verdict Bar */
.verdict-bar {
  padding: 16px 24px;
  background: var(--bg-panel);
  border-top: 2px solid var(--accent-yellow-dim);
  z-index: 7;
  animation: fadeInUp 0.2s ease-out;
}
.verdict-bar-header {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-bottom: 12px;
}
.verdict-bar-header h3 {
  font-family: var(--font-title);
  font-size: 13px;
  letter-spacing: 3px;
  color: var(--accent-yellow);
  text-align: center;
}
.verdict-close {
  position: absolute;
  right: 0;
  top: -4px;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 18px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.verdict-close:hover {
  border-color: var(--text-secondary);
  color: var(--text-bright);
}

.verdict-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
}

.verdict-btn {
  background: var(--bg-card);
  border: 2px solid var(--border);
  color: var(--text-primary);
  padding: 14px 24px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.verdict-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

.verdict-btn span {
  font-family: var(--font-title);
  font-size: 16px;
  letter-spacing: 2px;
}
.verdict-btn small {
  font-size: 10px;
  color: var(--text-secondary);
}
.stamp-icon { font-size: 24px !important; }

.verdict-btn.release:hover { border-color: var(--accent-green-bright); }
.verdict-btn.hold:hover { border-color: var(--accent-yellow); }
.verdict-btn.book:hover { border-color: var(--accent-red-bright); }
.verdict-btn.flip:hover { border-color: var(--accent-blue); }

/* --- STAMP OVERLAY --- */
.stamp-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.stamp-text {
  font-family: var(--font-title);
  font-size: 80px;
  letter-spacing: 8px;
  transform: rotate(-15deg);
  padding: 20px 50px;
  border: 6px solid;
  animation: stampSlam 0.4s ease-out;
}
.stamp-text.stamp-release {
  color: var(--accent-green-bright);
  border-color: var(--accent-green-bright);
}
.stamp-text.stamp-hold {
  color: var(--accent-yellow);
  border-color: var(--accent-yellow);
}
.stamp-text.stamp-book {
  color: var(--accent-red-bright);
  border-color: var(--accent-red-bright);
}
.stamp-text.stamp-flip {
  color: var(--accent-blue);
  border-color: var(--accent-blue);
}

/* --- CONSEQUENCES SCREEN --- */
#consequences-screen {
  flex-direction: column;
  align-items: center;
  background: var(--bg-dark);
  overflow-y: auto;
}

.consequences-content {
  max-width: 700px;
  width: 100%;
  padding: 24px;
  margin: auto;
}
.consequences-content h2 {
  font-family: var(--font-title);
  font-size: clamp(20px, 4vw, 28px);
  letter-spacing: 4px;
  color: var(--accent-yellow);
  text-align: center;
  margin-bottom: 20px;
}

.consequences-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 30px;
}

.consequence-item {
  background: var(--bg-panel);
  border-left: 3px solid var(--text-dim);
  padding: 14px 18px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-primary);
  animation: fadeInUp 0.5s ease-out;
}
.consequence-item.good { border-left-color: var(--accent-green-bright); }
.consequence-item.bad { border-left-color: var(--accent-red-bright); }
.consequence-item.neutral { border-left-color: var(--accent-yellow); }

.stat-changes {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-bottom: 30px;
}
.stat-change {
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 3px;
  animation: fadeIn 0.5s;
}
.stat-change.positive {
  background: rgba(42, 138, 74, 0.2);
  color: var(--accent-green-bright);
}
.stat-change.negative {
  background: rgba(196, 48, 48, 0.2);
  color: var(--accent-red-bright);
}

.personal-beat {
  background: var(--bg-card);
  padding: 20px;
  margin-bottom: 30px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-secondary);
  font-style: italic;
  line-height: 1.7;
  text-align: center;
  border: 1px solid var(--border);
}

.money-management {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  padding: 20px;
  margin-bottom: 24px;
  text-align: center;
}
.money-management h3 {
  font-family: var(--font-title);
  font-size: 20px;
  color: var(--accent-yellow);
  margin-bottom: 8px;
}
.money-management p {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 16px;
}
.money-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.money-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 10px 16px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}
.money-btn:hover {
  border-color: var(--accent-yellow);
  background: var(--bg-mid);
}
.money-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.money-btn.selected {
  border-color: var(--accent-yellow);
  background: rgba(201, 162, 39, 0.15);
}

.btn-next-day {
  background: var(--accent-yellow);
  color: var(--bg-darkest);
  border: none;
  padding: 16px 40px;
  font-family: var(--font-title);
  font-size: 18px;
  letter-spacing: 3px;
  cursor: pointer;
  display: block;
  margin: 0 auto;
  transition: all 0.2s;
}
.btn-next-day:hover {
  background: #dbb432;
  transform: translateY(-1px);
}

/* --- ENDING SCREEN --- */
#ending-screen {
  flex-direction: column;
  align-items: center;
  background: var(--bg-darkest);
  overflow-y: auto;
}

.ending-content {
  max-width: 700px;
  width: 100%;
  text-align: center;
  padding: 32px 24px;
  margin: auto;
  animation: fadeInUp 1s ease-out;
}
.ending-content h1 {
  font-family: var(--font-title);
  font-size: clamp(28px, 5vw, 48px);
  letter-spacing: 4px;
  margin-bottom: 20px;
}
.ending-text {
  font-family: var(--font-mono);
  font-size: clamp(12px, 1.5vw, 14px);
  line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 24px;
}
.ending-stats {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.ending-stat {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  padding: 10px 14px;
  min-width: 90px;
}
.ending-stat .es-label {
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.ending-stat .es-value {
  font-family: var(--font-mono);
  font-size: 24px;
  color: var(--text-bright);
  margin-top: 4px;
}

/* --- MODALS --- */
.modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}
.modal-content {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  padding: 32px;
  max-width: 500px;
  width: 90%;
  animation: fadeIn 0.2s;
}
.modal-content h2 {
  font-family: var(--font-title);
  font-size: 20px;
  letter-spacing: 2px;
  color: var(--accent-yellow);
  margin-bottom: 16px;
}
.modal-content p {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.config-form label {
  display: block;
  margin-bottom: 14px;
  font-size: 12px;
  color: var(--text-secondary);
}
.config-form input {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 10px 12px;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  color: var(--text-bright);
  font-family: var(--font-mono);
  font-size: 13px;
  outline: none;
}
.config-form input:focus { border-color: var(--accent-yellow); }

.config-buttons {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}
.btn-test, .btn-save, .btn-cancel {
  flex: 1;
  padding: 10px;
  border: 1px solid var(--border);
  font-family: var(--font-title);
  font-size: 13px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-test {
  background: var(--bg-card);
  color: var(--text-primary);
}
.btn-test:hover { border-color: var(--accent-blue); }
.btn-save {
  background: var(--accent-yellow);
  color: var(--bg-darkest);
  border-color: var(--accent-yellow);
}
.btn-save:hover { background: #dbb432; }
.btn-cancel {
  background: var(--bg-card);
  color: var(--text-secondary);
}
.btn-cancel:hover { border-color: var(--text-dim); }

.config-status {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 8px;
  min-height: 20px;
}
.config-status.success { color: var(--accent-green-bright); }
.config-status.error { color: var(--accent-red-bright); }

/* IA Review Modal */
.ia-modal { border-color: var(--accent-red); }
.ia-modal h2 { color: var(--accent-red-bright); }

.ia-option {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 12px 16px;
  margin-bottom: 8px;
  cursor: pointer;
  font-size: 13px;
  width: 100%;
  text-align: left;
  transition: all 0.15s;
}
.ia-option:hover {
  border-color: var(--accent-yellow);
  background: var(--bg-mid);
}

/* Submit Score Modal */
.submit-name-input {
  display: block;
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  color: var(--text-bright);
  font-family: var(--font-mono);
  font-size: 14px;
  outline: none;
  margin-bottom: 20px;
  box-sizing: border-box;
}
.submit-name-input:focus { border-color: var(--accent-yellow); }
.submit-modal-buttons {
  display: flex;
  gap: 8px;
}
.submit-modal-buttons .menu-btn {
  flex: 1;
  padding: 10px;
  font-size: 13px;
}

/* --- AD SYSTEM --- */

/* Interstitial ad overlay */
.ad-interstitial {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.ad-interstitial-inner {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  padding: 24px;
  max-width: 728px;
  width: 95%;
  text-align: center;
}
.ad-interstitial-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.ad-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--text-dim);
  text-transform: uppercase;
}
.ad-timer {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-yellow);
}
.ad-interstitial-slot {
  min-height: 250px;
  background: var(--bg-dark);
  border: 1px solid var(--border);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ad-interstitial-ins {
  width: 100%;
  min-height: 250px;
}
.ad-continue-btn {
  width: 100%;
}
.ad-continue-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Banner ads on briefing screen */
.ad-banner-wrapper {
  width: 100%;
  min-height: 90px;
  margin: 8px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ad-banner-wrapper .adsbygoogle {
  width: 100%;
  min-height: 90px;
}

/* Secondary menu button variant */
.menu-btn-secondary {
  background: var(--bg-card) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border) !important;
}
.menu-btn-secondary:hover {
  border-color: var(--accent-yellow) !important;
  color: var(--text-bright) !important;
}

/* --- ANIMATIONS --- */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideIn {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes recBlink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

@keyframes iaPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes stampSlam {
  0% { transform: rotate(-15deg) scale(3); opacity: 0; }
  60% { transform: rotate(-15deg) scale(0.9); opacity: 1; }
  80% { transform: rotate(-15deg) scale(1.05); }
  100% { transform: rotate(-15deg) scale(1); }
}

@keyframes portraitShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

/* Typing animation for dialogue */
.typing-indicator {
  display: inline-flex;
  gap: 4px;
  padding: 4px 0;
}
.typing-indicator span {
  width: 6px;
  height: 6px;
  background: var(--text-dim);
  border-radius: 50%;
  animation: typingDot 1.2s infinite;
}
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typingDot {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* --- COMING SOON / DISABLED BUTTON --- */
.menu-btn-disabled {
  position: relative;
  opacity: 0.5;
  cursor: not-allowed;
  filter: blur(1px) grayscale(0.5);
  pointer-events: none;
}
.coming-soon-badge {
  display: inline-block;
  background: var(--accent-red);
  color: var(--text-bright);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 3px 10px;
  margin-top: 6px;
}

.menu-btn-small {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 12px 24px;
  cursor: pointer;
  text-align: center;
  margin-top: 16px;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.menu-btn-small:hover {
  border-color: var(--accent-yellow);
  background: var(--bg-card);
}
.menu-btn-small .mode-icon { font-size: 20px; }
.menu-btn-small .mode-label {
  font-family: var(--font-title);
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--text-bright);
}

/* --- CASE HISTORY DASHBOARD --- */
.ch-stats {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.ch-stat {
  background: var(--bg-darkest);
  padding: 8px 12px;
  flex: 1;
  min-width: 60px;
  text-align: center;
}
.ch-stat-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-bright);
}
.ch-stat-label {
  font-size: 9px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.ch-book { color: var(--accent-red-bright); }
.ch-release { color: var(--accent-green-bright); }
.ch-hold { color: var(--accent-yellow); }
.ch-flip { color: var(--accent-blue); }

.ch-list {
  max-height: 150px;
  overflow-y: auto;
}
.ch-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.ch-row:last-child { border-bottom: none; }
.ch-name {
  flex: 1;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ch-verdict {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 2px 8px;
  min-width: 70px;
  text-align: center;
}
.ch-correct { color: var(--accent-green-bright); font-size: 14px; }
.ch-wrong { color: var(--accent-red-bright); font-size: 14px; }

/* --- PRE-SHIFT INTEL CHALLENGES --- */
.preshift-intel {
  margin-top: 12px;
}

.intel-card {
  background: var(--bg-panel);
  border: 1px solid var(--accent-yellow-dim);
  padding: 20px;
}
.intel-title {
  font-family: var(--font-title);
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--accent-yellow);
  margin-bottom: 10px;
}
.intel-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 14px;
  line-height: 1.5;
}
.intel-behaviors {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-primary);
  background: var(--bg-darkest);
  padding: 10px;
  margin-bottom: 14px;
  border-left: 3px solid var(--accent-yellow-dim);
  line-height: 1.5;
  font-style: italic;
}
.intel-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.intel-option {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-primary);
  padding: 10px 14px;
  text-align: left;
  cursor: pointer;
  font-size: 12px;
  font-family: var(--font-mono);
  transition: all 0.15s;
  line-height: 1.4;
}
.intel-option:hover:not(:disabled) {
  border-color: var(--accent-yellow);
  background: var(--bg-mid);
}
.intel-result {
  margin-top: 12px;
  padding: 12px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 2px;
}
.intel-result-correct {
  background: rgba(42, 138, 74, 0.15);
  border-left: 3px solid var(--accent-green-bright);
  color: var(--text-primary);
}
.intel-result-wrong {
  background: rgba(196, 48, 48, 0.15);
  border-left: 3px solid var(--accent-red);
  color: var(--text-primary);
}
.intel-correct {
  font-weight: 700;
  color: var(--accent-green-bright);
  margin-right: 6px;
}
.intel-wrong {
  font-weight: 700;
  color: var(--accent-red-bright);
  margin-right: 6px;
}

/* --- LEADERBOARD SCREEN --- */
#leaderboard-screen {
  flex-direction: column;
  align-items: center;
  background: var(--bg-dark);
  overflow-y: auto;
}
.leaderboard-content {
  max-width: 800px;
  width: 100%;
  padding: 24px;
  margin: auto;
  text-align: center;
}
.leaderboard-content h2 {
  font-family: var(--font-title);
  font-size: clamp(24px, 4vw, 36px);
  letter-spacing: 4px;
  color: var(--accent-yellow);
  margin-bottom: 8px;
}
.leaderboard-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 30px;
}
.leaderboard-table {
  text-align: left;
  margin-bottom: 30px;
}
.lb-header, .lb-row {
  display: grid;
  grid-template-columns: 40px 1fr 90px 50px 60px 80px 80px;
  gap: 8px;
  padding: 10px 12px;
  align-items: center;
  font-size: 12px;
}
.lb-header {
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 10px;
  border-bottom: 1px solid var(--border);
}
.lb-row {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  margin-bottom: 2px;
  color: var(--text-primary);
}
.lb-gold { border-color: #c9a227; background: rgba(201, 162, 39, 0.08); }
.lb-silver { border-color: #888; background: rgba(136, 136, 136, 0.06); }
.lb-bronze { border-color: #8a5a2a; background: rgba(138, 90, 42, 0.06); }
.lb-rank { font-weight: 700; color: var(--text-dim); text-align: center; }
.lb-gold .lb-rank { color: var(--accent-yellow); }
.lb-name { font-weight: 600; color: var(--text-bright); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-score { font-family: var(--font-mono); font-weight: 700; color: var(--accent-yellow); }
.lb-grade {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 16px;
  text-align: center;
}
.lb-grade-s { color: #ffd700; }
.lb-grade-a { color: var(--accent-green-bright); }
.lb-grade-b { color: var(--accent-blue); }
.lb-grade-c { color: var(--text-primary); }
.lb-grade-d { color: var(--accent-orange); }
.lb-grade-f { color: var(--accent-red); }
.lb-cases { color: var(--text-secondary); text-align: center; }
.lb-ending { color: var(--text-dim); font-size: 11px; text-transform: capitalize; }
.lb-date { color: var(--text-dim); font-size: 10px; font-family: var(--font-mono); }
.lb-empty {
  padding: 40px;
  color: var(--text-dim);
  font-style: italic;
  text-align: center;
}

/* --- SCORE BREAKDOWN (End Screen) --- */
.ending-score {
  margin: 16px 0 20px;
}
.score-total {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.score-number {
  font-family: var(--font-mono);
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 700;
  color: var(--accent-yellow);
}
.score-rank-badge {
  font-family: var(--font-title);
  font-size: 18px;
  letter-spacing: 2px;
  padding: 6px 16px;
  border: 2px solid currentColor;
}
.score-breakdown {
  max-width: 400px;
  margin: 0 auto;
}
.score-line {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
  font-family: var(--font-mono);
  font-size: 12px;
  border-bottom: 1px solid var(--border);
}
.score-line.positive { color: var(--accent-green-bright); }
.score-line.negative { color: var(--accent-red-bright); }

/* --- MOBILE NAV BAR (hidden on desktop) --- */
.mobile-interrog-nav {
  display: none;
}

/* --- RESPONSIVE --- */
@media (max-width: 1200px) {
  .case-file-panel { width: 240px; }
  .tactics-panel { width: 220px; }
}

@media (max-width: 1024px) {
  .briefing-content { flex-direction: column; padding: 16px; gap: 16px; }
  .briefing-right { width: 100%; }
  .case-file-panel { width: 220px; }
  .tactics-panel { width: 200px; }
}

@media (max-width: 900px) {
  .title-menu { flex-direction: column; align-items: center; }
  .game-title { font-size: 40px; }
  .game-title span { font-size: 32px; }
  .lb-header, .lb-row {
    grid-template-columns: 30px 1fr 70px 40px;
  }
  .lb-cases, .lb-ending, .lb-date { display: none; }
}

@media (max-height: 700px) {
  .ending-content { padding: 16px; }
  .ending-content h1 { font-size: 24px; margin-bottom: 12px; }
  .ending-text { font-size: 12px; margin-bottom: 16px; line-height: 1.5; }
  .ending-stats { gap: 8px; margin-bottom: 16px; }
  .ending-stat { padding: 8px 10px; min-width: 70px; }
  .ending-stat .es-value { font-size: 18px; }
  .ending-stat .es-label { font-size: 9px; }
  .score-number { font-size: 28px; }
  .score-rank-badge { font-size: 14px; padding: 4px 12px; }
  .score-breakdown { max-height: 120px; overflow-y: auto; }
  .consequences-content { padding: 16px; }
  .consequences-content h2 { font-size: 20px; margin-bottom: 12px; }
  .consequence-item { padding: 8px 12px; font-size: 12px; }
  .personal-beat { padding: 12px; font-size: 12px; margin-bottom: 16px; }
}

/* ========================================
   MOBILE LAYOUT (max-width: 768px)
   ======================================== */
@media (max-width: 768px) {

  /* --- GLOBAL --- */
  html, body { font-size: 13px; }
  #app { height: 100dvh; } /* dynamic viewport for mobile browsers */

  /* --- TITLE SCREEN --- */
  .title-lamp { height: 40px; }
  .title-lamp::after { width: 20px; height: 14px; }
  .title-silhouette { gap: 24px; height: 50px; margin-bottom: 24px; }
  .silhouette-detective { width: 28px; height: 56px; }
  .silhouette-detective::before { width: 18px; height: 18px; top: -10px; }
  .silhouette-table { width: 80px; height: 6px; margin-bottom: 20px; }
  .silhouette-suspect { width: 24px; height: 48px; }
  .silhouette-suspect::before { width: 16px; height: 16px; top: -10px; }
  .game-title { font-size: 28px; letter-spacing: 4px; }
  .game-title span { font-size: 22px; letter-spacing: 8px; }
  .game-subtitle { font-size: 11px; margin-bottom: 24px; }
  .title-menu { flex-direction: column; align-items: center; gap: 12px; margin-bottom: 24px; }
  .menu-btn { width: 260px; padding: 16px 20px; }
  .title-footer { font-size: 10px; }

  /* --- BRIEFING SCREEN --- */
  .briefing-header { padding: 10px 16px; }
  .precinct-badge { font-size: 12px; letter-spacing: 2px; }
  .day-display { font-size: 18px; }
  .briefing-content { flex-direction: column; padding: 12px; gap: 12px; overflow-y: auto; }
  .briefing-left { gap: 10px; }
  .briefing-right { width: 100%; gap: 12px; }
  .stats-dashboard { padding: 14px; }
  .stats-dashboard h2 { font-size: 12px; margin-bottom: 10px; }
  .stat-label { width: 110px; font-size: 11px; }
  .stat-icon { font-size: 14px; }
  .case-queue { padding: 14px; }
  .case-queue h2 { font-size: 12px; }
  .queue-portrait { width: 32px; height: 32px; font-size: 12px; }
  .queue-name { font-size: 12px; }
  .queue-summary { font-size: 10px; }
  .btn-begin-shift { padding: 14px; font-size: 16px; }
  .ad-banner-wrapper { min-height: 60px; }

  /* Case history dashboard */
  .intel-card { padding: 14px; }
  .ch-stat { padding: 6px 8px; }
  .ch-stat-num { font-size: 16px; }
  .ch-stat-label { font-size: 8px; }
  .ch-list { max-height: 120px; }
  .ch-row { font-size: 11px; padding: 4px 6px; }

  /* --- INTERROGATION SCREEN (Tab-based mobile layout) --- */
  .interrog-top-bar {
    flex-wrap: wrap;
    padding: 8px 12px;
    gap: 6px;
    min-height: auto;
  }
  .suspect-info-bar { gap: 8px; }
  .suspect-name-bar { font-size: 13px; }
  .suspect-mood { font-size: 10px; padding: 2px 8px; }
  .pressure-meter { order: 10; width: 100%; }
  .pressure-bar { flex: 1; }
  .round-counter { font-size: 11px; }
  .ia-warning { font-size: 10px; }

  /* Room background - tone down on mobile */
  .room-mirror { display: none; }
  .light-cone { border-left-width: 100px; border-right-width: 100px; border-top-width: 300px; }
  .room-recording { font-size: 9px; top: 8px; right: 10px; }

  /* Portrait - smaller on mobile */
  .suspect-portrait-container { padding: 8px 0 4px; }
  .suspect-portrait { width: 56px; height: 56px; font-size: 20px; }

  /* Main content: tabs instead of 3-column */
  .interrog-main {
    flex-direction: column;
    position: relative;
  }

  /* All three panels become full-area, toggle visibility via mobile nav */
  .case-file-panel,
  .dialogue-area,
  .tactics-panel {
    width: 100%;
    border: none;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
  }
  .case-file-panel {
    display: none;
    max-height: none;
    z-index: 3;
    background: var(--bg-panel);
  }
  .case-file-panel.mobile-active {
    display: flex;
  }
  .dialogue-area {
    position: relative;
    z-index: 2;
  }
  .dialogue-area.mobile-hidden {
    display: none;
  }
  .tactics-panel {
    display: none;
    max-height: none;
    z-index: 3;
    background: var(--bg-panel);
    flex-direction: column;
    flex-wrap: nowrap;
    padding: 12px;
    overflow-y: auto;
  }
  .tactics-panel.mobile-active {
    display: flex;
  }
  .tactics-panel h3 { width: 100%; }
  .tactics-list { flex-direction: column; }

  /* Dialogue area adjustments */
  .dialogue-log { padding: 8px 12px; gap: 8px; }
  .dialogue-detective { margin-right: 8px; padding: 8px 12px; }
  .dialogue-suspect { margin-left: 8px; padding: 8px 12px; }
  .dialogue-text { font-size: 12px; }
  .dialogue-body-language { font-size: 10px; }
  .dialogue-options { padding: 8px 12px; gap: 4px; max-height: 180px; }
  .dialogue-option { padding: 8px 12px; font-size: 12px; gap: 8px; }
  .option-tactic { min-width: 60px; font-size: 9px; }

  /* Mobile bottom nav for interrogation */
  .mobile-interrog-nav {
    display: flex;
    background: var(--bg-darkest);
    border-top: 1px solid var(--border);
    z-index: 8;
    flex-shrink: 0;
  }
  .mobile-nav-btn {
    flex: 1;
    background: none;
    border: none;
    color: var(--text-dim);
    padding: 10px 4px;
    font-size: 10px;
    font-family: var(--font-title);
    letter-spacing: 1px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    transition: color 0.15s;
  }
  .mobile-nav-btn .nav-icon { font-size: 18px; }
  .mobile-nav-btn.active {
    color: var(--accent-yellow);
    border-top: 2px solid var(--accent-yellow);
  }

  /* Verdict on mobile */
  .verdict-toggle {
    bottom: auto;
    left: auto;
    position: relative;
    width: 100%;
    font-size: 11px;
    padding: 8px 12px;
    z-index: 6;
  }
  .verdict-toggle.active {
    display: block;
  }
  .verdict-bar { padding: 12px; }
  .verdict-bar-header { margin-bottom: 8px; }
  .verdict-bar-header h3 { font-size: 11px; letter-spacing: 2px; }
  .verdict-buttons { flex-wrap: wrap; gap: 6px; justify-content: center; }
  .verdict-btn { min-width: 0; flex: 1 1 45%; padding: 10px 8px; }
  .verdict-btn span { font-size: 13px; letter-spacing: 1px; }
  .verdict-btn small { font-size: 9px; }
  .stamp-icon { font-size: 18px !important; }

  /* --- STAMP OVERLAY (mobile) --- */
  .stamp-text {
    font-size: 40px;
    letter-spacing: 4px;
    padding: 12px 28px;
    border-width: 4px;
  }

  /* --- CONSEQUENCES SCREEN --- */
  .consequences-content { padding: 16px 12px; }
  .consequences-content h2 { font-size: 20px; margin-bottom: 14px; }
  .consequences-list { gap: 8px; margin-bottom: 20px; }
  .consequence-item { padding: 10px 12px; font-size: 12px; }
  .stat-changes { gap: 8px; margin-bottom: 20px; }
  .stat-change { font-size: 11px; padding: 4px 8px; }
  .personal-beat { padding: 14px; font-size: 12px; margin-bottom: 20px; }
  .btn-next-day { padding: 14px 32px; font-size: 16px; }

  /* --- ENDING SCREEN --- */
  .ending-content { padding: 20px 12px; }
  .ending-content h1 { font-size: 24px; margin-bottom: 14px; }
  .ending-text { font-size: 12px; margin-bottom: 18px; }
  .ending-stats { gap: 6px; margin-bottom: 18px; }
  .ending-stat { padding: 8px 10px; min-width: 70px; }
  .ending-stat .es-value { font-size: 18px; }
  .ending-stat .es-label { font-size: 9px; }
  .score-number { font-size: 28px; }
  .score-rank-badge { font-size: 13px; padding: 4px 10px; }
  .score-breakdown { max-height: 140px; overflow-y: auto; }
  .score-line { font-size: 11px; }

  /* --- LEADERBOARD --- */
  .leaderboard-content { padding: 16px 10px; }
  .lb-header, .lb-row {
    grid-template-columns: 28px 1fr 64px 36px;
    gap: 4px;
    padding: 8px;
    font-size: 11px;
  }
  .lb-cases, .lb-ending, .lb-date { display: none; }

  /* --- MODALS --- */
  .modal-content { padding: 20px 16px; }
  .modal-content h2 { font-size: 16px; }

  /* --- ADS --- */
  .ad-interstitial-inner { padding: 16px; }
  .ad-interstitial-slot { min-height: 200px; }
  .ad-interstitial-ins { min-height: 200px; }
}

/* ========================================
   SMALL MOBILE (max-width: 400px)
   ======================================== */
@media (max-width: 400px) {
  .game-title { font-size: 22px; letter-spacing: 3px; }
  .game-title span { font-size: 18px; letter-spacing: 6px; }
  .menu-btn { width: 220px; padding: 14px 16px; }
  .mode-label { font-size: 15px; }
  .mode-desc { font-size: 11px; }
  .stamp-text { font-size: 32px; padding: 10px 20px; }
  .verdict-btn { flex: 1 1 100%; }
}