html,body{margin:0;padding:0;height:100%;background:#000;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;font-family:monospace}
#stage{position:absolute;left:0;top:0;width:640px;height:480px;background:#000}
#canvas{position:absolute;left:0;top:0;width:100% !important;height:100% !important;display:block;image-rendering:pixelated;image-rendering:crisp-edges;background:#000;outline:none}
#loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#000;color:#c8a050;gap:12px}
#loading.gone{display:none}
#loadtitle{font:900 clamp(28px,8vw,64px)/1 Impact,"Arial Black",sans-serif;letter-spacing:3px;color:#b02010;text-shadow:3px 3px 0 #300}
#loadbar{width:60%;height:10px;border:2px solid #6a5020;background:#100}
#loadfill{height:100%;width:0;background:#c84010}
#loadtext{font:14px/1.3 monospace;color:#a08050;text-align:center;padding:0 12px}
#touch{position:absolute;inset:0;pointer-events:none;display:none}
body.touch #touch{display:block}
#stick{position:absolute;width:132px;height:132px;border-radius:50%;background:rgba(60,60,60,.25);border:2px solid rgba(180,150,90,.45);pointer-events:auto;touch-action:none}
#knob{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:rgba(180,40,20,.55);border:2px solid rgba(230,180,90,.8);pointer-events:none}
#pad{position:absolute;display:grid;grid-template-columns:repeat(3,64px);grid-template-rows:44px 64px;gap:6px;pointer-events:none}
.tb{pointer-events:auto;touch-action:none;border:2px solid rgba(180,150,90,.6);background:rgba(40,30,20,.45);color:#e8c070;font:700 13px/1 monospace;border-radius:6px;padding:0;-webkit-user-select:none;user-select:none}
.tb.on{background:rgba(200,60,20,.65);color:#fff}
.tb.big{font-size:15px}
#bMap{grid-column:1;grid-row:1}
#bPrev{grid-column:2;grid-row:1}
#bNext{grid-column:3;grid-row:1}
#bFire{grid-column:1 / span 2;grid-row:2}
#bUse{grid-column:3;grid-row:2}
#bMenu{position:absolute;width:64px;height:36px}
#helpBtn{position:absolute;right:8px;top:8px;width:32px;height:32px;border-radius:50%;border:2px solid rgba(180,150,90,.6);background:rgba(30,20,10,.6);color:#e8c070;font:700 16px/1 monospace;z-index:5;padding:0}
#help{position:absolute;inset:0;background:rgba(0,0,0,.85);color:#e8c070;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:6;padding:16px;box-sizing:border-box;gap:14px}
#help.hidden{display:none}
#help{overflow-y:auto;justify-content:flex-start;-webkit-overflow-scrolling:touch}
#help>*:first-child{margin-top:auto}
#help>*:last-child{margin-bottom:auto}
#credits{font:12px/1.5 monospace;max-width:560px;width:100%;border-top:1px solid rgba(160,112,48,.6);padding-top:10px;color:#d8c8a0}
#credits h2{font:700 15px monospace;color:#ff6a3a;margin:0 0 6px;letter-spacing:2px;text-transform:uppercase}
#credits p{margin:0 0 8px;overflow-wrap:anywhere}
#credits a{color:#e8c070}
#creditsLinks{display:flex;flex-wrap:wrap;gap:6px 14px}
#creditsLinks a{padding:4px 0}
#helpBody{font:14px/1.6 monospace;max-width:520px}
#helpBody b{color:#ff6a3a}
#helpClose{font:700 16px monospace;padding:8px 28px;background:#3a1a0a;color:#e8c070;border:2px solid #a07030;border-radius:6px}
body.land #pad{grid-template-columns:repeat(2,64px);grid-template-rows:44px 44px 64px}
body.land #bPrev{grid-column:1;grid-row:1}
body.land #bNext{grid-column:2;grid-row:1}
body.land #bMap{grid-column:1;grid-row:2}
body.land #bUse{grid-column:2;grid-row:2}
body.land #bFire{grid-column:1 / span 2;grid-row:3}