/* retro.css - Estilização Fiel ao Visual 16-bits VGA / DOS do Carmen Sandiego 90s */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

:root {
  --bg-main: #181a20;
  --panel-bg: #2a2e3a;
  --panel-border-light: #6a7185;
  --panel-border-dark: #101217;
  --window-blue: #000088;
  --dossier-bg: #232734;
  --text-main: #ffffff;
  --text-green: #00ff66;
  --text-yellow: #ffff33;
  --text-red: #ff3344;
  --btn-bg: #3e4454;
  --btn-hover: #4e566b;
  --btn-active: #2b303d;
  --font-retro: 'Press Start 2P', monospace;
  --font-typewriter: 'VT323', 'Courier New', monospace;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  user-select: none;
}

body {
  background-color: #0b0c10;
  color: var(--text-main);
  font-family: var(--font-retro);
  line-height: 1.4;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 10px;
  overflow-x: hidden;
}

/* Container Principal do Jogo (Proporção VGA 800x600) */
.game-container {
  width: 800px;
  max-width: 100%;
  background-color: var(--bg-main);
  border: 4px solid #4a5061;
  border-top-color: #7b839b;
  border-left-color: #7b839b;
  border-right-color: #12141a;
  border-bottom-color: #12141a;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9), 0 0 20px rgba(0, 100, 200, 0.15);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* Efeito Scanlines CRT Retrô (Opcional, com toggle) */
.scanlines-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    rgba(18, 16, 16, 0) 50%, 
    rgba(0, 0, 0, 0.25) 50%
  );
  background-size: 100% 4px;
  z-index: 99;
  pointer-events: none;
  opacity: 0.85;
}

/* Barra Superior: Título 3D Chanfrado */
.header-bar {
  background-color: #12141c;
  border-bottom: 3px solid #0f1015;
  padding: 12px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 2px solid #5a6175;
}

.game-title {
  font-size: 15px;
  letter-spacing: 1.5px;
  color: #ffffff;
  text-align: center;
  flex-grow: 1;
  white-space: nowrap;
  text-shadow: 
    -2px -2px 0 #000,  
     2px -2px 0 #000,
    -2px  2px 0 #000,
     2px  2px 0 #000,
     3px  3px 0 #555c70,
     4px  4px 0 #000000;
}

.top-controls {
  display: flex;
  gap: 8px;
  align-items: center;
}

.btn-icon-tiny {
  background: #2b303d;
  border: 2px solid #555c70;
  border-bottom-color: #111;
  border-right-color: #111;
  color: #fff;
  font-family: var(--font-retro);
  font-size: 9px;
  padding: 4px 6px;
  cursor: pointer;
}

.btn-icon-tiny:hover {
  background: #41485a;
  color: var(--text-yellow);
}

/* Seção Central: Retrato + Dossiê de Diálogos */
.main-section {
  display: flex;
  gap: 12px;
  padding: 12px;
}

/* Painel Esquerdo: Retrato do Suspeito */
.portrait-panel {
  width: 258px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background-color: #20242e;
  border: 3px solid var(--panel-border-light);
  border-right-color: var(--panel-border-dark);
  border-bottom-color: var(--panel-border-dark);
  padding: 8px;
}

.portrait-frame {
  width: 242px;
  height: 275px;
  background-color: #101217;
  border: 2px solid #0a0b0e;
  border-top-color: #050608;
  border-left-color: #050608;
  border-right-color: #4a5061;
  border-bottom-color: #4a5061;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.portrait-label-box {
  margin-top: 8px;
  background-color: #9ea4b1;
  border: 2px solid #363b47;
  border-top-color: #1c1e24;
  border-left-color: #1c1e24;
  border-right-color: #d1d6e2;
  border-bottom-color: #d1d6e2;
  padding: 6px 4px;
  text-align: center;
}

