/* PSX ritual — room, TV, console, shelf */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { height:100%; }
body {
  background:
    radial-gradient(1200px 700px at 50% -10%, #1c1a24 0%, #0b0a10 55%, #060609 100%);
  font-family: "Helvetica Neue", Arial, sans-serif;
  color:#cfd0d8;
  overflow:hidden;
  user-select:none;
}
#stage {
  height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  padding:12px 12px 8px;
  gap:10px;
}

/* ---------- TV ---------- */
#tvwrap { width:min(96vw, calc((100vh - 230px) * 1.34), 880px); }
#tv {
  position:relative;
  width:100%;
  aspect-ratio: 4/3;
  background:linear-gradient(180deg,#3a3a40 0%,#232329 60%,#17171c 100%);
  border-radius:18px;
  padding:2.2% 2.6% 4.2%;
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.18),
    inset 0 -6px 14px rgba(0,0,0,.55),
    0 18px 50px rgba(0,0,0,.7);
}
#tv::before{ /* speaker grille */
  content:""; position:absolute; left:4%; right:4%; bottom:1.1%; height:1.6%;
  background:repeating-linear-gradient(90deg,#101014 0 5px,#2c2c33 5px 7px);
  border-radius:4px; opacity:.8;
}
#crt {
  display:block; width:100%; height:100%;
  background:#000;
  border-radius:10px / 12px;
}
#glass{
  position:absolute; inset:2.2% 2.6% 4.2%;
  border-radius:10px / 12px;
  pointer-events:none;
  background:
    radial-gradient(140% 90% at 30% 0%, rgba(255,255,255,.09) 0%, rgba(255,255,255,0) 40%),
    radial-gradient(120% 120% at 50% 55%, rgba(0,0,0,0) 55%, rgba(0,0,0,.42) 100%);
  mix-blend-mode:screen;
}
#osd{
  position:absolute; top:6%; left:7%;
  font:700 clamp(10px,1.6vw,18px)/1 "Courier New",monospace;
  color:#7df0a4; text-shadow:0 0 6px rgba(80,255,140,.7);
  letter-spacing:.12em; opacity:0; transition:opacity .25s;
  pointer-events:none;
}
#osd.show{ opacity:.95; }
#tvbrand{
  position:absolute; right:4%; bottom:1.2%;
  font-size:clamp(7px,1vw,11px); letter-spacing:.35em; color:#8f8f99; font-weight:700;
}
#tvfoot{ display:flex; justify-content:space-between; padding:0 12%; }
#tvfoot span{ display:block; width:22%; height:9px; background:#131318; border-radius:0 0 8px 8px;
  box-shadow:0 4px 10px rgba(0,0,0,.6); }

