*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#02050a;color:#fff;font-family:Consolas,"Courier New",monospace}
body{min-height:100vh;display:grid;place-items:center;overflow:hidden}
#app{width:min(96vw,1000px)}
.screen{position:relative}
.hidden{display:none!important}

.intro{
  min-height:94vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  background:radial-gradient(circle at center,#0d2140 0,#050b16 45%,#010205 100%);
}
.logo{
  width:min(88vw,820px);max-height:68vh;object-fit:contain;
  filter:drop-shadow(0 0 28px rgba(70,190,255,.45));
  animation:logoIntro 1s ease-out;
}
.subtitle{font-size:clamp(18px,3vw,28px);color:#9cff8e;letter-spacing:3px;font-weight:900}
.blink{font-size:clamp(13px,2.2vw,22px);color:#ffe66d;text-align:center;animation:blink 1s steps(2,end) infinite}

.game{border:2px solid #4fe2ff;background:#050b12;box-shadow:0 0 32px rgba(40,190,255,.32)}
header,footer{
  display:flex;align-items:center;justify-content:space-between;padding:12px 16px;
  background:#07121d;color:#bdeaff
}
header strong{color:#ffe66d}
.gameTitle{color:#8cff7a;font-weight:900;text-align:center}
footer{justify-content:center;font-size:13px}
canvas{display:block;width:100%;height:auto;background:#020714}

.overlay{
  position:absolute;inset:48px 0 38px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;background:rgba(0,0,0,.84);text-align:center
}
.overlay h1{margin:0;color:#ff5d5d;font-size:clamp(36px,7vw,72px);text-shadow:0 0 18px #f33}
.overlay p{color:#ffe66d;font-size:20px}
button{
  font:700 18px Consolas;padding:13px 22px;border:2px solid #63ff8c;
  background:#07150d;color:#63ff8c;cursor:pointer
}
button:hover{background:#63ff8c;color:#041008}

@keyframes logoIntro{
  0%{opacity:0;transform:scale(.86)}
  70%{opacity:1;transform:scale(1.04)}
  100%{transform:scale(1)}
}
@keyframes blink{50%{opacity:.25}}