*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#050708}
body{overflow-x:hidden}

/*
  The approved design is the entire stage.
  Everything scales together from the original 1536x1024 artwork.
*/
.trump-tv{
    position:relative;
    width:min(1536px,100vw);
    aspect-ratio:3/2;
    margin:0 auto;
    background:#050708;
    overflow:hidden;
    box-shadow:0 0 70px #000;
}
.studio-art{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
    user-select:none;
    pointer-events:none;
}

/*
  EXACT CRT GLASS AREA in the approved artwork.
  The real YouTube iframe is laid over the fake screen image.
*/
.crt-screen{
    position:absolute;
    z-index:5;
    left:25.65%;
    top:20.15%;
    width:39.75%;
    height:41.45%;
    overflow:hidden;
    border-radius:9% / 12%;
    background:#000;
    box-shadow:
        inset 0 0 30px rgba(0,0,0,.9),
        0 0 8px rgba(213,169,96,.28);
}
.crt-screen iframe{
    position:absolute;
    z-index:1;
    left:0;
    top:0;
    width:100%;
    height:100%;
    border:0;
    background:#000;
}
.glass{
    position:absolute;
    z-index:3;
    inset:0;
    pointer-events:none;
    border-radius:inherit;
    background:
      radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.32) 100%),
      linear-gradient(115deg,rgba(255,255,255,.055),transparent 27%);
    box-shadow:inset 0 0 20px rgba(0,0,0,.55);
}
.scanlines{
    position:absolute;
    z-index:4;
    inset:0;
    pointer-events:none;
    opacity:.12;
    border-radius:inherit;
    background:repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,.35) 0,
      rgba(0,0,0,.35) 1px,
      transparent 1px,
      transparent 4px
    );
}

/* Actual controls placed over the six visual controls already in the design. */
.controls{
    position:absolute;
    z-index:10;
    left:6.65%;
    right:6.15%;
    top:88.05%;
    height:5.05%;
    display:grid;
    grid-template-columns:1.02fr 1.1fr 1fr 1fr 1.05fr 1.3fr;
    gap:1.55%;
}
.controls button,.controls a{
    border:1px solid rgba(210,166,92,.45);
    border-radius:6px;
    background:rgba(24,14,7,.22);
    color:#f1d9ad;
    font-family:Georgia,"Times New Roman",serif;
    font-size:clamp(8px,1vw,15px);
    letter-spacing:.04em;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.55em;
    text-decoration:none;
    cursor:pointer;
    text-shadow:0 1px 3px #000;
}
.controls button:hover,.controls a:hover{
    background:rgba(111,70,29,.38);
    border-color:#d0a35d;
}

@media(max-width:700px){
    .trump-tv{
        width:100vw;
        min-width:0;
    }
    .controls span{display:none}
    .controls button,.controls a{font-size:14px}
    .scanlines{opacity:.08}
}

/* Fullscreen keeps the complete studio artwork centered. */
.trump-tv:fullscreen{
    width:100vw;
    height:100vh;
    aspect-ratio:auto;
    background:#000;
}
.trump-tv:fullscreen .studio-art{
    object-fit:contain;
}