:root{--cyan:#3fd0e0;--maroon:#8b1d4a;--silver:#c9ccd2;--shell1:#3a3a3e;--shell2:#2a2a2e}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;min-height:100vh;color:#d8d8d0;font-family:'Barlow Condensed',sans-serif;
background:radial-gradient(ellipse at 40% 30%,#2b2a35 0%,#141318 55%,#0a0a0d 100%);overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;
background:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px) 0 0/100% 3px,
linear-gradient(90deg,rgba(63,208,224,.04) 1px,transparent 1px) 0 0/40px 40px,
linear-gradient(rgba(63,208,224,.04) 1px,transparent 1px) 0 0/40px 40px;z-index:0}
.px{font-family:'Press Start 2P',monospace}
.stage{perspective:1400px}
.flipper{position:relative;width:340px;height:570px;transition:transform .8s cubic-bezier(.6,-0.2,.3,1.3);transform-style:preserve-3d}
.flipper.flipped{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:14px 14px 70px 14px;
background:linear-gradient(160deg,var(--shell1),var(--shell2));
box-shadow:inset 2px 2px 3px rgba(255,255,255,.12),inset -3px -4px 6px rgba(0,0,0,.5),0 30px 60px rgba(0,0,0,.6),0 0 120px rgba(63,208,224,.08)}
.face:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:.25;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E")}
.back{transform:rotateY(180deg)}
.bezel{position:absolute;left:22px;top:44px;width:296px;height:228px;background:#1c1c20;border-radius:8px 8px 40px 8px;box-shadow:inset 0 2px 6px rgba(0,0,0,.8)}
.bezel-label{position:absolute;top:7px;left:0;right:0;text-align:center;font-size:10px;letter-spacing:.14em;color:#8a8a95;font-weight:600}
.bezel-label b{color:var(--cyan)}
.lcd{position:absolute;left:48px;top:26px;width:200px;height:180px;image-rendering:pixelated;border-radius:2px;
box-shadow:0 0 0 2px #111,0 0 18px rgba(220,230,200,.12)}
.led{position:absolute;left:14px;top:92px;width:8px;height:8px;border-radius:50%;background:#401010}
.led.on{background:#ff3a3a;box-shadow:0 0 8px #ff3a3a,0 0 16px #ff2020}
.led-l{position:absolute;left:8px;top:104px;font-size:8px;color:#777;letter-spacing:.05em}
.brand{position:absolute;left:24px;top:282px;display:flex;align-items:center;gap:10px}
.nlogo{font-weight:800;font-style:italic;font-size:17px;color:#9aa0c8;letter-spacing:.02em}
.nlogo span{font-size:22px;letter-spacing:.06em}
.sony{position:relative;overflow:hidden;padding:2px 9px;border-radius:3px;font-weight:800;letter-spacing:.25em;font-size:13px;color:#1a1a1a;
background:linear-gradient(180deg,#f2f3f5,#9ea3aa 55%,#dfe2e6);box-shadow:0 1px 0 rgba(255,255,255,.3),inset 0 -1px 1px rgba(0,0,0,.3)}
.sony:after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.9),transparent);animation:shine 4s infinite}
@keyframes shine{0%,70%{left:-60%}100%{left:130%}}
.btn{position:absolute;cursor:pointer;user-select:none;touch-action:none;transition:transform .05s}
.dpad{position:absolute;left:32px;top:344px;width:96px;height:96px}
.dpad .arm{position:absolute;background:#141416;box-shadow:0 3px 0 #000,inset 0 1px 1px rgba(255,255,255,.12)}
.dpad .arm.p{transform:translateY(2px);box-shadow:0 1px 0 #000}
.ab{position:absolute;width:44px;height:44px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#b8386c,var(--maroon) 60%,#5a0f2e);
box-shadow:0 4px 0 #3a0a1e,0 6px 8px rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;color:#f0c0d0;font-weight:800}
.ab.p,.pill.p,.slbtn.p{transform:translateY(3px);box-shadow:0 1px 0 #000}
.ablabel{position:absolute;font-size:12px;font-weight:800;color:#9aa0c8;font-style:italic}
.pill{width:44px;height:12px;border-radius:8px;background:#777a82;box-shadow:0 3px 0 #333;transform:rotate(-25deg)}
.pill.p{transform:rotate(-25deg) translateY(2px)}
.pl{position:absolute;font-size:10px;letter-spacing:.14em;color:#9aa0c8;font-weight:600}
.slbtn{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#9ff2fa,var(--cyan) 50%,#157a86);box-shadow:0 3px 0 #0d4a52,0 0 12px rgba(63,208,224,.35);display:flex;align-items:center;justify-content:center;font-size:11px;color:#083238}
.grille{position:absolute;right:26px;bottom:34px;display:flex;gap:7px;transform:rotate(-28deg)}
.grille i{display:block;width:6px;height:52px;border-radius:4px;background:#161618;box-shadow:inset 0 2px 3px #000,0 1px 0 rgba(255,255,255,.08);transition:transform .05s}
.wheel{position:absolute;left:-9px;top:140px;width:12px;height:64px;border-radius:4px;cursor:ns-resize;touch-action:none;
background:repeating-linear-gradient(0deg,#555 0 2px,#222 2px 4px);box-shadow:-2px 0 4px rgba(0,0,0,.6)}
.port{position:absolute;bottom:-6px;left:130px;width:24px;height:10px;border-radius:5px;background:#0b0b0c;border:2px solid #555;cursor:pointer}
.port.plugged{border-color:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.power{position:absolute;top:10px;left:26px;display:flex;align-items:center;gap:6px;font-size:10px;letter-spacing:.14em;color:#8a8a95;cursor:pointer;font-weight:600}
.power .track{width:40px;height:12px;border-radius:6px;background:#111;box-shadow:inset 0 1px 3px #000;position:relative}
.power .knob{position:absolute;top:1px;left:2px;width:16px;height:10px;border-radius:4px;background:#888;transition:left .15s}
.power.on .knob{left:22px;background:var(--cyan)}
.lidwrap{position:absolute;left:50%;top:70px;width:240px;height:240px;margin-left:-120px;perspective:600px}
.tray{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,#111 0 14%,#222 15% 40%,#1a1a1e 41%);box-shadow:inset 0 4px 14px #000}
.lid{position:absolute;inset:0;border-radius:50%;cursor:pointer;transform-origin:50% 0;transition:transform .7s cubic-bezier(.3,1.4,.5,1);
background:radial-gradient(circle at 40% 35%,#4a4a50,#2c2c30 70%);box-shadow:inset 0 2px 3px rgba(255,255,255,.15),0 6px 16px rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;text-align:center}
.lid.open{transform:rotateX(-110deg)}
.lid.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-6px) rotate(-2deg)}40%,80%{transform:translateX(6px) rotate(2deg)}}
.disc{width:62px;height:62px;border-radius:50%;cursor:pointer;position:relative;display:flex;align-items:center;justify-content:center;text-align:center;font-size:9px;line-height:1;font-weight:800;color:#111;
box-shadow:0 3px 8px rgba(0,0,0,.6);transition:transform .2s}
.disc:after{content:"";position:absolute;width:10px;height:10px;border-radius:50%;background:#1a1a1e;box-shadow:0 0 0 3px rgba(255,255,255,.5)}
.disc:hover{transform:scale(1.08) rotate(20deg)}
.disc.sel{outline:3px solid var(--cyan);outline-offset:2px}
.disc span{position:absolute;top:10px;left:4px;right:4px}
.battery{position:absolute;left:40px;right:40px;bottom:40px;height:110px;border-radius:10px;background:#222226;box-shadow:inset 0 3px 8px #000;padding:10px}
.remote{background:linear-gradient(180deg,#d6d8dc,#9ea2a8);border-radius:14px;padding:10px 12px;box-shadow:0 10px 24px rgba(0,0,0,.5);color:#222;animation:pop .4s}
@keyframes pop{from{transform:scale(.6) translateY(20px);opacity:0}}
.rbtn{width:34px;height:28px;border-radius:8px;background:#333;color:#eee;font-size:12px;box-shadow:0 2px 0 #000}
.rbtn:active{transform:translateY(2px);box-shadow:none}
.toast{animation:pop .3s}
.ticker{white-space:nowrap;animation:tick 60s linear infinite;display:inline-block}
@keyframes tick{from{transform:translateX(100vw)}to{transform:translateX(-100%)}}
.reveal{animation:rise .8s both}
@keyframes rise{from{opacity:0;transform:translateY(30px)}}