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

/* ========== CSS Reset & Base ========== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: linear-gradient(135deg, #0808e4 0%, #050578 100%);
  background-attachment: fixed;
  min-height: 100vh;
  color: #ff00aa;
  font-size: 16px;
  font-family: 'Press Start 2P', cursive, monospace;
  line-height: 1.6;
  overflow-x: hidden;
}

/* ========== Container ========== */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* ========== Title (scan + arcade cursor + CRT trail) ========== */
.title {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 30px 0;
  padding: 25px;
  text-align: center;
  border-radius: 12px;
  background-color: #ff00ea;
}

.title::after {
  box-shadow:
    0 0 10px rgba(255,255,255,0.35),
    0 2px 0 rgba(0,0,0,0.25);
}

/* Base title: keep your look */
.title-base {
  display: block;
  width: 100%;

  color: #31fa03;
  font-size: clamp(2rem, 8vw, 4rem);
  line-height: 1.05;

  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.8);
  text-shadow: -5px -4px #0a025e, 0 0 20px #ff00ea;

  animation: pulse 2s ease-in-out infinite alternate;
}

/* Scan overlay (pink fill only inside letters) */
.title-scan {
  position: absolute;
  inset: 0;

  padding: 25px; /* matches .title padding */
  width: 100%;
  text-align: center;

  font-size: clamp(2rem, 8vw, 4rem);
  line-height: 1.05;

  color: #ff00ea; /* revealed fill becomes pink */
  -webkit-text-stroke: 0 transparent;
  text-shadow: none;

  pointer-events: none;

  --scanW: 12%;
  clip-path: inset(0 calc(100% - var(--scanW)) 0 0);
  animation: titleScan 3.6s linear infinite;
}

/* Main cursor */
.title-cursor {
  position: absolute;
  top: 25px;
  bottom: 25px;
  width: 10px;

  background: #31fa03;
  border-radius: 3px;

  box-shadow:
    0 0 18px rgba(49, 250, 3, 0.9),
    0 0 30px rgba(49, 250, 3, 0.55);

  left: 25px;
  pointer-events: none;

  animation:
    titleCursor 3.6s linear infinite,
    cursorFlicker 0.8s steps(1, end) infinite;

  will-change: left, filter, box-shadow, transform, opacity;
  z-index: 3;
}

/* Ghost trail base */
.title-cursor.ghost {
  background: rgba(255, 255, 255, 0.95);
  filter: blur(1.2px);
  opacity: 0;

  box-shadow:
    0 0 10px rgba(255,255,255,0.7),
    0 0 22px rgba(255,255,255,0.35);

  pointer-events: none;
  z-index: 2;
}

/* Ghost #1: closer, brighter */
.title-cursor.ghost-1 {
  animation:
    titleCursor 3.6s linear infinite,
    ghostArcade1 3.6s linear infinite,
    crtJitterY 0.14s steps(2, end) infinite;
}

/* Ghost #2: further, dimmer */
.title-cursor.ghost-2 {
  animation:
    titleCursor 3.6s linear infinite,
    ghostArcade2 3.6s linear infinite,
    crtJitterY 0.22s steps(2, end) infinite;
}

/* --- Arcade "tear" band effect (only at reset moment) --- */
.title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;

  /* band height + position (feel free to tweak) */
  top: 58%;
  height: 14px;

  /* bright scanline style */
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.9) 20%,
    rgba(49,250,3,0.9) 45%,
    rgba(255,0,234,0.9) 70%,
    rgba(255,255,255,0) 100%
  );

  opacity: 0;
  transform: translateX(-40px) skewX(-18deg);
  filter: blur(0.2px);

  pointer-events: none;
  z-index: 4; /* above title text/cursor */
  mix-blend-mode: screen;

  animation: titleTear 3.6s linear infinite;
}

