/* Photographic skin compositor.
   Every receiver plate is independently aligned around one immutable 4:3
   broadcast aperture. Plate position and control hotspot may vary; the live
   screen's x/y/width never do. This file intentionally loads after the legacy
   cabinet CSS so the generated photography is the rendered source of truth. */

body[data-frame] {
  --photo-screen-x: 50%;
  --photo-screen-y: 55%;
  --photo-screen-width: 37.5%;
  --photo-screen-radius: 7% / 9%;
  --photo-plate-width: 128%;
  --photo-plate-x: 50%;
  --photo-plate-y: 50%;
  --photo-control-x: 30.7%;
  --photo-control-y: 93%;
  --photo-control-size: 8%;
}

body[data-frame="monday"] {
  --photo-frame-image: url("../media/frames/monday.png");
}

body[data-frame="tuesday"] {
  --photo-frame-image: url("../media/frames/tuesday.png");
  --photo-plate-width: 114%;
  --photo-plate-x: 53.7%;
  --photo-plate-y: 57.6%;
  --photo-screen-radius: 5% / 7%;
  --photo-control-x: 77.4%;
  --photo-control-y: 36.4%;
  --photo-control-size: 6.5%;
}

body[data-frame="wednesday"] {
  --photo-frame-image: url("../media/frames/wednesday.png");
  --photo-plate-width: 126%;
  --photo-plate-y: 50.8%;
  --photo-screen-radius: 4% / 6%;
  --photo-control-x: 30.8%;
  --photo-control-y: 91%;
  --photo-control-size: 9%;
}

body[data-frame="thursday"] {
  --photo-frame-image: url("../media/frames/thursday.png");
  --photo-plate-width: 117%;
  --photo-plate-x: 49.6%;
  --photo-plate-y: 61.5%;
  --photo-screen-radius: 4% / 5%;
  --photo-control-x: 45%;
  --photo-control-y: 94%;
  --photo-control-size: 9%;
}

body[data-frame="friday"] {
  --photo-frame-image: url("../media/frames/friday.png");
  --photo-plate-width: 134%;
  --photo-plate-x: 49.5%;
  --photo-plate-y: 53.8%;
  --photo-screen-radius: 11% / 14%;
  --photo-control-x: 32.1%;
  --photo-control-y: 88.9%;
  --photo-control-size: 7.5%;
}

body[data-frame="saturday"] {
  --photo-frame-image: url("../media/frames/saturday.png");
  --photo-plate-width: 127%;
  --photo-plate-x: 54.2%;
  --photo-plate-y: 69.9%;
  --photo-screen-radius: 2% / 3%;
  --photo-control-x: 46.6%;
  --photo-control-y: 90.2%;
  --photo-control-size: 9%;
}

body[data-frame="sunday"] {
  --photo-frame-image: url("../media/frames/sunday.png");
  --photo-plate-width: 104%;
  --photo-plate-x: 50.1%;
  --photo-plate-y: 54.1%;
  --photo-screen-radius: 10% / 13%;
}

body[data-frame="wildcard"] {
  --photo-frame-image: url("../media/frames/wildcard.png");
  --photo-plate-width: 98%;
  --photo-plate-y: 56.3%;
  --photo-screen-radius: 1.5%;
  --photo-control-x: 34.5%;
  --photo-control-y: 89.6%;
  --photo-control-size: 15%;
}

body[data-frame="cracked"] {
  --photo-frame-image: url("../media/frames/cracked.png");
  --photo-plate-width: 121%;
  --photo-plate-x: 49.7%;
  --photo-plate-y: 51%;
  --photo-control-x: 31.8%;
  --photo-control-y: 92.1%;
  --photo-control-size: 7.5%;
}

body[data-frame="basement"] {
  --photo-frame-image: url("../media/frames/basement.png");
  --photo-plate-width: 118%;
  --photo-plate-x: 51.1%;
  --photo-plate-y: 52.8%;
  --photo-screen-radius: 5% / 7%;
  --photo-control-x: 76%;
  --photo-control-y: 35.1%;
  --photo-control-size: 6.5%;
}

body[data-frame="hospital"] {
  --photo-frame-image: url("../media/frames/hospital.png");
  --photo-plate-width: 118%;
  --photo-plate-x: 49.9%;
  --photo-plate-y: 56.7%;
  --photo-screen-radius: 6% / 9%;
  --photo-control-x: 32.3%;
  --photo-control-y: 92%;
  --photo-control-size: 7%;
}

body[data-frame="pawnshop"] {
  --photo-frame-image: url("../media/frames/pawnshop.png");
  --photo-plate-width: 127%;
  --photo-plate-x: 50.1%;
  --photo-plate-y: 58.1%;
  --photo-control-x: 30.8%;
  --photo-control-y: 94%;
  --photo-control-size: 7.5%;
}

body[data-frame="rainynight"] {
  --photo-frame-image: url("../media/frames/rainynight.png");
  --photo-plate-width: 127%;
  --photo-plate-x: 49.9%;
  --photo-plate-y: 48%;
  --photo-control-x: 30.9%;
  --photo-control-y: 91.2%;
  --photo-control-size: 7.5%;
}

