@import url('https://fonts.googleapis.com/css?family=Orbitron:wght@700&display=swap');

/* Background color logic for power button toggle */
body {
  background: radial-gradient(ellipse at center, #d60431 0%, #b1001a 70%, #ff3366 100%);
  transition: background 0.32s cubic-bezier(.31,1.08,.49,.91);
}
.tv-off-bg {
  background: linear-gradient(135deg, #063c23 0%, #0a2412 100%) !important;
}

/* Green-glow styles when tv-off-bg is active */
.tv-off-bg .disc {
  box-shadow: 0 6px 22px #55ffb6bb, 0 2px 18px #3ae07a;
}
.tv-off-bg .ps-link,
.tv-off-bg .ps-link.active {
  box-shadow: 0 2px 36px #55ffb6bb, 0 0 12px #4fdc7a;
  text-shadow: 0 0 9px #caffbc, 0px 1px 9px #23c364, 1px 2px 9px #caffbc;
  border-color: #55ffb6;
}
.tv-off-bg .ps-link.active {
  background: linear-gradient(90deg, #bcffe8 10%, #fff 90%);
  border: 2px solid #55ffb6;
}
.tv-off-bg .tv-slot {
  box-shadow: 0 2px 14px #29ffa866, 0 2px 11px #323544;
  border-color: #55ffb6;
}

/* --- Original CSS --- */
html, body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.tv-bg {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.crt-tv {
  position: relative;
  width: 494px;
  height: 463px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.tv-img {
  width: 494px;
  height: 463px;
  display: block;
  z-index: 1;
  pointer-events: none;
}
.crt-screen {
  position: absolute;
  left: 86px;
  top: 90px;
  width: 321px;
  height: 197px;
  border-radius: 44% 44% 42% 41% / 55% 60% 56% 54%;
  overflow: hidden;
  z-index: 2;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ps-menu {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
}
.ps-link {
  display: block;
  width: 210px;
  padding: 18px 0;
  font-family: 'Orbitron', 'Impact', 'Arial Black', sans-serif;
  font-size: 1.15rem;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  background: rgba(40,40,40,0.88);
  border-radius: 28px;
  margin: 0;
  box-shadow: 0 2px 36px #ff64b690, 0 0 12px #b1001a40;
  text-shadow: 0 0 9px #ffbcfc, 0px 1px 9px #c30b42, 1px 2px 9px #fff;
  letter-spacing: 2px;
  font-weight: bold;
  transition: background 0.2s, color 0.18s, box-shadow 0.18s, transform 0.15s;
  outline: none;
  border: none;
  cursor: pointer;
  position: relative;
}
.ps-link.active {
  color: #fff;
  background: linear-gradient(90deg, #ffb9eb 10%, #fff 90%);
  box-shadow: 0 0 35px #ff64b6, 0 0 18px #fff, 0 2px 24px #fd92e9, 0 0 12px #b1001a40;
  border: 2px solid #ff64b6;
  transform: scale(1.06);
}
.ps-link:hover, .ps-link:focus {
  color: #ff64b6;
  background: linear-gradient(90deg, #fff 65%, #ffd6ef 100%);
  box-shadow: 0 2px 28px #ffbefe, 0 0 32px 10px #ff8cfb, 0 2px 16px #b1001a, 0 0 5px 11px #fff9fa;
  transform: scale(1.08);
}
/* SLOT: styled as a console tray under TV */
.tv-slot {
  position: absolute;
  left: 146px;
  top: 417px;
  width: 203px;
  height: 21px;
  background: #35333b;
  border-radius: 0 0 18px 18px;
  border: 2px solid #fa5ba8;
  box-shadow: 0 2px 14px #fa5ba866, 0 2px 11px #323544;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.tv-slot::before {
  content: "";
  display: block;
  width: 33px;
  height: 5px;
  background: linear-gradient(90deg,#bbb 5%, #ddd 55%, #aaa 95%);
  border-radius: 3px 3px 6px 6px;
  opacity: 0.33;
}

/* Highlight slot when drag-over */
.tv-slot.highlight {
  border-color: #fff96d;
  box-shadow: 0 0 22px #f9ea8f, 0 2px 16px #fff96d;
}

/* --- Pile-at-bottom-left style --- */
.disc-row {
  position: fixed;
  left: 70px;      /* ← tweak these numbers to position */
  bottom: 80px;
  display: flex;
  flex-direction: column;
  gap: 26px;
  z-index: 6;
}

.disc {
  width: 90px;
  height: 90px;
  background: transparent;
  border: none;
  border-radius: 50%;
  box-shadow: 0 6px 22px #ef8df866, 0 2px 18px #fa5ba8;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: visible;
  transition: box-shadow 0.2s, opacity 0.18s, transform 0.7s cubic-bezier(.32,1.56,.7,.97);
}
.disc-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  pointer-events: none;
}
.disc.dragging {
  opacity: 0.6;
  box-shadow: 0 0 24px 7px #fa5ba8;
  z-index: 100;
}
.disc.inserted {
  pointer-events: none;
}
@keyframes discInsert {
  0%   { opacity: 1; }
  70%  { transform: translateY(-32px) scale(1.08);}
  85%  { transform: translateY(-37px) scale(0.97);}
  100% { opacity: 0; transform: translateY(-37px) scale(0.94);}
}