/* ============================================================
   TZM-OS — CRT terminal styles
   ============================================================ */

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

html, body, #root {
  height: 100%;
  width: 100%;
  background: #000;
  overflow: hidden;
  touch-action: manipulation;
}

body {
  font-family: 'VT323', 'IBM Plex Mono', monospace;
  font-size: 20px;
  color: #39ff7a;
  -webkit-tap-highlight-color: transparent;
}

/* ====================== CRT HOUSING ====================== */

.crt {
  position: relative;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(ellipse at 30% 20%, #111 0%, transparent 50%),
    radial-gradient(ellipse at center, #080808 0%, #000 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  font-family: var(--font-body);
  font-size: var(--font-size);
  color: var(--fg);
  -webkit-font-smoothing: none;
  font-smooth: never;
  text-rendering: geometricPrecision;
}

.bezel {
  position: relative;
  width: min(1400px, 100%);
  height: 100%;
  background:
    radial-gradient(ellipse at 30% 10%, #35312b 0%, transparent 40%),
    radial-gradient(ellipse at 70% 90%, #1e1b16 0%, transparent 40%),
    linear-gradient(180deg, #2c2822 0%, #1c1915 30%, #141210 60%, #0e0c0a 100%);
  border-radius: 32px;
  padding: 36px 36px 64px;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.08),
    inset 0 -2px 0 rgba(0,0,0,0.7),
    inset 2px 0 0 rgba(255,255,255,0.03),
    inset -2px 0 0 rgba(0,0,0,0.4),
    0 40px 80px rgba(0,0,0,0.8),
    0 8px 20px rgba(0,0,0,0.5),
    0 0 0 1px rgba(0,0,0,0.9);
  display: flex;
  flex-direction: column;
}

/* brushed plastic texture */
.bezel::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 32px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.008) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(180deg, rgba(255,255,255,0.004) 0 1px, transparent 1px 5px),
    radial-gradient(ellipse at 25% 5%, rgba(255,255,255,0.06), transparent 30%),
    radial-gradient(ellipse at 75% 95%, rgba(255,255,255,0.02), transparent 30%);
  pointer-events: none;
}

/* inner bevel around screen */
.bezel::after {
  content: '';
  position: absolute;
  top: 30px; left: 30px; right: 30px; bottom: 58px;
  border-radius: 20px;
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.8),
    inset 0 -1px 2px rgba(255,255,255,0.04),
    0 1px 0 rgba(255,255,255,0.06);
  pointer-events: none;
  z-index: 1;
}

.bezel-tag {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 16px;
  color: #5a5048;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  z-index: 5;
}
.bezel-tag .copyleft { color: #6a6358; letter-spacing: 0.08em; }
.bezel-tag .led {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--fg);
  box-shadow: 0 0 8px var(--glow), 0 0 16px var(--glow), 0 0 24px color-mix(in oklab, var(--glow) 40%, transparent);
}
.bezel-tag .led.on { animation: ledpulse 2.4s ease-in-out infinite; }
@keyframes ledpulse { 50% { opacity: 0.5; } }

/* ====================== SCREEN & CRT FX ====================== */

.screen {
  position: relative;
  flex: 1;
  background: var(--bg);
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    inset 0 0 80px rgba(0,0,0,0.95),
    inset 0 0 200px rgba(0,0,0,0.5),
    0 0 40px 4px color-mix(in oklab, var(--fg) 5%, transparent),
    0 0 80px 8px color-mix(in oklab, var(--fg) 3%, transparent),
    0 0 0 1px #000;
  isolation: isolate;
  display: flex;
  flex-direction: column;
}

/* fixed bottom bar inside screen */
.screen-bottom {
  position: relative;
  z-index: 10;
  padding: 6px 16px 8px;
  border-top: 1px solid color-mix(in oklab, var(--fg) 15%, transparent);
  background: var(--bg);
  text-shadow: var(--text-shadow);
  flex-shrink: 0;
}
.screen-bottom .cmd-bar {
  padding: 2px 0 4px;
  border-top: none;
}
.screen-bottom .line.live {
  display: flex;
  align-items: center;
  padding: 2px 0;
}
.screen-bottom .cmd-input {
  padding: 0 0 0 4px;
}
.screen-bottom .cursor {
  margin-left: 2px;
}

.crt.curved .screen {
  border-radius: 22px;
  transform: perspective(1200px) rotateX(0.5deg);
  background: radial-gradient(ellipse at center, var(--bg) 55%, #000 115%);
}

/* edge shadow (CRT curvature darkening) */
.crt.curved .screen::before {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 130% 110% at 50% 50%, transparent 50%, rgba(0,0,0,0.55) 100%);
  z-index: 9;
}

/* glass reflection highlight */
.screen::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(165deg,
      rgba(255,255,255,0.04) 0%,
      rgba(255,255,255,0.015) 15%,
      transparent 40%,
      transparent 100%
    );
  z-index: 10;
  border-radius: inherit;
}

