/* ReSynapse · shared styles */

body { image-rendering: pixelated; }
svg { shape-rendering: crispEdges; }

.material-symbols-outlined {
  font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}

.pixel-border           { border: 2px solid #3A4A5C; box-shadow: 2px 2px 0 0 #0F1620; }
.pixel-border-primary   { border: 2px solid #5CFF8F; box-shadow: 2px 2px 0 0 #0E5A34; }
.pixel-border-secondary { border: 2px solid #FF3EA5; box-shadow: 2px 2px 0 0 #6A0F45; }
.pixel-border-error     { border: 2px solid #FF8A8A; box-shadow: 2px 2px 0 0 #6E1414; }

.btn-press           { transition: transform .06s, box-shadow .06s; }
.btn-press:active    { transform: translate(2px, 2px); box-shadow: 0 0 0 0 #0E5A34 !important; }

.hover-pop           { transition: transform .12s, box-shadow .12s; }
.hover-pop:hover     { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 0 #5CFF8F, 0 0 18px rgba(92,255,143,.18); }

.marquee-container   { overflow: hidden; white-space: nowrap; }
.marquee-content     { display: inline-block; animation: marquee 30s linear infinite; }
@keyframes marquee   { 0% { transform: translateX(0%); } 100% { transform: translateX(-50%); } }

::-webkit-scrollbar           { width: 8px; height: 8px; }
::-webkit-scrollbar-track     { background: #05070A; border-left: 1px solid #16202C; }
::-webkit-scrollbar-thumb     { background: #243140; }
::-webkit-scrollbar-thumb:hover{ background: #22B86A; }

.blink-cursor        { border-left: 2px solid #5CFF8F; animation: blinkc 1s step-end infinite; }
@keyframes blinkc    { 50% { border-color: transparent; } }

.scanlines           { background-image: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px); }

.bg-stripes          {
  background-image: repeating-linear-gradient(45deg, #16202C 25%, transparent 25%, transparent 75%, #16202C 75%);
  background-size: 8px 8px;
}

.bg-field            {
  background-color: #05070A;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(92,255,143,.06), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(255,62,165,.05), transparent 45%),
    linear-gradient(rgba(76,141,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(76,141,255,.04) 1px, transparent 1px);
  background-size: auto, auto, 24px 24px, 24px 24px;
}

.glow-primary        { text-shadow: 0 0 12px rgba(92,255,143,.45); }
.glow-secondary      { text-shadow: 0 0 12px rgba(255,62,165,.45); }

.rs-card-frame svg   { display: block; width: 100%; height: auto; }

.live-dot            { animation: livePulse 1.4s ease-in-out infinite; }
@keyframes livePulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.bracket-line-h      { background: #2A3848; height: 2px; }
.bracket-line-v      { background: #2A3848; width: 2px; }

:focus-visible       { outline: 2px solid #5CFF8F; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .marquee-content, .live-dot, .blink-cursor { animation: none; }
  .hover-pop, .btn-press { transition: none; }
}