:root{
  --floor:#2a1c46; --wall:#160f28; --wall-lip:#3a2a63;
  --ink:#0c0817; --pink:#ff4fa8; --cyan:#37e6ff; --amber:#ffcf5c; --lime:#8bffb0;
  --text:#f3e9ff; --dim:#a493c7;
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;}
body{
  background:radial-gradient(1200px 600px at 50% -10%, #2a1748 0%, #120a24 55%, #0a0616 100%);
  color:var(--text);
  font-family:"Press Start 2P", ui-monospace, "Courier New", monospace;
  display:flex;align-items:center;justify-content:center;min-height:100vh;min-height:100svh;
  padding:max(8px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left));
  touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;-webkit-font-smoothing:none;
}
.machine{width:min(760px,100%);}
@supports (height:100svh){ .machine{width:min(760px,100%,calc((100svh - 210px) * 1.365));} }
.marquee{
  text-align:center;padding:14px 10px;border-radius:14px 14px 0 0;
  background:linear-gradient(180deg,#1c1233,#140c26);
  border:2px solid var(--wall-lip);border-bottom:none;letter-spacing:1px;
}
.marquee b{font-size:clamp(13px,3.4vw,20px);color:var(--amber);
  text-shadow:0 0 8px rgba(255,207,92,.55),0 0 20px rgba(255,79,168,.35);}
.marquee span{display:block;margin-top:8px;font-size:9px;color:var(--dim);letter-spacing:0;}
.cab{
  background:linear-gradient(180deg,#1a1130,#0f0a1f);
  border:2px solid var(--wall-lip);padding:12px;border-radius:0 0 14px 14px;
  box-shadow:0 24px 60px rgba(0,0,0,.55), inset 0 0 0 2px rgba(255,255,255,.02);
}
.screenwrap{position:relative;border-radius:8px;overflow:hidden;background:#000;
  border:2px solid #05030c;box-shadow:inset 0 0 0 4px #1b1330;}
.hud{
  position:absolute;top:0;left:0;right:0;z-index:4;
  display:flex;align-items:center;gap:10px;padding:8px 10px;font-size:9px;
  background:linear-gradient(180deg,rgba(9,5,18,.92),rgba(9,5,18,0));pointer-events:none;
}
.hud .room{color:var(--cyan);text-shadow:0 0 8px rgba(55,230,255,.5);}
.hud .who{color:var(--dim);letter-spacing:0;}
.hud .who b{color:var(--lime);}
.hud .hint{color:var(--dim);letter-spacing:0;margin-left:auto;}
#exitBtn{
  pointer-events:auto;display:none;margin-left:auto;border:2px solid var(--pink);
  background:#1a0f24;color:var(--pink);font-family:inherit;font-size:9px;
  padding:6px 8px;border-radius:6px;cursor:pointer;
}
body.ingame #exitBtn{display:inline-block;}
body.ingame .hud .hint{display:none;}
canvas#game{display:block;width:100%;height:auto;image-rendering:pixelated;background:#100a20;
  touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
.scanlines{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px);
  mix-blend-mode:multiply;opacity:.6;}
.vignette{position:absolute;inset:0;z-index:3;pointer-events:none;
  box-shadow:inset 0 0 90px rgba(0,0,0,.7);border-radius:8px;}

/* in-game stage overlay */
.stage{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;
  padding:44px 14px 14px;background:#0a0716;overflow:auto;}
.gamecanvas{image-rendering:pixelated;max-width:100%;height:auto;border:2px solid #241640;border-radius:4px;}
.slot{text-align:center;color:var(--text);}
.slot h2{font-size:16px;margin:0 0 14px;}
.slot p{font-size:9px;line-height:1.9;margin:6px 0;}
.slot .dim{color:var(--dim);}
.slot code{display:inline-block;margin:8px 0;color:var(--amber);font-size:9px;}

/* wardrobe */
.wardrobe{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap;justify-content:center;color:var(--text);width:100%;}
.wpreview{position:sticky;top:0;display:flex;flex-direction:column;align-items:center;gap:8px;}
.wpreview canvas{background:#170f2b;border:2px solid #241640;border-radius:8px;image-rendering:pixelated;}
.wname-tag{font-size:9px;color:var(--amber);text-shadow:0 0 8px rgba(255,207,92,.4);}
.wform{display:flex;flex-direction:column;gap:12px;min-width:250px;max-width:340px;flex:1;}
.wrow{display:flex;flex-direction:column;gap:6px;}
.wrow label{font-size:8px;color:var(--dim);}
.wform input{font-family:inherit;font-size:10px;background:#170f2b;border:2px solid var(--wall-lip);
  color:var(--text);padding:9px;border-radius:6px;}
.chips{display:flex;gap:6px;flex-wrap:wrap;}
.chip{font-family:inherit;font-size:8px;color:var(--text);background:#1c1234;
  border:2px solid var(--wall-lip);border-radius:6px;padding:8px 10px;cursor:pointer;text-transform:capitalize;}
.chip.on{border-color:var(--amber);color:var(--amber);}
.swatches{display:flex;gap:6px;flex-wrap:wrap;}
.swatch{width:28px;height:28px;border-radius:6px;border:2px solid #2a1a4d;cursor:pointer;}
.swatch.on{border-color:#fff;box-shadow:0 0 0 2px var(--amber);}
.wnote{font-size:7px;color:var(--dim);line-height:1.8;margin:4px 0 0;}
.wfoot{display:flex;gap:8px;margin-top:12px;}
.wfoot button{flex:1;font-family:inherit;font-size:9px;padding:12px;border-radius:8px;cursor:pointer;border:none;text-transform:uppercase;}
.wconfirm{background:#8bffb0;color:#05230f;font-weight:bold;}
.wcancel{background:transparent;border:1px solid #4a2f7a;color:var(--dim);}

/* hall of fame */
.hall{color:var(--text);text-align:center;width:100%;max-width:420px;}
.hall h2{font-size:14px;color:var(--amber);margin:0 0 14px;}
.hall .board{margin:0 0 14px;text-align:left;}
.hall h3{font-size:9px;color:var(--cyan);margin:0 0 6px;}
.hall ol{margin:0;padding-left:20px;}
.hall li{font-size:9px;line-height:2;display:flex;justify-content:space-between;}
.hall li b{color:var(--lime);}
.hall .dim{color:var(--dim);font-size:9px;}
.clearbtn{margin-top:10px;font-family:inherit;font-size:8px;color:var(--dim);
  background:transparent;border:2px solid var(--wall-lip);border-radius:6px;padding:8px 10px;cursor:pointer;}

/* intro */
.intro{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:16px;text-align:center;padding:24px;background:rgba(10,6,20,.9);}
.intro h1{font-size:clamp(14px,4vw,22px);color:var(--pink);margin:0;text-shadow:0 0 12px rgba(255,79,168,.5);}
.intro p{font-size:9px;line-height:1.8;color:var(--text);max-width:44ch;margin:0;}
.intro .keys{font-size:9px;color:var(--dim);line-height:2;}
.startbtn{font-family:inherit;font-size:11px;color:var(--ink);background:var(--amber);
  border:none;padding:12px 18px;border-radius:8px;cursor:pointer;
  box-shadow:0 0 0 3px rgba(255,207,92,.25),0 6px 0 #b98d2f;}
.startbtn:active{transform:translateY(3px);box-shadow:0 0 0 3px rgba(255,207,92,.25),0 3px 0 #b98d2f;}

/* controls */
.controls{display:flex;align-items:center;justify-content:space-between;margin-top:12px;gap:12px;}
.dpad{display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,44px);gap:4px;}
.dpad button,.abtn{font-family:inherit;color:var(--text);background:#1c1234;
  border:2px solid var(--wall-lip);border-radius:8px;font-size:12px;cursor:pointer;
  user-select:none;-webkit-user-select:none;touch-action:none;}
.dpad button:active,.abtn:active{background:#2a1a4d;}
.dpad .up{grid-column:2;grid-row:1;} .dpad .left{grid-column:1;grid-row:2;}
.dpad .right{grid-column:3;grid-row:2;} .dpad .down{grid-column:2;grid-row:3;}
.dpad .mid{grid-column:2;grid-row:2;visibility:hidden;}
.abtn{width:74px;height:74px;border-radius:50%;font-size:14px;color:var(--amber);
  border-color:var(--amber);box-shadow:0 5px 0 #6e5322;}
.abtn:active{transform:translateY(3px);box-shadow:0 2px 0 #6e5322;}
.foot{margin-top:10px;text-align:center;font-size:8px;color:var(--dim);letter-spacing:0;line-height:1.9;}
@media (max-width:560px){.controls{flex-direction:column-reverse;align-items:center;}}
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(6,4,16,.62);z-index:6;}
.overlay .panel{background:#1a1030;border:2px solid #4a2f7a;border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:8px;min-width:220px;max-width:80%;text-align:center;}
.overlay h3{margin:0 0 2px;color:#ffcf5c;font-size:12px;}
.overlay p{margin:0 0 4px;color:#cbb8ef;font-size:9px;line-height:1.5;}
.overlay button{font-family:inherit;font-size:10px;color:#fff;background:#e5578a;border:none;border-radius:8px;padding:11px;cursor:pointer;}
.overlay button.ghost{background:transparent;border:1px solid #4a2f7a;color:#a493c7;}
@media (max-height:660px){ .marquee{padding:8px 10px;} .marquee span{display:none;} .foot{display:none;} .cab{padding:8px;} }
@media (max-height:540px){ .dpad{grid-template-columns:repeat(3,40px);grid-template-rows:repeat(3,40px);} .abtn{width:60px;height:60px;} .controls{margin-top:6px;} }
@media (prefers-reduced-motion:reduce){.scanlines{display:none;}}

.startkeys{font-size:8px;color:var(--dim);margin:0;}

/* wardrobe tabs */
.tabbar{display:flex;gap:4px;flex-wrap:wrap;}
.tab{font-family:inherit;font-size:8px;color:var(--dim);background:#160f28;border:2px solid var(--wall-lip);
  border-radius:6px 6px 0 0;padding:8px 10px;cursor:pointer;text-transform:capitalize;}
.tab.on{color:var(--amber);border-color:var(--amber);background:#1c1234;}
.pane{flex-direction:column;gap:12px;padding-top:10px;}
.wnote.locked{color:var(--amber);}