/* ── POWER OFF BUTTON ── */
.poweroff-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(10,10,10,.7);
  border: 1.5px solid rgba(255,255,255,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .3s, border-color .3s, box-shadow .3s, transform .2s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  flex-shrink: 0;
}
.poweroff-btn:hover {
  background: #C0272D;
  border-color: #C0272D;
  box-shadow: 0 0 20px rgba(192,39,45,.55);
  transform: scale(1.08);
}
.poweroff-btn svg {
  width: 16px;
  height: 16px;
  stroke: rgba(255,255,255,.75);
  transition: stroke .3s;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.poweroff-btn:hover svg { stroke: #fff; }

/* Selector page — bottom center */
#poweroff-selector {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}
#poweroff-selector .po-label {
  font-family: 'DM Sans', sans-serif;
  font-size: .55rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255,255,255,.25);
  white-space: nowrap;
}

/* Nav page — sits right after logo/name, before nav links */
#poweroff-nav {
  margin-left: .5rem;
  margin-right: auto; /* pushes nav links and cta to the right */
}

/* TV-off overlay */
#tv-off {
  position: fixed;
  inset: 0;
  z-index: 999999;
  pointer-events: none;
  display: none;
}
#tv-off.active { display: block; }

.tv-screen {
  position: fixed;
  inset: 0;
  background: #ffffff;
  animation: tvContract .65s cubic-bezier(.4,0,.2,1) forwards;
}

@keyframes tvContract {
  0%   { clip-path: inset(0% 0% 0% 0%);             opacity: 1; }
  35%  { clip-path: inset(44% 0% 44% 0%);            opacity: 1; }
  65%  { clip-path: inset(49.2% 0% 49.2% 0%);        opacity: 1; }
  80%  { clip-path: inset(49.2% 40% 49.2% 40%);      opacity: 1; }
  92%  { clip-path: inset(49.5% 49.5% 49.5% 49.5%);  opacity: 1; }
  100% { clip-path: inset(50% 50% 50% 50%);           opacity: 0; }
}