@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;600&display=swap');

:root{
  --bg-0:        oklch(13.04% 0.0233 246.38);   /* azul-negro abissal */
  --bg-1:        oklch(16.36% 0.0295 247.07);
  --green-core:  oklch(84.42% 0.1457 209.29);   /* ciano elétrico — medusa */
  --green-soft:  oklch(71.61% 0.1233 208.50);
  --green-dim:   oklch(43.09% 0.0767 216.37);
  --green-glow:  oklch(84.42% 0.1457 209.29 / 0.6);
  --bio-violet:  oklch(54.64% 0.2738 290.64);   /* violeta bioluminescente */
  --bio-pink:    oklch(72.34% 0.1854 1.78);     /* organismo simbiótico */
  --red-alert:   oklch(65.65% 0.2349 13.34);
  --red-glow:    oklch(65.65% 0.2349 13.34 / 0.65);
  --amber:       oklch(88.68% 0.1822 95.33);
  --ink:         oklch(91.78% 0.0432 242.94);
  --panel-line:  oklch(84.42% 0.1457 209.29 / 0.22);
  --radius:      2px;
  --mono:        'Fira Code', monospace;
  --mx: 0.5;
  --my: 0.5;
}

*{ box-sizing:border-box; }

html,body{
  height:100%;
  margin:0;
  background:
    radial-gradient(ellipse 50% 60% at 50% -10%, rgba(0,100,130,.4) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 90%, rgba(123,47,255,.12) 0%, transparent 50%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
  color: var(--ink);
  font-family: var(--mono);
  overflow:hidden;
}

body{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  padding: 24px;
}

::selection{ background: var(--green-dim); color:#fff; }

/* ---------------------------------------------------------- */
/* Matrix rain de fundo (bem sutil, é só textura ambiente)      */
/* ---------------------------------------------------------- */
#matrix-rain{
  position:fixed; inset:0;
  z-index:1;
  opacity:.16;
  pointer-events:none;
}

/* ---------------------------------------------------------- */
/* CRT overlays                                                */
/* ---------------------------------------------------------- */
.crt-scanlines{
  position:fixed; inset:0; pointer-events:none; z-index:50;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 1px,
    rgba(0,0,0,.18) 2px,
    rgba(0,0,0,0) 3px
  );
  mix-blend-mode: multiply;
}

.crt-vignette{
  position:fixed; inset:0; pointer-events:none; z-index:49;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 45%, rgba(0,0,0,.55) 100%);
}

.crt-flicker{
  position:fixed; inset:0; pointer-events:none; z-index:51;
  background: rgba(120,255,180,.02);
  animation: flicker 6.5s infinite;
}

@keyframes flicker{
  0%, 96%, 100% { opacity: 0; }
  97% { opacity: 1; }
  98% { opacity: 0; }
  98.5% { opacity: .6; }
  99% { opacity: 0; }
}

/* ---------------------------------------------------------- */
/* Terminal window                                              */
/* ---------------------------------------------------------- */
.terminal{
  position:relative;
  width:min(760px, 100%);
  max-height: min(88vh, 780px);
  display:flex;
  flex-direction:column;
  border: 1px solid transparent;
  outline: 1px solid color-mix(in srgb, var(--green-core) calc(var(--mx, .5) * 100%), var(--bio-violet) calc((1 - var(--mx, .5)) * 100%));
  border-radius: 6px;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(0,229,255,.012) 0px, rgba(0,229,255,.012) 1px,
      transparent 1px, transparent 9px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(123,47,255,.01) 0px, rgba(123,47,255,.01) 1px,
      transparent 1px, transparent 9px
    ),
    linear-gradient(180deg, rgba(4,15,26,.95), rgba(2,8,16,.98));
  box-shadow:
    0 0 0 1px rgba(0,0,0,.6),
    0 0 40px -8px var(--green-glow),
    0 0 80px -20px rgba(123,47,255,.3),
    inset 0 0 60px rgba(0,0,0,.5);
  overflow:hidden;
  z-index: 5;
  text-align: left;
}

.terminal.paired{
  animation: heartbeat 1.15s ease-in-out infinite;
}
@keyframes heartbeat{
  0%, 100%{ box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 40px -6px var(--green-glow), inset 0 0 60px rgba(0,0,0,.5); }
  14%{ box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 62px -2px var(--green-glow), inset 0 0 60px rgba(0,0,0,.5); }
  28%{ box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 40px -6px var(--green-glow), inset 0 0 60px rgba(0,0,0,.5); }
  42%{ box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 58px -3px var(--green-glow), inset 0 0 60px rgba(0,0,0,.5); }
}

