@charset "utf-8";
/* CSS Document */

 * { box-sizing: border-box; margin: 0; padding: 0; }

    body { background: #000; min-height: 100vh; }

    .container-fluid2 {
      width: 100%;
      min-height: 100vh;
      background: #000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 40px 16px;
    }

    .container2 {
      width: 100%;
      max-width: 980px;
      position: relative;
      padding-top: 105px;
      padding-bottom: 40px;
    }

    /* ---------- Antenna ---------- */
    .antenna {
      position: absolute;
      top: 0;
      left: 50%;
      width: 190px;
      height: 115px;
      transform: translateX(-50%);
    }
    .antenna::before,
    .antenna::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 50%;
      width: 5px;
      height: 115px;
      background: linear-gradient(#e6e6e6, #808080);
      border-radius: 3px;
      transform-origin: bottom center;
    }
    .antenna::before { transform: translateX(-50%) rotate(-34deg); }
    .antenna::after  { transform: translateX(-50%) rotate(34deg); }
    .antenna-base {
      position: absolute;
      bottom: -10px;
      left: 50%;
      width: 70px;
      height: 26px;
      transform: translateX(-50%);
      background: radial-gradient(circle at 50% 0, #666, #222);
      border-radius: 50% 50% 0 0;
      z-index: 2;
    }

    /* ---------- TV body ---------- */
    .tv {
      position: relative;
      display: flex;
      gap: 24px;
      padding: 34px;
      border-radius: 42px;
      background:
        repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 2px, transparent 2px 7px),
        linear-gradient(145deg, #a8693a, #6e3f1f 60%, #4d2a13);
      box-shadow:
        inset 0 4px 8px rgba(255,255,255,.25),
        inset 0 -8px 18px rgba(0,0,0,.5),
        0 40px 80px rgba(0,0,0,.85),
        0 0 0 3px #2b1608;
    }

    /* ---------- Screen ---------- */
    .screen-wrap {
      flex: 1 1 auto;
      padding: 22px;
      border-radius: 48px / 40px;
      background: #1a1a1a;
      box-shadow:
        inset 0 0 22px #000,
        0 0 0 4px #3a2210,
        0 3px 0 4px rgba(255,255,255,.12);
    }

    .screen {
      position: relative;
      aspect-ratio: 4 / 3;
      overflow: hidden;
      border-radius: 32px / 27px;
      background: #000;
      box-shadow: inset 0 0 50px rgba(0,0,0,.9);
    }

    .screen video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      filter: contrast(1.1) saturate(.85) brightness(1.05) sepia(.12);
    }

    /* scanlines */
    .screen::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      background: repeating-linear-gradient(
        to bottom,
        rgba(0,0,0,0) 0,
        rgba(0,0,0,0) 2px,
        rgba(0,0,0,.22) 3px,
        rgba(0,0,0,0) 4px
      );
    }

    /* glass glare + vignette */
    .screen::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 3;
      pointer-events: none;
      background:
        radial-gradient(ellipse at 28% 18%, rgba(255,255,255,.2), transparent 38%),
        radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.65) 100%);
    }
    .tv.on .screen::after { animation: flicker 3s infinite steps(1); }

    @keyframes flicker {
      0%, 100% { opacity: 1; }
      47% { opacity: .93; }
      50% { opacity: .85; }
      53% { opacity: .97; }
    }

    /* Black cover: fully closed when the TV is off (default state) */
    .crt-off {
      position: absolute;
      inset: 0;
      z-index: 4;
      background: #000;
      pointer-events: none;
      opacity: 1;
    }
    .crt-off::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 3px;
      background: #fff;
      border-radius: 50%;
      box-shadow: 0 0 14px 4px rgba(255,255,255,.8);
      transform: translate(-50%, -50%);
      opacity: 0;
    }
    .tv.on  .crt-off { animation: turn-on .6s forwards; }
    .tv.off .crt-off { animation: turn-off .55s forwards; }
    .tv.off .crt-off::after { animation: dot-off .55s forwards; }

    @keyframes turn-on {
      0%   { opacity: 1; clip-path: inset(49% 0 49% 0); }
      60%  { opacity: 1; clip-path: inset(0 0 0 0); background: #fff; }
      100% { opacity: 0; clip-path: inset(0 0 0 0); background: #fff; }
    }
    @keyframes turn-off {
      0%   { opacity: 0; clip-path: inset(0 0 0 0); background: #000; }
      45%  { opacity: 1; clip-path: inset(0 0 0 0); background: #000; }
      100% { opacity: 1; background: #000; }
    }
    @keyframes dot-off {
      0%, 30% { opacity: 0; width: 0; }
      45%     { opacity: 1; width: 100%; }
      80%     { opacity: 1; width: 6px; height: 6px; }
      100%    { opacity: 0; width: 0; }
    }

    /* ---------- Control panel ---------- */
    .panel {
      flex: 0 0 150px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 22px;
      padding: 22px 12px;
      border-radius: 22px;
      background: linear-gradient(160deg, #3b2a1c, #1f150d);
      box-shadow: inset 0 3px 8px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.15);
    }

    /* power button */
    .power-group {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }
    .power-led {
      width: 11px;
      height: 11px;
      border-radius: 50%;
      background: #4a1511;
      transition: background .2s, box-shadow .2s;
    }
    .tv.on .power-led {
      background: #ff3b30;
      box-shadow: 0 0 10px #ff3b30, 0 0 18px rgba(255,59,48,.6);
    }

    .power-btn {
      width: 70px;
      height: 70px;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      position: relative;
      background: radial-gradient(circle at 35% 30%, #4a4a4a, #151515 70%);
      box-shadow:
        0 7px 12px rgba(0,0,0,.8),
        0 0 0 4px #0c0c0c,
        inset 0 2px 3px rgba(255,255,255,.25);
      transition: transform .08s, box-shadow .08s;
    }
    .power-btn:active {
      transform: translateY(3px);
      box-shadow:
        0 3px 6px rgba(0,0,0,.8),
        0 0 0 4px #0c0c0c,
        inset 0 2px 6px rgba(0,0,0,.6);
    }
    .power-btn:focus-visible { outline: 3px solid #ffd27a; outline-offset: 5px; }

    /* power symbol: ring with a gap + vertical line */
    .power-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 30px;
      height: 30px;
      transform: translate(-50%, -46%);
    }
    .power-icon::before {
      content: "";
      position: absolute;
      inset: 0;
      border: 5px solid #c9c9c9;
      border-top-color: transparent;
      border-radius: 50%;
      transition: border-color .2s, filter .2s;
    }
    .power-icon::after {
      content: "";
      position: absolute;
      top: -8px;
      left: 50%;
      width: 5px;
      height: 19px;
      background: #c9c9c9;
      border-radius: 3px;
      transform: translateX(-50%);
      transition: background .2s, filter .2s;
    }
    .tv.on .power-icon::before { border-color: #7dffa0; border-top-color: transparent; filter: drop-shadow(0 0 4px #43e37a); }
    .tv.on .power-icon::after  { background: #7dffa0; filter: drop-shadow(0 0 4px #43e37a); }

    .btn-label {
      font: 700 11px/1 "Courier New", monospace;
      letter-spacing: 2px;
      color: #b8a98e;
    }

    /* knobs */
    .knob {
      width: 74px;
      height: 74px;
      border-radius: 50%;
      position: relative;
      background: radial-gradient(circle at 35% 30%, #f1e7d6, #b8a98e 45%, #6d6250);
      box-shadow: 0 6px 10px rgba(0,0,0,.7), inset 0 -4px 6px rgba(0,0,0,.35);
    }
    .knob::after {
      content: "";
      position: absolute;
      top: 7px;
      left: 50%;
      width: 5px;
      height: 20px;
      background: #2b1608;
      border-radius: 3px;
      transform: translateX(-50%);
      transform-origin: 50% 30px;
    }
    .knob.channel::after { transform: translateX(-50%) rotate(-40deg); }
    .knob.volume::after  { transform: translateX(-50%) rotate(55deg); }

    .speaker {
      width: 104px;
      height: 104px;
      margin-top: auto;
      border-radius: 12px;
      background: repeating-linear-gradient(to bottom, #000 0 4px, #2c2c2c 4px 10px);
      box-shadow: inset 0 0 10px #000, 0 1px 0 rgba(255,255,255,.15);
    }

    /* ---------- Legs ---------- */
    .leg {
      position: absolute;
      bottom: 0;
      width: 46px;
      height: 52px;
      background: linear-gradient(#4d2a13, #1f1008);
      z-index: -1;
    }
    .leg.left  { left: 115px;  transform: skewX(12deg); }
    .leg.right { right: 115px; transform: skewX(-12deg); }

    /* ---------- Small screens ---------- */
    @media (max-width: 760px) {
      .tv { flex-direction: column; padding: 20px; }
      .screen-wrap { padding: 14px; }
      .panel { flex: none; flex-direction: row; flex-wrap: wrap; justify-content: space-around; }
      .speaker { display: none; }
      .knob { width: 60px; height: 60px; }
      .knob::after { transform-origin: 50% 24px; height: 16px; }
      .leg.left { left: 50px; }
      .leg.right { right: 50px; }
    }