.portrait-label-text {
  font-size: 10px;
  color: #000000;
  font-weight: bold;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* Painel Direito: Janela de Dossiê e Diálogos */
.dossier-window {
  flex-grow: 1;
  background-color: var(--dossier-bg);
  border: 3px solid var(--panel-border-light);
  border-right-color: var(--panel-border-dark);
  border-bottom-color: var(--panel-border-dark);
  display: flex;
  flex-direction: column;
  height: 335px;
  overflow: hidden;
}

.window-titlebar {
  background-color: var(--window-blue);
  color: #ffffff;
  padding: 5px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  letter-spacing: 1px;
  border-bottom: 2px solid #000055;
}

.titlebar-title {
  display: flex;
  align-items: center;
  gap: 6px;
}

.window-close-btn {
  background-color: #a4abb8;
  border: 2px solid #ffffff;
  border-right-color: #222;
  border-bottom-color: #222;
  color: #000;
  font-size: 9px;
  font-family: var(--font-retro);
  padding: 1px 5px;
  cursor: pointer;
  line-height: 1;
}

.dossier-body {
  display: flex;
  flex-grow: 1;
  overflow: hidden;
}

.dossier-text-content {
  flex-grow: 1;
  padding: 14px;
  font-family: var(--font-typewriter);
  font-size: 21px;
  line-height: 1.4;
  color: #e2e8f0;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.dossier-text-content b,
.dossier-text-content strong {
  color: var(--text-yellow);
}

.dossier-text-content .highlight-green {
  color: var(--text-green);
}

.dossier-text-content .highlight-red {
  color: var(--text-red);
}

/* Barra de Rolagem Retrô DOS */
.retro-scrollbar {
  width: 20px;
  background-color: #2e3442;
  border-left: 2px solid #1a1c24;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.scroll-btn {
  width: 100%;
  height: 20px;
  background-color: #4a5061;
  border: 2px solid #7c8499;
  border-right-color: #1a1c24;
  border-bottom-color: #1a1c24;
  color: #000;
  font-size: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.scroll-btn:active {
  border-color: #1a1c24;
  border-right-color: #7c8499;
  border-bottom-color: #7c8499;
}

.scroll-thumb {
  width: 14px;
  height: 40px;
  background-color: #555c70;
  border: 2px solid #7c8499;
  border-right-color: #1a1c24;
  border-bottom-color: #1a1c24;
  margin: 4px 0;
}

/* Painel Inferior de Controle */
.bottom-panel {
  background-color: #20242e;
  border: 3px solid var(--panel-border-light);
  border-right-color: var(--panel-border-dark);
  border-bottom-color: var(--panel-border-dark);
  margin: 0 12px 12px 12px;
  padding: 10px;
  display: flex;
  gap: 12px;
  align-items: center;
}

/* Mini Mapa Canvas */
.mini-map-box {
  width: 254px;
  height: 129px;
  background-color: #000033;
  border: 2px solid #000;
  border-top-color: #000;
  border-left-color: #000;
  border-right-color: #555c70;
  border-bottom-color: #555c70;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.mini-map-canvas {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
}

/* Grade de Botões Retrô com Posicionamento Exato da Imagem de Referência */
.control-grid {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.buttons-grid-layout {
  display: grid;
  grid-template-columns: 1fr 1fr 125px;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
}

#btn-investigar {
  grid-column: 1;
  grid-row: 1;
}

#btn-interpol {
  grid-column: 1;
  grid-row: 2;
}

#btn-ver-mapa {
  grid-column: 2;
  grid-row: 1;
}

#btn-cias {
  grid-column: 2;
  grid-row: 2;
}

#btn-viajar {
  grid-column: 3;
  grid-row: 1 / span 2;
}

.retro-btn {
  flex: 1;
  background-color: var(--btn-bg);
  border: 3px solid #6b7388;
  border-right-color: #12141a;
  border-bottom-color: #12141a;
  color: #ffffff;
  font-family: var(--font-retro);
  font-size: 9.5px;
  padding: 10px 4px;
  text-align: center;
  cursor: pointer;
  letter-spacing: 0.5px;
  text-shadow: 1px 1px 0 #000;
  transition: background-color 0.1s;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.3;
}

.retro-btn:hover {
  background-color: var(--btn-hover);
  color: var(--text-yellow);
}

.retro-btn:active {
  background-color: var(--btn-active);
  border-color: #12141a;
  border-right-color: #6b7388;
  border-bottom-color: #6b7388;
  transform: translate(1px, 1px);
}

.retro-btn.btn-travel {
  background-color: #2b4255;
  border-color: #4b6a85;
  border-right-color: #0d1a24;
  border-bottom-color: #0d1a24;
  font-size: 11px;
}

.retro-btn.btn-travel:hover {
  background-color: #38566f;
  color: #00ffff;
}

/* Barra de Status e Prescrição */
.status-bar {
  background-color: #12141c;
  border: 2px solid #000;
  border-top-color: #0a0b0e;
  border-left-color: #0a0b0e;
  border-right-color: #4a5061;
  border-bottom-color: #4a5061;
  padding: 6px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 8.5px;
  gap: 8px;
  white-space: nowrap;
}

