/*
  Stylesheet for the AI Model Arena recreation.

  The palette loosely references the original site: dark surfaces
  contrasted with bright, saturated accent colours.  Flexbox and
  CSS grid are used to lay out the model cards.  Feel free to
  iterate on these styles to refine the look and feel.
*/

/* CSS variables for easy theming */
:root {
  /*
    Colour variables for the retro neon palette.  These values
    derive from the original AI Model Arena design: a dark canvas
    contrasted with fluorescent greens, blues, oranges and purples.
    You can tweak these to fine‑tune the look.
  */
  --color-bg: #0a0a1a;
  --color-card: #15172b;
  --color-text: #f0f0f0;
  --color-accent: #00ff41;      /* vibrant green for primary accents */
  --color-secondary: #00bfff;   /* electric blue for secondary accents */
  --color-tertiary: #ff8c00;    /* warm orange for mid values */
  --color-low: #8a2be2;         /* purple for low values */
  --color-muted: #888;
  --spacing: 1rem;
  --border-radius: 0.5rem;
  --transition-duration: 0.2s;
  /* Use the pixel font throughout the site for a consistent arcade feel. */
  font-family: 'Press Start 2P', monospace;
}

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

body {
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
  /* Scanline effect reminiscent of CRT monitors */
  background-image: linear-gradient(
    rgba(255, 255, 255, 0.02) 1px,
    transparent 1px
  );
  background-size: 100% 3px;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Containers centralise content */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing) 0;
}

/* Header */
.site-header {
  background: #050511;
  border-bottom: 2px solid var(--color-accent);
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-header .logo {
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-accent);
  font-family: 'Press Start 2P', sans-serif;
}

.navigation {
  display: flex;
  gap: var(--spacing);
}

.nav-link {
  padding: 0.5rem 1rem;
  border-radius: var(--border-radius);
  background: transparent;
  color: var(--color-text);
  transition: background var(--transition-duration);
  font-family: 'Press Start 2P', sans-serif;
  font-size: 0.7rem;
}

.nav-link:hover,
.nav-link.active {
  background: var(--color-card);
  color: var(--color-accent);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Hero section */
.hero-section {
  padding: 4rem 0 3rem;
  text-align: center;
  background-image: linear-gradient(to bottom, #0a0a1a, #0f1025);
}

.hero-title {
  font-size: 2.5rem;
  font-weight: normal;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  font-family: 'Press Start 2P', sans-serif;
}

.hero-title .highlight {
  color: var(--color-accent);
}

.hero-subtitle {
  color: var(--color-muted);
  margin-bottom: 1.5rem;
  font-size: 0.8rem;
  font-family: 'Press Start 2P', sans-serif;
}

.search-container {
  margin-bottom: 1rem;
}

#modelSearch {
  width: 100%;
  max-width: 400px;
  padding: 0.5rem 0.75rem;
  border: none;
  border-radius: var(--border-radius);
  background: var(--color-card);
  color: var(--color-text);
  font-size: 1rem;
}

/* Filter buttons */
.filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 2rem;
}

.filter-button {
  padding: 0.4rem 0.8rem;
  border-radius: var(--border-radius);
  background: var(--color-card);
  color: var(--color-text);
  font-size: 0.85rem;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--transition-duration), color var(--transition-duration);
  font-family: 'Press Start 2P', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.filter-button:hover {
  background: var(--color-accent);
  color: #0a0a1a;
}

.filter-button.active {
  background: var(--color-secondary);
  color: #0a0a1a;
}

/* Models grid */
.models-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.model-card {
  background: var(--color-card);
  padding: 1rem;
  border-radius: var(--border-radius);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  /* Add neon border and glow */
  border: 2px solid var(--color-secondary);
  box-shadow: 0 0 10px var(--color-secondary), 0 0 20px rgba(0, 191, 255, 0.4);
  transition: transform var(--transition-duration), box-shadow var(--transition-duration), border-color var(--transition-duration);
  overflow: hidden;
}

