/* ============================================================
   PSX NOSTALGIA — room, CRT, console & controller chrome
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  background: #17151c radial-gradient(ellipse at 50% 30%, #241f2e 0%, #141118 55%, #0a090d 100%);
  overflow: hidden;
  font-family: Arial, Helvetica, sans-serif;
  user-select: none;
  -webkit-user-select: none;
}

#stage {
  position: absolute;
  left: 50%; top: 50%;
  width: 1180px; height: 920px;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center center;
}

/* ===================== TELEVISION ===================== */
#tv { position: absolute; left: 90px; top: 6px; width: 1000px; }

#tv-case {
  background: linear-gradient(180deg, #3a3742 0%, #2b2833 40%, #211f27 100%);
  border-radius: 26px;
  padding: 30px 30px 0 30px;
  box-shadow:
    0 30px 80px rgba(0,0,0,.85),
    inset 0 2px 2px rgba(255,255,255,.14),
    inset 0 -3px 6px rgba(0,0,0,.6);
}

#bezel {
  background: linear-gradient(180deg, #16151b, #0c0b10);
  border-radius: 18px;
  padding: 20px;
  box-shadow:
    inset 0 4px 14px rgba(0,0,0,.9),
    inset 0 -2px 4px rgba(255,255,255,.05);
}

#screen-wrap {
  position: relative;
  width: 960px; height: 720px;
  border-radius: 22px / 26px;          /* subtle CRT curvature of glass edge */
  overflow: hidden;
  background: #000;
  box-shadow: inset 0 0 60px rgba(0,0,0,.9);
}

#screen {
  display: block;
  width: 960px; height: 720px;
  image-rendering: auto;
  background: #000;
}

/* ------- CRT overlay layers ------- */
.crt { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; }

#crt-scanlines {
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px,
    rgba(0,0,0,.24) 3px, rgba(0,0,0,.24) 4px);
  mix-blend-mode: multiply;
  opacity: .8;
  z-index: 4;
}

#crt-grille {  /* aperture grille / phosphor columns */
  background: repeating-linear-gradient(
    to right,
    rgba(255,60,60,.05) 0px, rgba(60,255,90,.045) 1px,
    rgba(70,90,255,.05) 2px, rgba(0,0,0,0) 3px);
  opacity: .55;
  z-index: 5;
}

#crt-flicker {
  background: rgba(180,200,255,.028);
  animation: flick 0.11s steps(2) infinite;
  z-index: 6;
}
@keyframes flick { 0% {opacity:.35;} 50% {opacity:.75;} 100% {opacity:.35;} }

#crt-vignette {
  background:
    radial-gradient(ellipse at 50% 48%, rgba(0,0,0,0) 55%, rgba(0,0,0,.42) 92%, rgba(0,0,0,.75) 100%),
    linear-gradient(180deg, rgba(255,255,255,.045) 0%, rgba(0,0,0,0) 12%);
  z-index: 7;
}

#crt-glare {  /* soft curved glass reflection */
  background: radial-gradient(ellipse 65% 42% at 30% -6%, rgba(255,255,255,.10), rgba(255,255,255,0) 70%);
  z-index: 8;
}

/* power-on flash line */
#crt-power {
  z-index: 9; opacity: 0;
  background: radial-gradient(ellipse at 50% 50%, #fff 0%, #cfe4ff 45%, rgba(120,170,255,.4) 70%, transparent 100%);
}
#crt-power.on {
  animation: crtOn .55s cubic-bezier(.23,.9,.32,1) forwards;
}
@keyframes crtOn {
  0%   { opacity: 0; transform: scale(0.001, 0.004); }
  18%  { opacity: 1; transform: scale(1, 0.006); }
  55%  { opacity: .95; transform: scale(1, 1); }
  100% { opacity: 0; transform: scale(1, 1); }
}
#crt-power.off {
  animation: crtOff .45s cubic-bezier(.6,.05,.8,.4) forwards;
}
@keyframes crtOff {
  0%   { opacity: .9; transform: scale(1, 1); }
  60%  { opacity: 1; transform: scale(1, 0.008); }
  100% { opacity: 0; transform: scale(0.001, 0.004); }
}
#crt-off { z-index: 10; background: #000; opacity: 1; }
#crt-off.tv-on { opacity: 0; transition: opacity .2s; }

#tv-chin {
  display: flex; align-items: center; gap: 18px;
  padding: 10px 14px 12px;
}
#tv-brand { color: #b9b4c6; font-weight: bold; letter-spacing: 4px; font-size: 15px; text-shadow: 0 -1px 0 #000; }
#tv-model { color: #6d6879; font-size: 10px; letter-spacing: 2px; }
#tv-led { margin-left: auto; width: 8px; height: 8px; border-radius: 50%; background: #3a0d0d; box-shadow: 0 0 4px #000 inset; }
#tv-led.on { background: #ff5340; box-shadow: 0 0 8px #ff3020; }

/* ===================== CONSOLE ===================== */
#console { position: absolute; left: 330px; top: 800px; width: 520px; height: 120px; }

