/* The television room. Same single theme as the rest of the foundry. */
.set { width: min(100%, 520px); display: grid; justify-items: center; }
.ears { position: relative; z-index: 2; width: 60%; height: 70px; }
.ear { position: absolute; bottom: 2px; left: 50%; width: 30px; height: 100px; margin-left: -15px; padding: 0; border: 0; background: none; cursor: grab;
  transform-origin: 50% 100%; touch-action: none; }
.ear::before { content: ""; position: absolute; left: 13px; top: 6px; bottom: 0; width: 4px; border-radius: 2px; background: linear-gradient(90deg, #6f6a78, #d9d6e0, #6f6a78); }
.ear::after { content: ""; position: absolute; top: 0; left: 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); }
.ear.held { cursor: grabbing; }
.ear.held::after { box-shadow: 0 0 10px #ffe9a8; }
.ear:focus-visible { outline: 2px dashed var(--teal); outline-offset: -2px; border-radius: 12px; }
.ear-base { position: absolute; left: 50%; bottom: -7px; width: 58px; height: 20px; margin-left: -29px; border-radius: 29px 29px 3px 3px;   /* it sits ON the set */
  background: linear-gradient(180deg, #46304c, #160c19); border: 2px solid #0b070d; }

.cabinet-tv {
  position: relative; z-index: 1; width: 100%; display: grid; grid-template-columns: 1fr 26%; gap: 3%; padding: 5%;
  border-radius: 28px 28px 16px 16px; border: 4px solid #1a0d10;
  background: repeating-linear-gradient(92deg, #6b3f2a 0 9px, #63392a 9px 15px, #704430 15px 26px);
  box-shadow: 0 22px 50px #000b, inset 0 0 0 3px #ffffff14, inset 0 -18px 30px #0006;
}
.tube { position: relative; aspect-ratio: 4 / 3; border-radius: 22% / 26%; overflow: hidden; background: #050507;
  border: 6px solid var(--gold); box-shadow: inset 0 0 40px #000, 0 0 0 3px #1a0d10; }
.tube canvas, .tube video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.tube video { filter: grayscale(1) contrast(1.15) brightness(1.05); image-rendering: auto; background: #050507; }
.tube video.colour { filter: saturate(.8) contrast(1.1); }
.tube .waiting { opacity: 0; pointer-events: none; }
.tube iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(1.15); }
.tube iframe.colour { filter: saturate(.8) contrast(1.1); }
#fuzz { pointer-events: none; opacity: 0; mix-blend-mode: screen; }
.tube.off canvas, .tube.off video { opacity: 0; }
.tube.warning video, .tube.warning iframe { opacity: 0; }
.glass { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 30% 18%, #ffffff2e 0%, transparent 42%),
    radial-gradient(ellipse at 50% 50%, transparent 55%, #000c 100%),
    repeating-linear-gradient(0deg, #0000 0 2px, #0004 2px 3px); }

.controls { display: grid; grid-template-rows: auto auto 1fr auto; gap: 6%; align-content: start; }
.plate, .plate:visited { display: block; justify-self: end; width: 46%; height: 11px; border-radius: 2px; border: 1px solid #3a2a0c; background: linear-gradient(180deg, #ffe9a8, #c9a24b 55%, #6d5119); }
.plate:hover, .plate:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.dial { position: relative; aspect-ratio: 1; }
.numbers span { position: absolute; left: 50%; top: 50%; font: bold 9.5px/1 Georgia, serif; color: var(--blush); transform: translate(-50%, -50%); }
.numbers span.here { color: #ffe9a8; text-shadow: 0 0 6px #ffe9a8; }
.knob-tv { position: absolute; inset: 22%; border-radius: 50%; border: 3px solid #1a0d10; cursor: pointer; padding: 0;
  background: radial-gradient(circle at 35% 30%, #ffe9a8, var(--gold) 60%, #6d5119); transition: transform .18s cubic-bezier(.3, 1.6, .5, 1); }
.knob-tv span { position: absolute; left: 50%; top: 6%; width: 4px; height: 34%; margin-left: -2px; border-radius: 2px; background: #1a0d10; }
.knob-tv:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.grille { border-radius: 8px; border: 3px solid #1a0d10; min-height: 60px;
  background: repeating-linear-gradient(0deg, #1a0d10 0 4px, #c9a24b 4px 6px); box-shadow: inset 0 0 12px #000; }

.legs { display: flex; justify-content: space-between; width: 78%; height: 46px; }
.legs i { width: 12px; height: 100%; background: linear-gradient(90deg, #3a2018, #6b3f2a); border-radius: 0 0 6px 6px; }
.legs i:first-child { transform: skewX(12deg); }
.legs i:last-child { transform: skewX(-12deg); }

.door.small { width: 46px; height: 72px; border-radius: 23px 23px 3px 3px; border-width: 3px; }
.door.small .knob { width: 7px; height: 7px; right: 7px; }

@media (prefers-reduced-motion: reduce) { .knob-tv { transition: none; } }

/* the power switch: a rocker with a little neon lamp beside it */
.power { display: flex; align-items: center; gap: 8px; justify-self: center; padding: 3px 6px; border: 0; background: none; cursor: pointer; }
.power .lamp { width: 9px; height: 9px; border-radius: 50%; background: #3a1414; border: 1px solid #1a0d10; transition: background .3s, box-shadow .3s; }
.power.on .lamp { background: #ff7a3c; box-shadow: 0 0 9px #ff7a3c, 0 0 2px #fff inset; }
.power .rocker { width: 34px; height: 16px; border-radius: 4px; border: 2px solid #1a0d10; background: linear-gradient(90deg, #15101a 0 50%, #d9d6e0 50% 100%); box-shadow: inset 0 0 0 1px #0006; transition: background .12s; }
.power.on .rocker { background: linear-gradient(90deg, #d9d6e0 0 50%, #15101a 50% 100%); }
.power:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; border-radius: 6px; }

/* switching on and off, a slap, a finger on the glass */
.tube.warming canvas, .tube.warming video, .tube.warming iframe { animation: warm .9s ease-out; }
@keyframes warm { 0% { transform: scale(.02, .004); filter: brightness(6); } 35% { transform: scale(1, .006); filter: brightness(4); } 100% { transform: scale(1); filter: none; } }
.tube.collapsing canvas, .tube.collapsing video, .tube.collapsing iframe { animation: collapse .5s ease-in forwards; }
@keyframes collapse { 0% { transform: scale(1); } 55% { transform: scale(1, .006); filter: brightness(5); } 100% { transform: scale(.01, .004); filter: brightness(9); opacity: 0; } }
.tube.rolling canvas, .tube.rolling video, .tube.rolling iframe { animation: roll .75s linear; }
@keyframes roll { 0% { transform: translateY(0); } 49.9% { transform: translateY(-100%); } 50% { transform: translateY(100%); } 100% { transform: translateY(0); } }
.spark { position: absolute; width: 0; height: 0; pointer-events: none; z-index: 5; }
.spark::before { content: ""; position: absolute; left: -70px; top: -70px; width: 140px; height: 140px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 6%, #cfe0f3cc 12%, #cfe0f300 60%); animation: spark .3s ease-out forwards; }
@keyframes spark { 0% { transform: scale(.2); opacity: 1; } 100% { transform: scale(1.3); opacity: 0; } }
body.jolt main { animation: jolt .18s linear; }
@keyframes jolt { 25% { transform: translate(3px, -2px); } 50% { transform: translate(-3px, 1px); } 75% { transform: translate(2px, 2px); } }
.cabinet-tv { cursor: default; }
.tube { cursor: crosshair; }

.door.small.humming { background: linear-gradient(180deg, #c9a24b, #6d5119); animation: hum 1.1s ease-in-out infinite; }
@keyframes hum { 50% { transform: translateY(-1.5px) rotate(.6deg); } }
@media (prefers-reduced-motion: reduce) { .door.small.humming { animation: none; } }