*{box-sizing:border-box}html,body{margin:0;background:#10141c;color:#fff;font:14px system-ui;height:100%;overflow:hidden}button,select{font:inherit;color:#fff;background:#283342;border:1px solid #526071;border-radius:9px;padding:9px 13px;cursor:pointer}button:active{background:#df4937}#app{height:100dvh;display:flex;flex-direction:column;padding:12px max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left))}nav{display:flex;justify-content:space-between;align-items:center;gap:12px;height:52px;flex-shrink:0}nav strong{letter-spacing:2px;color:#ffce67}small{font-size:11px;color:#b2bfcd;letter-spacing:0}nav div{display:flex;gap:6px}#viewport{position:relative;flex:1;min-height:0;background:#070a0f;border:1px solid #34404d;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center}#game{position:absolute;width:768px;height:464px;transform-origin:center;image-rendering:pixelated}canvas{image-rendering:pixelated}#welcome{position:absolute;inset:0;background:rgba(8,15,26,.83);display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;z-index:5}h1{font-size:clamp(24px,4vw,46px);margin:12px}#start{background:#dc4836;border:0;font-weight:700;padding:15px 35px;margin:16px}.hint{font-size:12px;line-height:1.9;color:#c0cbd8}footer{font-size:11px;color:#a0adbf;padding-top:8px;display:flex;justify-content:space-between;gap:10px}a{color:#b8c8df}#touch{display:none;position:absolute;inset:0;pointer-events:none;align-items:flex-end;justify-content:space-between;padding:12px;z-index:4}.dpad,.actions{display:flex;gap:8px;align-items:flex-end}#touch button{pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none;width:56px;height:56px;background:#172638bb;border:2px solid #ffffff65;border-radius:16px;font-weight:700}#touch button.pressed{background:#dc4836cc}.actions button:last-child{width:70px;height:70px;border-radius:50%;background:#c33d2dbb}@media(pointer:coarse){#touch{display:flex}footer{font-size:9px}nav{height:42px}nav small{display:none}button,select{padding:6px 8px}#app{padding-top:2px}}@media(pointer:coarse) and (orientation:portrait){#app{width:100dvh;height:100dvw;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(90deg)}}