#ps-body {
  position: relative;
  width: 520px; height: 108px;
  filter: drop-shadow(0 18px 22px rgba(0,0,0,.7));
}
#ps-top {
  position: absolute; inset: 0 0 34px 0;
  background: linear-gradient(180deg, #d6d6d6 0%, #c4c4c4 55%, #a9a9a9 100%);
  border-radius: 6px 6px 0 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
#ps-front {
  position: absolute; inset: 74px 0 0 0;
  background: linear-gradient(180deg, #9c9c9c, #838383);
  border-radius: 0 0 6px 6px;
  box-shadow: inset 0 -2px 3px rgba(0,0,0,.35);
}
#ps-front-slots { position: absolute; left: 60px; top: 4px; }
.ps-port-label { font-size: 7px; color: #4c4c4c; letter-spacing: 2px; margin-bottom: 2px; }
.ps-ports { display: flex; gap: 6px; }
.ps-port { width: 52px; height: 12px; background: linear-gradient(180deg,#2c2c2c,#4a4a4a); border-radius: 2px; box-shadow: inset 0 2px 3px #000; }
.ps-port.ctrl { background: linear-gradient(180deg,#3a3a3a,#565656); }
.ps-port-num { display: flex; gap: 6px; font-size: 7px; color: #4c4c4c; }
.ps-port-num span { width: 52px; text-align: center; }

#ps-lid {
  position: absolute; left: 26px; top: 8px;
  width: 180px; height: 58px;
  border-radius: 50% / 50%;
  transform: scaleY(1.15) rotate(0deg);
  background: radial-gradient(ellipse at 42% 38%, #d8d8d8 0%, #b5b5b5 60%, #969696 100%);
  box-shadow: inset 0 2px 5px rgba(255,255,255,.7), inset 0 -3px 6px rgba(0,0,0,.28), 0 1px 2px rgba(0,0,0,.3);
  transition: transform .35s ease, background .3s;
}
#ps-lid-inner {
  position: absolute; inset: 6px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 45% 40%, #1c1c1c, #050505);
  opacity: 0;
  transition: opacity .3s;
}
#ps-spindle { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #666, #222); }
#ps-disc-in-lid {
  position: absolute; inset: 3px; border-radius: 50%;
  background: conic-gradient(#111 0 40deg, #1d1d1d 40deg 90deg, #111 90deg 200deg, #232323 200deg 240deg, #111 240deg 360deg);
  opacity: 0;
}
#ps-disc-in-lid.spin { animation: discspin 1.1s linear infinite; opacity: 1; }
@keyframes discspin { to { transform: rotate(360deg); } }
#ps-lid-logo {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  font-weight: 900; font-style: italic; color: #8d8d8d; font-size: 18px; letter-spacing: 1px;
}
#console.lid-open #ps-lid {
  transform: scaleY(1.15) rotate(-58deg) translateY(-12px);
  transform-origin: 10% 10%;
}
#console.lid-open #ps-lid-inner { opacity: 1; }
#console.lid-open #ps-lid-logo { opacity: 0; }

#ps-badge { position: absolute; left: 236px; top: 16px; }
#ps-badge-logo { font-weight: 900; font-style: italic; font-size: 19px; color: #7a7a7a; letter-spacing: 1px; }
#ps-badge-sub { font-size: 8px; color: #888; letter-spacing: 3px; margin-top: 2px; }

#ps-buttons { position: absolute; right: 18px; top: 10px; display: flex; gap: 16px; }
.ps-btn-wrap { position: relative; text-align: center; }
.ps-btn {
  width: 34px; height: 26px;
  border: none; border-radius: 4px;
  background: linear-gradient(180deg, #cfcfcf, #9e9e9e);
  box-shadow: 0 2px 3px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.8), inset 0 -2px 2px rgba(0,0,0,.25);
  cursor: pointer;
}
.ps-btn:active { transform: translateY(1.5px); box-shadow: 0 0 1px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.6); }
.ps-btn-label { font-size: 7px; color: #555; letter-spacing: 1.5px; margin-top: 3px; }
#ps-power-led {
  position: absolute; top: -6px; left: 50%; margin-left: -3px;
  width: 6px; height: 6px; border-radius: 50%;
  background: #223322; transition: all .2s;
}
#console.powered #ps-power-led { background: #ffb347; box-shadow: 0 0 7px #ffa02e; }

/* flying disc (insert animation) */
#fly-disc {
  position: absolute; left: 500px; top: -330px;
  width: 120px; height: 120px; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 16px, #d9d9d9 17px, #e8e8e8 30px, #c9c9c9 44px, #e2e2e2 58px, #c4c4c4 100%);
  box-shadow: 0 8px 18px rgba(0,0,0,.55), inset 0 0 22px rgba(255,255,255,.5);
  opacity: 0; z-index: 30;
}
#fly-disc-hole {
  position: absolute; left: 50%; top: 50%; width: 32px; height: 32px;
  margin: -16px 0 0 -16px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #444, #0a0a0a);
  box-shadow: inset 0 0 6px #000;
}
#fly-disc.fly {
  animation: flydisc .9s cubic-bezier(.45,.05,.35,1) forwards;
}
@keyframes flydisc {
  0%   { opacity: 0; transform: translate(0,0) rotate(0deg) scale(.9); }
  15%  { opacity: 1; }
  70%  { opacity: 1; transform: translate(-448px, 296px) rotate(-300deg) scale(.55); }
  100% { opacity: 0; transform: translate(-448px, 310px) rotate(-360deg) scale(.5); }
}

/* ===================== CONTROLLER ===================== */
#controller {
  position: absolute; left: 40px; top: 770px; width: 260px;
  filter: drop-shadow(0 14px 14px rgba(0,0,0,.65));
  transform: rotate(-8deg);
}
#controller svg { width: 100%; height: auto; }

/* ===================== HINT BAR ===================== */
#hint-bar {
  position: absolute; right: 30px; bottom: 14px;
  color: #8d879c; font-size: 12px; letter-spacing: .5px;
  background: rgba(10,9,14,.55); padding: 7px 12px; border-radius: 6px;
  border: 1px solid rgba(255,255,255,.06);
}
.hk {
  display: inline-block; background: #2c2836; border: 1px solid #49435c;
  border-bottom-width: 2px; border-radius: 4px;
  padding: 1px 5px; font-size: 10px; color: #cfc9e0; font-weight: bold;
}