
:root{
  --pip-green: #14fdce;
  --pip-green-dim: #0fbda2;
  --pip-bg: #001a14;
  --pip-grid: rgba(20, 253, 206, 0.08);
  --pip-text: var(--pip-green);
}

@font-face {
  font-family: 'VT323';
  src: url('pxiKyp0ihIEF2isfFJA.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Base */
html, body {
  height: 100%;
  background: radial-gradient(ellipse at center, #001f18 0%, #00140f 60%, #000b08 100%);
  color: var(--pip-text);
  font-family: VT323, monospace;
  letter-spacing: 0.02em;
}

body { overflow: hidden; }

/* CRT effects */
.crt::before, .crt::after{
  content: "";
  position: fixed;
  left:0; right:0; top:0; bottom:0;
  pointer-events:none;
}
.crt::before{
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.15) 0px,
    rgba(0,0,0,0.15) 2px,
    transparent 2px,
    transparent 4px
  );
  mix-blend-mode: multiply;
}
.crt::after{
  background:
    radial-gradient(circle at 50% 50%, rgba(20,253,206,0.12), transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(20,253,206,0.08), transparent 60%);
  animation: flicker 3.2s infinite;
}

@keyframes flicker{
  0%, 100% { opacity: 0.8; }
  45% { opacity: 0.9; }
  50% { opacity: 0.95; }
  55% { opacity: 0.85; }
  70% { opacity: 0.92; }
}

/* Frame */
.pipboy {
  position: relative;
  height: 100dvh;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 16px;
  padding: 18px;
  box-sizing: border-box;
}

/* Sidebar */
.sidebar {
  border: 2px solid var(--pip-green);
  box-shadow: 0 0 24px rgba(20,253,206,0.2), inset 0 0 24px rgba(20,253,206,0.12);
  border-radius: 10px;
  padding: 14px 12px;
  position: relative;
  background:
      linear-gradient(transparent, transparent),
      repeating-linear-gradient(0deg, var(--pip-grid) 0 2px, transparent 2px 40px);
}

.logo { display:flex; align-items:center; gap:10px; font-size: 28px; line-height:1; margin-bottom: 12px; }
.logo svg { height: 26px; width: 26px; }

.nav { margin-top: 8px; display:flex; flex-direction:column; gap:6px; }
.nav button {
  all: unset; cursor: pointer; padding: 8px 10px; font-size: 22px;
  border: 2px solid transparent; border-radius: 8px; transition: transform .06s ease;
}
.nav button:hover{ transform: translateX(2px) scale(1.01); }
.nav button[aria-selected="true"]{ border-color: var(--pip-green); box-shadow: inset 0 0 18px rgba(20,253,206,0.2); }

/* Status bars */
.stat { margin-top: 16px; font-size: 18px; }
.bar { height: 10px; border: 2px solid var(--pip-green); border-radius: 8px; position: relative; overflow: hidden; margin-top: 4px; }
.bar > i { display:block; height:100%; width: 70%; background: linear-gradient(90deg, rgba(20,253,206,0.6), rgba(20,253,206,0.2)); box-shadow: 0 0 12px rgba(20,253,206,0.4); }

/* Main panel */
.panel {
  border: 2px solid var(--pip-green);
  box-shadow: 0 0 24px rgba(20,253,206,0.2), inset 0 0 24px rgba(20,253,206,0.12);
  border-radius: 10px;
  overflow: hidden; display:flex; flex-direction:column;
  background:
      linear-gradient(transparent, transparent),
      repeating-linear-gradient(0deg, var(--pip-grid) 0 2px, transparent 2px 40px);
}

.panel-header { display:flex; align-items:center; justify-content:space-between; padding: 10px 14px; font-size: 22px; border-bottom: 2px solid var(--pip-green); }
.panel-header .title { display:flex; align-items:center; gap:10px; }
.panel-header .title h1{ font-size: 26px; margin: 0; }

/* Terminal body */
.terminal { font-size: 22px; padding: 14px; line-height: 1.35; flex:1; overflow:auto; }
.terminal p, .terminal li { text-shadow: 0 0 10px rgba(20,253,206,0.2); }
kbd { border: 1px solid var(--pip-green); padding: 0 6px; border-radius: 4px; font-size: 20px; }

.grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 16px; }
.box { border: 2px solid var(--pip-green); border-radius: 8px; padding: 10px; box-shadow: inset 0 0 18px rgba(20,253,206,0.12); }

/* Tab visibility */
.tab { display: none; }
.tab[aria-hidden="false"]{ display:block; }

/* Footer controls */
.footer { display:flex; justify-content:space-between; align-items:center; padding: 8px 14px; border-top: 2px solid var(--pip-green); font-size: 18px; }

/* Cursor */
.cursor { display:inline-block; width: 10px; height: 22px; vertical-align: -3px; background: var(--pip-green); margin-left: 4px; animation: blink 1.06s steps(1, end) infinite; }
@keyframes blink { 50% { opacity: 0; } }

a { color: var(--pip-green); text-decoration: none; border-bottom: 1px dotted var(--pip-green); }
a:hover { text-shadow: 0 0 12px rgba(20,253,206,0.6); }

/* Radar */
.radar-wrap { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 520px; margin: 0 auto; }
canvas.radar { width: 100%; height: auto; display:block; border: 2px solid var(--pip-green); border-radius: 50%; box-shadow: inset 0 0 30px rgba(20,253,206,0.18), 0 0 24px rgba(20,253,206,0.12); background: radial-gradient(circle at center, rgba(20,253,206,0.05), transparent 60%); }
.radar-legend { margin-top: 8px; font-size: 18px; text-align:center; }

/* Responsive */
@media (max-width: 900px){
  .pipboy{ grid-template-columns: 1fr; }
  .sidebar{ order: 2; }
  .panel{ order: 1; }
  .grid{ grid-template-columns: 1fr; }
}
