:root{
  --bg:#0d0a1a; --frame:#2a2440; --accent:#9d7fd4; --gold:#f5c542;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{
  height:100%; background:var(--bg);
  background-image:radial-gradient(circle at 20% 20%, #1a1638 0%, transparent 50%),
                   radial-gradient(circle at 80% 80%, #2a1e3a 0%, transparent 50%);
  font-family:"Press Start 2P", monospace;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  overflow:hidden; touch-action:none; user-select:none; -webkit-user-select:none;
}
#frame{
  position:relative; display:flex; flex-direction:column; align-items:center;
  padding:8px; background:linear-gradient(145deg,#3a3358,#1e1a30);
  border:4px solid var(--accent); border-radius:8px;
  box-shadow:0 0 30px rgba(157,127,212,0.4), inset 0 0 20px rgba(0,0,0,0.5);
}
#canvas{
  image-rendering:pixelated; image-rendering:crisp-edges;
  background:#1a1626; border:2px solid #000; border-radius:4px;
  display:block; touch-action:none;
}
/* mobile controls */
#mobile-controls{
  display:none; width:100%; justify-content:space-between;
  padding:12px 8px 4px; align-items:flex-end;
}
#dpad{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.dpad-row{ display:flex; gap:44px; }
#action-btns{ display:flex; gap:10px; align-items:flex-end; }
.mb{
  width:46px; height:46px; font-family:"Press Start 2P",monospace; font-size:12px;
  background:linear-gradient(145deg,#4a3d6b,#2a2440); color:#f4f0ff;
  border:2px solid var(--accent); border-radius:8px; cursor:pointer;
  box-shadow:0 3px 0 #1a1626; touch-action:none;
}
.mb:active{ transform:translateY(2px); box-shadow:0 1px 0 #1a1626; background:#5a4d7b; }
.mb.big{ width:60px; height:52px; font-size:10px; color:var(--gold); }
footer{
  margin-top:8px; font-family:"VT323",monospace; font-size:18px;
}
footer a{ color:var(--accent); text-decoration:none; }
footer a:hover{ color:var(--gold); text-decoration:underline; }
/* show mobile controls on touch devices / small screens */
@media (hover:none) and (pointer:coarse){
  #mobile-controls{ display:flex; }
}
@media (max-width:820px){
  #mobile-controls{ display:flex; }
}
</parameter>
</invoke>