html,body{min-height:100%;margin:0}body{box-sizing:border-box;-webkit-user-select:none;user-select:none;background:radial-gradient(circle at 50% 30%,#2b3328,#14180f 75%);place-items:center;padding:24px 8px;font-family:Trebuchet MS,Verdana,sans-serif;display:grid}.phone{box-sizing:border-box;background:linear-gradient(160deg,#4a5577,#2e3650 55%,#232a40);border-radius:38px 38px 46px 46px;width:min(560px,96vw);padding:18px 22px 26px;box-shadow:inset 0 2px 2px #ffffff40,inset 0 -3px 6px #00000073,0 18px 40px #0009}.phone-head{flex-direction:column;align-items:center;gap:6px;margin-bottom:10px;display:flex}.speaker{background:repeating-linear-gradient(90deg,#11151f 0 6px,#3a4258 6px 10px);border-radius:3px;width:64px;height:6px}.brand{color:#aab4d4;letter-spacing:3px;font-size:13px;font-weight:700}.screen{background:#c7f0d8;border:10px solid #1c2233;border-radius:8px;width:504px;height:288px;margin:0 auto;position:relative;overflow:hidden;box-shadow:inset 0 0 14px #43523d73}#game{width:100%;height:100%;position:relative}canvas{image-rendering:pixelated;touch-action:none}.lcd-grid{z-index:2;pointer-events:none;--px:4px;background-image:repeating-linear-gradient(to right, #222b1e21 0 1px, transparent 1px var(--px)), repeating-linear-gradient(to bottom, #222b1e21 0 1px, transparent 1px var(--px));position:absolute;inset:0}.keypad{flex-direction:column;align-items:center;gap:16px;margin-top:16px;display:flex}.softkeys{gap:120px;display:flex}.controls{box-sizing:border-box;justify-content:space-between;align-items:center;width:100%;padding:0 14px;display:flex}.joystick{touch-action:none;cursor:grab;width:150px;height:124px;position:relative}.joystick:active{cursor:grabbing}.joystick-base{opacity:.55;pointer-events:none;background:radial-gradient(circle at 50% 38%,#2b3248,#191e2c 72%);border-radius:50%;width:124px;height:124px;margin:-62px 0 0 -62px;transition:opacity 90ms linear,left 90ms ease-out,top 90ms ease-out;position:absolute;top:50%;left:50%;box-shadow:inset 0 3px 7px #0000008c,inset 0 -2px 4px #ffffff0f}.joystick-base.active{opacity:1}.joystick-knob{pointer-events:none;background:linear-gradient(#5b6688,#39415c 60%,#2b3248);border-radius:50%;width:54px;height:54px;margin:-27px 0 0 -27px;position:absolute;top:50%;left:50%;box-shadow:inset 0 1px 1px #ffffff4d,0 3px 5px #00000080}.actions{align-items:center;gap:14px;display:flex}.action-col{flex-direction:column;gap:10px;display:flex}.act{border-radius:50%}.act.fire{width:84px;height:84px;font-size:14px}.act.special,.act.switch{width:50px;height:50px;font-size:18px}.key{color:#d8deef;cursor:pointer;touch-action:none;background:linear-gradient(#5b6688,#39415c 60%,#2b3248);border:none;border-radius:14px 14px 18px 18px;font-size:18px;font-weight:700;box-shadow:inset 0 1px 1px #ffffff4d,0 3px 4px #00000073}.key:active{transform:translateY(1px);box-shadow:inset 0 1px 3px #00000080,0 1px 2px #0006}.key.soft{border-radius:13px;width:76px;height:26px;font-size:11px}@media (width<=620px){.screen{width:252px;height:144px}.controls{padding:0 8px}.joystick{width:130px;height:104px}.joystick-base{width:104px;height:104px;margin:-52px 0 0 -52px}.joystick-knob{width:46px;height:46px;margin:-23px 0 0 -23px}.act.fire{width:70px;height:70px}.act.special,.act.switch{width:44px;height:44px}.softkeys{gap:70px}}