/* scanlines layer */
.scanlines {
  position: absolute; inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    180deg,
    rgba(0,0,0,calc(var(--scanline-a) * 1)) 0px,
    rgba(0,0,0,calc(var(--scanline-a) * 1)) 1px,
    transparent 1px, transparent 3px
  );
  z-index: 8;
  mix-blend-mode: multiply;
}

/* moving scan beam */
.scanlines::after {
  content: '';
  position: absolute; left: 0; right: 0; height: 120px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255,255,255,0.02) 30%,
    rgba(255,255,255,0.05) 50%,
    rgba(255,255,255,0.02) 70%,
    transparent 100%
  );
  animation: scan 6s linear infinite;
}
@keyframes scan {
  0% { transform: translateY(-120px); }
  100% { transform: translateY(calc(100vh + 120px)); }
}

/* vignette */
.vignette {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.3) 70%, rgba(0,0,0,0.65) 100%);
  z-index: 7;
}

/* RGB subpixel grid */
.rgb {
  position: absolute; inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    90deg,
    rgba(255,0,0,0.03) 0, rgba(255,0,0,0.03) 1px,
    rgba(0,255,0,0.03) 1px, rgba(0,255,0,0.03) 2px,
    rgba(0,0,255,0.03) 2px, rgba(0,0,255,0.03) 3px
  );
  z-index: 6;
  mix-blend-mode: screen;
}

/* phosphor persistence / afterglow on the whole screen */
.screen > .terminal {
  text-shadow: var(--text-shadow);
}

/* screen flicker */
.crt.flicker .screen {
  animation: flicker 0.15s infinite steps(2, end);
}
@keyframes flicker {
  0%   { filter: brightness(1.00); }
  50%  { filter: brightness(0.96); }
  100% { filter: brightness(1.03); }
}

/* text jitter */
.crt.jitter .terminal {
  animation: jitter 5.4s infinite;
}
@keyframes jitter {
  0%, 95%, 100% { transform: translate(0, 0); }
  96% { transform: translate(-1px, 0); }
  97% { transform: translate(2px, -1px); }
  98% { transform: translate(-1px, 1px); }
  99% { transform: translate(1px, 0); }
}

/* ====================== STATUS BAR ====================== */

.statusbar {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 10px 22px;
  border-bottom: 1px solid color-mix(in oklab, var(--fg) 22%, transparent);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg);
  text-shadow: var(--text-shadow);
  background: linear-gradient(180deg, color-mix(in oklab, var(--fg) 6%, transparent), transparent);
  flex-wrap: wrap;
}
.statusbar .seg { display: inline-flex; gap: 6px; align-items: center; }
.statusbar .seg.right { margin-left: auto; }
.statusbar .dim { opacity: 0.5; }

/* ====================== TERMINAL ====================== */

