html,body{margin:0;padding:0;background:#0b0b10;color:#c8ccd8;min-height:100%;
  font-family:"Press Start 2P",monospace;overscroll-behavior:none;}
#wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;gap:14px;padding:10px;}
#logo{font-size:11px;color:#f07020;letter-spacing:2px;}
#logo span{color:#5a6070;}
#game{width:min(97vw,1536px);aspect-ratio:16/9;max-height:86vh;
  image-rendering:pixelated;image-rendering:crisp-edges;
  box-shadow:0 0 0 4px #1a1c24,0 0 0 5px #000,0 24px 60px rgba(0,0,0,.6);
  touch-action:none;-webkit-user-select:none;user-select:none;}
#game canvas{display:block;image-rendering:inherit;touch-action:none;}
#keys{font-family:"Press Start 2P",monospace;font-size:10px;color:#e8ecf4;text-align:center;
  line-height:1.9;max-width:900px;background:rgba(0,0,0,0.6);padding:8px 12px;
  border:1px solid #3a4048;border-radius:6px;}
#keys b{color:#f2c018;}
#touch-ui{position:fixed;inset:0;pointer-events:none;z-index:50;display:none;}
body.touch #touch-ui{display:block;}
#touch-ui .dpad{position:absolute;left:14px;bottom:14px;width:156px;height:156px;pointer-events:none;}
#touch-ui .actions{position:absolute;right:14px;bottom:14px;width:132px;height:232px;pointer-events:none;}
#touch-ui button{position:absolute;box-sizing:border-box;background:rgba(24,28,36,0.72);
  border:2px solid rgba(150,166,190,0.55);color:#e8ecf4;font-family:"Press Start 2P",monospace;
  font-size:11px;line-height:1;border-radius:12px;pointer-events:auto;touch-action:none;
  -webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;
  padding:0;outline:none;}
#touch-ui button.active{background:rgba(240,112,32,0.55);border-color:#f07020;color:#fff;}
#touch-ui .dpad .up   { left:52px; top:0;      width:52px; height:52px; border-radius:14px; }
#touch-ui .dpad .left { left:0;    top:52px;   width:52px; height:52px; border-radius:14px; }
#touch-ui .dpad .right{ left:104px;top:52px;   width:52px; height:52px; border-radius:14px; }
#touch-ui .dpad .down { left:52px; top:104px;  width:52px; height:52px; border-radius:14px; }
#touch-ui .actions button{ width:62px; height:52px; border-radius:12px; }
#touch-ui .actions .b-e    { left:0;   top:0;   }
#touch-ui .actions .b-sp   { left:70px;top:0;   }
#touch-ui .actions .b-sh   { left:0;   top:60px;width:132px;height:52px;font-size:10px; }
#touch-ui .actions .b-f    { left:0;   top:120px;width:62px;height:52px; }
#touch-ui .actions .b-q    { left:70px;top:120px;width:62px;height:52px; }
#touch-ui .actions .b-map  { left:0;   top:180px;width:132px;height:44px;font-size:9px; }
#touch-ui .mobile-action{display:none;position:absolute;left:50%;transform:translateX(-50%);bottom:14px;width:150px;height:42px;background:rgba(20,24,32,.9);border:2px solid #f07020;color:#ffe070;font-size:9px;z-index:60;}
#touch-ui .mobile-action.show{display:block;}
#touch-ui #mobile-next{bottom:62px;}
#touch-ui #mobile-menu{bottom:14px;}
#touch-ui #mobile-level2{top:116px;bottom:auto;width:190px;}
#rotate-prompt{position:fixed;inset:0;display:none;z-index:999;
  background:#0b0b10;color:#f07020;align-items:center;justify-content:center;
  flex-direction:column;gap:18px;font-family:"Press Start 2P",monospace;
  font-size:11px;text-align:center;padding:24px;line-height:1.8;}
#rotate-prompt .arrow{font-size:32px;}
#debug-ui{position:fixed;top:8px;right:8px;z-index:70;display:none;gap:6px;
  font-family:"Press Start 2P",monospace;}
#debug-ui.show{display:flex;flex-direction:column;align-items:flex-end;}
#debug-ui button{background:rgba(20,24,32,.92);border:2px solid #5a6070;color:#c8ccd8;
  font-family:"Press Start 2P",monospace;font-size:9px;padding:8px 10px;border-radius:8px;
  cursor:pointer;pointer-events:auto;touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;}
#debug-ui button.active{background:rgba(224,56,40,.85);border-color:#e03828;color:#fff;}
#debug-ui button.hidden-help{opacity:.45;}
#level-ui{position:fixed;top:8px;left:8px;z-index:70;display:none;gap:6px;
  font-family:"Press Start 2P",monospace;}
#level-ui.show{display:flex;flex-direction:row;}
#level-ui button{width:42px;height:42px;background:rgba(20,24,32,.92);border:2px solid #5a6070;
  color:#c8ccd8;font-family:"Press Start 2P",monospace;font-size:12px;border-radius:8px;
  cursor:pointer;pointer-events:auto;touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;
  padding:0;line-height:1;}
#level-ui button.active{background:rgba(240,112,32,.85);border-color:#f07020;color:#fff;}
#level-ui button.locked{opacity:.35;color:#6a7080;}
@media (hover:none) and (pointer:coarse) and (orientation:portrait){
  #rotate-prompt{display:flex;}
}
@media (hover:none) and (pointer:coarse){
  #keys{display:none;} #logo{display:none;}
  #wrap{padding:0;gap:0;min-height:100vh;min-height:100dvh;justify-content:center;}
  #game{width:100vw;max-height:100vh;max-height:100dvh;box-shadow:none;border-radius:0;}
  html,body{overflow:hidden;position:fixed;inset:0;}
}