body[data-frame="library"] {
  --photo-frame-image: url("../media/frames/library.png");
  --photo-plate-width: 122%;
  --photo-plate-x: 50.2%;
  --photo-plate-y: 56.7%;
  --photo-screen-radius: 5% / 7%;
  --photo-control-x: 32.9%;
  --photo-control-y: 90.9%;
  --photo-control-size: 7%;
}

body[data-frame] .room {
  padding: 0;
}

body[data-frame] .tv {
  position: relative;
  display: block;
  isolation: isolate;
  width: min(100vw, calc(100vh * 16 / 9));
  max-width: none;
  aspect-ratio: 16 / 9;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

body[data-frame] .tv::before {
  content: "";
  position: absolute;
  left: var(--photo-plate-x);
  top: var(--photo-plate-y);
  z-index: 0;
  width: var(--photo-plate-width);
  aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: var(--photo-frame-image) center / 100% 100% no-repeat;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at center, #000 58%, rgba(0, 0, 0, 0.92) 68%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at center, #000 58%, rgba(0, 0, 0, 0.92) 68%, transparent 100%);
}

body[data-frame] .screen-shell {
  position: absolute;
  left: var(--photo-screen-x);
  top: var(--photo-screen-y);
  z-index: 1;
  width: var(--photo-screen-width);
  padding: 0;
  transform: translate(-50%, -50%);
  background: #070707;
  border-radius: var(--photo-screen-radius);
  box-shadow: none;
  overflow: hidden;
}

body[data-frame] .screen {
  width: 100%;
  max-width: none;
  border-radius: var(--photo-screen-radius);
  box-shadow: none;
}

body[data-frame] .screen::after {
  border-radius: var(--photo-screen-radius);
}

body[data-frame] .panel {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  min-width: 0;
  opacity: 1;
  pointer-events: none;
}

body[data-frame] .panel .knob-block:first-child {
  position: absolute;
  left: var(--photo-control-x);
  top: var(--photo-control-y);
  width: var(--photo-control-size);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}

body[data-frame] .panel .knob-block:not(:first-child),
body[data-frame] .panel .grille,
body[data-frame] .panel .knob-label,
body[data-frame] .panel .knob-cap {
  display: none;
}

body[data-frame] .panel .knob {
  width: 100%;
  height: 100%;
  background: transparent;
  border-radius: 50%;
  box-shadow: none;
  pointer-events: auto;
}

body[data-frame] .panel .knob-hit {
  pointer-events: auto;
}

body[data-frame] .panel .knob-hit:focus-visible {
  outline: 0;
}

body[data-frame] .panel .knob:has(.knob-hit:hover) {
  box-shadow: 0 0 0 1px rgba(255, 210, 122, 0.45);
}

body[data-frame] .panel .knob:has(.knob-hit:focus-visible) {
  box-shadow:
    0 0 0 2px #ffd27a,
    0 0 16px rgba(255, 210, 122, 0.35);
}

body[data-frame="sunday"] .panel {
  display: none;
}

/* These details are already physically present in their generated plates. */
body[data-frame="pawnshop"] .screen-shell::after {
  content: none;
}

/* Re-project the photographed hairline crack over the live broadcast. Screen
   blending keeps the dark glass transparent while the actual fissure catches
   changing light from the channel beneath it. */
body[data-frame="cracked"] .screen::before {
  background: url("../media/frames/cracked.png") center 52% / 330% auto no-repeat;
  mix-blend-mode: screen;
  filter: grayscale(1) brightness(1.65) contrast(1.15);
  opacity: 0.38;
}

/* Generated environment plates. Existing rain, dust and torch pseudo-elements
   remain as restrained motion layers over these photographic sources. */

body[data-atmosphere="warm-void"] { --photo-atmosphere-image: url("../media/atmospheres/warm-void.png"); }
body[data-atmosphere="rain-window"] { --photo-atmosphere-image: url("../media/atmospheres/rain-window.png"); }
body[data-atmosphere="dust-motes"] { --photo-atmosphere-image: url("../media/atmospheres/dust-motes.png"); }
body[data-atmosphere="distant-city"] { --photo-atmosphere-image: url("../media/atmospheres/distant-city.png"); }
body[data-atmosphere="wallpaper"] { --photo-atmosphere-image: url("../media/atmospheres/wallpaper.png"); }
body[data-atmosphere="bookshelf"] { --photo-atmosphere-image: url("../media/atmospheres/bookshelf.png"); }
body[data-atmosphere="concrete"] { --photo-atmosphere-image: url("../media/atmospheres/concrete.png"); }
body[data-atmosphere="torchlight"] { --photo-atmosphere-image: url("../media/atmospheres/torchlight.png"); }

body[data-atmosphere] .room {
  background:
    linear-gradient(rgba(4, 4, 5, 0.08), rgba(4, 4, 5, 0.25)),
    #060504 var(--photo-atmosphere-image) center / cover no-repeat;
}

body[data-atmosphere="distant-city"] .room::before,
body[data-atmosphere="wallpaper"] .room::before,
body[data-atmosphere="bookshelf"] .room::before,
body[data-atmosphere="concrete"] .room::before {
  background: none;
  animation: none;
}

@media (max-aspect-ratio: 4 / 5) {
  body[data-frame] .tv {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(210vw, calc(100vh * 16 / 9));
    transform: translate(-50%, -50%);
  }
}