html, body { margin: 0; padding: 0; height: 100%; }
body { background: #000; color: #fafafa; font-family: -apple-system, "PingFang SC", "Noto Sans CJK SC", sans-serif; }
header { padding: 0.5rem; text-align: center; user-select: none; }
h1 { margin: 0; font-size: 1.2rem; }
.hint { margin: 0.3rem 0 0; font-size: 0.8rem; opacity: 0.7; }
#game { position: relative; width: 100vw; height: calc(100vh - 70px); display: flex; align-items: center; justify-content: center; }
#game canvas { image-rendering: pixelated; image-rendering: crisp-edges; touch-action: none; user-select: none; -webkit-touch-callout: none; }
#status { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 1rem; opacity: 0.8; pointer-events: none; }
#status:empty { display: none; }
/* 原生壳：只留画面，铺满整屏 */
body.native { overflow: hidden; }
body.native header { display: none; }
body.native #game { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; }
.hint a { color: inherit; text-decoration: underline; }
/* 竖屏：画面贴顶（让开刘海），下面留给触摸手柄 */
@media (orientation: portrait) {
    body.native #game { top: env(safe-area-inset-top); height: calc(100vw * 240 / 256); }
}

#byo{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto}
.byo-card{max-width:520px;background:#1d2026;border:1px solid #31363f;border-radius:10px;padding:18px 20px;line-height:1.6}.byo-card h2{margin:0 0 8px;font-size:20px}.byo-card p{margin:8px 0}
.byo-btn{display:inline-block;background:#f0c060;color:#1a1a1a;font-weight:600;border-radius:8px;padding:12px 18px;cursor:pointer}.byo-btn input{display:none}
.byo-err{color:#ff8080;min-height:1em}.byo-note{font-size:13px;opacity:.75;word-break:break-all}