:root { --bg:#0a0a0a; --panel:#111; --text:#eee; --line:#333; --accent:#68bf11; }
* { box-sizing:border-box; }
html,body { margin:0; background:var(--bg);color:var(--text);font-family:system-ui,Arial,sans-serif; }
#topbar {display:flex;justify-content:space-between;align-items:center;gap:12px;padding:7px 12px;background:#101010;border-bottom:1px solid var(--line);font-size:14px}
#topbar span {font-size:12px;color:#aaa}
#view-controls {padding:7px 10px 0}
.panel {max-width:1500px;margin:auto;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:7px 9px}
.row {display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin:4px 0}
.row label,.fuel {font-size:12px;color:#ccc}
.row input[type="range"] {width:115px;accent-color:var(--accent)}
.row .val {color:#a7d5ec;font-size:12px;min-width:28px}
.row .compact {display:flex;align-items:center;gap:6px}
.row .compact input[type="range"] {width:70px}
button,select,input[type="file"] {font:inherit;font-size:12px;color:#eee}
button,select {background:#222;border:1px solid #555;border-radius:4px;padding:5px 9px;cursor:pointer}
button.primary {background:#315917;border-color:#6b9c35;font-weight:700}
button:hover {background:#303030}
input[type="file"] {max-width:195px}
.fuel {display:flex;align-items:center;gap:6px}
#fuelBarUI {width:70px;height:9px;background:#333;border:1px solid #555;border-radius:4px;overflow:hidden}
#fuelFill {height:100%;width:100%;background:#68bf11}
#view-game {padding:4px 10px}
#canvas-holder {position:relative;width:100%;margin:auto;overflow:hidden}
#canvas-holder canvas {display:block;margin:auto}
#hud {position:absolute;top:10px;left:12px;z-index:4;pointer-events:none;color:#ddd;font-size:12px}
#status {text-align:center;color:#aaa;font-size:12px}
@media(max-width:760px) {#topbar span{display:none}.row{justify-content:flex-start}.panel{padding:6px}.row input[type="range"]{width:95px}}