* { box-sizing: border-box; }
body, html { margin: 0; padding: 0; height: 100%; font-family: system-ui, Arial, sans-serif; background: #000; color: #fff; }


/* DISPLAY */
.display-wrap { width: 1080px; height: 1920px; margin: 0 auto; position: relative; }
#gameCanvas { position: absolute; left: 0; top: 0; width: 1080px; height: 1920px; display: block; }
.hud { position: absolute; left: 0; top: 0; width: 100%; padding: 16px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.hud .pill { background: rgba(0,0,0,.5); padding: 8px 12px; border-radius: 999px; font-weight: 600; }


/* CONTROLLER */
.controller { display: grid; grid-template-rows: 1fr auto; height: 100%; background: #0a0a0a; }
.controller header { text-align: center; padding: 16px; font-weight: 700; }
.pad { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 12px; padding: 16px; max-width: 480px; margin: 0 auto; }
.btn { background: #222; border: 2px solid #444; border-radius: 16px; padding: 24px; font-size: 18px; color: white; text-align: center; user-select: none; }
.btn:active { transform: scale(0.98); }
.btn.up { grid-column: 2 / 3; grid-row: 1 / 2; }
.btn.left { grid-column: 1 / 2; grid-row: 2 / 3; }
.btn.right { grid-column: 3 / 4; grid-row: 2 / 3; }
.btn.down { grid-column: 2 / 3; grid-row: 3 / 4; }
.btn.reset { grid-column: 2 / 3; grid-row: 2 / 3; border-color: #888; }
.footer { text-align: center; padding: 8px 16px 24px; color: #aaa; font-size: 12px; }
/* --- Overlay de fim de jogo --- */
.overlay {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter: blur(6px);
}
.overlay.hidden { display:none; }

.panel{
  min-width: 560px;
  max-width: 760px;
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(240,240,240,0.92));
  color:#111; padding:28px 32px; border-radius:24px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  text-align:center;
  border:1px solid rgba(0,0,0,.08);
  animation: pop .25s ease-out;
}
.panel h1{ margin:0 0 8px; font-size:42px; }
.panel p{ margin:0 0 18px; font-size:20px; opacity:.85; }

.panel button{
  appearance:none; border:0; outline:0; cursor:pointer;
  padding:14px 22px; border-radius:999px;
  background:#111; color:#fff; font-weight:700; font-size:16px;
  box-shadow: 0 10px 20px rgba(0,0,0,.2);
}
.panel button:hover{ transform: translateY(-1px); }
@keyframes pop { from { transform: scale(.96); opacity:0 } to { transform: scale(1); opacity:1 } }
/* Hero GIF por cima do canvas */
.hero{
  position: absolute;
  left: 0; top: 0;
  width: 80px; height: 80px;
  pointer-events: none;     /* não intercepta cliques */
  will-change: transform;   /* mais fluido */
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background:#000; color:#fff; font-family: system-ui, Arial, sans-serif; }

/* DISPLAY */
.display-wrap { position: relative; width: 1080px; height: 1920px; margin: 0 auto; }
#gameCanvas { position: absolute; left: 0; top: 0; width: 1080px; height: 1920px; display: block; }

.hud { position: absolute; left: 0; top: 0; width: 100%; padding: 16px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.hud .pill { background: rgba(0,0,0,.5); padding: 8px 12px; border-radius: 999px; font-weight: 600; }

/* Hero GIF por cima do canvas */
.hero{
  position: absolute;
  left: 0; top: 0;
  width: 80px; height: 80px;
  pointer-events: none;
  will-change: transform;
  z-index: 2; /* sobre o canvas */
}

/* Overlay de fim de jogo */
.overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; backdrop-filter: blur(6px); z-index: 3; }
.overlay.hidden { display:none; }

.panel{
  min-width: 560px; max-width: 760px;
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(240,240,240,0.92));
  color:#111; padding:28px 32px; border-radius:24px;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  text-align:center; border:1px solid rgba(0,0,0,.08);
  animation: pop .25s ease-out;
}
.panel h1{ margin:0 0 8px; font-size:42px; }
.panel p{ margin:0 0 18px; font-size:20px; opacity:.85; }
.panel button{
  appearance:none; border:0; outline:0; cursor:pointer;
  padding:14px 22px; border-radius:999px; background:#111; color:#fff; font-weight:700; font-size:16px;
  box-shadow: 0 10px 20px rgba(0,0,0,.2);
}
.panel button:hover{ transform: translateY(-1px); }
@keyframes pop { from { transform: scale(.96); opacity:0 } to { transform: scale(1); opacity:1 } }