/* ============================================================
   TOOL-SHELL.CSS — 8-Bit Retro Gaming & Terminal Design System
   Full 8-bit retro typography ("Press Start 2P"), green CRT accents,
   and pixel-perfect styling across all 3 tool pages.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

:root {
  --tool-accent: #4af626;
  --tool-accent-bright: #86ff64;
  --tool-accent-glow: rgba(74, 246, 38, 0.35);
  --tool-accent-dim: #2d5e1e;
  --tool-bg-primary: #0c0c0c;
  --tool-bg-secondary: #080808;
  --tool-bg-card: #080808;
  --tool-border: #222222;
  --tool-border-light: #333333;
  --tool-text-primary: #e5e5e5;
  --tool-text-secondary: #9f9f9f;
  --tool-text-muted: #666666;
  --font-pixel: 'Press Start 2P', monospace;
  --font-mono: 'Press Start 2P', monospace;
}

/* ---- 8-Bit Pixel Corners ---- */

*, *::before, *::after {
  border-radius: 0 !important;
}

::selection {
  background: var(--tool-accent);
  color: #000000;
}

body {
  background-color: var(--tool-bg-primary);
  color: var(--tool-text-primary);
  font-family: var(--font-pixel), var(--font-mono), monospace;
  font-size: 0.65rem;
  line-height: 1.8;
  letter-spacing: 0.02em;
  overflow-x: hidden;
}

/* Keep terminal panels scrollable without exposing browser chrome. */
* {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

*::-webkit-scrollbar {
  display: none;
}

.font-mono,
.font-sans,
input,
textarea,
select,
button {
  font-family: var(--font-pixel) !important;
}

/* ---- Subtle 8-Bit Scanline Overlay ---- */

body::before {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%);
  z-index: 100;
  background-size: 100% 3px;
  pointer-events: none;
  opacity: 0.35;
}

/* ---- 8-Bit Typography Controls ---- */

h1, .tool-title, .page-title {
  font-family: var(--font-pixel) !important;
  color: var(--tool-accent) !important;
  text-shadow: 2px 2px 0 #000, 0 0 10px var(--tool-accent-glow) !important;
  letter-spacing: 0.04em !important;
  line-height: 1.8 !important;
}

h2, h3, h4, .section-category h2, .term-card h4, .tool-card-title {
  font-family: var(--font-pixel) !important;
  line-height: 1.8 !important;
  letter-spacing: 0.03em !important;
}

p, .term-card p, .tool-card-desc {
  font-family: var(--font-pixel), var(--font-mono) !important;
  font-size: 0.58rem !important;
  line-height: 1.9 !important;
  color: var(--tool-text-secondary);
}

/* ---- 8-Bit Pixel Cards ---- */

.term-card {
  border: 2px solid var(--tool-border) !important;
  background: var(--tool-bg-card) !important;
  padding: 1.25rem !important;
  box-shadow: none !important;
  transition: all 0.15s ease !important;
}

.term-card:hover {
  border-color: var(--tool-accent) !important;
  background: #111111 !important;
  transform: translate(-2px, -2px) !important;
  box-shadow: 3px 3px 0 0 var(--tool-accent) !important;
}

.term-card h4 {
  font-size: 0.65rem !important;
}

/* ---- Sidebar 8-Bit Styling ---- */

aside {
  border-right: 3px solid var(--tool-accent) !important;
  background: #080808 !important;
}

aside h1, aside .glitch-text {
  font-family: var(--font-pixel) !important;
  font-size: 0.7rem !important;
  color: var(--tool-accent) !important;
}

aside p, aside div, aside span {
  font-family: var(--font-pixel) !important;
  font-size: 0.5rem !important;
  line-height: 1.8 !important;
}

/* ---- Navigation Tree ---- */

.tree-link {
  font-family: var(--font-pixel) !important;
  font-size: 0.55rem !important;
  letter-spacing: 0.03em !important;
  line-height: 2 !important;
  transition: all 0.15s ease;
}

.tree-link:hover {
  color: var(--tool-accent) !important;
  text-shadow: 0 0 6px var(--tool-accent-glow);
}

.tree-link.active {
  color: var(--tool-accent) !important;
  font-weight: 700;
  text-shadow: 0 0 8px var(--tool-accent);
}