.term-bar{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  border-bottom:1px solid var(--panel-line);
  background: rgba(0,0,0,.35);
  font-size:11px;
  letter-spacing:.02em;
  color: var(--green-soft);
}

.term-lights{ display:flex; gap:6px; }
.term-lights span{
  width:9px; height:9px; border-radius:50%;
  background: var(--green-dim);
  box-shadow: 0 0 6px var(--green-glow);
}
.term-lights span:nth-child(1){ background:#7a2d34; box-shadow:0 0 6px var(--red-glow); }
.term-lights span:nth-child(2){ background:#7a6a2d; box-shadow:0 0 6px rgba(255,207,92,.5); }

.term-title{
  flex:1;
  text-align: left;
  opacity:.8;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.term-status b{ color: var(--green-core); text-shadow:0 0 6px var(--green-glow); }

.term-body{
  position:relative;
  flex: 1;
  min-height: 0; /* essencial para o filho com overflow funcionar dentro do flex */
  padding: 22px 26px 28px;
  display:flex;
  flex-direction:column;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--green-dim) transparent;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: left;
}
.term-body::-webkit-scrollbar{ width: 6px; }
.term-body::-webkit-scrollbar-track{ background: transparent; }
.term-body::-webkit-scrollbar-thumb{
  background: var(--green-dim);
  border-radius: 3px;
}
.term-body::-webkit-scrollbar-thumb:hover{ background: var(--green-soft); }

.term-log{
  margin:0 0 8px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  letter-spacing: 0;
  color: var(--green-soft);
  white-space: pre-wrap;
  min-height: 1.2em;
  flex-shrink: 0; /* nunca deixa o flexbox encolher o log abaixo do conteúdo real */
  font-variant-numeric: tabular-nums;
  text-align: left;
}
.term-log .ok{ color: var(--green-core); }
.term-log .warn{ color: var(--amber); }
.term-log .err{ color: var(--red-alert); }
.term-log .cat{ color:#ffd9f0; }
.term-log .dim{ color: rgba(182,255,216,.4); }

.term-log .cursor{
  display:inline-block;
  width:8px; height:1em;
  background: var(--green-core);
  vertical-align: text-bottom;
  margin-left:2px;
  animation: blink 1s steps(1) infinite;
  box-shadow: 0 0 6px var(--green-glow);
}
@keyframes blink{ 50%{ opacity:0; } }

/* ---------------------------------------------------------- */
/* Question block                                               */
/* ---------------------------------------------------------- */
.term-question{
  margin-top:auto;
  padding-top: 18px;
  text-align: left;
  flex-shrink:0;
}

.hidden{ display:none !important; }

.question-title{
  font-size: clamp(20px, 4vw, 30px);
  font-weight: 600;
  line-height: 1.35;
  margin: 0 0 6px;
  color:#eafff2;
  text-shadow: 0 0 12px var(--green-glow), 0 0 2px rgba(255,255,255,.5);
  background: linear-gradient(90deg, var(--green-core) 0%, #a0f0ff 35%, #e8eeff 50%, #f0c0ff 70%, var(--bio-violet) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: signal-scan 3s ease-in-out infinite alternate;
  text-shadow: none;
  overflow-wrap: break-word;
  word-break: break-word;
  text-align: left;
}
.question-title .prompt{
  display:block;
  font-size: 13px;
  font-weight:500;
  color: var(--green-core);
  text-shadow:0 0 8px var(--green-glow);
  margin-bottom:6px;
  letter-spacing:.02em;
  text-align: left;
}

@keyframes signal-scan{
  from { background-position: 0% 0%; }
  to   { background-position: 100% 0%; }
}

.question-sub{
  margin: 0 0 26px;
  font-size:12px;
  color: rgba(182,255,216,.55);
  text-align: left;
}

.btn-row{
  position:relative;
  display:flex;
  justify-content: flex-start;
  align-items:center;
  gap:22px;
  min-height: 96px;
}

.btn{
  font-family: var(--mono);
  font-weight:700;
  font-size:15px;
  letter-spacing:.04em;
  padding: 14px 26px;
  background: rgba(0,0,0,.4);
  border-radius: var(--radius);
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.btn-yes{
  border: 1px solid var(--green-core);
  color: var(--green-core);
  box-shadow: 0 0 18px -4px var(--green-glow), inset 0 0 12px rgba(77,255,159,.08);
}
.btn-yes:hover{
  background: rgba(77,255,159,.12);
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 0 26px -2px var(--green-glow), inset 0 0 16px rgba(77,255,159,.15);
}
.btn-yes:active{ transform: translateY(0) scale(.98); }

.btn-no{
  border: 1px solid rgba(255,59,87,.55);
  color: rgba(255, 158, 170, .9);
  position: fixed; /* foge pela viewport inteira */
  left: 0; top: 0;
  transform: translate(-9999px,-9999px); /* posicionado via JS assim que calculado */
  z-index: 40;
  box-shadow: 0 0 14px -4px var(--red-glow);
  transition: box-shadow .18s ease;
}
.btn-no.placed{
  transition: transform .05s ease;
}
.btn-no:hover .btn-label,
.btn-no:focus-visible .btn-label{
  color: var(--red-alert);
}

.btn-no.glitching{
  animation: glitch-shake .32s steps(2, end);
  border-color: var(--red-alert);
  box-shadow: 0 0 24px -2px var(--red-glow);
}

.btn-no .btn-label{
  position:relative;
  display:inline-block;
}

@keyframes glitch-shake{
  0%   { transform: translate(0,0) skewX(0deg); }
  20%  { transform: translate(-3px,2px) skewX(4deg); }
  40%  { transform: translate(3px,-2px) skewX(-6deg); }
  60%  { transform: translate(-2px,-2px) skewX(3deg); }
  80%  { transform: translate(2px,2px) skewX(-2deg); }
  100% { transform: translate(0,0) skewX(0deg); }
}

.btn-no.glitching .btn-label{
  animation: glitch-text .32s steps(2,end);
  text-shadow:
    2px 0 var(--red-alert),
    -2px 0 var(--green-core);
}
@keyframes glitch-text{
  0%,100%{ opacity:1; }
  25%{ opacity:.3; transform: translateX(2px); }
  50%{ opacity:1; transform: translateX(-2px); }
  75%{ opacity:.5; transform: translateX(1px); }
}

.attempts-line{
  margin: 22px 0 0;
  font-size: 11px;
  color: rgba(255,120,140,.65);
  letter-spacing:.03em;
  text-align: left;
}
#attempt-count{ color: var(--red-alert); font-weight:700; }

/* ---------------------------------------------------------- */
/* Success block                                                */
/* ---------------------------------------------------------- */
.term-success{
  margin-top: 14px;
  display:flex;
  flex-direction:column;
  align-items: flex-start;
  gap:14px;
  flex-shrink: 0;
  animation: fade-in-up .7s ease both;
  text-align: left;
}

@keyframes fade-in-up{
  from{ opacity:0; transform: translateY(14px); }
  to{ opacity:1; transform: translateY(0); }
}

.photo-frame{
  position:relative;
  width: min(340px, 90%);
  aspect-ratio: 3/4;
  border: 1px solid var(--green-core);
  border-radius: 4px;
  overflow:hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 34px -4px var(--green-glow);
}

.couple-photo{
  width:100%; height:100%;
  object-fit: cover;
  display:block;
  filter: grayscale(1) brightness(1.05) contrast(1.15) sepia(1) hue-rotate(62deg) saturate(4.5) blur(14px);
  transform: scale(1.06);
  transition: filter 2.2s cubic-bezier(.2,.7,.2,1), transform 2.2s cubic-bezier(.2,.7,.2,1);
}
.photo-frame.decrypted .couple-photo{
  filter: grayscale(1) brightness(1.05) contrast(1.15) sepia(1) hue-rotate(62deg) saturate(4.5) blur(0px);
  transform: scale(1);
}

.photo-scan{
  position:absolute; inset:0;
  background: repeating-linear-gradient(
    to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px,
    rgba(0,20,10,.35) 3px, rgba(0,0,0,0) 4px
  );
  mix-blend-mode: multiply;
  pointer-events:none;
}

/* barra que "varre" a foto de cima a baixo enquanto ela nitidifica */
.decrypt-bar{
  position:absolute;
  left:0; right:0; top:0;
  height: 3px;
  background: var(--green-core);
  box-shadow: 0 0 12px 2px var(--green-glow), 0 0 26px 6px var(--green-glow);
  animation: decrypt-sweep 2.2s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes decrypt-sweep{
  from{ top: 0%; opacity:1; }
  to  { top: 100%; opacity:.4; }
}

.decrypt-label{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:5px 8px;
  font-size:9.5px;
  letter-spacing:.03em;
  color: var(--green-core);
  background: linear-gradient(to top, rgba(0,10,5,.85), rgba(0,10,5,0));
  animation: label-fade 2.4s ease forwards;
}
@keyframes label-fade{
  0%, 75%{ opacity:1; }
  100%{ opacity:0; }
}

/* ------------------------------------------------------------ */
/* Relatório de incidente (case file)                            */
/* ------------------------------------------------------------ */
.report-card{
  width:min(340px, 90%);
  border: 1px solid var(--panel-line);
  border-radius: 4px;
  background: rgba(0,0,0,.35);
  padding: 12px 14px;
  font-size: 11px;
  opacity: 0;
  animation: fade-in-up .7s ease .4s forwards;
}

.report-row{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  padding: 4px 0;
  border-bottom: 1px dashed rgba(77,255,159,.15);
  color: rgba(182,255,216,.55);
}
.report-row:last-child{ border-bottom:none; }
.report-row span:first-child{ letter-spacing:.04em; opacity:.75; }
.report-ok{ color: var(--green-core); font-weight:700; }

.report-full{ flex-direction:column; gap:4px; }
.report-full p{
  margin:0;
  color: var(--ink);
  line-height:1.5;
  font-style: italic;
}

.success-caption{
  margin:0;
  font-size:11.5px;
  letter-spacing:.04em;
  color: rgba(182,255,216,.6);
  text-align: left;
}

/* ---------------------------------------------------------- */
/* Footer                                                        */
/* ---------------------------------------------------------- */
.term-footer{
  display:flex;
  gap:10px;
  padding: 8px 14px;
  font-size:10.5px;
  border-top:1px solid var(--panel-line);
  background: rgba(0,0,0,.35);
  color: rgba(182,255,216,.45);
}
.footer-sep{ opacity:.4; }
#fw-state{ color: var(--red-alert); }
#fw-state.clear{ color: var(--green-core); }

/* ---------------------------------------------------------- */
/* Paw rain                                                      */
/* ---------------------------------------------------------- */
#paw-layer{
  position:fixed; inset:0;
  pointer-events:none;
  z-index: 3; /* atrás do terminal, para não cobrir o texto nem a foto */
  overflow:hidden;
}

.paw{
  position:absolute;
  top:-10vh;
  color: var(--green-core);
  opacity: 0;
  filter: drop-shadow(0 0 5px var(--green-glow));
  animation-name: paw-fall;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}

@keyframes paw-fall{
  0%{
    transform: translate(var(--drift-a,0px), -10vh) rotate(var(--rot-a,0deg));
    opacity:0;
  }
  8%{ opacity: var(--paw-op,.75); }
  92%{ opacity: var(--paw-op,.75); }
  100%{
    transform: translate(var(--drift-b,0px), 115vh) rotate(var(--rot-b,180deg));
    opacity:0;
  }
}

@view-transition { navigation: none; }
::view-transition-old(root){
  animation: 600ms ease-in terminal-glitch-out;
}
::view-transition-new(root){
  animation: 600ms ease-out terminal-glitch-in;
}
@keyframes terminal-glitch-out{
  0%  { opacity: 1; transform: translateX(0) skewX(0deg); }
  40% { opacity: .6; transform: translateX(-6px) skewX(-4deg); filter: hue-rotate(90deg); }
  100%{ opacity: 0; transform: translateX(0) skewX(0deg); }
}
@keyframes terminal-glitch-in{
  0%  { opacity: 0; transform: translateX(6px) skewX(4deg); filter: hue-rotate(-90deg); }
  60% { opacity: .8; transform: translateX(-2px) skewX(-2deg); }
  100%{ opacity: 1; transform: translateX(0) skewX(0deg); filter: none; }
}

/* ---------------------------------------------------------- */
/* Responsive                                                    */
/* ---------------------------------------------------------- */
@media (max-width: 520px){
  .term-body{ padding: 18px 16px 22px; min-height: 380px; }
  .btn{ padding: 12px 18px; font-size:13px; }
  .btn-row{ gap:14px; }
  .term-title{ font-size:10px; }
  .term-footer{ flex-wrap:wrap; font-size:9.5px; }
}

/* ---------------------------------------------------------- */
/* Accessibility: reduced motion                                */
/* ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .crt-flicker, .btn-no.glitching, .btn-no.glitching .btn-label,
  .photo-scan, .couple-photo, .term-success, .paw,
  .terminal.paired, .decrypt-bar, .decrypt-label, .report-card,
  ::view-transition-old(root), ::view-transition-new(root){
    animation: none !important;
  }
  .photo-frame.decrypted .couple-photo{ transition: none !important; }
  #matrix-rain{ display:none; }
}

:focus-visible{
  outline: 1px solid var(--green-core);
  outline-offset: 3px;
}

/* Easter Egg Konami: glow rosa neon ativado via JS */
.hacked-glow {
  box-shadow: 0 0 40px rgba(255, 80, 200, 0.6), 0 0 80px rgba(255, 80, 200, 0.3) !important;
  border-color: rgba(255, 80, 200, 0.5) !important;
  transition: box-shadow 0.5s ease, border-color 0.5s ease;
}