:root{
  --bg:        #12100b;
  --panel:     #1a160f;
  --amber:     #ffb454;
  --amber-hi:  #ffd28a;
  --amber-dim: #a9793f;
  --amber-dark:#5c3f1f;
  --green:     #8fdc93;
  --red:       #ff6b5e;
  --ink-shadow: rgba(255,180,84,.35);
  --radius: 10px;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --pixel: "VT323", var(--mono);
}

*{ box-sizing:border-box; }

html,body{
  height:100%;
  margin:0;
  background:var(--bg);
  color:var(--amber);
  font-family:var(--mono);
  overflow:hidden;
}

body{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:4vh 3vw;
}

/* ---------- CRT shell ---------- */
.crt{
  position:relative;
  width:min(980px, 100%);
  height:min(86vh, 720px);
  border-radius: 18px;
  background: radial-gradient(120% 140% at 50% -10%, #241c10 0%, #12100b 60%);
  box-shadow:
    0 0 0 1px #3a2c17,
    0 30px 80px -20px rgba(0,0,0,.8),
    inset 0 0 120px rgba(0,0,0,.55);
  padding: 14px;
}

.scanlines{
  position:absolute; inset:14px; border-radius:12px;
  pointer-events:none; z-index:5;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 2px,
    rgba(0,0,0,.16) 3px
  );
  mix-blend-mode: multiply;
}

.vignette{
  position:absolute; inset:14px; border-radius:12px;
  pointer-events:none; z-index:6;
  box-shadow: inset 0 0 140px 40px rgba(0,0,0,.65);
}

.glow{
  position:absolute; inset:14px; border-radius:12px;
  pointer-events:none; z-index:4;
  background: radial-gradient(60% 40% at 50% 0%, rgba(255,180,84,.06), transparent 70%);
  animation: flicker 6s infinite;
}

@keyframes flicker{
  0%,100%{ opacity:1; }
  92%{ opacity:1; }
  93%{ opacity:.85; }
  94%{ opacity:1; }
  97%{ opacity:.92; }
}

/* ---------- terminal window ---------- */
.terminal{
  position:relative;
  height:100%;
  display:flex;
  flex-direction:column;
  border-radius:12px;
  overflow:hidden;
  background: #0f0d09;
  border: 1px solid #3a2c17;
}

.titlebar{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 14px;
  background: linear-gradient(#241c10, #1a1509);
  border-bottom: 1px solid #3a2c17;
  font-size: 12px;
  letter-spacing:.04em;
  color: var(--amber-dim);
  flex-shrink:0;
}
.dots{ display:flex; gap:6px; }
.dots i{
  width:10px; height:10px; border-radius:50%;
  background: var(--amber-dark);
  display:inline-block;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.3);
}
.titletext{ flex:1; text-align:center; }
.clock{ font-variant-numeric: tabular-nums; opacity:.8; }

.screen-wrap{
  position:relative;
  flex:1;
  min-height:0;
  display:flex;
}

.screen{
  flex:1;
  min-height:0;
  overflow-y:auto;
  padding: 18px 26px 14px 20px;
  font-size: 14.5px;
  line-height:1.6;
  text-shadow: 0 0 6px var(--ink-shadow);
  scrollbar-width: thin;
  scrollbar-color: var(--amber-dark) transparent;
}
.screen:focus{ outline:none; }
.screen::-webkit-scrollbar{ width:8px; }
.screen::-webkit-scrollbar-thumb{ background:var(--amber-dark); border-radius:8px; }

#output{ white-space:pre-wrap; word-break:break-word; }

.line{ margin:0 0 2px; }
.echo{ color:var(--amber-hi); }
.echo .prompt-echo{ color: var(--amber-dim); }
.dim{ color:var(--amber-dim); }
.hi{ color:var(--amber-hi); font-weight:700; }
.ok{ color:var(--green); }
.err{ color:var(--red); }
a{ color:var(--amber-hi); text-decoration-color: var(--amber-dark); }
a:hover{ color:#fff; }

.ascii{
  font-family: var(--pixel);
  font-size: 20px;
  line-height:1.15;
  color: var(--amber-hi);
  text-shadow: 0 0 10px var(--ink-shadow);
  margin: 4px 0 10px;
}

table.data{ border-collapse:collapse; margin:6px 0 10px; }
table.data td{ padding:1px 14px 1px 0; vertical-align:top; color:var(--amber); }
table.data td.k{ color:var(--amber-dim); white-space:nowrap; }

.inputline{
  display:flex;
  align-items:center;
  gap:8px;
  padding: 2px 2px 2px 0;
}
.prompt{ flex-shrink:0; white-space:nowrap; }
.user{ color: var(--green); }
.at,.colon{ color: var(--amber-dim); }
.host{ color: var(--amber-hi); }
.path{ color: #8fb8dc; }
.dollar{ color: var(--amber-dim); margin-right:8px; }

#cmd{
  flex:1;
  background:transparent;
  border:none;
  outline:none;
  color: var(--amber-hi);
  font-family: var(--mono);
  font-size: 14.5px;
  caret-color: transparent;
  text-shadow: 0 0 6px var(--ink-shadow);
}

.cursor{
  width:8px; height:17px;
  background: var(--amber-hi);
  box-shadow: 0 0 8px var(--ink-shadow);
  animation: blink 1s steps(1) infinite;
  flex-shrink:0;
  margin-left:-6px;
}
@keyframes blink{ 50%{ opacity:0; } }

/* ---------- game canvas (snake) ---------- */
.game-canvas{
  position:absolute;
  inset:0;
  z-index:15;
  display:none;
  background:#0f0d09;
}
.game-canvas.on{ display:block; }

/* ---------- scroll position indicator ("seta") ---------- */
.scrollind{
  position:absolute;
  top:10px;
  bottom:10px;
  right:4px;
  width:16px;
  z-index:8;
  display:flex;
  justify-content:center;
  transition: opacity .2s ease;
}
.scrollind.hidden{ opacity:0; pointer-events:none; }

.scrollind-track{
  position:relative;
  width:2px;
  height:100%;
  background: var(--amber-dark);
  opacity:.4;
  border-radius:2px;
  cursor:pointer;
}
.scrollind-track:hover{ opacity:.65; }

.scrollind-thumb{
  position:absolute;
  left:50%;
  top:0;
  transform: translate(-50%,-50%);
  color: var(--amber-hi);
  font-size:15px;
  line-height:1;
  text-shadow: 0 0 8px var(--ink-shadow);
  pointer-events:none;
  transition: top .08s linear;
}

/* matrix easter egg canvas */
#matrix{
  position:absolute; inset:0;
  width:100%; height:100%;
  border-radius:18px;
  pointer-events:none;
  opacity:0;
  transition:opacity .4s ease;
  z-index:20;
}
#matrix.on{ opacity:1; }

/* disco/konami easter egg */
.konami .crt{ animation: hue 1.2s linear infinite; }
@keyframes hue{ from{ filter:hue-rotate(0deg);} to{ filter:hue-rotate(360deg);} }

@media (max-width: 640px){
  .crt{ height: 92vh; padding:8px; }
  .screen{ font-size:13px; padding:14px 20px 10px 12px; }
  .ascii{ font-size:14px; }
  .titletext{ font-size:11px; }
  .scrollind{ width:12px; right:2px; }
  .scrollind-thumb{ font-size:12px; }
}

@media (prefers-reduced-motion: reduce){
  .glow{ animation:none; }
  .cursor{ animation:none; opacity:1; }
  .konami .crt{ animation:none; }
}