/* ---- 8-Bit Buttons & Badges ---- */

button, .term-badge, a.social-link, label[for="file-upload"] {
  font-family: var(--font-pixel) !important;
  font-size: 0.5rem !important;
  line-height: 1.8 !important;
  letter-spacing: 0.05em !important;
  transition: all 0.15s ease !important;
}

.term-badge {
  padding: 3px 6px !important;
  border: 2px solid !important;
}

button:hover {
  box-shadow: 2px 2px 0 var(--tool-accent) !important;
}

/* ---- Header & Input Bars ---- */

header, main > div:first-child {
  border-bottom: 2px solid var(--tool-border) !important;
}

main > div:last-child {
  border-top: 2px solid var(--tool-border) !important;
}

.term-input, #user-input, #searchInput {
  font-family: var(--font-pixel) !important;
  font-size: 0.6rem !important;
  color: var(--tool-accent) !important;
  border-bottom: 2px solid var(--tool-border-light) !important;
}

.term-input:focus, #user-input:focus, #searchInput:focus {
  border-bottom-color: var(--tool-accent) !important;
  outline: none !important;
}

/* ---- Modals (8-Bit Style) ---- */

#access-modal > div, #api-modal > div, #toolModal > div, #toolModal {
  border: 3px solid var(--tool-accent) !important;
  box-shadow: 6px 6px 0 #000 !important;
  background: #0c0c0c !important;
}

/* ---- Chat Messages (Coder) ---- */

.chat-msg {
  font-family: var(--font-pixel), var(--font-mono) !important;
  font-size: 0.58rem !important;
  line-height: 1.9 !important;
  border-left: 3px solid var(--tool-border) !important;
}

.chat-msg:hover {
  border-left-color: var(--tool-accent) !important;
}

/* ---- Toast Notifications ---- */

#toast {
  font-family: var(--font-pixel) !important;
  font-size: 0.55rem !important;
  border: 2px solid var(--tool-accent) !important;
  box-shadow: 3px 3px 0 #000 !important;
  background: #0a0a0a !important;
}

/* ---- Hero Container ---- */

.tool-hero {
  padding: 1.75rem 2rem;
  border: 2px dashed var(--tool-accent-dim) !important;
  background: #080808 !important;
}

.tool-hero h1 {
  font-size: clamp(0.9rem, 2.5vw, 1.4rem) !important;
}

/* ---- Footer Links ---- */

.tool-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1.5rem;
  font-family: var(--font-pixel) !important;
  font-size: 0.55rem !important;
}

footer, footer p, footer a {
  font-family: var(--font-pixel) !important;
  font-size: 0.52rem !important;
  line-height: 1.8 !important;
}

/* ---- Badge Colors ---- */

.badge-green { border-color: #4af626 !important; color: #4af626 !important; }
.badge-blue { border-color: #3b82f6 !important; color: #3b82f6 !important; }
.badge-yellow { border-color: #eab308 !important; color: #eab308 !important; }
.badge-purple { border-color: #a855f7 !important; color: #a855f7 !important; }
.badge-orange { border-color: #f97316 !important; color: #f97316 !important; }
.badge-red { border-color: #ef4444 !important; color: #ef4444 !important; }
.badge-cyan { border-color: #06b6d4 !important; color: #06b6d4 !important; }
.badge-pink { border-color: #ec4899 !important; color: #ec4899 !important; }
.badge-teal { border-color: #14b8a6 !important; color: #14b8a6 !important; }
.badge-free { border-color: #22c55e !important; color: #22c55e !important; }
.badge-paid { border-color: #ef4444 !important; color: #ef4444 !important; }
.badge-freemium { border-color: #eab308 !important; color: #eab308 !important; }
.badge-opensource { border-color: #a855f7 !important; color: #a855f7 !important; }

/* ---- Section Category Headers ---- */

.section-category {
  scroll-margin-top: 6rem;
}

.section-category h2, .section-category span {
  font-family: var(--font-pixel) !important;
  font-size: 0.7rem !important;
}

/* ---- Mobile Responsive ---- */

@media (max-width: 640px) {
  h1, .tool-title, .page-title {
    font-size: 0.85rem !important;
  }

  .term-card h4 {
    font-size: 0.55rem !important;
  }

  p, .term-card p {
    font-size: 0.5rem !important;
  }
}