/* New frame skins — 6 additions to the original 8 in frames.css.
   Same contract: screen position never moves. Only the cabinet changes.

   New frames:
     cracked   — screen has a hairline crack, broadcast persists
     basement  — 1970s wood-paneled rec room
     hospital  — wall-mounted arm, clinical white
     pawnshop  — behind glass display case, yellow price sticker
     rainynight — TV by a rain-streaked window
     library   — rich dark cabinet, brass accents, leather-bound quiet
*/

/* ---- cracked: hairline crack across the screen ---------------------- */
body[data-frame="cracked"] .tv {
  background:
    linear-gradient(170deg, #3a3028 0%, #2a2018 50%, #1a1008 100%);
  border: 1px solid #2a1a0e;
  border-radius: 12px;
  box-shadow:
    0 25px 60px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(180,140,100,0.1);
}

body[data-frame="cracked"] .screen {
  position: relative;
}

/* the crack — a jagged line overlay on the screen */
body[data-frame="cracked"] .screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0.35;
  background:
    /* main crack path — top-left to bottom-right, jagged */
    linear-gradient(
      to bottom right,
      transparent 0%,
      transparent 28%,
      rgba(180,200,220,0.6) 28%,
      rgba(180,200,220,0.7) 28.5%,
      transparent 28.5%,
      transparent 55%,
      rgba(180,200,220,0.5) 55%,
      rgba(180,200,220,0.6) 55.5%,
      transparent 55.5%,
      transparent 72%,
      rgba(180,200,220,0.4) 72%,
      rgba(180,200,220,0.5) 72.5%,
      transparent 72.5%
    ),
    /* secondary crack branching off */
    linear-gradient(
      to bottom,
      transparent 0%,
      transparent 30%,
      rgba(180,200,220,0.3) 30%,
      rgba(180,200,220,0.35) 30.5%,
      transparent 30.5%,
      transparent 48%,
      rgba(180,200,220,0.3) 48%,
      transparent 48.5%
    );
}

/* ---- basement: 1970s wood-paneled rec room -------------------------- */
body[data-frame="basement"] .tv {
  background:
    repeating-linear-gradient(90deg,
      rgba(0,0,0,0.06) 0px,
      rgba(0,0,0,0.06) 4px,
      rgba(255,255,255,0.02) 4px,
      rgba(255,255,255,0.02) 6px,
      transparent 6px,
      transparent 12px
    ),
    linear-gradient(175deg, #4a3020 0%, #362214 45%, #24140a 100%);
  border: 2px solid #1a0e04;
  border-radius: 4px;
  box-shadow:
    0 30px 70px rgba(0,0,0,0.8),
    inset 0 1px 0 rgba(160,120,80,0.08);
}

body[data-frame="basement"] .screen-shell {
  background: linear-gradient(160deg, #1a1210 0%, #0c0806 100%);
  border-radius: 2px;
  box-shadow: inset 0 3px 10px rgba(0,0,0,0.9);
}

body[data-frame="basement"] .panel {
  min-width: 130px;
}

body[data-frame="basement"] .knob {
  background: radial-gradient(circle at 35% 30%, #3a2a1a, #1a0e06 72%);
  box-shadow: 0 0 0 4px #2a1a0e, 0 4px 10px rgba(0,0,0,0.6);
}

body[data-frame="basement"] .knob-label {
  color: #8a6a4a;
}

/* ---- hospital: wall-mounted arm, clinical white --------------------- */
body[data-frame="hospital"] .tv {
  background:
    linear-gradient(175deg, #e8e4e0 0%, #d8d4d0 40%, #c8c4c0 100%);
  border: 1px solid #b0aca8;
  border-radius: 3px;
  box-shadow:
    0 15px 40px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.4);
}

body[data-frame="hospital"] .screen-shell {
  background: #1a1a1a;
  border-radius: 1px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.9);
}

body[data-frame="hospital"] .knob {
  background: radial-gradient(circle at 35% 30%, #ccc, #888 72%);
  box-shadow: 0 0 0 2px #999, 0 2px 6px rgba(0,0,0,0.4);
}

body[data-frame="hospital"] .knob-cap::after {
  background: #4a8a6a;
}

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

/* ---- pawnshop: behind glass, yellow price sticker ------------------- */
body[data-frame="pawnshop"] .tv {
  background:
    linear-gradient(170deg, #3a2a1a 0%, #2a1a0e 50%, #1a0e06 100%);
  border: 1px solid #2a1808;
  border-radius: 10px;
  box-shadow:
    0 25px 60px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(180,140,100,0.08);
}

/* glass reflection over the screen */
body[data-frame="pawnshop"] .screen::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(
      155deg,
      rgba(255,255,255,0.06) 0%,
      rgba(255,255,255,0.02) 30%,
      transparent 50%,
      rgba(255,255,255,0.03) 80%,
      rgba(255,255,255,0.05) 100%
    );
}

/* yellow price sticker on the bezel */
body[data-frame="pawnshop"] .screen-shell::after {
  content: "$14.99";
  position: absolute;
  top: 6%;
  right: 8%;
  z-index: 5;
  background: #ffe040;
  color: #1a1000;
  font-family: "Arial Narrow", "Segoe UI", sans-serif;
  font-size: 2.2cqw;
  font-weight: 900;
  padding: 0.3cqw 1.2cqw;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  transform: rotate(2deg);
  pointer-events: none;
}

/* ---- rainynight: TV by a rain-streaked window ----------------------- */
body[data-frame="rainynight"] .tv {
  background:
    linear-gradient(170deg, #2a2824 0%, #1a1814 50%, #0e0c08 100%);
  border: 1px solid #2a2820;
  border-radius: 14px;
  box-shadow:
    0 30px 80px rgba(0,0,0,0.75),
    inset 0 1px 0 rgba(200,180,140,0.06);
}

body[data-frame="rainynight"] .screen-shell {
  background: linear-gradient(155deg, #141210 0%, #0a0806 100%);
  border-radius: 10px;
}

body[data-frame="rainynight"] .knob {
  background: radial-gradient(circle at 35% 30%, #3a3834, #1a1814 72%);
}

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

/* ---- library: rich dark cabinet, brass accents ---------------------- */
body[data-frame="library"] .tv {
  background:
    linear-gradient(175deg, #2a1e14 0%, #1a1008 45%, #0e0804 100%);
  border: 2px solid #3a2a18;
  border-radius: 6px;
  box-shadow:
    0 35px 90px rgba(0,0,0,0.8),
    inset 0 2px 0 rgba(200,160,100,0.12),
    inset 0 -3px 10px rgba(0,0,0,0.6);
}

body[data-frame="library"] .screen-shell {
  background: linear-gradient(160deg, #1a1410 0%, #0c0806 100%);
  border-radius: 4px;
  box-shadow:
    inset 0 2px 8px rgba(0,0,0,0.9),
    /* brass frame around the screen */
    0 0 0 3px #8a6a3a,
    0 0 0 4px rgba(0,0,0,0.4);
}

body[data-frame="library"] .knob {
  background: radial-gradient(circle at 35% 30%, #8a6a3a, #4a2a10 65%, #1a0800 100%);
  box-shadow: 0 0 0 3px #6a4a2a, 0 0 0 4px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.5);
}

body[data-frame="library"] .knob-cap {
  background: radial-gradient(circle at 38% 32%, #a08050, #6a4a2a 50%, #2a1008 85%);
}

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

body[data-frame="library"] .knob-label {
  color: #8a6a3a;
  letter-spacing: 0.3em;
  font-family: Georgia, "Times New Roman", serif;
}