/* ── Reset ────────────────────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden}

body{
  background:#08080c;
  font-family:'Courier New',Courier,monospace;
  color:#33ff88;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ── Scene layout ─────────────────────────────────────────────── */
.scene{
  display:flex;
  align-items:flex-end;
  gap:1.5rem;
  max-width:900px;
  width:95%;
  height:90vh;
  max-height:640px;
}

/* ── 3D Cat ───────────────────────────────────────────────────── */
.cat-wrap{
  flex:0 0 160px;
  height:220px;
  align-self:flex-end;
  opacity:0;
  transition:opacity 1.5s ease 2s;
  position:relative;
  overflow:visible;
  cursor:pointer;
}
.cat-wrap.visible{opacity:1}

#cat-canvas{
  width:160px;
  height:220px;
  display:block;
}

/* ── Terminal ─────────────────────────────────────────────────── */
.terminal{
  flex:1;
  height:100%;
  display:flex;
  flex-direction:column;
  border-radius:10px;
  overflow:hidden;
  background:#111;
  box-shadow:
    0 0 60px rgba(51,255,136,0.06),
    0 0 2px rgba(51,255,136,0.15),
    0 8px 32px rgba(0,0,0,0.7);
  position:relative;
}

/* Chrome header */
.terminal-chrome{
  display:flex;
  align-items:center;
  height:32px;
  background:#1a1a22;
  border-bottom:1px solid #252530;
  padding:0 12px;
  flex-shrink:0;
}
.chrome-left{display:flex;gap:6px;flex:1}
.chrome-title{
  font-size:11px;
  color:#555;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.chrome-right{flex:1}
.indicator{
  width:10px;height:10px;
  border-radius:50%;
  background:#333;
}
.indicator.red{background:#ff5f57}
.indicator.yellow{background:#febc2e}
.indicator.green{background:#333}
.indicator.green.on{background:#28c840;box-shadow:0 0 6px rgba(40,200,64,0.5)}

/* Screen */
.screen{
  flex:1;
  padding:16px 18px;
  overflow-y:auto;
  overflow-x:hidden;
  background:#0b0e14;
  position:relative;
  font-size:14px;
  line-height:1.55;
}
.screen::-webkit-scrollbar{width:6px}
.screen::-webkit-scrollbar-track{background:#0b0e14}
.screen::-webkit-scrollbar-thumb{background:#1a2a1a;border-radius:3px}

/* Scanlines overlay */
.scanlines{
  position:absolute;
  inset:32px 0 0 0;
  background:repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.06) 2px,
    rgba(0,0,0,0.06) 4px
  );
  pointer-events:none;
  z-index:2;
}

/* ── Text styles ──────────────────────────────────────────────── */
#output{
  white-space:pre-wrap;
  word-break:break-word;
}
#output .line{
  display:block;
  text-shadow:0 0 6px rgba(51,255,136,0.35);
}
#output .line.dim{color:#1a6b3a;text-shadow:none}
#output .line.bright{color:#66ffaa}
#output .line.amber{color:#ffb347;text-shadow:0 0 6px rgba(255,179,71,0.3)}
#output .line.cmd{color:#88ffbb}
#output .line.error{color:#ff6b6b;text-shadow:0 0 6px rgba(255,107,107,0.3)}

/* Input line */
.input-line{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:4px;
}
.prompt{
  color:#33ff88;
  text-shadow:0 0 6px rgba(51,255,136,0.4);
  flex-shrink:0;
  user-select:none;
}
#input{
  flex:1;
  background:transparent;
  border:none;
  outline:none;
  color:#33ff88;
  font:inherit;
  font-size:14px;
  caret-color:#33ff88;
  text-shadow:0 0 6px rgba(51,255,136,0.35);
}

/* ── CRT flicker ──────────────────────────────────────────────── */
.terminal::after{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(51,255,136,0.008);
  pointer-events:none;
  z-index:3;
  animation:flicker 0.08s infinite alternate;
}
@keyframes flicker{
  from{opacity:1}
  to{opacity:0.97}
}

/* ── Boot flash ───────────────────────────────────────────────── */
.screen.booting{
  animation:bootGlow 0.6s ease-out;
}
@keyframes bootGlow{
  0%{background:#1a3a1a}
  100%{background:#0b0e14}
}

/* ── Responsive ───────────────────────────────────────────────── */
@media(max-width:640px){
  .scene{
    flex-direction:column;
    align-items:center;
    gap:0.5rem;
    height:100vh;
    max-height:none;
    padding:1rem 0.5rem;
  }
  .cat-wrap{
    flex:0 0 auto;
    height:140px;
    align-self:center;
    margin-bottom:0;
  }
  #cat-canvas{width:120px;height:140px}
  .terminal{
    flex:1;
    width:100%;
    min-height:0;
  }
  .screen{font-size:13px;padding:12px 14px}
}