*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:#222;display:flex;align-items:center;justify-content:center;font-family:monospace;color:#172016}
.phone{width:min(430px,94vw);background:#555;padding:24px 22px 28px;border-radius:28px;box-shadow:0 20px 50px #000}
.screen{background:#9bbc0f;border:12px solid #303030;border-radius:10px;position:relative;padding:0}
.topbar{height:34px;display:flex;justify-content:space-between;align-items:center;padding:0 8px;font-weight:bold;font-size:14px;border-bottom:2px solid #536b08}
canvas{display:block;width:100%;height:auto;background:#9bbc0f;image-rendering:pixelated}
.overlay{position:absolute;inset:34px 0 0;display:flex;align-items:center;justify-content:center;text-align:center;font-size:30px;font-weight:bold;background:#9bbc0f}
.overlay small{font-size:16px}
.controls{text-align:center;margin-top:22px}
.controls>button,.middle button{font-family:monospace;font-weight:bold;border:0;background:#292929;color:#ddd;cursor:pointer}
.controls>button{width:58px;height:42px;border-radius:15px}
.middle{display:flex;align-items:center;justify-content:center;gap:12px;margin:8px 0}
.middle button{width:64px;height:48px;border-radius:18px}
#startBtn{background:#111;color:#9bbc0f}
button:active{transform:scale(.94)}