/* pulse */
@keyframes pulse {
  from { text-shadow: -5px -4px #0a025e, 0 0 20px #ff00ea; }
  to   { text-shadow: -5px -4px #0a025e, 0 0 40px #ff00ea, 0 0 60px #31fa03; }
}

/* Scan window timing */
@keyframes titleScan {
  0%, 12% { clip-path: inset(0 calc(100% - var(--scanW)) 0 0); }
  72%, 90% { clip-path: inset(0 0 0 calc(100% - var(--scanW))); }
  100% { clip-path: inset(0 calc(100% - var(--scanW)) 0 0); }
}

/* Cursor movement */
@keyframes titleCursor {
  0%, 12% { left: 25px; }
  72%, 90% { left: calc(100% - 25px - 10px); }
  100% { left: 25px; }
}

/* Arcade flicker: white 100% -> white 20% -> micro black tick */
@keyframes cursorFlicker {
  0% {
    filter: none;
    box-shadow:
      0 0 18px rgba(49,250,3,0.9),
      0 0 30px rgba(49,250,3,0.55);
  }

  60% {
    filter: brightness(4) saturate(0);
    box-shadow:
      0 0 10px rgba(255,255,255,1),
      0 0 26px rgba(255,255,255,0.9);
  }

  64% {
    filter: brightness(1.4) saturate(0);
    box-shadow: 0 0 6px rgba(255,255,255,0.2);
  }

  67% {
    filter: brightness(0.12);
    box-shadow: none;
  }

  72% {
    filter: none;
    box-shadow:
      0 0 18px rgba(49,250,3,0.9),
      0 0 30px rgba(49,250,3,0.55);
  }
}

/* CRT afterimage trail (visible while moving) */
@keyframes ghostArcade1 {
  0%, 12% { opacity: 0; transform: translateX(-8px); }
  18%     { opacity: 0.55; transform: translateX(-9px); }
  45%     { opacity: 0.28; transform: translateX(-10px); }
  70%     { opacity: 0.12; transform: translateX(-11px); }
  72%, 100% { opacity: 0; transform: translateX(-8px); }
}

@keyframes ghostArcade2 {
  0%, 12% { opacity: 0; transform: translateX(-16px); }
  20%     { opacity: 0.35; transform: translateX(-17px); }
  48%     { opacity: 0.16; transform: translateX(-18px); }
  70%     { opacity: 0.07; transform: translateX(-19px); }
  72%, 100% { opacity: 0; transform: translateX(-16px); }
}


/* Subtle CRT vertical jitter (ghosts only) */
@keyframes crtJitterY {
  0%   { transform: translateY(0); }
  20%  { transform: translateY(-0.6px); }
  40%  { transform: translateY(0.8px); }
  60%  { transform: translateY(-0.4px); }
  80%  { transform: translateY(0.5px); }
  100% { transform: translateY(0); }
  }

@keyframes titleTear {
  /* silent most of the time */
  0%, 92% { opacity: 0; transform: translateX(-40px) skewX(-18deg); }

  /* quick tear starts */
  94% { opacity: 0.85; transform: translateX(30px) skewX(-25deg); }

  /* one extra "jump" like CRT sync loss */
  95% { opacity: 0.55; transform: translateX(-10px) skewX(12deg); }

  /* gone again */
  97%, 100% { opacity: 0; transform: translateX(-40px) skewX(-18deg); }
}  

.subtitle {
  display: block;
  width: 100%;
  text-align: center;

  color: #31fa03;
  font-size: clamp(0.8rem, 2vw, 1rem);
  margin-top: -20px;
  margin-bottom: 30px;
  text-shadow: 0 0 10px #31fa03;
}

/* ========== Info Section ========== */
.info-section {
  background-color: rgba(255, 0, 170, 0.2);
  border: 1px solid #ff00aa;
  border-radius: 8px;
  padding: 8px;
  margin: 25px 0;
  text-align: center;
}

.info-text {
  color: #fff;
  font-size: clamp(0.35rem, 1.5vw, 0.6rem);
  margin: 0;
  text-shadow: 0 0 5px #ff00aa;
}

/* ========== Input Section ========== */
.input-section {
  background-color: rgba(3, 15, 118, 0.8);
  border: 3px solid #31fa03;
  border-radius: 12px;
  padding: 25px;
  margin: 30px 0;
  box-shadow: 0 0 20px rgba(49, 250, 3, 0.3);
}

.input-group {
  margin-bottom: 20px;
}

.input-group label {
  display: block;
  color: #fff;
  font-size: clamp(0.7rem, 1.8vw, 1rem);
  margin-bottom: 10px;
  text-shadow: 0 0 5px #31fa03;
}

.input-group input {
  width: 100%;
  padding: 15px;
  background-color: rgba(255, 255, 255, 0.1);
  border: 2px solid #ff00aa;
  border-radius: 8px;
  color: #fff;
  font-family: 'Press Start 2P', cursive;
  font-size: clamp(0.6rem, 1.5vw, 0.8rem);
  transition: all 0.3s ease;
}

.input-group input:focus {
  outline: none;
  border-color: #31fa03;
  background-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 15px rgba(49, 250, 3, 0.5);
}

.input-group input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

/* ========== Buttons ========== */
button {
  font-family: 'Press Start 2P', cursive;
  cursor: pointer;
  border: none;
  border-radius: 8px;
  padding: 15px 30px;
  font-size: clamp(0.7rem, 1.8vw, 1rem);
  transition: all 0.3s ease;
  text-shadow: 2px 1px #0e0573;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

button:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.btn-fetch {
  width: 100%;
  background: linear-gradient(135deg, #ff00ea 0%, #ff00aa 100%);
  color: #fff;
  margin-top: 10px;
}

.btn-fetch:hover {
  background: linear-gradient(135deg, #ff00aa 0%, #ff0055 100%);
}

.last-update {
  margin-top: 15px;
  padding: 10px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 6px;
  color: #31fa03;
  font-size: clamp(0.5rem, 1.2vw, 0.7rem);
  text-align: center;
  min-height: 30px;
}
/* ==============================
   Train button animations
   - train-pulse: “soft hint”
   - train-attention: “strong blink”
============================== */
/* Soft pulse (keep) */
@keyframes trainPulse {
  0% {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 0 rgba(49, 250, 3, 0);
  }
  50% {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 55px rgba(49, 250, 3, 0.98);
  }
  100% {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), 0 0 0 rgba(49, 250, 3, 0);
  }
}

.train-pulse {
  animation: trainPulse 1.4s ease-in-out 0s 6;
}

/* Strong blink (use after fetch) */
@keyframes trainBlink {
  0% {
    transform: scale(1);
    filter: none;
    box-shadow:
      0 0 0 rgba(49, 250, 3, 0),
      inset 0 0 0 rgba(255,255,255,0);
  }
  50% {
    transform: scale(1.06);
    filter: brightness(1.25);
    box-shadow:
      0 0 36px rgba(49, 250, 3, 1),
      0 0 90px rgba(49, 250, 3, 0.65),
      inset 0 0 14px rgba(255,255,255,0.4);
  }
  100% {
    transform: scale(1);
    filter: none;
    box-shadow:
      0 0 0 rgba(49, 250, 3, 0),
      inset 0 0 0 rgba(255,255,255,0);
  }
}

.train-attention {
  animation: trainBlink 0.75s steps(2, end) infinite !important;
}


/* ========== Model Section ========== */
.model-section {
  text-align: center;
  margin: 30px 0;
}

.btn-train {
  background-color: #31fa03;
  color: #0808e4;
  min-width: 200px;
  margin: 10px;
}

.btn-train:hover {
  background-color: #50ff22;
  box-shadow: 0 0 25px rgba(49, 250, 3, 0.6);
}

.train-status {
  margin: 15px 0;
  padding: 12px;
  border-radius: 8px;
  font-size: clamp(0.6rem, 1.5vw, 0.8rem);
  min-height: 40px;
}

.status-info {
  background-color: rgba(49, 250, 3, 0.2);
  border: 2px solid #31fa03;
  color: #31fa03;
}

.status-success {
  background-color: rgba(49, 250, 3, 0.3);
  border: 2px solid #31fa03;
  color: #fff;
  box-shadow: 0 0 15px rgba(49, 250, 3, 0.4);
}

.status-warning {
  background-color: rgba(255, 170, 0, 0.2);
  border: 2px solid #ffaa00;
  color: #ffaa00;
}

.status-error {
  background-color: rgba(255, 0, 0, 0.2);
  border: 2px solid #ff0000;
  color: #ff0000;
}

.btn-predict {
  background: linear-gradient(135deg, #fa03fa 0%, #ff00aa 100%);
  color: #fff;
  min-width: 200px;
  margin: 10px;
  animation: glow 1.5s ease-in-out infinite alternate;
}

.btn-predict:hover {
  background: linear-gradient(135deg, #ff00aa 0%, #fa03fa 100%);
}

@keyframes glow {
  from {
    box-shadow: 0 0 10px rgba(250, 3, 250, 0.5);
  }
  to {
    box-shadow: 0 0 25px rgba(250, 3, 250, 0.8), 0 0 40px rgba(49, 250, 3, 0.3);
  }
}

/* ========== Result Box ========== */
.result-box {
  margin: 30px 0;
  min-height: 100px;
}

.prediction-result {
  background-color: rgba(20, 1, 37, 0.9);
  border: 4px solid #03e438;
  border-radius: 12px;
  padding: 30px;
  text-align: center;
  box-shadow: 0 0 30px rgba(3, 228, 56, 0.4);
  animation: slideIn 0.5s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.prediction-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-bottom: 20px;
}

.prediction-emoji {
  font-size: clamp(2rem, 5vw, 3rem);
  animation: bounce 1s ease infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.prediction-label {
  color: #03e438;
  font-size: clamp(1rem, 3vw, 1.5rem);
  text-shadow: 0 0 10px #03e438;
}

.confidence {
  color: #31fa03;
  font-size: clamp(0.7rem, 2vw, 1rem);
  margin: 15px 0;
}

.advice {
  color: #fff;
  font-size: clamp(0.8rem, 2.5vw, 1.2rem);
  margin: 20px 0;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  line-height: 1.8;
}

.disclaimer {
  color: #ffaa00;
  font-size: clamp(0.5rem, 1.2vw, 0.7rem);
  margin-top: 20px;
  padding: 10px;
  background-color: rgba(255, 170, 0, 0.1);
  border: 2px solid #ffaa00;
  border-radius: 6px;
}

/* Sentiment-specific colors */
.extreme-fear {
  border-color: #ff0000;
  box-shadow: 0 0 30px rgba(255, 0, 0, 0.4);
}

.fear {
  border-color: #ff6600;
  box-shadow: 0 0 30px rgba(255, 102, 0, 0.4);
}

.neutral {
  border-color: #ffaa00;
  box-shadow: 0 0 30px rgba(255, 170, 0, 0.4);
}

.greed {
  border-color: #31fa03;
  box-shadow: 0 0 30px rgba(49, 250, 3, 0.4);
}

.extreme-greed {
  border-color: #00ff88;
  box-shadow: 0 0 30px rgba(0, 255, 136, 0.4);
}

/* ========== Attribution Section ========== */
.attribution-section {
  margin: 40px 0 20px 0;
  padding: 20px;
  background-color: rgba(3, 15, 118, 0.5);
  border: 2px solid rgba(49, 250, 3, 0.4);
  border-radius: 8px;
  text-align: center;
}

.attribution-text {
  color: rgba(255, 255, 255, 0.9);
  font-size: clamp(0.6rem, 1.3vw, 0.75rem);
  margin: 0;
  line-height: 1.6;
}

.attribution-link {
  color: #31fa03;
  text-decoration: none;
  text-shadow: 0 0 5px #31fa03;
  transition: all 0.3s ease;
  font-weight: bold;
}

.attribution-link:hover {
  color: #50ff22;
  text-shadow: 0 0 10px #31fa03, 0 0 20px #31fa03;
  text-decoration: underline;
}

/* ========== About Section ========== */
.about-section {
  margin: 40px 0;
  padding: 20px;
  background-color: rgba(3, 15, 118, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
}

details {
  color: #fff;
}

summary {
  cursor: pointer;
  font-size: clamp(0.8rem, 2vw, 1rem);
  padding: 15px;
  color: #31fa03;
  text-shadow: 0 0 5px #31fa03;
  list-style: none;
  user-select: none;
  transition: all 0.3s ease;
}

summary:hover {
  color: #50ff22;
  text-shadow: 0 0 10px #31fa03;
}

summary::-webkit-details-marker {
  display: none;
}

summary::before {
  content: "+ ";
  display: inline-block;
  margin-right: 10px;
  transition: transform 0.3s ease;
  font-size: 1.2em;
}

details[open] summary::before {
  content: "- ";
}

.about-content {
  padding: 20px;
  margin-top: 15px;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  font-size: clamp(0.6rem, 1.5vw, 0.75rem);
  line-height: 1.8;
}

.about-content p {
  margin-bottom: 15px;
  color: rgba(255, 255, 255, 0.9);
}

.about-content strong {
  color: #31fa03;
  text-shadow: 0 0 5px #31fa03;
}

.about-content a {
  color: #6fdcff; /* light blue */
  text-decoration: none;
  text-shadow: 0 0 6px rgba(111, 220, 255, 0.6);
  transition: all 0.25s ease;
}

.about-content a:visited {
  color: #6fdcff;
}

.about-content a:hover {
  color: #9efcff;
  text-shadow: 0 0 12px rgba(158, 252, 255, 0.9);
  text-decoration: underline;
}


/* ========== Responsive Design ========== */
@media (max-width: 768px) {
  .container {
    padding: 15px;
  }

  .title {
    margin: 20px 0;
    padding: 20px;
  }

  .input-section {
    padding: 20px;
  }

  button {
    padding: 12px 20px;
    min-width: 150px;
  }

  .prediction-header {
    flex-direction: column;
    gap: 10px;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 14px;
  }

  .title {
    padding: 15px;
  }

  .input-section {
    padding: 15px;
  }

  button {
    width: 100%;
    margin: 5px 0;
  }
}

/* ========== Loading Animation ========== */
.loading {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #31fa03;
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ========== ML5 Visor Customization ========== */
/* Try to match the visor with our aesthetic */
.visor-controls,
.tf-graph-info {
  background-color: rgba(3, 15, 118, 0.9) !important;
  border: 2px solid #31fa03 !important;
  font-family: 'Press Start 2P', cursive !important;
}

/* ========== ML5 Visor Buttons Custom Styling ========== */

/* Base visor button style */
.visor-controls button {
  font-family: 'Press Start 2P', cursive !important;
  color: #000 !important;
  text-shadow: 2px 2px 0 #000 !important; /* fallback */
}

/* Maximize button (left one) → pink shadow */
.visor-controls button:first-child {
  text-shadow:
    2px 2px 0 #ff00aa,
    0 0 8px rgba(255, 0, 170, 0.8) !important;
}

/* Hide button (right one) → green shadow */
.visor-controls button:last-child {
  text-shadow:
    2px 2px 0 #31fa03,
    0 0 8px rgba(49, 250, 3, 0.8) !important;
}

/* ========== ML5 Visor Button Hover Effects ========== */

/* Smooth transition */
.visor-controls button {
  transition: text-shadow 0.2s ease, color 0.2s ease !important;
}

/* Maximize → stronger pink on hover */
.visor-controls button:first-child:hover {
  text-shadow:
    2px 2px 0 #ff00aa,
    0 0 14px rgba(255, 0, 170, 1) !important;
}

/* Hide → stronger green on hover */
.visor-controls button:last-child:hover {
  text-shadow:
    2px 2px 0 #31fa03,
    0 0 14px rgba(49, 250, 3, 1) !important;
}

/* ========== Visor Chart Color (Loss Curve) ========== */

/* Most tfjs-vis charts are Vega SVG; force line + points color */
.visor .vega-embed svg path {
  stroke: #ff00aa !important; /* pink */
}

.visor .vega-embed svg circle {
  fill: #ff00aa !important;   /* pink points */
}

/* Legend label "loss" */
.visor .vega-embed {
  color: #ff00aa !important;
}