:root {
  color-scheme: dark;
  background: #050207;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #050207;
}

body {
  display: grid;
  place-items: center;
}

.room {
  display: grid;
  width: 100vw;
  height: 100dvh;
  place-items: center;
  background: #050207;
}

.scene {
  position: relative;
  width: min(100vw, 150dvh);
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: #050207;
}

.scene-media {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
}

.room-source,
.room-plate {
  z-index: 2;
  pointer-events: none;
}

.room-source {
  opacity: 1;
}

.room-source.is-keyed {
  opacity: 0;
}

.room-plate {
  opacity: 0;
}

.room-plate.is-ready {
  opacity: 1;
}

.tv-screen {
  position: absolute;
  z-index: 1;
  top: 26.75%;
  left: 19.7%;
  width: 15.25%;
  height: 34.25%;
  overflow: hidden;
  background: #050207;
  transform: translateZ(0);
}

.tv-video::after {
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  content: "";
  background:
    repeating-linear-gradient(
      to bottom,
      rgb(255 255 255 / 0.025) 0,
      rgb(255 255 255 / 0.025) 1px,
      rgb(0 0 0 / 0.05) 2px,
      rgb(0 0 0 / 0.05) 4px
    ),
    radial-gradient(ellipse at center, transparent 58%, rgb(0 0 0 / 0.4) 100%);
  mix-blend-mode: multiply;
}

.tv-video {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #050207;
  filter: saturate(0.9) contrast(1.08) brightness(0.9);
}

