/* ============================================================
   GOATSTYLE.CSS — GOATS IN THE SHELL // infrago.at
   maximum leet hax0r, CRT goodness, zero mercy.
   ============================================================ */

:root {
  --green:     #3aff5e;
  --green-dim: #1f8f44;
  --green-brt: #baffc0;
  --cyan:      #2fe8c8;
  --yellow:    #ffd84d;
  --red:       #ff5151;
  --magenta:   #ff6ec7;
  --white:     #eaffee;
  --bg:        #030a05;
  --screen-bg: #03140a;
  --mono: "Share Tech Mono", "VT323", "Courier New", ui-monospace, monospace;
}

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

html, body { height: 100%; }

body {
  background:
    radial-gradient(1200px 600px at 50% -10%, #07200f 0%, var(--bg) 55%) fixed,
    var(--bg);
  color: var(--green);
  font-family: var(--mono);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

::selection { background: var(--green); color: #00130a; }

/* hidden things */
.hidden { display: none !important; }
.opaque { opacity: 0 !important; }

/* ============ BACKGROUND PASTURE PARTICLES ============ */
#bg-canvas, #matrix-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
#bg-canvas { opacity: .7; }

/* ============ MONITOR / BEZEL ============ */
.monitor {
  position: relative;
  z-index: 2;
  width: min(1060px, 96vw);
  padding: 14px;
}
.bezel {
  position: relative;
  background:
    linear-gradient(160deg, #232823 0%, #151815 45%, #0c0e0c 100%);
  border: 1px solid #3a443a;
  border-radius: 30px;
  padding: 26px 22px 14px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -8px 26px rgba(0,0,0,.7),
    0 30px 70px rgba(0,0,0,.75),
    0 0 80px rgba(42,255,120,.06);
}

/* power switch */
.power-switch {
  position: absolute;
  top: 10px;
  right: 26px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: 2px;
  color: #556055;
  cursor: pointer;
  user-select: none;
}
.led {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 12px var(--green), 0 0 4px var(--green);
  animation: ledPulse 2.4s ease-in-out infinite;
}
@keyframes ledPulse {
  0%,100% { opacity: 1; }
  50%     { opacity: .35; }
}

/* ============ CRT SCREEN ============ */
.crt {
  position: relative;
  background: var(--screen-bg);
  border-radius: 16px;
  border: 1px solid #123020;
  overflow: hidden;
  box-shadow: inset 0 0 60px rgba(0,0,0,.9), inset 0 0 6px rgba(0,0,0,.8);
}
.screen {
  position: relative;
  z-index: 1;
  height: min(660px, calc(100vh - 210px));
  min-height: 440px;
  display: flex;
  flex-direction: column;
}

/* ============ TOP STATUS BAR ============ */
.statusbar-top {
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(58,255,94,.10);
  background: linear-gradient(180deg, rgba(0,255,90,.05), transparent);
  font-size: 13px;
  letter-spacing: 2px;
  white-space: nowrap;
  overflow: hidden;
}
.dots { display: inline-flex; gap: 6px; }
.dots i {
  width: 11px; height: 11px; border-radius: 50%;
  display: inline-block;
}
.d-red    { background: #ff5f56; box-shadow: 0 0 6px rgba(255,95,86,.8); }
.d-yellow { background: #ffbd2e; box-shadow: 0 0 6px rgba(255,189,46,.8); }
.d-green  { background: #27c93f; box-shadow: 0 0 6px rgba(39,201,63,.8); }
.con-lbl  { margin-left: auto; color: var(--green-dim); font-size: 11px; }

/* glitch title */
.glitch {
  position: relative;
  color: var(--green-brt);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 4px;
  text-shadow: 0 0 8px rgba(58,255,94,.7);
}
.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: .85;
  animation: glitchAnim 3.1s infinite steps(1);
}
.glitch::before {
  color: var(--magenta);
  clip-path: inset(0 0 62% 0);
  transform: translate(-2px, -1px);
  animation-name: glitchA; animation-duration: 2.9s;
}
.glitch::after {
  color: var(--cyan);
  clip-path: inset(64% 0 0 0);
  transform: translate(2px, 1px);
  animation-name: glitchB; animation-duration: 3.7s;
}
@keyframes glitchA {
  0%, 88%, 100% { transform: translate(0,0); opacity: 0; }
  90% { transform: translate(-3px,-1px); opacity: .9; }
  93% { transform: translate(2px, 1px); opacity: .8; }
  96% { transform: translate(-1px, 2px); opacity: .9; }
}
@keyframes glitchB {
  0%, 82%, 100% { transform: translate(0,0); opacity: 0; }
  84% { transform: translate(3px,-2px); opacity: .9; }
  89% { transform: translate(-2px,1px); opacity: .8; }
  95% { transform: translate(1px,-1px); opacity: .9; }
}
@keyframes glitchAnim { 0%,94%,100% {opacity:0;} 96%{opacity:.85;} }

/* ============ TERMINAL OUTPUT ============ */
.term {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px 16px 8px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--green);
  text-shadow: 0 0 6px rgba(40,255,90,.45), 0 0 1px rgba(58,255,94,.9);
  scrollbar-width: thin;
  scrollbar-color: #123020 transparent;
  word-break: break-word;
}
.term::-webkit-scrollbar { width: 8px; }
.term::-webkit-scrollbar-track { background: transparent; }
.term::-webkit-scrollbar-thumb { background: #123020; border-radius: 8px; }

.line {
  white-space: pre-wrap;
  min-height: 1px;
  padding: 0;
}
.line.out  { padding: 1px 0; }
.line.hint { color: var(--green-dim); }
.line.error{ color: var(--red); }

/* markup color classes */
.clr-green  { color: var(--green); }
.clr-bright { color: var(--green-brt); text-shadow: 0 0 9px rgba(58,255,94,.9); }
.clr-cyan   { color: var(--cyan); text-shadow: 0 0 7px rgba(47,232,200,.6); }
.clr-yellow { color: var(--yellow); text-shadow: 0 0 7px rgba(255,216,77,.55); }
.clr-red    { color: var(--red); text-shadow: 0 0 7px rgba(255,81,81,.6); }
.clr-magenta{ color: var(--magenta); text-shadow: 0 0 7px rgba(255,110,199,.55); }
.clr-white  { color: var(--white); text-shadow: 0 0 6px rgba(255,255,255,.35); }
.clr-dim    { color: var(--green-dim); text-shadow: none; }

.blink { animation: blink 1.1s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }

/* hidden goatse.link — the oldest link on the net */
.goatlink {
  color: var(--yellow);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-shadow: 0 0 9px rgba(255,216,77,.65);
  cursor: pointer;
  transition: color .12s, background .12s;
}
.goatlink:hover {
  color: var(--white);
  background: rgba(255,216,77,.16);
}

/* ============ INPUT LINE ============ */
.inputline {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 12px;
  background: linear-gradient(0deg, rgba(0,255,90,.05), transparent);
  border-top: 1px solid rgba(58,255,94,.10);
}
.prompt {
  color: var(--cyan);
  white-space: nowrap;
  text-shadow: 0 0 7px rgba(47,232,200,.6);
}
.cmdwrap {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  font-size: 15px;
}
#cmd {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  padding: 0;
  color: var(--green-brt);
  font-family: var(--mono);
  font-size: 15px;
  caret-color: transparent;
  text-shadow: 0 0 8px rgba(58,255,94,.7);
}
.cursor-block {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 9px;
  height: 1.2em;
  background: var(--green);
  box-shadow: 0 0 10px var(--green), 0 0 3px var(--green);
  animation: blink 1.1s steps(2, start) infinite;
  pointer-events: none;
}
/* invisible measuring span — used to place the cursor-block exactly
   where the text caret is (same font metrics as the input) */
.cursor-measure {
  position: absolute;
  visibility: hidden;
  white-space: pre;
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 0;
  pointer-events: none;
}

/* ============ CRT FX LAYERS ============ */
.crt-fx, .crt-fx > div {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}
.fx-scanlines {
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,.30) 0px, rgba(0,0,0,.30) 1px,
    transparent 1px, transparent 3px
  );
}
.fx-rgb {
  background: repeating-linear-gradient(
    90deg,
    rgba(255, 0, 0, .045) 0px, rgba(255, 0, 0, .045) 1px,
    rgba(0, 255, 0, .035) 1px, rgba(0, 255, 0, .035) 2px,
    rgba(0, 0, 255, .045) 2px, rgba(0, 0, 255, .045) 3px
  );
}
.fx-vignette {
  background:
    radial-gradient(ellipse at center, transparent 52%, rgba(0,0,0,.30) 82%, rgba(0,0,0,.62) 100%);
}
.fx-flicker {
  animation: crtFlicker .12s infinite steps(2);
  background: radial-gradient(ellipse at center, rgba(120,255,170,.05), transparent 70%);
}
@keyframes crtFlicker {
  0%  { opacity: .96; }
  50% { opacity: 1; }
  100%{ opacity: .93; }
}
.fx-scanner {
  height: 140px;
  top: -160px;
  background: linear-gradient(180deg, transparent 0%, rgba(140,255,180,.08) 50%, transparent 100%);
  animation: scanMove 7.5s linear infinite;
}
@keyframes scanMove {
  to { top: 110%; }
}
.fx-glare {
  z-index: 6;
  background:
    radial-gradient(420px 160px at 22% -12%, rgba(255,255,255,.10), transparent 70%);
  transform: rotate(-6deg);
}

/* ============ CONTROL BAR (below screen) ============ */
.controlbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 20px;
  padding: 12px 10px 4px;
  font-size: 11px;
  letter-spacing: 1.5px;
  color: #5d6d5d;
}
.cb-item { display: inline-flex; align-items: center; gap: 7px; }
.cb-item .k { color: #3c4c3c; }
.cb-item b  { color: var(--green); font-weight: 400; text-shadow: 0 0 7px rgba(58,255,94,.5); }
.cb-item.sys b, .cb-item.sys { color: var(--green); }
.cb-item.right { margin-left: auto; }
#stat-herd, #stat-milk, #stat-uptime, #stat-net { min-width: 52px; }

/* powered-off screen */
body.powered-off .screen { opacity: 0.04; filter: brightness(.2); }
body.powered-off #power-led { background: var(--red); box-shadow: 0 0 12px var(--red); }
body.powered-off #power-label { color: var(--red); }
body.powered-off { animation: none; }

/* ============ BOOT CREDIT FOOTER ============ */
.boot-credit {
  position: relative;
  z-index: 2;
  margin-top: 14px;
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--green-dim);
  text-align: center;
  text-shadow: 0 0 6px rgba(31,143,68,.5);
}

/* ============ BREED RAIN ============ */
#breed-layer {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}
.breed-g {
  position: absolute;
  top: -40px;
  color: var(--green);
  text-shadow: 0 0 10px var(--green);
  white-space: nowrap;
  animation: breedFall linear forwards;
}
.goat-emoji { font-family: "Segoe UI Emoji","Apple Color Emoji",sans-serif; }
@keyframes breedFall {
  to { transform: translateY(calc(100vh + 120px)); opacity: 0; }
}

/* ============ SMALL ============ */
@media (max-width: 760px) {
  .monitor { width: 100vw; padding: 8px; }
  .bezel { border-radius: 18px; padding: 34px 8px 8px; }
  .screen { height: calc(100vh - 150px); min-height: 420px; }
  .term { font-size: 12.5px; padding: 10px 12px 6px; }
  .glitch { font-size: 11px; letter-spacing: 2px; }
  .con-lbl { display: none; }
  .power-switch { top: 16px; right: 16px; }
  .boot-credit { letter-spacing: 1px; }
}