:root {
  --navy:#1A3D7C;
  --navy-2:#294F99;
  --orange:#FF7A00;
  --ink:#0F1E3A;
  --bg-soft:#FFF9F6;
  --gray-border:#B9C0D0;
  --gray-panel:#E5E7F3;
  --danger:#C62828;
  --ok:#1B5E20;
}

*,
*::before,
*::after { box-sizing:border-box; }

html, body {
  margin:0;
  padding:0;
}

body {
  min-height:100vh;
  font-family:system-ui,-apple-system,Segoe UI,Inter,Roboto,sans-serif;
  background:radial-gradient(circle at top,var(--bg-soft),#f1f3ff);
  color:var(--ink);
  display:flex;
  align-items:center;
  justify-content:center;
}

.page {
  width:100%;
  max-width:1400px;
  padding:24px 16px 32px;
}

.header { margin-bottom:16px; }

.brand {
  display:flex;
  align-items:center;
  gap:8px;
}

h1 {
  font-size:36px;
  font-weight:650;
}

.subtitle-error {
  font-size:26px;
  font-weight:600;
  color:#22263a;
  margin-top:10px;
}

.sub-muted {
  font-size:26px;
  color:#6b7086;
  margin-top:2px;
}

.game-note {
  font-size:26px;
  color:#6b7086;
  margin:4px 0 10px;
}

.main { margin-top:12px; }

.game-shell {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:16px;
  align-items:stretch;
}

.game-frame {
  border-radius:20px;
  border:1px solid var(--gray-border);
  box-shadow:0 18px 40px rgba(10,34,77,0.18);
  background:#0b1024;
  padding:12px;
  position:relative;
}

#gameCanvas {
  width:100%;
  height:auto;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.18);
  background:#050816;
  image-rendering:pixelated;
}

/* Score — canto superior direito */
.score-box {
  position:absolute;
  top:10px;
  right:20px;
  padding:4px 10px 5px;
  border-radius:8px;
  background:rgba(0,0,0,0.4);
  display:flex;
  align-items:center;
  gap:8px;
  font-family:"Courier New", monospace;
  font-size:30px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:#ffffff;
  text-shadow:0 0 2px rgba(0,0,0,0.7);
  z-index:2;
}

/* Recorde — canto superior esquerdo */
.hs-box {
  position:absolute;
  top:10px;
  left:20px;
  padding:4px 10px 5px;
  border-radius:8px;
  background:rgba(0,0,0,0.4);
  display:flex;
  align-items:center;
  gap:8px;
  font-family:"Courier New", monospace;
  font-size:22px;
  letter-spacing:0.10em;
  text-transform:uppercase;
  color:#FFEA00;
  text-shadow:0 0 6px rgba(255,160,0,0.5);
  z-index:2;
}

.score-label { opacity:0.8; }

#scoreValue,
#highScoreValue {
  font-variant-numeric:tabular-nums;
  font-weight:600;
}

@media (max-width: 840px) {
  .page { padding-inline:12px; }
  .game-frame { padding:10px; }
  .score-box { top:8px; right:14px; font-size:20px; }
  .hs-box { top:8px; left:14px; font-size:16px; }
}