.days-counter {
  color: var(--text-red);
  font-weight: bold;
  letter-spacing: 1px;
  animation: pulse-alert 2s infinite ease-in-out;
}

.location-indicator {
  color: #00ffaa;
}

@keyframes pulse-alert {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.75; }
}

/* Modais de Conteúdo e Ação (Subtelas) */
.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
  padding: 20px;
}

.modal-window {
  width: 680px;
  max-width: 95%;
  background-color: #222633;
  border: 4px solid #7c8499;
  border-right-color: #111319;
  border-bottom-color: #111319;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.95);
  display: flex;
  flex-direction: column;
  animation: pop-in 0.15s ease-out;
}

@keyframes pop-in {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.modal-titlebar {
  background-color: var(--window-blue);
  color: #fff;
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  line-height: 1.4;
}

.modal-content {
  padding: 16px;
  max-height: 440px;
  overflow-y: auto;
  font-family: var(--font-typewriter);
  font-size: 20px;
}

.modal-actions {
  padding: 12px 16px;
  background-color: #1a1d27;
  border-top: 2px solid #363b47;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.modal-actions .retro-btn {
  font-size: 9.5px;
  padding: 10px 14px;
  flex: 0 1 auto;
}

/* Itens de Escolha (Investigações e Voos) */
.choice-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.choice-item {
  background: #2b303e;
  border: 2px solid #555c70;
  border-right-color: #111;
  border-bottom-color: #111;
  padding: 12px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: background 0.1s;
}

.choice-item:hover {
  background: #3b4255;
  border-color: var(--text-yellow);
}

.choice-item .choice-icon {
  font-size: 24px;
}

.choice-item .choice-info {
  flex-grow: 1;
}

.choice-item .choice-title {
  font-family: var(--font-retro);
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-yellow);
  margin-bottom: 4px;
  word-break: normal;
  overflow-wrap: break-word;
}

.choice-item .choice-desc {
  font-size: 18px;
  color: #ccc;
  line-height: 1.2;
}

/* Grid de Evidências (Dossiê Policial) */
.evidence-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.evidence-card {
  background: #191c24;
  border: 2px dashed #555c70;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.evidence-card.collected {
  border: 2px solid #00ffaa;
  background: #142220;
}

.evidence-card .evidence-icon {
  font-size: 28px;
  text-align: center;
}

.evidence-card .evidence-title {
  font-family: var(--font-retro);
  font-size: 10px;
  line-height: 1.6;
  color: #00ffaa;
  min-height: 32px;
  word-break: normal;
  overflow-wrap: break-word;
}

.evidence-card .evidence-desc {
  font-size: 17px;
  line-height: 1.2;
  color: #bbb;
}

/* O Grande Plot Twist: Papel Timbrado do Habeas Corpus */
.twist-document {
  background: #fff8e1;
  color: #1a1a1a;
  border: 4px solid #b78103;
  padding: 24px 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.9);
  position: relative;
  font-family: 'Times New Roman', Georgia, serif;
  transform: rotate(-1deg);
  animation: slam-stamp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes slam-stamp {
  0% { transform: scale(2) rotate(15deg); opacity: 0; }
  100% { transform: scale(1) rotate(-1deg); opacity: 1; }
}

.twist-header {
  text-align: center;
  border-bottom: 2px solid #555;
  padding-bottom: 12px;
  margin-bottom: 14px;
}

.twist-header h2 {
  font-size: 18px;
  letter-spacing: 2px;
  color: #111;
  text-transform: uppercase;
}

.twist-header p {
  font-size: 12px;
  color: #555;
  font-style: italic;
}

.twist-body {
  font-size: 14px;
  line-height: 1.6;
  text-align: justify;
  margin-bottom: 20px;
}

.stamp-badge {
  position: absolute;
  bottom: 30px;
  right: 40px;
  border: 4px solid #cc0000;
  color: #cc0000;
  font-family: var(--font-retro);
  font-size: 16px;
  font-weight: bold;
  padding: 8px 16px;
  text-transform: uppercase;
  transform: rotate(-12deg);
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 10px rgba(204, 0, 0, 0.4);
}

/* Animação de Viagem de Avião */
.flight-anim-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px;
  gap: 20px;
}

.flight-plane-icon {
  font-size: 48px;
  animation: plane-fly 1.5s infinite linear;
}

@keyframes plane-fly {
  0% { transform: translateX(-60px) rotate(10deg); }
  50% { transform: translateX(0px) rotate(0deg); }
  100% { transform: translateX(60px) rotate(-10deg); }
}

.hidden {
  display: none !important;
}