.model-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 15px var(--color-accent), 0 0 30px var(--color-accent);
  border-color: var(--color-accent);
}

/* Add subtle scanlines overlay on each card */
.model-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.03) 2px, transparent 2px);
  background-size: 100% 4px;
  border-radius: inherit;
}

/* Base styling for the overall score badge */
/* Overall score container: holds the numeric score and the "overall" label.
   We remove the coloured background from the badge and instead colour
   the numeric score itself based on its value.  The label remains in
   purple to subtly distinguish it. */
.model-overall {
  font-size: 1rem;
  line-height: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  margin-left: 0.5rem;
}

/* Style the numeric score; its colour is set inline via JavaScript */
.overall-score {
  font-weight: bold;
  font-size: 1rem;
}

/* Style the "overall" label below the score */
.overall-label {
  font-size: 0.5rem;
  text-transform: uppercase;
  color: var(--color-low);
  margin-top: 0.1rem;
}

.model-name {
  font-size: 0.9rem;
  font-family: inherit;
  font-weight: normal;
  text-transform: uppercase;
  margin-left: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.model-company {
  /* company colour is set via inline style in JavaScript */
  font-size: 0.6rem;
  text-transform: uppercase;
  margin-bottom: 0.1rem;
  font-family: inherit;
  margin-left: 0;
}

.model-description {
  font-size: 0.55rem;
  color: var(--color-muted);
  font-family: inherit;
}

/* Rating count text beneath company name */
.rating-count {
  margin-left: 0;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Header container for each model card */
.model-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  gap: 0.5rem;
}

/* Ensure the left text area in the card header can shrink and text wraps gracefully */
.model-card-header > div:first-child {
  flex: 1;
  min-width: 0;
}

/* Music control button */
.music-btn {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 2px solid var(--color-secondary);
  background: var(--color-card);
  color: var(--color-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 1rem;
  cursor: pointer;
  transition: background var(--transition-duration), color var(--transition-duration), border-color var(--transition-duration);
  z-index: 101;
}

.music-btn:hover {
  background: var(--color-secondary);
  color: #0a0a1a;
}

/* When music is playing, invert colours on the button */
.music-btn.playing {
  background: var(--color-secondary);
  color: #0a0a1a;
  border-color: var(--color-secondary);
}

/* Attribute bars */
.attribute-bars {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.attribute-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.attribute-name {
  width: 2.5rem;
  font-size: 0.55rem;
  color: var(--color-muted);
  text-transform: uppercase;
  font-family: inherit;
}

.bar-container {
  flex-grow: 1;
  height: 0.4rem;
  background: #1f213f;
  border-radius: 0.2rem;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-secondary), var(--color-accent));
  border-radius: 0.2rem;
}

.attribute-score {
  width: 2rem;
  font-size: 0.55rem;
  text-align: right;
  font-family: inherit;
}

/* Styling for the "Overall" label beneath the rating number */
.overall-label {
  display: block;
  font-size: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--color-low);
  margin-top: 0.1rem;
}

/* Tags */
.model-tags {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
}

/* Avatar images for each model */
.model-avatar {
  border: 2px solid var(--color-secondary);
  box-shadow: 0 0 6px var(--color-secondary);
  border-radius: var(--border-radius);
  background: var(--color-card);
}

.tag {
  background: #272a4d;
  color: var(--color-secondary);
  padding: 0.2rem 0.4rem;
  border-radius: 0.2rem;
  font-size: 0.5rem;
  text-transform: uppercase;
  font-family: inherit;
  letter-spacing: 0.5px;
}

/* Action buttons */
.card-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: auto;
}

.action-button {
  flex: 1;
  padding: 0.35rem 0.6rem;
  background: var(--color-secondary);
  color: #0a0a1a;
  border: none;
  border-radius: var(--border-radius);
  font-size: 0.6rem;
  font-weight: normal;
  cursor: pointer;
  transition: background var(--transition-duration), box-shadow var(--transition-duration);
  font-family: inherit;
  letter-spacing: 0.5px;
  box-shadow: 0 0 6px var(--color-secondary);
}

