:root{--bg:#0b0d13;--ui:#1f2433;--ink:#e6ebf5;--ok:#22c55e;--warn:#ef4444;--acc:#60a5fa}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font-family:system-ui,Segoe UI,Roboto,Inter,sans-serif}
#app{display:flex;flex-direction:column;min-height:100dvh}
header{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:10px 12px;background:var(--ui);box-shadow:0 2px 0 #0006}
h1{font-size:16px;margin:0}
.tabs{display:flex;gap:8px}
.tab{padding:8px 10px;border-radius:10px;background:#0000;border:1px solid #0000;color:var(--ink);font-weight:800}
.tab.active{background:#00000040;border-color:#00000060}

.screen{display:none}
.screen.active{display:grid;grid-template-rows:auto 1fr auto}

.pill{background:#0003;border-radius:999px;padding:6px 10px;font-weight:800}
button{background:var(--ui);color:var(--ink);border:0;border-radius:12px;padding:10px 12px;font-size:15px;font-weight:800;box-shadow:0 4px 0 #0007}
button:active{transform:translateY(1px);box-shadow:0 3px 0 #0006}
.small{font-size:13px;padding:6px 10px;border-radius:999px}
.ghost{background:#0e1526;border:1px dashed #32405f}

#hud{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:8px 12px}
#board{display:flex;align-items:center;justify-content:center;touch-action:none}
canvas{touch-action:none;background:linear-gradient(#223049,#0b0d13);border-radius:16px;box-shadow:0 0 0 2px #0006 inset,0 10px 40px #0007}

/* CONTROLES: 2 colunas (cima/baixo à esquerda; esq/dir à direita) */
#ctrls{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px}
#ctrls .col{display:grid;gap:8px}
#ctrls .col button{min-height:44px}

/* OVERLAY Game Over */
.overlay{position:fixed;inset:0;display:grid;place-items:center;background:#0008;backdrop-filter:blur(2px);z-index:999}
.overlay.hidden{display:none}
.overlay-card{background:#0e1526;border:1px solid #0006;border-radius:16px;padding:18px 16px;width:min(92vw,360px);box-shadow:0 10px 40px #000c;text-align:center}
.overlay-card h2{margin:0 0 12px 0;font-size:22px}
.overlay-actions{display:flex;gap:10px;justify-content:center}
button.primary{background:#22c55e;color:#0b0d13}

/* LISTA DE FASES */
#levelsWrap{padding:12px;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.card{background:#0e1526;border:1px solid #0005;border-radius:14px;padding:10px;display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:center}
.preview{width:64px;height:64px;border-radius:10px;background:#091224;box-shadow:inset 0 0 0 2px #0005}
.meta{display:flex;flex-direction:column;gap:6px}
.badges{display:flex;gap:6px;flex-wrap:wrap}
.badge{background:#0004;border-radius:999px;padding:2px 8px;font-size:12px}
.row{display:flex;gap:6px;align-items:center;justify-content:space-between}
.rowBtns{display:flex;gap:6px;flex-wrap:wrap}

/* MAKER */
section{padding:10px}
.grid2{display:grid;gap:6px;grid-template-columns:repeat(2,minmax(0,1fr))}
fieldset{border:1px solid #0004;border-radius:12px}
legend{padding:0 6px;color:#94a3b8}
label{font-size:12px;color:#cbd5e1}
input[type="number"],select,textarea{width:100%;background:#0f172a;color:#e5eaf3;border:1px solid #0006;border-radius:8px;padding:8px}
textarea{min-height:120px}
#makerWrap{display:grid;grid-template-columns:1fr;gap:10px}
#makerGrid{display:grid;place-content:center}
#makerCanvas{background:#0a1322;border-radius:10px;box-shadow:0 0 0 2px #0006 inset}
.legend{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.legend span{display:inline-flex;align-items:center;gap:6px;background:#0003;padding:6px 8px;border-radius:999px}
.tile{width:18px;height:18px;border-radius:4px;display:inline-block}
#mkEditInfo{margin-top:8px}