html,body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;touch-action:manipulation;background:#000;height:100%;margin:0;overflow:hidden}body{position:fixed;inset:0}#app{width:100%;height:100%}.root{background:radial-gradient(#10102a 0%,#000 75%);width:100%;height:100%;position:relative}.stage{transform-origin:0 0;width:320px;height:224px;image-rendering:pixelated;color:#fff;font-family:Courier New,monospace;position:absolute;overflow:hidden}.stage.framed{background:#000;box-shadow:0 0 0 1px #000,0 0 0 3px #49496d,0 0 30px #000000e6}.stage canvas{image-rendering:pixelated;image-rendering:crisp-edges}.layer{position:absolute;inset:0}.px{flex:none;align-self:auto;display:block}.center{flex-direction:column;align-items:center;display:flex}.row{align-items:center;gap:4px;display:flex}.menu{flex-direction:column;gap:3px;display:flex}.menu-item{cursor:pointer;align-items:center;gap:4px;height:13px;display:flex}.menu-item .cursor{width:12px;height:11px}.menu-item.disabled{opacity:.4}.panel{background:#000024e0;border:1px solid #6d6db6;padding:6px;box-shadow:inset 0 0 0 1px #000,0 0 0 1px #000}.field{flex-direction:column;align-items:flex-start;gap:4px;margin-bottom:4px;display:flex}.field input{color:#fff;background:#000024;border:1px solid #6d6db6;outline:none;width:180px;max-width:100%;height:13px;padding:0 2px;font:700 8px Courier New,monospace}.field input:focus{background:#000049;border-color:#ffdb00}.tabs{gap:3px;margin-bottom:5px;display:flex}.tab{cursor:pointer;border:1px solid #49496d;flex:1;justify-content:center;padding:3px;display:flex}.tab.on{background:#24246d;border-color:#ffdb00}.btn{cursor:pointer;background:#24246d;border:1px solid #6d6db6;padding:4px 6px;display:inline-block}.btn:hover{border-color:#ffdb00}.blink{animation:1s steps(2,start) infinite blink}@keyframes blink{to{visibility:hidden}}.bob{animation:.8s steps(4,end) infinite alternate bob}@keyframes bob{0%{transform:translateY(0)}to{transform:translateY(-4px)}}.table{gap:1px 6px;display:grid}.speech{background:#fff;border:1px solid #000;padding:4px;position:relative;box-shadow:0 0 0 1px #fff,2px 2px 0 1px #000}.toast{background:#490000;border:1px solid #ff4949;padding:3px;position:absolute;bottom:6px;left:8px;right:8px}.hidden-input{opacity:0;pointer-events:none;position:absolute}.touch{pointer-events:none;touch-action:none;position:absolute;inset:0}.touch-cluster{justify-content:center;align-items:center;display:flex;position:absolute}.dpad,.rot,.touch-pause{pointer-events:auto;touch-action:none}.dpad{background:radial-gradient(circle at 40% 35%,#24246d,#000024 70%);border-radius:50%;position:relative;box-shadow:0 0 0 3px #000,0 0 0 5px #49496d,inset 0 0 12px #000c}.dpad-arm{color:#dbdbff;background:linear-gradient(#9292db,#49496d);border-radius:22%;justify-content:center;align-items:center;width:36%;height:36%;font:700 18px sans-serif;display:flex;position:absolute;box-shadow:0 0 0 2px #000,inset 0 2px #dbdbff,inset 0 -3px #24246d}.dpad-arm span{transform:scale(1.2)}.dpad-arm.on{color:#492400;background:linear-gradient(#ffdb00,#db9200);box-shadow:0 0 0 2px #000,inset 0 2px #ffff92,inset 0 -3px #926d00}.arm-left{top:32%;left:6%}.arm-right{top:32%;right:6%}.arm-down{bottom:6%;left:32%}.dpad-hub{background:#000024;border-radius:50%;width:20%;height:20%;position:absolute;top:40%;left:40%;box-shadow:inset 0 0 0 2px #49496d}.rot-pair{align-items:flex-end;display:flex;transform:rotate(-12deg)}.rot{color:#fff;text-shadow:0 2px #0009;border-radius:50%;justify-content:center;align-items:center;font-family:sans-serif;font-weight:700;display:flex;box-shadow:0 0 0 3px #000,0 4px 0 3px #000,inset 0 3px #ffffff8c,inset 0 -5px #00000059}.rot-cw{background:radial-gradient(circle at 38% 32%,#ff9292,#ff2424 45%,#920000)}.rot-ccw{background:radial-gradient(circle at 38% 32%,#b6dbff,#2492ff 45%,#002492);margin-bottom:18%}.rot.on{filter:brightness(1.25);transform:translateY(3px)scale(.95)}.touch-pause{color:#dbdbff;letter-spacing:2px;background:#24246d;border-radius:13px;justify-content:center;align-items:center;width:44px;height:26px;font:700 13px sans-serif;display:flex;position:absolute;box-shadow:0 0 0 2px #000,inset 0 0 0 1px #6d6db6}.stage.narrow>.layer.center{justify-content:center}.stage.narrow .menu-item{height:17px}.stage.narrow .menu{gap:2px}
