:root{
  --bg:#0f1720;
  --card:#0b1220;
  --muted:#9aa4b2;
  --accent:#7dd3fc;
  --max-width:1100px;
}
*{box-sizing:border-box}
html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.game-stage,
.canvas-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#myCanvas,
#twinkleOverlay,
#gameOverlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0;
    padding: 0;
    border: none;
    display: block;
}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial;
  background:linear-gradient(180deg,var(--bg) 0%, #07101a 100%);
  color:#e6eef6;
  line-height:1.4;
}
.container{
  width:calc(100% - 2rem);
  max-width:var(--max-width);
  margin:2rem auto;
}
.header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.brand{font-weight:700;font-size:1.2rem}
.card{
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.03);
  padding:1.25rem;
  border-radius:8px;
}
.hero{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}
.hero .col{flex:1}
.cta{
  display:inline-block;
  background:var(--accent);
  color:#042028;
  padding:0.6rem 1rem;
  border-radius:6px;
  text-decoration:none;
  font-weight:600;
}
.footer{
  opacity:0.7;
  font-size:0.9rem;
  margin-top:2rem;
}
/* simple responsive rules */
@media (max-width:720px){
  .hero{flex-direction:column;align-items:stretch}
  .container{margin:1rem}
}

/* game page styles */
.game-stage{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1rem;
}
.canvas-wrap{position:relative;}
canvas{display:block;max-width:100%;height:auto;border-radius:6px}