*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#10131f;color:#fff;font-family:system-ui,sans-serif;overflow-x:hidden}
.tetris-page{min-height:100dvh;padding:6px 0 8px;display:flex;flex-direction:column;align-items:center}
h1{margin:0 0 5px;font-size:1.05rem;line-height:1.1;text-align:center}
.top-panel{width:260px;max-width:92vw;margin:0 auto 5px;display:flex;flex-direction:column;align-items:center;gap:4px}
#nextCanvas,.next-canvas{width:64px;height:64px;display:block;margin:0 auto;background:#171b2b;border:2px solid rgba(255,255,255,.35);border-radius:8px}
.score-box{width:260px;max-width:92vw;margin:0 auto;padding:4px 6px;display:flex;justify-content:space-between;gap:4px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);border-radius:8px;font-size:.68rem;line-height:1.2;text-align:center}
.score-box div{flex:1;white-space:nowrap}
.board-wrap{position:relative;width:220px;margin:0 auto 5px}
#gameCanvas{width:220px;height:440px;display:block;margin:0 auto;background:#050815;border:3px solid rgba(255,255,255,.5);border-radius:10px}
.game-message{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:rgba(0,0,0,.72);border-radius:10px;text-align:center}
.game-message.hidden{display:none}
#messageTitle{font-size:1.4rem;font-weight:800}
#retryButton{min-height:40px;padding:0 16px;border:0;border-radius:10px;font-weight:700}
.control-panel{width:260px;max-width:92vw;margin:4px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.control-panel button{height:40px;border:0;border-radius:10px;background:#fff;color:#151515;font-size:.8rem;font-weight:800;line-height:1.05;touch-action:manipulation}
@media(max-height:650px){h1{display:none}#nextCanvas,.next-canvas{width:54px;height:54px}.board-wrap{width:205px}#gameCanvas{width:205px;height:410px}.control-panel button{height:36px;font-size:.74rem}}
.back-button{width:260px;max-width:92vw;height:34px;margin:6px auto 0;display:flex;align-items:center;justify-content:center;border-radius:10px;background:rgba(255,255,255,.92);color:#151515;text-decoration:none;font-size:.86rem;font-weight:800}
@media(max-height:650px){.back-button{height:30px;margin-top:4px;font-size:.78rem}}

/* iOS Safari zoom guard */
html,body,button,a,.tetris-page,.control-panel,.back-button{touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
button,a{touch-action:manipulation;}
button{font-size:16px;}