.terminal {
  position: relative;
  z-index: 5;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 22px 22px 10px;
  text-shadow: var(--text-shadow);
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklab, var(--fg) 40%, transparent) transparent;
}
.terminal::-webkit-scrollbar { width: 8px; }
.terminal::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--fg) 40%, transparent);
  border-radius: 4px;
}

.terminal .line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0;
  min-height: 1.4em;
  line-height: 1.4;
}

/* PS1 prompt */
.ps1 { white-space: nowrap; }
.ps1-user   { color: var(--fg); }
.ps1-at     { opacity: 0.5; }
.ps1-host   { color: color-mix(in oklab, var(--fg) 80%, white 20%); }
.ps1-colon  { opacity: 0.5; }
.ps1-path   { color: color-mix(in oklab, var(--fg) 70%, white 30%); }
.ps1-dollar { opacity: 0.7; margin-right: 4px; }
.ps1-cmd    { color: var(--fg); }

/* ====================== PHOSPHOR IMAGE ====================== */

.phosphor-img {
  display: inline-block;
  background-color: var(--fg);
  -webkit-mask-image: var(--img);
  mask-image: var(--img);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  filter: drop-shadow(0 0 8px var(--glow)) drop-shadow(0 0 18px var(--glow));
  transition: filter 0.3s ease;
}

.phosphor-img.logo-main {
  width: 160px;
  height: 140px;
  flex-shrink: 0;
  animation: logoglitch 8s infinite;
}

/* logo glitch/flicker like an old CRT signal */
@keyframes logoglitch {
  0%, 89%, 91%, 93%, 100% {
    opacity: 1;
    filter: drop-shadow(0 0 8px var(--glow)) drop-shadow(0 0 18px var(--glow));
    transform: translate(0, 0) skewX(0deg);
  }
  89.5% {
    opacity: 0.15;
    filter: drop-shadow(0 0 2px var(--glow));
  }
  90% {
    opacity: 0.9;
    filter: drop-shadow(0 0 14px var(--glow)) drop-shadow(0 0 30px var(--glow));
    transform: translate(3px, 0) skewX(-2deg);
  }
  90.5% {
    opacity: 0.1;
    transform: translate(-2px, 1px) skewX(1deg);
  }
  91.5% {
    opacity: 1;
    filter: drop-shadow(0 0 20px var(--glow));
    transform: translate(1px, -1px);
  }
  92% {
    opacity: 0.3;
    transform: translate(-4px, 0) skewX(3deg);
  }
  92.5% {
    opacity: 1;
    filter: drop-shadow(0 0 8px var(--glow)) drop-shadow(0 0 18px var(--glow));
    transform: translate(0, 0) skewX(0deg);
  }
}

.phosphor-img.neofetch-logo {
  width: 100%;
  height: 120px;
  flex-shrink: 0;
}

@supports not (mask-image: url('')) {
  .phosphor-img {
    background: transparent;
  }
  .phosphor-img img {
    position: static !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    filter: brightness(0.8) sepia(1) hue-rotate(var(--phosphor-hue, 90deg)) saturate(3);
  }
}

/* ====================== SECTIONS ====================== */

.section {
  padding: 10px 0;
  border-bottom: 1px solid color-mix(in oklab, var(--fg) 8%, transparent);
}
.section:last-of-type { border-bottom: none; }

.section-hd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  opacity: 0.5;
  margin-bottom: 8px;
}

/* ====================== OUTPUT BLOCKS ====================== */

.out {
  padding: 4px 0;
  margin-left: 0;
  line-height: 1.45;
}
.out.grid2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 24px;
  max-width: 880px;
}
.out p { margin: 2px 0; }

