:root{
  --ink:#1D2B53; --plum:#7E2553; --pink:#FF77A8; --yel:#FFEC27; --peach:#FFCCAA;
  --red:#FF004D; --grey:#5F574F; --light:#C2C3C7; --white:#FFF1E8; --blue:#29ADFF; --green:#00E436;
  --pix:"Press Start 2P", monospace; --mono:"JetBrains Mono", monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:
    radial-gradient(circle at 20% 10%, rgba(255,119,168,.12), transparent 40%),
    radial-gradient(circle at 85% 70%, rgba(41,173,255,.1), transparent 45%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0 2px, transparent 2px 4px),
    var(--ink);
  color:var(--white); font-family:var(--mono); min-height:100vh;
}
.topbar{position:relative;text-align:center;padding:28px 12px 18px;overflow:hidden}
.rainbow{position:absolute;left:0;right:0;top:0;height:8px;
  background:linear-gradient(90deg,#000,#1D2B53,#7E2553,#008751,#AB5236,#5F574F,#C2C3C7,#FFF1E8,#FF004D,#FFA300,#FFEC27,#00E436,#29ADFF,#83769C,#FF77A8,#FFCCAA,#000);
  background-size:200% 100%;animation:slide 6s linear infinite;image-rendering:pixelated}
@keyframes slide{to{background-position:-200% 0}}
h1{font-family:var(--pix);font-size:clamp(20px,5vw,40px);margin:10px 0 10px;color:var(--yel);
  text-shadow:4px 4px 0 var(--plum),8px 8px 0 #000;letter-spacing:2px;animation:drop .6s steps(6) both}
@keyframes drop{from{transform:translateY(-40px);opacity:0}}
.berry{display:inline-block;animation:bob 1.6s steps(4) infinite}
@keyframes bob{50%{transform:translateY(-6px) rotate(-8deg)}}
.tag{margin:0;font-weight:300;color:var(--light);font-size:13px;animation:drop .6s .2s steps(6) both}

.stage{display:grid;grid-template-columns:auto minmax(300px,440px);gap:28px;justify-content:center;align-items:start;padding:10px 16px 20px}
@media (max-width:980px){.stage{grid-template-columns:1fr;justify-items:center}}

/* console */
.console{background:linear-gradient(160deg,#ffd9bf,var(--peach) 40%,#e9b591);border-radius:26px 26px 60px 26px;
  padding:18px 20px 22px;box-shadow:0 8px 0 #c98f6d,0 16px 0 rgba(0,0,0,.35),inset 0 2px 0 #fff3e6;
  color:var(--ink);position:relative;animation:drop .6s .3s steps(6) both;max-width:100%}
.slot{position:relative;height:64px;margin:0 auto 14px;border:3px dashed var(--plum);border-radius:10px;
  background:repeating-linear-gradient(45deg,rgba(126,37,83,.08) 0 8px,transparent 8px 16px);cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .15s}
.slot.drag{background:var(--pink);border-color:var(--ink)}
.slot-mouth{position:absolute;bottom:-9px;left:12%;right:12%;height:8px;background:#000;border-radius:0 0 6px 6px}
.cart{display:flex;align-items:center;gap:10px;font-family:var(--pix);font-size:10px;line-height:1.5;padding:0 10px;text-align:center}
.cart img{height:52px;image-rendering:pixelated;border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.cart.slide{animation:insert .5s steps(5)}
@keyframes insert{from{transform:translateY(-60px);opacity:0}to{transform:none}}

.bezel{background:#2a2633;border-radius:12px 12px 36px 12px;padding:10px 18px 22px;box-shadow:inset 0 -4px 0 #000, inset 0 3px 0 #4a4456}
.bezel-top{display:flex;align-items:center;gap:8px;font-family:var(--pix);font-size:7px;color:var(--light);margin-bottom:8px}
.led{width:8px;height:8px;border-radius:50%;background:#5a1020}
.led.on{background:var(--red);box-shadow:0 0 8px var(--red)}
.fps{margin-left:auto;color:var(--green)}
.screen-wrap{position:relative;margin:0 auto;background:#000;line-height:0}
#canvas{display:block;width:512px;height:512px;image-rendering:pixelated;image-rendering:crisp-edges}
.scan{position:absolute;inset:0;pointer-events:none;display:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.45))}
.scan.on{display:block}
.badge{font-family:var(--pix);font-size:11px;margin:14px 0 4px 6px;color:var(--plum);text-shadow:1px 1px 0 #fff3e6;letter-spacing:3px}

.controls{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 4px 0;user-select:none;-webkit-user-select:none;touch-action:none}
.dpad{display:grid;grid-template-columns:repeat(3,40px);grid-template-rows:repeat(3,40px)}
.dp{background:#2a2633;border:none;box-shadow:inset 0 -4px 0 #000;padding:0}
.dp:active,.dp.held{box-shadow:inset 0 2px 0 #000;background:#433d4f}
.up{grid-area:1/2;border-radius:6px 6px 0 0}.left{grid-area:2/1;border-radius:6px 0 0 6px}
.hub{grid-area:2/2;background:#2a2633}.right{grid-area:2/3;border-radius:0 6px 6px 0}.down{grid-area:3/2;border-radius:0 0 6px 6px}
.mid{display:flex;gap:8px;align-self:flex-end;margin-bottom:6px}
.pill{font-family:var(--pix);font-size:7px;border:none;background:var(--grey);color:var(--white);padding:8px 10px;border-radius:20px;box-shadow:0 3px 0 #2a2633;transform:rotate(-20deg);cursor:pointer}
.pill:active{transform:rotate(-20deg) translateY(3px);box-shadow:none}
.ab{display:flex;gap:12px;transform:rotate(-20deg)}
.round{width:56px;height:56px;border-radius:50%;border:none;font-family:var(--pix);font-size:14px;color:var(--white);cursor:pointer}
.round.o{background:var(--pink);box-shadow:0 5px 0 var(--plum);margin-top:22px}
.round.x{background:var(--red);box-shadow:0 5px 0 #7a0024}
.round:active,.round.held{transform:translateY(5px);box-shadow:none}
.speaker{position:absolute;right:26px;bottom:18px;display:flex;gap:5px;transform:rotate(-20deg);opacity:.5;pointer-events:none}
.speaker i{width:4px;height:26px;background:var(--plum);border-radius:2px}
@media (max-width:980px){.speaker{display:none}}

/* drawer */
.drawer{width:100%;background:#0e1530;border:3px solid #000;box-shadow:6px 6px 0 var(--plum);animation:drop .6s .45s steps(6) both}
.drawer-head{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;background:var(--plum);font-family:var(--pix);font-size:10px}
.mini{font-family:var(--pix);background:var(--yel);border:none;width:24px;height:22px;cursor:pointer;box-shadow:2px 2px 0 #000}
.drawer-body.closed{display:none}
.tabs{display:flex;border-bottom:3px solid #000}
.tab{flex:1;font-family:var(--pix);font-size:8px;padding:10px 0;background:#1D2B53;color:var(--light);border:none;border-right:2px solid #000;cursor:pointer}
.tab.active{background:var(--yel);color:var(--ink)}
.panel{display:none;padding:12px;max-height:460px;overflow:auto}
.panel.active{display:block}
.info{display:grid;grid-template-columns:80px 1fr;gap:6px 10px;margin:0 0 14px;font-size:13px}
.info dt{color:var(--pink);font-weight:800}
.info dd{margin:0;word-break:break-word}
.knobs{display:flex;flex-direction:column;gap:10px;font-size:12px;border-top:2px dashed #2e3a6a;padding-top:12px}
.knobs select,.knobs input[type=range]{accent-color:var(--pink);vertical-align:middle}
.knobs select{font-family:var(--mono);background:#1D2B53;color:var(--white);border:2px solid #000}
.fine{font-size:11px;color:#83769C;font-weight:300}
.code{margin:0;font-size:11px;line-height:1.45;white-space:pre;color:var(--light);tab-size:1}
.code .k{color:var(--pink);font-weight:800}.code .s{color:var(--green)}.code .c{color:#83769C;font-style:italic}.code .n{color:#FFA300}
#spriteCanvas{width:256px;height:256px;image-rendering:pixelated;background:#000;border:2px solid #000;display:block;max-width:100%}
.log{font-size:11px;line-height:1.5}
.log div{border-bottom:1px solid #1d2850;padding:2px 0;word-break:break-word}
.log .err{color:var(--red)}.log .ok{color:var(--green)}.log .warn{color:var(--yel)}

/* shelf */
.shelf{max-width:1000px;margin:6px auto;padding:0 16px}
.shelf h2{font-family:var(--pix);font-size:11px;color:var(--yel)}
.recent{display:flex;gap:14px;flex-wrap:wrap;padding:12px;background:#4a2a1b;border-bottom:10px solid #2b170e;box-shadow:inset 0 -6px 0 #6b3d26;min-height:110px;align-items:flex-end}
.recent .empty{font-size:12px;color:#c89878;align-self:center}
.rc{width:72px;cursor:pointer;background:none;border:none;padding:0;color:var(--white);font-family:var(--mono);font-size:9px;text-align:center;transition:transform .1s steps(2)}
.rc:hover{transform:translateY(-6px) rotate(-3deg)}
.rc img{width:72px;height:92px;object-fit:cover;image-rendering:pixelated;border:2px solid #000;box-shadow:3px 3px 0 #000;display:block;background:#000}
.rc span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:4px}

.foot{max-width:1000px;margin:20px auto 40px;padding:0 16px;display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;font-size:12px}
.keys{display:flex;gap:14px;flex-wrap:wrap;color:var(--light)}
kbd{font-family:var(--pix);font-size:8px;background:var(--white);color:var(--ink);padding:3px 5px;box-shadow:0 2px 0 var(--grey)}
.foot-btns{display:flex;gap:10px}
.chunky{font-family:var(--pix);font-size:9px;padding:12px 14px;border:3px solid #000;background:var(--yel);color:var(--ink);box-shadow:4px 4px 0 #000;cursor:pointer}
.chunky.alt{background:var(--blue)}
.chunky:active{transform:translate(4px,4px);box-shadow:none}
.remix{font-family:var(--pix);font-size:9px;color:var(--pink)}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,120px);background:var(--yel);color:var(--ink);font-family:var(--pix);font-size:9px;padding:12px 16px;border:3px solid #000;box-shadow:4px 4px 0 #000;transition:transform .25s steps(4);z-index:9;max-width:90vw;text-align:center;line-height:1.6}
.toast.show{transform:translate(-50%,0)}
@media (max-width:560px){
  .console{padding:14px 12px 18px}
  .bezel{padding:8px 10px 16px}
  .dpad{grid-template-columns:repeat(3,48px);grid-template-rows:repeat(3,48px)}
  .round{width:62px;height:62px}
}