html, body { margin:0; padding:0; background:#1a1430; height:100%; overflow:hidden; touch-action:none; -webkit-user-select:none; user-select:none; }
#stage { position:fixed; left:0; top:0; width:100vw; height:100vh; overflow:hidden; }
/* retrato: gira o palco inteiro (canvas + controles) 90 graus no sentido horário */
#stage.rot { width:100vh; height:100vw; transform:rotate(90deg) translateY(-100%); transform-origin:top left; }
#wrap { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
canvas#game {
  image-rendering: pixelated; image-rendering: crisp-edges;
  background:#1a1430;
  /* tamanho definido por JS mantendo 16:10 */
}
#touch { position:absolute; inset:0; display:none; pointer-events:none; --tb:150px; --ab:64px; }
body.touch #touch { display:block; }
body[data-touch="pequeno"] #touch { --tb:120px; --ab:52px; }
body[data-touch="grande"] #touch { --tb:190px; --ab:80px; }
/* direcional em cruz: um único elemento captura o dedo, permitindo diagonais e deslizar */
#dpad { position:absolute; left:14px; bottom:calc(14px + env(safe-area-inset-bottom)); width:var(--tb); height:var(--tb);
  display:grid; grid-template-columns:1fr 1fr 1fr; grid-template-rows:1fr 1fr 1fr; pointer-events:auto; touch-action:none; -webkit-tap-highlight-color:transparent; }
.dp { display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,0.16); border:2px solid rgba(255,255,255,0.35); color:rgba(255,255,255,0.85); font-size:22px; }
.dp.up { grid-column:2; grid-row:1; border-radius:10px 10px 0 0; } .dp.left { grid-column:1; grid-row:2; border-radius:10px 0 0 10px; }
.dp.center { grid-column:2; grid-row:2; border-left:none; border-right:none; border-top:none; border-bottom:none; }
.dp.right { grid-column:3; grid-row:2; border-radius:0 10px 10px 0; } .dp.down { grid-column:2; grid-row:3; border-radius:0 0 10px 10px; }
.dp.on { background:rgba(255,226,58,0.6); color:#1a1430; }
/* botões A/B */
#abtns { position:absolute; right:14px; bottom:calc(14px + env(safe-area-inset-bottom)); display:flex; gap:14px; align-items:flex-end; pointer-events:auto; }
.abtn { width:var(--ab); height:var(--ab); border-radius:50%; background:rgba(255,255,255,0.16); border:2px solid rgba(255,255,255,0.35); color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; touch-action:none; -webkit-tap-highlight-color:transparent; user-select:none; }
.abtn span { font:bold 26px sans-serif; line-height:1; } .abtn small { font:9px sans-serif; opacity:0.8; margin-top:2px; }
.abtn[data-k="bomb"] { margin-bottom:26px; }
.abtn.down { background:rgba(255,226,58,0.6); color:#1a1430; }

/* ---- Menu inicial ---- */
#menu { position:fixed; inset:0; background:rgba(10,8,20,0.92); overflow:auto; z-index:10; font-family:"Courier New", Consolas, monospace; color:#e8e4f4; }
#menu.hidden { display:none; }
.panel { max-width:400px; margin:16px auto; padding:16px; background:#171226; border:2px solid #3a3357; border-radius:8px; box-shadow:0 0 0 4px #0c0a16, 0 12px 40px rgba(0,0,0,0.6); }
#logo { display:block; width:100%; height:auto; border-radius:6px; border:2px solid #3a3357; image-rendering:pixelated; }
.tagline { text-align:center; color:#b9b3d0; font-size:13px; margin:12px 0 14px; }
.lbl { display:block; font-weight:bold; font-size:12px; letter-spacing:1px; margin:8px 0 4px; color:#d8d2ee; }
.muted { color:#8e88a8; font-weight:normal; letter-spacing:0; }
#menu input { width:100%; box-sizing:border-box; padding:10px 12px; font:bold 16px "Courier New", monospace; color:#fff; background:#241e3a; border:2px solid #3a3357; border-radius:6px; outline:none; }
#menu input:focus { border-color:#ffe23a; }
#menu input.shake { animation:shake .4s; border-color:#e0303a; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }
.btn { display:block; width:100%; margin-top:10px; padding:12px; font:bold 15px "Courier New", monospace; letter-spacing:1px; color:#fff; background:#2a2447; border:2px solid #4a4370; border-radius:6px; cursor:pointer; box-shadow:0 3px 0 #0c0a16; }
.btn:active { transform:translateY(2px); box-shadow:0 1px 0 #0c0a16; }
.btn.primary { background:linear-gradient(#ffe86a,#e0b420); color:#2a1a00; border-color:#b08000; font-size:17px; margin-top:16px; }
.row { display:flex; gap:10px; } .row .btn { flex:1; }
.rank { margin-top:14px; padding:10px 12px; background:#111020; border:2px solid #3a3357; border-radius:6px; }
.rk-head { display:flex; justify-content:space-between; align-items:center; font-weight:bold; font-size:13px; letter-spacing:1px; margin-bottom:6px; }
.link { background:none; border:none; color:#9f98bd; font:12px "Courier New", monospace; cursor:pointer; }
.rk-row { display:grid; grid-template-columns:22px 1fr auto auto; gap:8px; font-size:14px; padding:3px 0; align-items:baseline; }
.rk-pos { color:#ffe23a; font-weight:bold; } .rk-name { font-weight:bold; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rk-lvl { color:#9f98bd; font-size:12px; } .rk-score { color:#ffe23a; font-weight:bold; }
.rk-empty { color:#8e88a8; font-size:12px; padding:4px 0; }
.foot { text-align:center; color:#7d7797; font-size:11px; margin:14px 0 0; }
.modal { position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,0.6); z-index:20; padding:16px; }
.modal.open { display:flex; }
.box { max-width:400px; width:100%; max-height:90vh; overflow:auto; background:#171226; border:2px solid #3a3357; border-radius:8px; padding:16px; font-size:13px; line-height:1.5; }
.box h3 { margin:0 0 10px; letter-spacing:1px; color:#ffe23a; }
.box p { margin:6px 0; }
.opt { display:flex; align-items:center; gap:10px; padding:8px 0; font-size:14px; }
.opt select { margin-left:auto; font:14px "Courier New", monospace; background:#241e3a; color:#fff; border:2px solid #3a3357; border-radius:4px; padding:4px; }
.rk-list .rk-row { border-bottom:1px solid #2a2447; }