.action-button.secondary {
  background: var(--color-card);
  color: var(--color-secondary);
  border: 2px solid var(--color-secondary);
  box-shadow: 0 0 6px var(--color-secondary);
}

.action-button:hover {
  background: var(--color-accent);
  color: #0a0a1a;
}

.site-footer {
  text-align: center;
  padding: 1rem 0;
  font-size: 0.8rem;
  color: var(--color-muted);
  border-top: 1px solid #1f213f;
}

/* Modal styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.3s ease;
}

.modal-content {
  background: var(--color-card);
  border-radius: var(--border-radius);
  padding: 1.5rem;
  width: 90%;
  max-width: 600px;
  color: var(--color-text);
  /* Neon border and glow for the modal */
  border: 2px solid var(--color-secondary);
  box-shadow: 0 0 12px var(--color-secondary), 0 0 24px rgba(0, 191, 255, 0.4);
  font-family: inherit;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.modal-title {
  font-size: 1.2rem;
  font-weight: bold;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.close-button {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--color-accent);
  cursor: pointer;
  transition: color var(--transition-duration);
}

.close-button:hover {
  color: var(--color-secondary);
}

.rating-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  font-family: inherit;
}

.rating-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.section-title {
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
  font-weight: bold;
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.rating-slider {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.slider-label {
  flex: 0 0 50%;
  font-size: 0.6rem;
  font-family: inherit;
  text-transform: uppercase;
}

.slider-container {
  flex: 1;
}

.slider {
  width: 100%;
  appearance: none;
  height: 0.35rem;
  border-radius: 0;
  background: var(--color-card);
  outline: none;
  cursor: pointer;
  border: 1px solid var(--color-secondary);
  box-shadow: inset 0 0 6px var(--color-secondary);
}

.slider::-webkit-slider-thumb {
  appearance: none;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 0.1rem;
  background: var(--color-accent);
  border: 2px solid var(--color-secondary);
  transition: transform var(--transition-duration);
}

.slider::-moz-range-thumb {
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 0.1rem;
  background: var(--color-accent);
  border: 2px solid var(--color-secondary);
  transition: transform var(--transition-duration);
}

.slider-value {
  width: 2rem;
  text-align: right;
  font-size: 0.6rem;
  font-family: inherit;
  text-transform: uppercase;
}

.review-textarea {
  width: 100%;
  min-height: 5rem;
  padding: 0.5rem;
  background: var(--color-card);
  border: 2px solid var(--color-secondary);
  border-radius: var(--border-radius);
  color: var(--color-text);
  resize: vertical;
  font-family: inherit;
  font-size: 0.6rem;
  box-shadow: 0 0 6px var(--color-secondary);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.cancel-button,
.submit-button {
  padding: 0.35rem 0.8rem;
  border-radius: var(--border-radius);
  border: none;
  font-size: 0.6rem;
  font-weight: bold;
  cursor: pointer;
  transition: background var(--transition-duration), color var(--transition-duration), box-shadow var(--transition-duration);
  font-family: inherit;
  letter-spacing: 0.6px;
  box-shadow: 0 0 6px var(--color-secondary);
}

.cancel-button {
  background: var(--color-card);
  color: var(--color-secondary);
  border: 2px solid var(--color-secondary);
}

.submit-button {
  background: var(--color-secondary);
  color: #0a0a1a;
  border: 2px solid var(--color-secondary);
}

.cancel-button:hover {
  background: var(--color-secondary);
  color: #0a0a1a;
  box-shadow: 0 0 8px var(--color-secondary), 0 0 15px var(--color-secondary);
}

.submit-button:hover {
  background: var(--color-accent);
  color: #0a0a1a;
  border-color: var(--color-accent);
  box-shadow: 0 0 8px var(--color-accent), 0 0 15px var(--color-accent);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}