/* RUTHLESS ARCADE — the room, the machine, the screen. */

:root{
  --room:#06060a;
  --gold:#E8B44F;
  --neon:#35e0ff;
  --pink:#ff3ea5;
  --cab:#15151c;
  --scr:#07100e;
  --grn:#7dffb2;
  --s:1;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--room);
  font-family:Manrope,system-ui,sans-serif;
  color:#e9e9f2;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}

/* ───────────────────────── THE ROOM ───────────────────────── */
#hall{
  position:fixed;inset:0;
  display:flex;align-items:center;justify-content:center;
  perspective:1400px;
  background:
    radial-gradient(120% 70% at 50% 8%, rgba(232,180,79,.12), transparent 55%),
    radial-gradient(90% 60% at 50% 100%, rgba(53,224,255,.07), transparent 60%),
    var(--room);
}
.ceiling{
  position:absolute;top:0;left:0;right:0;height:34vh;pointer-events:none;
  background:radial-gradient(60% 100% at 50% -20%, rgba(255,240,200,.16), transparent 70%);
}
.floor{
  position:absolute;left:-40%;right:-40%;bottom:0;height:42vh;pointer-events:none;
  background:
    linear-gradient(to top, rgba(53,224,255,.10), transparent 70%),
    repeating-linear-gradient(90deg, rgba(120,140,180,.16) 0 1px, transparent 1px 84px),
    repeating-linear-gradient(0deg, rgba(120,140,180,.14) 0 1px, transparent 1px 54px),
    #08080d;
  transform:rotateX(76deg);
  transform-origin:bottom center;
  mask-image:linear-gradient(to top, #000 5%, transparent 92%);
  -webkit-mask-image:linear-gradient(to top, #000 5%, transparent 92%);
}
.neighbor{
  position:absolute;bottom:12vh;width:min(22vw,260px);height:56vh;border-radius:14px 14px 4px 4px;
  background:linear-gradient(180deg,#101019,#0a0a10 60%,#08080c);
  filter:blur(2px);opacity:.72;pointer-events:none;
}
.neighbor::before{
  content:"";position:absolute;top:8%;left:8%;right:8%;height:26%;border-radius:6px;
  background:linear-gradient(180deg, rgba(255,62,165,.30), rgba(53,224,255,.12));
  box-shadow:0 0 40px rgba(255,62,165,.25);
}
.neighbor.left{left:-4vw;transform:perspective(900px) rotateY(24deg)}
.neighbor.right{right:-4vw;transform:perspective(900px) rotateY(-24deg)}
@media (max-width:900px){.neighbor{display:none}}

/* ───────────────────────── THE CABINET ───────────────────────── */
#stage{
  position:relative;
  transform:scale(var(--s));
  transform-origin:center center;
  will-change:transform;
}
#cabinet{
  width:452px;
  transform-style:preserve-3d;
  transform:perspective(1500px) rotateX(2.2deg);
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.8));
}
/* the walk-up */
body.walking #cabinet{animation:walkup 1.9s cubic-bezier(.16,.84,.3,1) both}
body.walking .floor{animation:floorpush 1.9s cubic-bezier(.16,.84,.3,1) both}
@keyframes walkup{
  0%{transform:perspective(1500px) rotateX(2.2deg) scale(.30) translateY(78px);filter:blur(6px) brightness(.35)}
  60%{filter:blur(0) brightness(.9)}
  100%{transform:perspective(1500px) rotateX(2.2deg) scale(1) translateY(0);filter:blur(0) brightness(1)}
}
@keyframes floorpush{0%{opacity:.15;transform:rotateX(82deg) scale(.5)}100%{opacity:1;transform:rotateX(76deg) scale(1)}}
@media (prefers-reduced-motion:reduce){
  body.walking #cabinet,body.walking .floor{animation-duration:.01s}
}

#stage::after{
  content:"";position:absolute;left:50%;bottom:-26px;transform:translateX(-50%);
  width:120%;height:80px;pointer-events:none;z-index:-1;
  background:radial-gradient(50% 50% at 50% 50%, rgba(232,180,79,.20), rgba(53,224,255,.06) 45%, transparent 72%);
  filter:blur(10px);
}