/* ---------- deck: console + shelf + pad ---------- */
#deck{
  width:min(96vw,880px);
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:14px; flex:0 0 auto;
}
#psunit{
  position:relative;
  width:min(46%,330px); aspect-ratio: 2.9/1;
  background:linear-gradient(180deg,#d9d9de 0%,#c3c3ca 55%,#a9a9b1 100%);
  border-radius:10px 10px 6px 6px;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.75),
    inset 0 -8px 14px rgba(0,0,0,.22),
    0 10px 26px rgba(0,0,0,.55);
}
#lid{
  position:absolute; left:6%; top:9%; width:56%; aspect-ratio:1;
  border-radius:50%;
  background:radial-gradient(circle at 38% 32%, #ececf0 0%, #cfcfd6 55%, #b4b4bd 100%);
  box-shadow: inset 0 2px 5px rgba(255,255,255,.8), inset 0 -3px 8px rgba(0,0,0,.25), 0 1px 0 rgba(0,0,0,.18);
  transition:transform .55s cubic-bezier(.6,0,.3,1), box-shadow .4s;
}
#lidring{ position:absolute; inset:16%; border-radius:50%;
  background:radial-gradient(circle at 40% 35%, #d6d6dc, #b9b9c2 70%, #9c9ca6);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.3); }
#traydisc{
  position:absolute; inset:20%; border-radius:50%; opacity:0; transform:scale(.7);
  transition:opacity .3s, transform .5s;
  background:radial-gradient(circle at 42% 35%, #2b2b30 0 26%, #17171b 27% 44%, #0c0c0f 45% 100%);
}
#traydisc .discshine{
  position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 210deg, rgba(255,255,255,0) 0 30%, rgba(160,200,255,.28) 42%, rgba(255,255,255,0) 55% 100%);
}
#lidlogo{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-weight:900; font-style:italic; font-size:clamp(14px,3.4vw,30px);
  color:#8a8a94; letter-spacing:-.08em;
  text-shadow:0 1px 0 rgba(255,255,255,.6);
}
#psunit.trayopen #lid{ transform:translateX(-104%); box-shadow:0 4px 16px rgba(0,0,0,.4); }
#psunit.trayopen #traydisc{ opacity:0 !important; }
#psunit.disced #traydisc{ opacity:1; transform:scale(1); }
#psface{ position:absolute; right:4%; top:12%; width:34%; height:76%; }
#led{
  position:absolute; right:2%; top:0; width:9px; height:9px; border-radius:50%;
  background:#3c3c44; box-shadow:inset 0 1px 1px rgba(0,0,0,.5);
}
#led.on{ background:#ffb342; box-shadow:0 0 8px 2px rgba(255,170,40,.65); }
#led.play{ background:#52e05f; box-shadow:0 0 8px 2px rgba(70,230,90,.6); }
.pbtn{
  position:absolute; width:100%; height:20%; cursor:pointer;
  display:flex; align-items:center; gap:7%;
}
.pbtn i{
  display:block; width:34%; height:58%;
  background:linear-gradient(180deg,#efeff3,#c9c9d0 60%,#aeaeb6);
  border-radius:5px;
  box-shadow:0 1px 0 rgba(255,255,255,.7), inset 0 -2px 3px rgba(0,0,0,.2), 0 2px 4px rgba(0,0,0,.25);
}
.pbtn:active i{ transform:translateY(1px); box-shadow:inset 0 2px 4px rgba(0,0,0,.3); }
.pbtn b{ font-size:clamp(6px,1.1vw,10px); letter-spacing:.22em; color:#6f6f78; font-weight:800; }
#btnpower{ top:8%; } #btnreset{ top:32%; } #btnopen{ top:56%; }
#btnpower i{ width:26%; border-radius:50%; }
#ports{ position:absolute; right:2%; bottom:2%; display:flex; gap:10px; }
#ports span{ width:26px; height:12px; background:#7f7f88; border-radius:3px;
  box-shadow:inset 0 2px 3px rgba(0,0,0,.4); }
#pslabel{
  position:absolute; left:6%; bottom:5%;
  font-size:clamp(7px,1.2vw,11px); font-weight:800; letter-spacing:.14em; color:#7a7a84;
}
#pslabel span{ margin-left:8px; color:#9a9aa4; font-weight:600; }

