/* Frame rotation cabinet skins.
   Each frame is a distinct TV cabinet era. The screen position, size,
   and aspect ratio are IDENTICAL across all frames so channel content
   never jumps. Only the cabinet body, control panel, and room atmosphere
   change.

   Selector: body[data-frame="monday"], etc.

   Frame map:
     monday    — 1950s bakelite, rabbit ears, warm amber
     tuesday   — 1970s wood console, walnut veneer, golden age
     wednesday — 1980s silver portable, preset buttons, cable era
     thursday  — 1990s black cube on AV cart, school surplus
     friday    — 1960s space-age pod, white/gold, atomic optimism
     saturday  — 1990s hotel TV, bolted to dresser, transient
     sunday    — no frame, floating screen, signal uncontained
     wildcard  — Kemetopolis temple, obsidian in stone, ancient
*/

/* ---- monday: 1950s bakelite ----------------------------------------- */

body[data-frame="monday"] .tv {
  background:
    repeating-linear-gradient(94deg, rgba(0,0,0,0.08) 0 2px, rgba(255,255,255,0.02) 2px 4px, transparent 4px 10px),
    linear-gradient(165deg, #5c3a24 0%, #3e2210 50%, #2a1508 100%);
  border: 1px solid #3a1e0c;
  border-radius: 24px 24px 18px 18px;
  box-shadow:
    0 30px 80px rgba(0,0,0,0.75),
    inset 0 2px 0 rgba(200,160,120,0.15),
    inset 0 -4px 14px rgba(0,0,0,0.5);
}

body[data-frame="monday"] .screen-shell {
  background: linear-gradient(155deg, #1a1410 0%, #0f0b08 100%);
  border-radius: 16px;
  box-shadow:
    inset 0 3px 12px rgba(0,0,0,0.85),
    inset 0 -1px 0 rgba(200,160,120,0.05);
}

body[data-frame="monday"] .knob {
  background: radial-gradient(circle at 35% 30%, #4a3a2a, #1a1008 72%);
}

body[data-frame="monday"] .knob-cap::after {
  background: #e8d5b0;
}

/* ---- tuesday: 1970s wood console ------------------------------------ */

body[data-frame="tuesday"] .tv {
  background:
    linear-gradient(180deg, #5c3d28 0%, #3d2516 40%, #2c1a0e 100%);
  border: 2px solid #1a0e05;
  border-radius: 8px;
  box-shadow:
    0 40px 100px rgba(0,0,0,0.8),
    inset 0 1px 0 rgba(180,140,100,0.12),
    inset 0 -2px 8px rgba(0,0,0,0.6);
}

body[data-frame="tuesday"] .screen-shell {
  background: linear-gradient(160deg, #1a1510 0%, #0d0a07 100%);
  border-radius: 6px;
  box-shadow:
    inset 0 2px 8px rgba(0,0,0,0.9),
    inset 0 -1px 0 rgba(160,120,80,0.04);
}

body[data-frame="tuesday"] .panel {
  /* wider panel for console era */
  min-width: 140px;
}

body[data-frame="tuesday"] .grille {
  background: repeating-linear-gradient(0deg, #1a1008 0 5px, #2e1c10 5px 10px);
  height: 110px;
}

/* ---- wednesday: 1980s silver portable ------------------------------- */

body[data-frame="wednesday"] .tv {
  background:
    linear-gradient(170deg, #c8c8c8 0%, #a0a0a0 35%, #787878 100%);
  border: 1px solid #606060;
  border-radius: 6px;
  box-shadow:
    0 25px 60px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255,255,255,0.25),
    inset 0 -2px 8px rgba(0,0,0,0.4);
}

body[data-frame="wednesday"] .screen-shell {
  background: linear-gradient(155deg, #2a2a2a 0%, #1a1a1a 100%);
  border-radius: 4px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.9);
}

body[data-frame="wednesday"] .knob {
  background: radial-gradient(circle at 35% 30%, #909090, #404040 72%);
  box-shadow: 0 0 0 4px #505050, 0 0 0 5px rgba(255,255,255,0.08), 0 4px 10px rgba(0,0,0,0.5);
}

body[data-frame="wednesday"] .knob-cap {
  background: radial-gradient(circle at 38% 32%, #606060, #303030 45%, #181818 80%);
}

body[data-frame="wednesday"] .knob-cap::after {
  background: #ff6b35;
}

body[data-frame="wednesday"] .knob-label {
  color: #4a4a4a;
}

/* ---- thursday: 1990s black cube on AV cart -------------------------- */

body[data-frame="thursday"] .tv {
  background:
    linear-gradient(175deg, #2a2a2a 0%, #1a1a1a 40%, #0d0d0d 100%);
  border: 1px solid #333;
  border-radius: 2px;
  box-shadow:
    0 20px 50px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(255,255,255,0.04);
}

body[data-frame="thursday"] .screen-shell {
  background: #0a0a0a;
  border-radius: 1px;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.95);
}

body[data-frame="thursday"] .knob {
  background: radial-gradient(circle at 35% 30%, #3a3a3a, #111 72%);
  box-shadow: 0 0 0 3px #1a1a1a, 0 3px 8px rgba(0,0,0,0.6);
  border-radius: 2px;
}

body[data-frame="thursday"] .knob-cap {
  border-radius: 2px;
}

body[data-frame="thursday"] .knob-cap::after {
  background: #aaa;
}

body[data-frame="thursday"] .knob-label {
  color: #777;
  font-family: "Consolas", "Menlo", monospace;
}

/* ---- friday: 1960s space-age pod ------------------------------------ */

body[data-frame="friday"] .tv {
  background:
    radial-gradient(ellipse 80% 60% at 50% 30%, rgba(255,255,255,0.12), transparent 70%),
    linear-gradient(170deg, #f0ece4 0%, #e8e0d4 30%, #d4c8b8 100%);
  border: 1px solid #c4b896;
  border-radius: 40px 40px 30px 30px;
  box-shadow:
    0 35px 90px rgba(0,0,0,0.7),
    inset 0 2px 0 rgba(255,255,255,0.5),
    inset 0 -3px 10px rgba(0,0,0,0.2);
}

body[data-frame="friday"] .screen-shell {
  background: linear-gradient(155deg, #1a1a18 0%, #0e0e0c 100%);
  border-radius: 30px;
  box-shadow:
    inset 0 2px 10px rgba(0,0,0,0.85),
    inset 0 -1px 0 rgba(255,255,255,0.08);
}

body[data-frame="friday"] .screen {
  border-radius: 20px;
}

body[data-frame="friday"] .screen::after {
  border-radius: 20px;
}

body[data-frame="friday"] .knob-block {
  /* gold/chrome accent */
}

body[data-frame="friday"] .knob {
  background: radial-gradient(circle at 35% 30%, #d4c498, #8a7a58 65%, #4a3a28 100%);
  box-shadow: 0 0 0 3px #baa878, 0 0 0 4px rgba(0,0,0,0.15), 0 4px 12px rgba(0,0,0,0.5);
}

body[data-frame="friday"] .knob-cap {
  background: radial-gradient(circle at 38% 32%, #c8b888, #8a7a58 50%, #3a2a18 85%);
}

body[data-frame="friday"] .knob-cap::after {
  background: #fff;
  box-shadow: 0 0 4px rgba(0,0,0,0.6);
}

body[data-frame="friday"] .knob-label {
  color: #8a7a58;
  letter-spacing: 0.34em;
}

/* ---- saturday: 1990s hotel TV --------------------------------------- */

body[data-frame="saturday"] .tv {
  background:
    linear-gradient(175deg, #3a3a3a 0%, #222 40%, #151515 100%);
  border: 1px solid #333;
  border-radius: 2px;
  box-shadow:
    0 18px 45px rgba(0,0,0,0.65),
    inset 0 1px 0 rgba(255,255,255,0.03);
}

body[data-frame="saturday"] .screen-shell {
  background: #0d0d0d;
  border-radius: 1px;
  padding: clamp(6px, 1vw, 14px);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.95);
}

body[data-frame="saturday"] .knob {
  background: radial-gradient(circle at 35% 30%, #444, #1a1a1a 72%);
  box-shadow: 0 0 0 3px #222, 0 3px 8px rgba(0,0,0,0.6);
  border-radius: 2px;
}

body[data-frame="saturday"] .knob-cap {
  border-radius: 2px;
}

body[data-frame="saturday"] .knob-cap::after {
  background: #999;
}

body[data-frame="saturday"] .knob-label {
  color: #666;
  font-family: "Arial Narrow", sans-serif;
}

/* ---- sunday: no frame, floating screen ------------------------------ */

body[data-frame="sunday"] .tv {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

body[data-frame="sunday"] .screen-shell {
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}

body[data-frame="sunday"] .screen {
  border-radius: 0;
  box-shadow:
    0 0 120px 20px rgba(150,185,255,0.15),
    0 0 40px 8px rgba(150,185,255,0.08);
}

body[data-frame="sunday"] .screen::after {
  border-radius: 0;
}

body[data-frame="sunday"] .panel {
  opacity: 0;
  pointer-events: none;
}

/* ---- wildcard: Kemetopolis temple obsidian panel -------------------- */

body[data-frame="wildcard"] .tv {
  background:
    url("../concepts/frame-kemetopolis-temple.png") center/cover no-repeat;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  /* The temple PNG IS the full scene — no cabinet CSS needed.
     Screen sits on top of the obsidian panel area. */
}

body[data-frame="wildcard"] .screen-shell {
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  /* position the screen to align with the obsidian panel in the PNG */
  margin: 0 auto;
  transform: translateY(-8%);
}

body[data-frame="wildcard"] .screen {
  border-radius: 2px;
  box-shadow:
    0 0 60px 10px rgba(20,180,160,0.15),
    0 0 20px 4px rgba(20,180,160,0.06);
}

body[data-frame="wildcard"] .screen::after {
  border-radius: 2px;
}

body[data-frame="wildcard"] .panel {
  opacity: 0;
  pointer-events: none;
}

body[data-frame="wildcard"] .knob-label {
  color: #4a8a7a;
}