/* marquee */
.marquee{
  height:74px;border-radius:12px 12px 3px 3px;padding:5px;
  background:linear-gradient(180deg,#22222c,#111117);
  box-shadow:0 0 0 1px rgba(255,255,255,.05), 0 18px 46px rgba(232,180,79,.20);
}
.marquee-face{
  height:100%;border-radius:8px 8px 2px 2px;
  display:flex;align-items:center;justify-content:center;gap:12px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 55%),
    linear-gradient(180deg,#2a1c06,#191008);
  box-shadow:inset 0 0 26px rgba(232,180,79,.45), inset 0 0 2px #000;
  font-family:"Press Start 2P",monospace;
}
.marquee-face b{
  font-size:19px;color:#fff2d2;letter-spacing:1px;
  text-shadow:0 0 6px var(--gold),0 0 22px rgba(232,180,79,.9),0 0 44px rgba(232,180,79,.5);
  animation:buzz 6s infinite steps(1);
}
.marquee-face span{
  font-size:19px;color:#ffd884;letter-spacing:1px;
  text-shadow:0 0 6px var(--pink),0 0 22px rgba(255,62,165,.7);
}
@keyframes buzz{0%,96%{opacity:1}97%{opacity:.55}98%{opacity:1}99%{opacity:.7}}

/* bezel + screen */
.bezel{
  margin-top:8px;padding:22px 20px 26px;
  border-radius:8px;
  background:
    linear-gradient(180deg,#1b1b23,#101016 40%,#0b0b10),
    var(--cab);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 2px 0 #000;
  position:relative;
}
.bezel::before,.bezel::after{
  content:"";position:absolute;top:0;bottom:0;width:9px;
  background:linear-gradient(180deg,var(--gold),var(--pink));opacity:.5;
}
.bezel::before{left:0;border-radius:8px 0 0 8px}
.bezel::after{right:0;border-radius:0 8px 8px 0}
.screen{
  position:relative;border-radius:16px/22px;overflow:hidden;
  background:#000;
  box-shadow:0 0 0 8px #06060a, 0 0 0 10px #23232c, inset 0 0 60px rgba(0,0,0,.9);
  aspect-ratio:4/3;
}
.crt{
  position:absolute;inset:0;
  background:radial-gradient(120% 120% at 50% 45%, #0b1a16 0%, var(--scr) 60%, #030706 100%);
  animation:flick 5s infinite;
}
@keyframes flick{0%,92%{filter:none}93%{filter:brightness(1.18)}94%{filter:brightness(.94)}95%{filter:none}}
.glass{
  position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.34) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply;
}
.glare{
  position:absolute;inset:0;pointer-events:none;border-radius:16px/22px;
  background:
    linear-gradient(126deg, rgba(255,255,255,.11) 0 22%, transparent 42%),
    radial-gradient(100% 100% at 50% 50%, transparent 52%, rgba(0,0,0,.68) 100%);
}
.scr{
  position:absolute;inset:0;padding:14px 15px;display:flex;flex-direction:column;
  font-family:"Press Start 2P",monospace;color:var(--grn);
}
.scr[hidden]{display:none}

.scr-head{
  font-size:9px;letter-spacing:1px;color:var(--gold);
  display:flex;align-items:center;gap:7px;
  border-bottom:2px solid rgba(125,255,178,.18);padding-bottom:9px;
}
.scr-head em{margin-left:auto;font-style:normal;color:var(--neon);font-size:8px}
.blink{animation:bl 1s steps(1) infinite}
@keyframes bl{50%{opacity:0}}

/* the game grid on the CRT */
.grid{
  flex:1;display:grid;grid-template-columns:1fr 1fr;
  gap:7px;padding:11px 0 11px 12px;align-content:center;
}
.tile{
  position:relative;display:flex;align-items:center;gap:8px;
  padding:8px;border:2px solid rgba(125,255,178,.16);
  background:rgba(125,255,178,.03);
  cursor:pointer;transition:background .12s,border-color .12s,transform .12s;
}
.tile .ico{width:26px;height:26px;flex:none}
.tile .nm{font-size:8.5px;letter-spacing:.5px;color:#d6ffe8;line-height:1.5}
.tile .nm i{display:block;font-style:normal;font-size:6.5px;color:rgba(125,255,178,.5);margin-top:4px}
.tile:hover{background:rgba(125,255,178,.08)}
.tile.sel{
  border-color:var(--gold);background:rgba(232,180,79,.14);
  transform:translateY(-1px);
  box-shadow:0 0 0 1px rgba(232,180,79,.5), 0 0 22px rgba(232,180,79,.30);
}
.tile.sel .nm{color:#fff4dc}
.tile.sel::before{
  content:"▸";position:absolute;left:-11px;top:50%;transform:translateY(-50%);
  color:var(--gold);font-size:9px;animation:bl 1s steps(1) infinite;
}
.scr-foot{border-top:2px solid rgba(125,255,178,.18);padding-top:9px;min-height:44px}
.foot-name{font-size:9px;color:var(--neon);letter-spacing:1px}
.foot-blurb{
  font-family:VT323,monospace;font-size:16px;line-height:1.15;
  color:rgba(214,255,232,.72);margin-top:5px;letter-spacing:.4px;
}

/* boot screen */
.boot-wrap{margin:auto;text-align:center;width:100%}
.boot-coin{font-size:8px;color:var(--gold);letter-spacing:1px}
.boot-name{
  font-size:17px;color:#fff;margin:18px 0 20px;letter-spacing:1px;
  text-shadow:0 0 12px var(--neon),0 0 30px rgba(53,224,255,.6);
}
.boot-bar{height:9px;border:2px solid rgba(125,255,178,.4);margin:0 6px}
.boot-bar i{display:block;height:100%;width:0;background:var(--grn);box-shadow:0 0 12px var(--grn);animation:fill .85s linear forwards}
@keyframes fill{to{width:100%}}
.boot-tip{font-size:8px;margin-top:14px;color:rgba(125,255,178,.7);animation:bl .5s steps(1) infinite}

/* ───────────────────────── CONTROL PANEL ───────────────────────── */
.panel{
  height:118px;margin-top:-2px;
  background:linear-gradient(180deg,#1d1d26,#0e0e13);
  border-radius:0 0 6px 6px;
  transform:perspective(700px) rotateX(26deg);
  transform-origin:top center;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.07), 0 22px 40px rgba(0,0,0,.7);
}
.panel-face{
  height:100%;display:flex;align-items:center;justify-content:space-between;
  padding:0 44px;
  background:
    radial-gradient(120% 160% at 20% 0%, rgba(53,224,255,.10), transparent 60%),
    radial-gradient(120% 160% at 85% 0%, rgba(255,62,165,.10), transparent 60%);
}
.stick{position:relative;width:74px;height:74px;flex:none}
.stick-base{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:56px;height:56px;border-radius:50%;
  background:radial-gradient(circle at 50% 35%, #33333f, #15151b 70%);
  box-shadow:inset 0 3px 7px rgba(0,0,0,.9), 0 1px 0 rgba(255,255,255,.07);
}
.stick-arm{
  position:absolute;left:50%;bottom:36px;transform-origin:bottom center;
  transform:translateX(-50%) translateY(var(--push,0px)) rotate(var(--tilt,0deg)) scale(var(--sq,1));
  transition:transform .13s cubic-bezier(.3,1.6,.5,1);
}
.stick-arm .shaft{
  display:block;width:9px;height:30px;margin:0 auto;
  background:linear-gradient(90deg,#6a6a78,#c9c9d6 40%,#5a5a68);
  border-radius:3px;
}
.stick-arm .ball{
  position:absolute;left:50%;top:-19px;transform:translateX(-50%);
  width:30px;height:30px;border-radius:50%;
  background:radial-gradient(circle at 34% 28%, #ff9ec7, #e8145f 55%, #7d0730);
  box-shadow:0 3px 8px rgba(0,0,0,.7), inset 0 -4px 8px rgba(0,0,0,.45);
}
.btns{display:flex;align-items:center;gap:15px}
.abtn{
  position:relative;width:50px;height:50px;border-radius:50%;border:0;cursor:pointer;
  font-family:"Press Start 2P",monospace;font-size:6px;color:rgba(0,0,0,.62);
  display:flex;align-items:center;justify-content:center;
  transition:transform .07s,box-shadow .07s;
  padding:0;
}
.abtn.red{background:radial-gradient(circle at 36% 30%, #ff8a8a, #e02020 58%, #8a0f0f);box-shadow:0 6px 0 #4a0808, 0 8px 16px rgba(224,32,32,.4)}
.abtn.blue{background:radial-gradient(circle at 36% 30%, #9fe0ff, #1f8fd0 58%, #0d4a72);box-shadow:0 6px 0 #062c46, 0 8px 16px rgba(31,143,208,.35)}
.abtn.small{width:38px;height:38px;background:radial-gradient(circle at 36% 30%, #ffe6a8, #d8a12c 58%, #7d5a12);box-shadow:0 5px 0 #4a3608;font-size:13px}
.abtn:active,.abtn.press{transform:translateY(5px);box-shadow:0 1px 0 rgba(0,0,0,.8)}
.abtn span{pointer-events:none}

/* waist + legs */
.waist{
  height:66px;background:linear-gradient(180deg,#101016,#0a0a0e);
  border-radius:0 0 4px 4px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.coinslot{display:flex;gap:12px}
.coinslot i{
  width:34px;height:9px;border-radius:2px;background:#05050a;
  box-shadow:inset 0 2px 4px #000, 0 1px 0 rgba(255,255,255,.09);
}
.freeplay{
  font-family:"Press Start 2P",monospace;font-size:6.5px;letter-spacing:1px;
  color:rgba(232,180,79,.62);
}
.legs{display:flex;justify-content:space-between;padding:0 26px}
.legs span{width:60px;height:16px;background:linear-gradient(180deg,#0c0c11,#050508);border-radius:0 0 3px 3px}

/* ───────────────────────── WALK-UP OVERLAY ───────────────────────── */
#walkup{
  position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:5vh;text-align:center;cursor:pointer;z-index:5;
  background:radial-gradient(60% 60% at 50% 50%, transparent 30%, rgba(4,4,8,.72));
  transition:opacity .45s;
}
body:not(.walking) #walkup{opacity:0;pointer-events:none}
.walk-kicker{
  font-family:"Press Start 2P",monospace;font-size:8px;letter-spacing:3px;
  color:var(--gold);opacity:.85;margin-bottom:14px;
}
#walkup h1{
  font-family:"Press Start 2P",monospace;font-size:clamp(15px,3.4vw,26px);letter-spacing:2px;
  color:#fff;text-shadow:0 0 14px var(--neon),0 0 38px rgba(53,224,255,.65);
  animation:bl 1.05s steps(1) infinite;
}
.walk-hint{
  margin-top:16px;font-size:12px;color:rgba(233,233,242,.55);letter-spacing:.4px;
}

/* ───────────────────────── THE PLAYER ───────────────────────── */
#player{position:fixed;inset:0;z-index:60;background:#000;opacity:0;transition:opacity .3s}
#player.on{opacity:1}
#player[hidden]{display:none}
#frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#000}
#hud{
  position:absolute;top:0;left:0;right:0;height:44px;z-index:2;
  display:flex;align-items:center;gap:12px;padding:0 12px;
  background:linear-gradient(180deg,rgba(4,4,8,.94),rgba(4,4,8,0));
  transition:transform .28s,opacity .28s;
}
#hud.hide{transform:translateY(-100%);opacity:0}
#hudpeek{position:absolute;top:0;left:0;right:0;height:52px;z-index:1}
#hud button{
  font-family:"Press Start 2P",monospace;font-size:8px;letter-spacing:1px;
  background:rgba(255,255,255,.09);color:#fff;border:1px solid rgba(255,255,255,.18);
  padding:9px 12px;border-radius:7px;cursor:pointer;
}
#hud button:hover{background:rgba(232,180,79,.22);border-color:var(--gold)}
#hudName{font-family:"Press Start 2P",monospace;font-size:9px;color:var(--gold);letter-spacing:1px}
#hudFs{font-size:13px!important;line-height:1}

@media (max-height:560px){ .walk-hint{display:none} }