.dim { opacity: 0.48; }
.hi  { color: color-mix(in oklab, var(--fg) 60%, white 40%); font-weight: 700; }
.ok  { color: color-mix(in oklab, var(--fg) 100%, white 0%); }
.warn{ color: color-mix(in oklab, #ff8866 70%, var(--fg) 30%); }
.heart { color: #ff5fa1; text-shadow: 0 0 6px #ff5fa188; }

/* ====================== BOOT ====================== */

.boot { font-family: 'JetBrains Mono', monospace; font-size: 13px; line-height: 1.55; }
.boot .ok { color: color-mix(in oklab, var(--fg) 70%, white 30%); font-weight: 700; padding: 0 6px; }
.boot .warn { color: #ffb070; padding: 0 6px; }
.boot .trail { margin-left: 6px; }

.boot-skip-hint {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0;
  animation: fadein 0.3s ease 0.8s forwards;
  text-align: center;
  padding-top: 20px;
  cursor: pointer;
}
@keyframes fadein { to { opacity: 0.35; } }

/* ====================== LOGO FRAME ====================== */

.logo-frame {
  display: flex;
  gap: 28px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px dashed color-mix(in oklab, var(--fg) 25%, transparent);
  margin-bottom: 8px;
}
.logo-tag { display: flex; flex-direction: column; gap: 6px; }
.tag-big {
  font-family: 'VT323', monospace;
  font-size: 64px;
  line-height: 1;
  color: var(--fg);
  letter-spacing: 0.04em;
}
.tag-sm {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.85;
}

/* ====================== SOCIAL ROWS ====================== */

.socrow {
  display: grid;
  grid-template-columns: 36px auto 1fr;
  gap: 0 10px;
  align-items: center;
  padding: 6px 8px;
  margin: 0 -8px;
  color: var(--fg);
  text-decoration: none;
  border-radius: 2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  letter-spacing: 0.02em;
  transition: background 80ms linear;
  position: relative;
  min-height: 40px;
}
.socrow:hover,
.socrow:active {
  background: color-mix(in oklab, var(--fg) 14%, transparent);
}
.socrow:hover .name { text-decoration: underline; }
.socrow:hover::before {
  content: '\25B6';
  position: absolute;
  left: -16px;
  color: var(--fg);
  animation: cursorblink 0.5s steps(2, end) infinite;
}
.socrow .glyph { color: color-mix(in oklab, var(--fg) 80%, white 20%); font-weight: 700; }
.socrow .name { font-weight: 700; }
.socrow .handle { color: color-mix(in oklab, var(--fg) 70%, white 30%); }

/* ====================== COMMAND BAR ====================== */

.cmd-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 14px 0;
  border-top: 1px dashed color-mix(in oklab, var(--fg) 20%, transparent);
}
.cmd-bar .dim { margin-left: 4px; }

.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  margin: 2px 0;
  border: 1px solid color-mix(in oklab, var(--fg) 50%, transparent);
  border-radius: 3px;
  background: color-mix(in oklab, var(--fg) 8%, transparent);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
  text-transform: lowercase;
  min-height: 34px;
  transition: background 80ms, transform 80ms;
}
.kbd:hover {
  background: color-mix(in oklab, var(--fg) 22%, transparent);
}
.kbd:active {
  background: color-mix(in oklab, var(--fg) 30%, transparent);
  transform: scale(0.96);
}

/* ====================== BEER & DONATE ====================== */

.beer {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-size: 13px;
  line-height: 1.2;
  color: color-mix(in oklab, var(--fg) 80%, white 20%);
  margin: 6px 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 18px;
  margin: 6px 0;
  background: var(--fg);
  color: var(--bg);
  text-decoration: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 2px;
  text-shadow: none;
  min-height: 44px;
  box-shadow: 0 0 12px var(--glow), 0 0 24px color-mix(in oklab, var(--glow) 50%, transparent);
  transition: transform 80ms, box-shadow 80ms;
}
.btn:hover { transform: translate(-1px, -1px); box-shadow: 2px 2px 0 color-mix(in oklab, var(--fg) 70%, black 30%), 0 0 20px var(--glow); }
.btn:active { transform: scale(0.97); }

/* ====================== NEOFETCH ====================== */

.neofetch {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
  align-items: center;
}
.specs {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ====================== MATRIX & CATS ====================== */

.matrix {
  width: 100%;
  height: 200px;
  color: var(--fg);
  background: var(--bg);
  margin: 8px 0;
  border: 1px solid color-mix(in oklab, var(--fg) 30%, transparent);
}

.catart {
  font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
  font-size: 14px;
  line-height: 1.15;
  color: var(--fg);
}

/* ====================== TERMINAL INPUT ====================== */

.line.live { align-items: center; }
.cmd-input {
  flex: 1;
  min-width: 100px;
  background: transparent;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: inherit;
  color: var(--fg);
  text-shadow: var(--text-shadow);
  padding: 0 0 0 4px;
  caret-color: transparent;
  -webkit-appearance: none;
  border-radius: 0;
}
.cursor {
  display: inline-block;
  animation: cursorblink 0.6s steps(2, end) infinite;
  margin-left: 0;
}
@keyframes cursorblink { 50% { opacity: 0; } }

.spacer-sm { height: 6px; }
.spacer-lg { height: 40px; }

/* ====================== RESPONSIVE ====================== */

@media (max-width: 900px) {
  .crt { padding: 6px; }
  .bezel { padding: 10px 10px 36px; border-radius: 20px; }
  .bezel::after { top: 6px; left: 6px; right: 6px; bottom: 32px; border-radius: 14px; }
  .statusbar { font-size: 9px; gap: 10px; padding: 8px 10px; }
  .terminal { padding: 12px 12px 60px; font-size: 17px; }
  .tag-big { font-size: 44px; }
  .phosphor-img.logo-main { width: 110px; height: 96px; }
  .socrow { font-size: 12px; }
  .out.grid2 { grid-template-columns: 1fr; }
  .neofetch { grid-template-columns: 80px 1fr; gap: 12px; }
  .phosphor-img.neofetch-logo { height: 80px; }
  .bezel-tag { font-size: 9px; gap: 8px; }
}

@media (max-width: 600px) {
  .crt { padding: 0; }
  .bezel {
    padding: 4px 4px 30px;
    border-radius: 14px;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.04),
      0 10px 30px rgba(0,0,0,0.5);
  }
  .screen { border-radius: 10px; }
  .crt.curved .screen { border-radius: 12px; }
  .bezel::after { top: 2px; left: 2px; right: 2px; bottom: 26px; border-radius: 12px; }
  .statusbar {
    font-size: 8px;
    gap: 6px;
    padding: 6px 8px;
    letter-spacing: 0.04em;
  }
  .statusbar .seg.hide-mobile { display: none; }
  .terminal {
    padding: 10px 10px 40px;
    padding-bottom: max(40px, env(safe-area-inset-bottom, 0px));
    font-size: 15px;
  }
  .logo-frame {
    flex-direction: column;
    text-align: center;
    align-items: center;
    gap: 14px;
  }
  .tag-big { font-size: 36px; }
  .tag-sm { font-size: 10px; }
  .phosphor-img.logo-main { width: 80px; height: 70px; }
  .boot { font-size: 11px; }
  .section { padding: 10px 0; }
  .section-hd { font-size: 10px; }
  .socrow { font-size: 12px; min-height: 44px; }
  .neofetch { grid-template-columns: 1fr; }
  .phosphor-img.neofetch-logo { display: none; }
  .kbd { font-size: 11px; padding: 6px 14px; min-height: 38px; }
  .btn { font-size: 12px; padding: 10px 16px; }
  .beer { font-size: 12px; }
  .catart { font-size: 14px; }
  .specs { font-size: 11px; }
  .out.grid2 { gap: 2px 12px; }
  .bezel-tag { font-size: 7px; gap: 6px; bottom: 8px; }
  .bezel-tag .led { width: 6px; height: 6px; }
  .socfoot { font-size: 10px; }
}

@media (max-width: 380px) {
  .terminal { font-size: 14px; padding: 8px 6px 30px; }
  .tag-big { font-size: 28px; }
  .statusbar { font-size: 7px; gap: 4px; }
  .phosphor-img.logo-main { width: 64px; height: 56px; }
}