#shorts-player,
#shorts-player iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.tv-sound {
  position: absolute;
  z-index: 4;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  cursor: pointer;
  border: 0;
  background: transparent;
}
.tv-knob { position:absolute; z-index:8; width:2.3%; aspect-ratio:1; padding:0; border:1px solid transparent; border-radius:50%; background:transparent; cursor:pointer; }
.tv-knob:hover,.tv-knob:focus-visible { border-color:#e5a9ff; box-shadow:0 0 12px #b936ff; outline:0; }
.tv-knob-sound { left:20.7%; top:62.3%; }
.tv-knob-next { left:25.35%; top:62.3%; }
.room-sector { position:absolute; z-index:5; padding:0; border:0; background:transparent; cursor:zoom-in; }
.room-sector span { position:absolute; left:50%; bottom:6%; padding:5px 8px; transform:translateX(-50%) translateY(5px); border:1px solid rgba(224,174,255,.45); border-radius:999px; background:rgba(13,3,27,.72); color:#f3d7ff; font:700 clamp(6px,.55vw,10px)/1 Arial,sans-serif; letter-spacing:.12em; opacity:0; transition:.18s; }
.room-sector:hover span,.room-sector:focus-visible span { opacity:1; transform:translateX(-50%); }
.sector-tv { left:2%; top:10%; width:35%; height:82%; }
.sector-anubis { left:42%; top:3%; width:38%; height:65%; }
.sector-pigeon { left:39%; top:58%; width:57%; height:40%; }
.sector-overlay { position:absolute; z-index:20; inset:0; display:grid; place-items:center; pointer-events:none; background:transparent; animation:sector-in .22s ease-out; }
.sector-overlay[hidden] { display:none; }
.sector-zoom { width:min(76%,980px); height:76%; border:0; border-radius:32% 24% 29% 25%; background-image:url('./assets/tv-room.jpg'); background-repeat:no-repeat; filter:drop-shadow(0 25px 35px rgba(0,0,0,.68)) drop-shadow(0 0 24px rgba(192,67,255,.2)); clip-path:polygon(8% 4%,91% 0,100% 17%,96% 88%,82% 100%,10% 95%,0 78%,3% 15%); }
.sector-overlay > button { position:absolute; z-index:28; top:3%; right:3%; width:44px; height:44px; pointer-events:auto; border:1px solid rgba(255,255,255,.5); border-radius:50%; background:#160823; color:white; font-size:27px; cursor:pointer; }
.sector-overlay p { position:absolute; z-index:27; bottom:3%; margin:0; padding:8px 13px; border-radius:999px; color:#f9dcff; background:rgba(16,4,28,.78); font:900 clamp(12px,1.5vw,22px)/1 Arial,sans-serif; letter-spacing:.18em; }
.focus-tv-screen { position:absolute; z-index:25; left:41%; top:23%; width:38%; height:53%; overflow:hidden; pointer-events:auto; background:#050207; border-radius:8% 6% 7% 8%; transform:perspective(700px) rotateY(-1deg); }
.focus-tv-screen[aria-hidden="true"] { display:none; }
.focus-tv-screen #shorts-player,.focus-tv-screen iframe { width:100%!important; height:100%!important; }
.scene[data-focus="anubis"] .puff-window { z-index:26; top:10%; left:50%; width:24%; height:56%; opacity:1; transform:scale(1.08); }
.scene[data-focus="anubis"] .sector-zoom { width:min(68%,850px); background-position:69% 18%!important; background-size:245%!important; }
.scene[data-focus="pigeon"] .sector-zoom { width:min(72%,920px); background-position:67% 90%!important; background-size:230%!important; }
.scene[data-focus="tv"] .sector-zoom { width:min(76%,980px); background-position:8% 49%!important; background-size:285%!important; }
@keyframes sector-in { from { opacity:0; transform:scale(.98); } }

.tv-sound:focus-visible {
  outline: 3px solid #d87cff;
  outline-offset: -8px;
}

.puff-window {
  position: absolute;
  z-index: 3;
  top: 3.5%;
  left: 58.7%;
  width: 14.2%;
  height: 46%;
  overflow: hidden;
  opacity: 0;
  transition: opacity 240ms ease-in-out;
  -webkit-mask-image: radial-gradient(
    ellipse 60% 56% at 50% 47%,
    #000 78%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 60% 56% at 50% 47%,
    #000 78%,
    transparent 100%
  );
}

.puff-window.is-playing {
  opacity: 1;
}

.puff {
  position: absolute;
  top: -8.8%;
  left: -122.2%;
  display: block;
  width: 411.5%;
  height: auto;
  max-width: none;
}

@media (prefers-reduced-motion: reduce) {
  .puff-window {
    transition: none;
  }
}
@media (max-aspect-ratio: 3/4) {
  .room {
    align-items:start;
    padding-top:clamp(42px,12dvh,104px);
    background:
      radial-gradient(circle at 50% 34%,rgba(104,38,135,.24),transparent 48%),
      linear-gradient(180deg,#09020d 0%,#17071d 54%,#050207 100%);
  }
  .scene { width:100vw; height:auto; aspect-ratio:3/2; overflow:visible; box-shadow:0 20px 55px rgba(0,0,0,.72); }
  .scene-media { object-fit:contain; object-position:center; }
  .sector-overlay { position:fixed; }
  .sector-zoom { width:92%; height:68%; border-radius:16px; }
  .focus-tv-screen { left:39%; top:27%; width:47%; height:45%; }
  .scene[data-focus="anubis"] .puff-window { top:18%; left:48%; width:27%; height:42%; }
  .room-sector span { bottom:3%; padding:6px 8px; font-size:7px; opacity:1; }
  .tv-knob { width:5%; }
}


.boost-metrics { position:fixed; z-index:40; right:18px; top:18px; width:76px; height:76px; border-radius:50%; border:1px solid #e9b7ff; background:radial-gradient(circle at 30% 22%,#f9dcff,#be49df 25%,#482485 62%,#180725); color:white; font:800 14px/1.05 Arial,sans-serif; box-shadow:0 0 25px #ab3eff70,inset -8px -8px 18px #100323; cursor:pointer; }
.boost-metrics[aria-pressed="true"] { border-color:#a0ffea; box-shadow:0 0 30px #70ffd090; }
.social-stack { position:absolute; z-index:9; left:1%; bottom:4%; width:17%; height:61%; display:grid; grid-template-rows:repeat(3,minmax(0,1fr)); gap:1%; }
.social-stack[hidden],.social-audio[hidden] { display:none; }
.social-tv { min-height:0; display:grid; grid-template-rows:minmax(0,1fr) auto; padding:6px; border:2px solid #605669; border-radius:10px; background:linear-gradient(125deg,#403644,#19151d 65%); box-shadow:inset 1px 1px #9a8197,3px 5px 10px #000b; }
.social-tv__screen { position:relative; overflow:hidden; min-height:0; border:3px solid #09090b; border-radius:6px; background:#08060c; }
.social-tv__screen iframe,.social-tv__screen video,.social-tv__screen>img { display:block; width:100%; height:100%; object-fit:contain; border:0; }
.social-tv footer { display:flex; align-items:center; justify-content:space-between; min-height:22px; gap:4px; padding-top:3px; }
.social-tv footer a { color:#e4cae5; font:700 12px/1 Arial,sans-serif; text-transform:uppercase; text-decoration:none; }
.social-tv footer button { padding:1px 7px; border:1px solid #695769; border-radius:8px; background:#28202c; color:#b5fff1; cursor:pointer; font-size:16px; }
.social-tv__fallback { display:flex; flex-direction:column; justify-content:center; align-items:center; width:100%; height:100%; gap:5px; padding:6px; text-align:center; text-decoration:none; color:#dec7ef; background:radial-gradient(ellipse at top,#351444,#0c0714); overflow:auto; font:12px/1.3 Arial,sans-serif; overflow-wrap:anywhere; }
.social-tv__fallback strong { font-size:12px; }.social-tv__fallback span:last-child { color:#b2ffdf; }.social-tv__fallback img { width:100%;max-height:65%;object-fit:contain; }
.social-audio { position:fixed; bottom:8px; left:8px; z-index:35; display:flex; gap:4px; align-items:center; max-width:calc(100vw - 16px); overflow:auto; padding:6px; border:1px solid #86509e; border-radius:12px; background:#160c20ed; color:#b4a3bc; font:700 12px/1 Arial,sans-serif; }
.social-audio button { white-space:nowrap; border:1px solid #58445f; border-radius:7px; padding:8px; color:#e8d7ef; background:#271330; cursor:pointer; font-size:12px; }.social-audio button[aria-pressed="true"] { color:#152019; background:#acffda; }
.scene[data-focus] .social-stack { visibility:hidden; }
@media (max-width:600px) { .boost-metrics { width:64px;height:64px;right:10px;top:10px; }.social-tv {padding:2px;border-width:1px;border-radius:5px;}.social-tv__screen{border-width:1px;}.social-tv footer a{font-size:10px}.social-tv footer button{padding:0 3px}.social-tv__fallback{padding:2px;font-size:10px}.social-tv__fallback strong{font-size:10px}.social-tv__fallback span:not(:last-child){display:none;} }