/* ---------- shelf of jewel cases ---------- */
#shelf{
  display:flex; gap:10px; align-items:flex-end;
  flex:0 1 auto; min-width:0;
}
.jcase{
  position:relative; width:clamp(52px,8.4vw,86px); aspect-ratio:0.87;
  cursor:pointer; border-radius:3px;
  background:linear-gradient(105deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.06) 30%, rgba(255,255,255,.14) 55%, rgba(255,255,255,.03) 100%);
  box-shadow:0 6px 16px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.22);
  transition:transform .18s ease, box-shadow .18s ease;
  outline:none;
}
.jcase:hover,.jcase:focus-visible{ transform:translateY(-8px) rotate(-1.5deg); box-shadow:0 14px 26px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,255,255,.4); }
.jcase canvas{ position:absolute; inset:4% 4% 4% 13%; width:83%; height:92%; border-radius:1px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.5); }
.jcase::before{ /* spine */
  content:""; position:absolute; left:3%; top:4%; bottom:4%; width:7%;
  background:linear-gradient(180deg,#202028,#454552 50%,#1a1a22);
  border-radius:1px;
}
.jcase::after{ /* hinge */
  content:""; position:absolute; right:2%; top:8%; bottom:8%; width:2px;
  background:rgba(255,255,255,.25); border-radius:2px;
}
.jcase.inserted{ opacity:.45; transform:none; pointer-events:none; }
.jcase .jc-title{
  position:absolute; left:14%; right:6%; bottom:6%;
  font-size:clamp(5px,.85vw,8px); font-weight:800; letter-spacing:.06em; color:#f2f2f8;
  text-shadow:0 1px 2px #000; text-align:left; line-height:1.1;
}
.jcase .jc-badge{
  position:absolute; left:15%; top:7%; font-size:clamp(4px,.7vw,7px); font-weight:700;
  color:#fff; background:#b3222c; padding:1px 3px; border-radius:1px; letter-spacing:.05em;
}

/* ---------- controller ---------- */
#gamepad{ width:min(30%,240px); }
.gp-body{
  position:relative; width:100%; aspect-ratio:2.6/1;
  background:linear-gradient(180deg,#cfcfd6,#b2b2bb 70%,#9d9da6);
  border-radius:26% 26% 30% 30% / 60% 60% 70% 70%;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.7), inset 0 -6px 10px rgba(0,0,0,.25), 0 10px 22px rgba(0,0,0,.5);
  display:flex; align-items:center; justify-content:space-between; padding:0 7%;
}
.gp-dpad{ position:relative; width:26%; aspect-ratio:1; }
.gp-dpad .gp-btn{ position:absolute; background:linear-gradient(180deg,#4a4a52,#33333b);
  box-shadow:0 2px 3px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.15); }
.gp-u{ left:34%; top:0; width:32%; height:40%; border-radius:4px 4px 0 0; }
.gp-d{ left:34%; bottom:0; width:32%; height:40%; border-radius:0 0 4px 4px; }
.gp-l{ left:0; top:34%; width:40%; height:32%; border-radius:4px 0 0 4px; }
.gp-r{ right:0; top:34%; width:40%; height:32%; border-radius:0 4px 4px 0; }
.gp-pivot{ position:absolute; left:36%; top:36%; width:28%; height:28%; border-radius:50%;
  background:radial-gradient(circle at 40% 35%, #4c4c55, #2c2c33); }
.gp-mid{ display:flex; gap:10px; align-items:center; }
.gp-mid .gp-btn{ font-size:clamp(5px,.9vw,8px); color:#55555e; font-weight:800; letter-spacing:.08em;
  background:linear-gradient(180deg,#dedee4,#b9b9c1); padding:4px 7px; border-radius:8px;
  box-shadow:0 2px 3px rgba(0,0,0,.35); }
.gp-face{ position:relative; width:30%; aspect-ratio:1; }
.gp-face .gp-btn{
  position:absolute; width:34%; aspect-ratio:1; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:clamp(9px,1.7vw,15px); font-weight:900; color:#e8e8ef;
  box-shadow:0 2px 4px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.25);
}
.gp-tri{ left:33%; top:0; background:radial-gradient(circle at 40% 32%, #8fd9a9, #3f9d63); }
.gp-cir{ right:0; top:33%; background:radial-gradient(circle at 40% 32%, #f09c9c, #c43a3a); }
.gp-cro{ left:33%; bottom:0; background:radial-gradient(circle at 40% 32%, #9fb8f2, #4a63c4); }
.gp-squ{ left:0; top:33%; background:radial-gradient(circle at 40% 32%, #e8a4d6, #b14d9b); }
.gp-btn{ cursor:pointer; touch-action:none; }
.gp-btn.lit{ filter:brightness(1.5); transform:translateY(1px); }

#touchhelp{
  position:fixed; left:50%; bottom:6px; transform:translateX(-50%);
  font-size:11px; color:#8b8b96; letter-spacing:.06em; opacity:0; pointer-events:none;
}
body.touch #touchhelp{ opacity:.8; }
body.touch #deck{ padding-bottom:22px; }

/* ---------- responsive ---------- */
@media (max-width:640px){
  #stage{ gap:6px; padding:8px 6px; }
  #tvwrap{ width:min(98vw, calc((100vh - 260px) * 1.34)); }
  #deck{ width:98vw; }
  #shelf{ gap:5px; }
  .jcase{ width:clamp(40px,11vw,64px); }
}
@media (max-height:560px){
  #tvwrap{ width:min(96vw, calc((100vh - 190px) * 1.34)); }
}