:root{
  color-scheme:dark;
  --bg:#020305;
  --panel-line:rgba(96,255,226,.22);
  --text:#ebffff;
  --muted:rgba(180,255,244,.62);
  --accent:#61ffe2;
  --accent-strong:#ff4fa3;
}

*{box-sizing:border-box;margin:0;padding:0}

html,body{
  width:100%;
  min-height:100%;
  overscroll-behavior:none;
  background:
    radial-gradient(circle at top, rgba(97,255,226,.06), transparent 24%),
    #010203;
  color:var(--text);
  font-family:"Avenir Next Condensed","Trebuchet MS","Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  -webkit-user-select:none;
  user-select:none;
}

body{
  display:flex;
  justify-content:center;
  min-height:100dvh;
  overflow:hidden;
}

button,canvas{
  -webkit-tap-highlight-color:transparent;
}

.app,.panel,.playfield,.board-wrap,.touch-zone,.overlay,.overlay-card{
  -webkit-user-select:none;
  user-select:none;
}

.app{
  width:min(100%,56rem);
  height:100dvh;
  display:flex;
  align-items:stretch;
  padding:max(.25rem, env(safe-area-inset-top)) .25rem max(.25rem, env(safe-area-inset-bottom));
}

.panel{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  padding:0;
  background:transparent;
}

.hud{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:.35rem;
}

.eyebrow{
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
  margin-bottom:.08rem;
}

h1{
  font-size:clamp(1.1rem,2.4vw,1.45rem);
  line-height:1;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.ghost,.cta,.touch-zone{
  border:1px solid var(--panel-line);
  color:var(--text);
  font:inherit;
}

.ghost,.cta{
  background:transparent;
  border-radius:0;
  padding:.58rem .9rem;
  cursor:pointer;
  transition:border-color .16s ease, color .16s ease, background .16s ease;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:.8rem;
}

.ghost:hover,.cta:hover{
  border-color:var(--accent);
  color:var(--accent);
}

.stats{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:.5rem;
  margin-bottom:.35rem;
}

.stat{
  padding:.56rem .65rem;
  border-radius:0;
  background:rgba(4,8,10,.54);
  border:1px solid var(--panel-line);
}

.label{
  display:block;
  font-size:.68rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:.18rem;
}

.stat strong{
  font-size:1rem;
  color:var(--accent);
}

.playfield{
  flex:1;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:max(.25rem, env(safe-area-inset-top)) .25rem max(.25rem, env(safe-area-inset-bottom));
  border:none;
  background:transparent;
}

.board-wrap{
  position:relative;
  width:min(100%, calc((100dvh - .5rem) * .734));
  height:min(100%, calc(100dvh - .5rem));
  max-width:100%;
  aspect-ratio:720 / 980;
  border-radius:0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:#030506;
  box-shadow:none;
}

canvas{
  display:block;
  width:100%;
  height:100%;
  touch-action:none;
}

.touch-zone{
  position:absolute;
  bottom:0;
  width:50%;
  height:34%;
  border-radius:0;
  border:none;
  background:linear-gradient(180deg, transparent 0%, rgba(97,255,226,.05) 78%, rgba(97,255,226,.11) 100%);
  opacity:.9;
}

.touch-left{left:0}
.touch-right{right:0}
.touch-zone::after{
  content:"";
}

.overlay{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:1rem;
  background:rgba(0,0,0,.74);
  transition:opacity .18s ease, visibility .18s ease;
}

.overlay.hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.overlay-card{
  width:min(100%,24rem);
  padding:1.15rem;
  border-radius:0;
  background:rgba(2,5,6,.96);
  border:1px solid rgba(97,255,226,.2);
  text-align:center;
  box-shadow:0 0 28px rgba(97,255,226,.08);
}

.overlay-scoreboard{
  display:none;
}

.overlay-kicker:empty,
.overlay-copy:empty{
  display:none;
}

.overlay-kicker{
  color:var(--accent-strong);
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:.72rem;
  margin-bottom:10px;
}

.overlay-card h2{
  font-size:1.7rem;
  line-height:1;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:12px;
}

.overlay-copy{
  color:var(--muted);
  line-height:1.5;
  margin-bottom:18px;
}

.cta{
  width:100%;
  background:rgba(97,255,226,.08);
  color:var(--accent);
  box-shadow:none;
}

.overlay.start-mode{
  background:transparent;
}

.overlay.start-mode .overlay-card{
  width:100%;
  max-width:none;
  padding:1rem 0;
  background:rgba(180,180,180,.12);
  border:none;
  box-shadow:none;
}

.overlay.start-mode .overlay-card h2{
  font-size:clamp(1.8rem, 5vw, 3rem);
  letter-spacing:.18em;
  color:#f3f5f7;
  margin:0;
}

.overlay.start-mode .cta{
  display:none;
}

.overlay.game-over-mode{
  background:rgba(0,0,0,.56);
}

.overlay.game-over-mode .overlay-card{
  width:min(100%,36rem);
  background:transparent;
  border:none;
  box-shadow:none;
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
}

.overlay.game-over-mode .overlay-scoreboard{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:2rem;
  order:1;
  margin-top:0;
  margin-bottom:22px;
}

.overlay-score{
  min-width:7rem;
}

.overlay-score-label{
  display:block;
  font-size:1.8rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#8c9198;
  margin-bottom:.35rem;
}

.overlay-score strong{
  display:block;
  font-size:2.35rem;
  color:#d8dde2;
}

.overlay.game-over-mode .overlay-title{
  margin:0;
  order:2;
}

.overlay.game-over-mode .overlay-card h2{
  font-size:clamp(3rem, 9vw, 4.8rem);
  letter-spacing:.08em;
  color:#a9afb6;
  white-space:nowrap;
  opacity:0;
  transform:translateY(-10dvh) scale(.92);
  animation:gameOverTitleIn .34s ease forwards;
  margin-bottom:28px;
}

.overlay.game-over-mode .cta{
  order:3;
  width:7.2rem;
  min-width:7.2rem;
  height:7.2rem;
  padding:0;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-size:4.6rem;
  line-height:.9;
  color:#a9afb6;
  border:2px solid rgba(169,175,182,.42);
  background:rgba(169,175,182,.06);
  opacity:0;
  transform:translateY(10dvh) scale(.88);
  margin-top:84px;
  animation:gameOverReplayIn .34s ease forwards .5s;
}

.overlay.game-over-mode .replay-icon{
  display:block;
  width:56%;
  height:56%;
}

@keyframes gameOverTitleIn{
  from{
    opacity:0;
    transform:translateY(-10dvh) scale(.92);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

@keyframes gameOverReplayIn{
  from{
    opacity:0;
    transform:translateY(10dvh) scale(.88);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

.status{
  margin-top:.35rem;
  min-height:1.4em;
  color:var(--muted);
  font-size:.82rem;
  letter-spacing:.08em;
  text-transform:uppercase;
}

@media (max-width: 520px){
  .ghost{
    padding:.58rem .72rem;
  }

  .stat{
    padding:.52rem .58rem;
  }

  .overlay-card{
    padding:18px;
  }

  .touch-zone{
    height:38%;
  }
}