* { box-sizing: border-box; }
:root{
  --sky1:#87c9ff; --sky2:#e9f6ff; --pipe:#2ecc71; --pipe-d:#23995a; --ground:#deb887; --ui:#00324f; --accent:#5aa9e6;
}
html,body{ height:100%; }
body{
  margin:0; background: radial-gradient(1600px 800px at 50% -20%, var(--sky1), var(--sky2)); color:#033; font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans TC",Arial,sans-serif; display:grid; place-items:center; overflow:hidden;
}
.brand{ position:fixed; top:10px; left:12px; color:var(--ui); opacity:.8; font-weight:800; letter-spacing:.3px; background:rgba(255,255,255,.6); padding:6px 10px; border-radius:12px; border:1px solid rgba(0,0,0,.06); backdrop-filter:saturate(130%) blur(4px); }
.wrap{ position:relative; display:inline-block; }
#game{ background: linear-gradient(180deg,var(--sky1), var(--sky2)); border:2px solid var(--accent); border-radius:16px; box-shadow:0 14px 36px rgba(0,0,0,.16); image-rendering: crisp-edges; image-rendering: pixelated; }
.hud{ position:absolute; inset:auto 0 0 0; top:10px; width:100%; display:flex; justify-content:space-between; padding:0 12px; color:#fff; text-shadow:0 2px 4px rgba(0,0,0,.35); font-weight:800; pointer-events:none; }
.btns{ position:absolute; left:0; right:0; bottom:12px; display:flex; gap:10px; justify-content:center; }
button{ pointer-events:auto; padding:10px 16px; border-radius:999px; border:0; font-weight:800; cursor:pointer; box-shadow:0 6px 14px rgba(0,0,0,.12); }
button.primary{ background:var(--accent); color:#08324b; }
button.ghost{ background:rgba(255,255,255,.9); color:var(--ui); }
button:hover{ filter:brightness(1.06); transform:translateY(-1px); }
@media (max-width: 420px){ #game{ width: 92vw; height: calc(92vw * 16/9); } .brand{ display:none; } }