/* DesignliStation 2 (a parody): boot, memory card check, title screen and main menu (ps2 in arena.js). */
.ps2{grid-area:1/1/-1/-1;position:relative;z-index:20;overflow:hidden;font-family:Rubik,sans-serif}
.ps2[hidden]{display:none}
.ps-on .scoreboard,.ps-on .fight-area,.ps-on .action-bar,.ps-on .combo-book,.ps-on .masthead,.ps-on .stage::after{opacity:0;pointer-events:none}
.ps-boot,.ps-title,.ps-menu{position:absolute;inset:0;display:none}
.ps2.at-sce .ps-boot,.ps2.at-towers .ps-boot,.ps2.at-mc .ps-boot{display:block;background:#000}

/* Publisher sparkle, towers in fog, console logo */
.ps-towers{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.2s}
.at-towers .ps-towers{opacity:1}
.ps-sce{position:absolute;left:50%;top:50%;display:none;text-align:center;color:#fff;transform:translate(-50%,-50%)}
.at-sce .ps-sce{display:block;animation:ps-fade 2.7s ease both}
.ps-sce b{display:block;font:900 clamp(40px,4vw,76px)/1 Satoshi,sans-serif;letter-spacing:.32em;padding-left:.32em;background:linear-gradient(180deg,#fff,#9cc8ff);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 18px rgba(120,180,255,.75))}
.ps-sce span{display:block;margin-top:16px;font:500 clamp(14px,1.2vw,22px)/1 Rubik,sans-serif;letter-spacing:.55em;padding-left:.55em;color:#cfe0ff}
.ps-sce i{position:absolute;width:18px;height:18px;background:radial-gradient(circle,#fff 0 22%,rgba(140,200,255,.85) 38%,transparent 70%);
 clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);animation:ps-twinkle 1.1s ease-in-out infinite}
.ps-sce i:nth-child(1){left:-4%;top:-55%;animation-delay:.1s}.ps-sce i:nth-child(2){left:22%;top:-30%;animation-delay:.5s}
.ps-sce i:nth-child(3){left:61%;top:-62%;animation-delay:.3s}.ps-sce i:nth-child(4){left:98%;top:-18%;animation-delay:.8s}.ps-sce i:nth-child(5){left:84%;top:110%;animation-delay:.2s}
.ps-logo{position:absolute;left:50%;top:50%;display:none;text-align:center;white-space:nowrap;transform:translate(-50%,-50%)}
.at-towers.logo .ps-logo{display:block;animation:ps-logo 3.7s ease both}
.ps-logo b{font:900 clamp(64px,6.4vw,124px)/1 Satoshi,sans-serif;font-style:italic;letter-spacing:-.03em;color:#fff;text-shadow:0 0 34px rgba(140,200,255,.85)}
.ps-logo b i{color:#c9e2ff}
.ps-logo em{margin-left:.12em;font:900 clamp(84px,8.4vw,160px)/1 Satoshi,sans-serif;background:linear-gradient(180deg,#eef7ff,#4aa3ff);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 26px rgba(80,160,255,.95))}
.ps-logo small{display:block;margin-top:24px;font:500 14px/1 Rubik,sans-serif;letter-spacing:.2em;color:rgba(200,220,255,.55);text-transform:uppercase}

/* Memory card check */
.ps-mc{position:absolute;left:50%;top:50%;display:none;width:min(900px,80vw);text-align:center;color:#e8ecf7;font:400 clamp(20px,1.7vw,32px)/1.6 Rubik,sans-serif;transform:translate(-50%,-50%)}
.at-mc .ps-mc{display:block;animation:ps-fade 2.9s ease both}
.ps-card{display:block;margin:0 auto 24px;width:56px;height:64px;background:linear-gradient(160deg,#2a2d38,#0f1118);border:2px solid #6b7186;clip-path:polygon(0 0,70% 0,100% 18%,100% 100%,0 100%);animation:ps-blink .5s steps(2) 4}
.ps-mc2{opacity:0}
.found .ps-mc2{opacity:1;transition:opacity .3s}
.ps-mc2 b{color:#ff8a6a;font-weight:700}

/* Title screen over the live arena */
.at-title .ps-title{display:block;background:linear-gradient(180deg,rgba(3,4,16,.82),rgba(3,4,16,.2) 38%,rgba(3,4,16,.35) 70%,rgba(3,4,16,.92));animation:ps-fade-in .8s ease both}
.ps-mark{position:absolute;left:50%;top:18%;text-align:center;transform:translateX(-50%) skewX(-8deg)}
.ps-mark b{display:block;padding:0 .12em;font:900 clamp(96px,10.5vw,200px)/.82 Satoshi,sans-serif;font-style:italic;letter-spacing:-.03em;
 background:linear-gradient(180deg,#fff 0,#f2f5ff 30%,#9aa3c0 49%,#5a6280 51%,#e8ecf7 76%,#fff);-webkit-background-clip:text;background-clip:text;color:transparent;
 -webkit-text-stroke:3px #10122c;filter:drop-shadow(0 8px 0 #10122c) drop-shadow(0 0 40px rgba(255,140,40,.5))}
.ps-mark b+b{background-image:linear-gradient(180deg,#fffbe0,#ffe066 35%,#ff9d1f 62%,#e8401c)}
.at-title .ps-mark{animation:ps-slam .7s cubic-bezier(.2,1.3,.4,1) both}
.ps-mark span{display:inline-block;margin-top:20px;padding:9px 24px;background:#d4202f;color:#fff;font:900 clamp(18px,1.6vw,30px)/1 Satoshi,sans-serif;letter-spacing:.2em;transform:skewX(-10deg)}
.ps-start{position:absolute;left:0;right:0;top:72%;margin:0;text-align:center;font:900 clamp(30px,2.7vw,54px)/1 Satoshi,sans-serif;font-style:italic;letter-spacing:.22em;
 color:#fff;text-shadow:0 0 22px rgba(255,210,63,.85),0 4px 0 #000;animation:ps-blink 1s steps(2) infinite}
.ps-title footer{position:absolute;left:0;right:0;bottom:4%;display:flex;justify-content:center;flex-wrap:wrap;gap:16px 26px;font:700 13px/1 Rubik,sans-serif;letter-spacing:.16em;color:rgba(230,236,255,.65)}
.ps-title footer span{padding:7px 11px;border:1px solid rgba(230,236,255,.35)}

/* Main menu */
.at-menu .ps-menu{display:block;background:linear-gradient(90deg,rgba(3,4,16,.93) 0 38%,rgba(3,4,16,.4) 64%,rgba(3,4,16,.15));animation:ps-fade-in .25s ease both}
.ps-menu h2{position:absolute;left:7%;top:11%;margin:0;font:900 clamp(26px,2.2vw,42px)/1 Satoshi,sans-serif;font-style:italic;letter-spacing:.14em;color:#9cc8ff}
.ps-menu ol{position:absolute;left:7%;top:21%;margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px;pointer-events:auto}
.ps-menu li{position:relative;width:min(660px,40vw);padding:16px 26px;font:900 clamp(26px,2.3vw,44px)/1 Satoshi,sans-serif;font-style:italic;letter-spacing:.04em;
 color:rgba(230,236,255,.55);cursor:pointer;transform:skewX(-10deg);transition:color .12s,transform .12s}
.ps-menu li.on{color:#10122c;background:linear-gradient(90deg,#ffd23f,#ff9f1a 70%,rgba(255,159,26,0));transform:skewX(-10deg) translateX(18px)}
.ps-menu li.on::before{content:'▶';position:absolute;left:-36px;color:#ffd23f;animation:ps-nudge .6s ease-in-out infinite alternate}
.ps-desc{position:absolute;left:7%;bottom:13%;margin:0;max-width:40vw;font:600 clamp(16px,1.3vw,24px)/1.4 Rubik,sans-serif;color:#e8ecf7}
.ps-hint{position:absolute;right:5%;bottom:6%;margin:0;font:800 14px/1 Rubik,sans-serif;letter-spacing:.14em;color:rgba(230,236,255,.75)}
.ps-hint b{display:inline-grid;place-items:center;width:28px;height:28px;margin-right:6px;border-radius:50%;background:#1f2a5a;color:#9cc8ff}

@keyframes ps-fade{0%{opacity:0}15%,82%{opacity:1}100%{opacity:0}}
@keyframes ps-fade-in{from{opacity:0}}
@keyframes ps-logo{0%{opacity:0;transform:translate(-50%,-50%) scale(.92)}22%,86%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.02)}}
@keyframes ps-twinkle{50%{transform:scale(1.9) rotate(45deg);opacity:.25}}
@keyframes ps-blink{50%{opacity:.2}}
@keyframes ps-nudge{to{left:-26px}}
@keyframes ps-slam{from{opacity:0;transform:translateX(-50%) skewX(-8deg) scale(1.6)}}
@media (prefers-reduced-motion:reduce){.ps-start,.ps-sce i,.ps-menu li.on::before{animation:none}}

/* Menu key art, the loading screen and the flash into the fight */
.ps-menu .ps-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:saturate(1.1)}
.at-menu .ps-menu{isolation:isolate;background:#03040f}
.ps-menu::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(3,4,16,.96) 0 33%,rgba(3,4,16,.7) 46%,rgba(3,4,16,.08) 72%)}
.at-menu .ps-menu .ps-art{animation:ps-pan 24s ease-in-out infinite alternate}
.ps-load{position:absolute;inset:0;display:none;background:#000}
.at-load .ps-load{display:block;animation:ps-fade-in .3s ease both}
.ps-load .ps-art{position:absolute;left:50%;top:44%;width:min(1100px,60vw);transform:translate(-50%,-50%);border:3px solid rgba(255,255,255,.12);box-shadow:0 30px 80px rgba(0,0,0,.6);opacity:.9}
.ps-tip{position:absolute;left:8%;right:30%;bottom:9%;margin:0;font:600 clamp(18px,1.5vw,28px)/1.4 Rubik,sans-serif;color:#e8ecf7}
.ps-now{position:absolute;right:7%;bottom:9%;font:900 clamp(22px,1.8vw,34px)/1 Satoshi,sans-serif;font-style:italic;letter-spacing:.16em;color:#fff}
.ps-now i{font-style:normal;animation:ps-blink 1s steps(2) infinite}.ps-now i:nth-child(2){animation-delay:.33s}.ps-now i:nth-child(3){animation-delay:.66s}
.ps-disc{position:absolute;right:calc(7% - 64px);bottom:calc(9% - 6px);width:44px;height:44px;border-radius:50%;
 background:conic-gradient(from 0deg,#cfd8ff,#7aa6ff,#e9f0ff,#9d8cff,#cfd8ff);box-shadow:inset 0 0 0 15px #1a1f3a,0 0 18px rgba(140,180,255,.6);animation:ps-spin .6s linear infinite}
.ps-flash .arcade::after{content:'';position:absolute;inset:0;z-index:30;background:#fff;pointer-events:none;animation:ps-unflash .7s ease-out both}
@keyframes ps-pan{from{transform:scale(1.04) translateX(0)}to{transform:scale(1.1) translateX(-2%)}}
@keyframes ps-spin{to{transform:rotate(1turn)}}
@keyframes ps-unflash{from{opacity:1}to{opacity:0}}

/* Cold open: plug the DesignliStation 2 into the wall, then press power (ps2 plugScene in arena.js) */
.ps-plug{position:absolute;inset:0;display:none;background:#040510;overflow:hidden;cursor:pointer}
.ps2.at-plug .ps-plug{display:block;animation:ps-fade-in .7s ease both}
.ps-plug svg{position:absolute;inset:0;width:100%;height:100%;transform-origin:52.2% 72.7%;transition:transform 1.2s cubic-bezier(.6,0,.3,1),filter 1.2s}
.ps2.at-plug .ps-plug svg{animation:pl-drift 7s cubic-bezier(.3,0,.4,1) forwards}   /* final r1: a slow push-in, so the prompt frame never reads as frozen */
@keyframes pl-drift{from{scale:1}to{scale:1.04}}
.ps-plug.zoom svg{transform:scale(6);filter:brightness(.1) blur(3px)}   /* final r1: dive at the power LED (was off-target to the lower left) */
.ps-plug.impact svg{filter:invert(1) contrast(1.6)}
.pl-logo{font:italic 900 23px Satoshi,sans-serif;fill:#9fb6d9;letter-spacing:.02em}
.pl-small{font:800 11px Rubik,sans-serif;fill:#5d6475;letter-spacing:.12em}
.pl-led{fill:#2a1414;transition:fill .15s}
.ps-plug.standby .pl-led{fill:#ff2b2b;filter:drop-shadow(0 0 6px #ff2b2b) drop-shadow(0 0 16px #ff2b2b)}
.ps-plug.on .pl-led{fill:#2bff60;filter:drop-shadow(0 0 6px #2bff60) drop-shadow(0 0 18px #2bff60)}
.pl-eject{fill:#0f2036}
.ps-plug.on .pl-eject{fill:#45a6ff;filter:drop-shadow(0 0 6px #45a6ff);animation:ps-blink .45s steps(2) 4}
.pl-power{transition:transform .08s}
.ps-plug.on .pl-power{transform:translateY(3px)}
.ps-plug.seated .pl-prongs{display:none}
.pl-sparks line{stroke:#ffe27a;stroke-width:5;stroke-linecap:round;stroke-dasharray:26 300;stroke-dashoffset:0;opacity:0}
.ps-plug.zap .pl-sparks line{animation:pl-spark .5s ease-out both}
.pl-sfx,.pl-whir{position:absolute;font:900 clamp(64px,6.4vw,124px)/1 Satoshi,"Noto Sans CJK JP","Noto Sans JP",sans-serif;-webkit-text-stroke:6px #12030a;paint-order:stroke fill;opacity:0;pointer-events:none;white-space:nowrap}
.pl-sfx{left:68%;top:22%;color:#ffd23f}
.ps-plug.zap .pl-sfx{animation:pl-pop 1s cubic-bezier(.2,1.6,.4,1) both}
.pl-whir{left:20%;top:40%;font-size:clamp(44px,4.2vw,84px);color:#9fe3ff}
.ps-plug.on .pl-whir{animation:pl-pop 1.3s .1s cubic-bezier(.2,1.6,.4,1) both}
.ps-plug::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;
 background:repeating-conic-gradient(from 0deg at 81% 47%,rgba(255,255,255,.6) 0 1.2deg,transparent 1.6deg 7deg);
 -webkit-mask-image:radial-gradient(circle at 81% 47%,transparent 0 10%,#000 42%);mask-image:radial-gradient(circle at 81% 47%,transparent 0 10%,#000 42%)}
.ps-plug.zap::after{animation:pl-lines .55s ease-out both}
.pl-prompt{position:absolute;left:0;right:0;bottom:6%;text-align:center;color:#fff;pointer-events:none;transition:opacity .2s}
.pl-prompt b{display:block;min-height:1em;font:900 clamp(36px,3.2vw,62px)/1 Satoshi,sans-serif;font-style:italic;letter-spacing:.22em;padding-left:.22em;text-shadow:0 0 24px rgba(120,180,255,.75),0 4px 0 #000}
.pl-prompt span{display:inline-flex;align-items:center;gap:10px;margin-top:14px;font:800 clamp(18px,1.5vw,28px)/1 Rubik,sans-serif;letter-spacing:.22em;color:#e6ecff;animation:ps-blink 1s steps(2) infinite}
.pl-prompt kbd{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#1f2a5a;color:#9cc8ff;font:900 15px/1 Rubik,sans-serif}
@keyframes pl-spark{0%{opacity:1;stroke-dashoffset:0}70%{opacity:1}100%{opacity:0;stroke-dashoffset:-120}}
@keyframes pl-pop{0%{opacity:0;transform:scale(2.4) rotate(-8deg)}18%{opacity:1;transform:scale(1) rotate(-8deg)}78%{opacity:1;transform:scale(1.02) rotate(-8deg)}100%{opacity:0;transform:scale(1.05) rotate(-8deg) translateY(-16px)}}
@keyframes pl-lines{0%{opacity:0}15%{opacity:1}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.ps-plug svg{transition:none}.ps-plug.zap::after,.pl-prompt span{animation:none}}