/* =============================================================
   shared.css — TV Cell Component + Color System
   DeGrid · Third Degree Entertainment
   ============================================================= */

/* -------------------------------------------------------------
   Color variables (defaults; overridden by JS from localStorage)
   ------------------------------------------------------------- */
:root {
  --primary:   #F97316;
  --secondary: #7C3AED;
}

/* -------------------------------------------------------------
   TV Cell — container
   ------------------------------------------------------------- */
.tv-cell {
  position: relative;
  aspect-ratio: 1368 / 1080;
  width: 100%;
  cursor: default;
  user-select: none;
  background: transparent;
}

.tv-cell.tv-cell--question {
  cursor: pointer;
}

/* -------------------------------------------------------------
   Layer 1 · .tv-bg  (plastic body — radial gradient)
   Set via JS: applyPrimaryColor() writes inline background.
   ------------------------------------------------------------- */
.tv-bg {
  position: absolute;
  inset: 0;
  border-radius: 3.5%;
  /* JS fills in background: radial-gradient(...) */
  background: var(--primary);
}

/* -------------------------------------------------------------
   Layer 2 · .tv-screen  (the display area)
   ------------------------------------------------------------- */
.tv-screen {
  position: absolute;
  left:   7.38%;
  top:    8.70%;
  width:  85.45%;
  height: 80.56%;
  background: var(--secondary);
  border-radius: 3%;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8%;
  box-sizing: border-box;
}

/* -------------------------------------------------------------
   Layer 3 · .tv-overlay  (scanline texture)
   ------------------------------------------------------------- */
.tv-overlay {
  position: absolute;
  left:   7.38%;
  top:    8.70%;
  width:  85.45%;
  height: 80.56%;
  pointer-events: none;
  object-fit: cover;
  border-radius: 3%;
  opacity: 0.55;
  mix-blend-mode: overlay;
}

/* -------------------------------------------------------------
   Layer 4 · .tv-bao  (bezel-and-overlay body texture — tinted)
   ------------------------------------------------------------- */
.tv-bao {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* JS writes img.style.filter for hue tinting */
}

/* -------------------------------------------------------------
   Layer 5 · .tv-bezel  (glossy black ring — never filtered)
   ------------------------------------------------------------- */
.tv-bezel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* -------------------------------------------------------------
   Screen content — CATEGORY state
   ------------------------------------------------------------- */
.tv-cell--category .tv-screen {
  /* text color set in JS based on secondary lightness */
}

/* Logo cell — no padding so image fills the full screen area */
.tv-cell--logo .tv-screen {
  padding: 0;
}

.tv-category-label {
  font-family: 'Exo 2', sans-serif;
  font-weight: 900;
  font-size: clamp(0.55rem, 2.2cqi, 1.6rem);
  text-align: center;
  line-height: 1.15;
  word-break: break-word;
  hyphens: auto;
  color: inherit;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* -------------------------------------------------------------
   Screen content — QUESTION state (blur lines)
   ------------------------------------------------------------- */
.tv-cell--question .tv-screen {
  gap: 8px;
  padding: 14% 10%;
}

.blur-lines {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.blur-line {
  height: 11px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.75);
  filter: blur(5px);
  flex-shrink: 0;
}

/* light screen variant */
.blur-line--dark {
  background: rgba(0, 0, 0, 0.45);
}

.blur-line:nth-child(1) { width: 95%; }
.blur-line:nth-child(2) { width: 75%; }
.blur-line:nth-child(3) { width: 88%; }
.blur-line:nth-child(4) { width: 60%; }

/* -------------------------------------------------------------
   Screen content — ANSWERED state
   Only the screen gets darkened. Bezel and body are untouched.
   ------------------------------------------------------------- */
.tv-cell--answered {
  cursor: default;
  pointer-events: none;
}

/* Dark overlay over just the screen area */
.tv-cell--answered .tv-screen::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  pointer-events: none;
  z-index: 1;
}

/* Answered question text — extra blurred under the overlay */
.tv-cell--answered .display-cell-question,
.tv-cell--answered .host-cell-text {
  filter: blur(10px);
  opacity: 0.4;
}

/* -------------------------------------------------------------
   Hover — question cells only
   ------------------------------------------------------------- */
.tv-cell--question:hover {
  transform: scale(1.04) translateY(-3px);
  transition: transform 150ms ease;
  z-index: 2;
}

.tv-cell--question {
  transition: transform 150ms ease, opacity 300ms ease;
}

/* -------------------------------------------------------------
   Pop-out animation (display window — cell expands to center)
   ------------------------------------------------------------- */
@keyframes cellPopOut {
  from {
    transform: scale(1) translate(0, 0);
  }
  to {
    transform: scale(var(--pop-scale, 3)) translate(var(--pop-x, 0px), var(--pop-y, 0px));
  }
}

@keyframes cellPopIn {
  from {
    transform: scale(var(--pop-scale, 3)) translate(var(--pop-x, 0px), var(--pop-y, 0px));
  }
  to {
    transform: scale(1) translate(0, 0);
  }
}

.tv-cell--popping-out {
  animation: cellPopOut 400ms ease-out forwards;
  z-index: 100;
}

.tv-cell--popped {
  transform: scale(var(--pop-scale, 3)) translate(var(--pop-x, 0px), var(--pop-y, 0px));
  z-index: 100;
}

.tv-cell--popping-in {
  animation: cellPopIn 350ms ease-out forwards;
  z-index: 100;
}

/* -------------------------------------------------------------
   Question text (shown on expanded cell in display)
   ------------------------------------------------------------- */
.tv-question-text {
  font-family: 'Exo 2', sans-serif;
  font-weight: 700;
  font-size: clamp(0.7rem, 2.8cqi, 1.4rem);
  text-align: center;
  line-height: 1.35;
  color: inherit;
  filter: blur(8px);
  transition: filter 600ms ease;
}

.tv-question-text--revealed {
  filter: blur(0);
}

.tv-answer-text {
  font-family: 'Exo 2', sans-serif;
  font-weight: 900;
  font-size: clamp(0.85rem, 3.2cqi, 1.7rem);
  text-align: center;
  line-height: 1.25;
  color: inherit;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 400ms ease, transform 400ms ease;
  border-top: 2px solid rgba(255, 255, 255, 0.35);
  padding-top: 8px;
  margin-top: 4px;
  width: 90%;
}

.tv-answer-text--revealed {
  opacity: 1;
  transform: translateY(0);
}

/* -------------------------------------------------------------
   Utility — visually hide element but keep in DOM
   ------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}