*{box-sizing:border-box}
:root{
  --bg:#fafafa;
  --ink:#262626;
  --muted:#777;
  --line:#d8d8d8;
}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink)}
body{
  font-family:Arial,Helvetica,sans-serif;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
}
.page{
  width:min(1080px,100%);
  padding:50px 28px 90px;
}
.hero{text-align:center;margin-bottom:72px}
h1{
  margin:0;
  font-size:clamp(38px,6vw,72px);
  font-weight:600;
  letter-spacing:-2.8px;
  line-height:1;
}
.game-section{width:100%}
.score-row{
  height:28px;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
  padding-right:4px;
  font-family:"Courier New",monospace;
  font-size:15px;
  letter-spacing:1px;
  color:#666;
}
.divider{color:#bbb}
#gameCanvas{
  display:block;
  width:100%;
  height:auto;
  background:transparent;
  cursor:pointer;
}
.controls{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  margin-top:18px;
  color:#999;
  font-family:"Courier New",monospace;
  font-size:12px;
  letter-spacing:.8px;
}
.controls button{
  border:0;
  background:transparent;
  color:#666;
  padding:0;
  font:inherit;
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:3px;
}
.cookie-banner{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:20px;
  width:min(760px,calc(100% - 32px));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:13px 16px;
  background:#fff;
  border:1px solid #e3e3e3;
  box-shadow:0 8px 30px rgba(0,0,0,.08);
  font-size:13px;
  color:#666;
}
.cookie-banner[hidden]{display:none!important}
.cookie-banner button{
  flex:0 0 auto;
  border:0;
  background:#262626;
  color:#fff;
  padding:8px 13px;
  cursor:pointer;
}
@media(max-width:700px){
  .page{padding:36px 16px 80px}
  .hero{margin-bottom:45px}
  h1{letter-spacing:-1.8px}
  .controls{flex-direction:column;gap:8px}
  .cookie-banner{align-items:flex-start;flex-direction:column;gap:10px}
}