:root{ --sky:#83c9ff; --ground:#3f7f3f; --panel:#fff7b0; --ink:#111; }
*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; background:var(--sky); font-family: monospace; }
#game-root{ position:relative; width:100%; height:100vh; overflow:hidden; }
#game{ display:block; width:100%; height:100%; image-rendering: pixelated; background:linear-gradient(#b6e4ff, #7fc6ff); }
#hud{ position:absolute; top:0; left:0; right:0; display:flex; justify-content:space-between; padding:8px 12px; color:var(--ink); }
#hud .hud-left span{ margin-right:10px; background:rgba(255,255,255,0.6); padding:4px 6px; border-radius:6px; }
.hud-btn{ background:var(--panel); border:none; padding:6px 10px; border-radius:8px; box-shadow:0 2px 0 #d2c06a; cursor:pointer; }
#touchControls{ position:absolute; left:0; right:0; bottom:0; pointer-events:none; }
.pad{ pointer-events:auto; position:absolute; width:64px; height:64px; border-radius:10px; background:rgba(255,255,255,0.6); display:flex; align-items:center; justify-content:center; user-select:none; }
.pad.left{ left:12px; bottom:84px; }
.pad.right{ left:92px; bottom:84px; }
.pad.up{ left:52px; bottom:152px; }
.pad.down{ left:52px; bottom:16px; }
.pad.action.poop{ right:16px; bottom:48px; }
@media (min-width: 768px){ #touchControls{ display:none; } }
#errorBox{ position:absolute; left:10px; bottom:10px; right:10px; background:rgba(0,0,0,0.7); color:#fff; padding:8px; border-radius:6px; font-size:12px; white-space:pre-wrap; }