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

:root{
  --bg:     #0a0d14;
  --bg2:    #111827;
  --card:   #131929;
  --border: #1e293b;
  --text:   #f1f5f9;
  --text2:  #94a3b8;
  --accent: #6366f1;
}

html,body{
  height:100%;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.wrapper{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  width:100%;
  max-width:860px;
  padding:20px;
}

/* BRAND */
.brand{
  display:flex;
  align-items:baseline;
  gap:6px;
}
.brand-s{color:var(--accent);font-weight:800;font-size:22px;letter-spacing:-0.5px;}
.brand-h{color:var(--text);font-weight:800;font-size:22px;letter-spacing:-0.5px;}
.brand-tag{
  background:#ef444420;
  color:#ef4444;
  font-size:11px;
  font-weight:700;
  padding:2px 8px;
  border-radius:99px;
  border:1px solid #ef444430;
  letter-spacing:0.05em;
}

/* CANVAS WRAP */
.canvas-wrap{
  position:relative;
  width:100%;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--border);
  box-shadow:0 0 40px rgba(99,102,241,0.1);
}

#canvas{
  display:block;
  width:100%;
  height:auto;
}

/* OVERLAYS */
.overlay{
  position:absolute;
  inset:0;
  background:rgba(10,13,20,0.88);
  backdrop-filter:blur(6px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10;
  transition:opacity 0.3s;
}
.overlay.hidden{display:none;}

.overlay-box{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}

.ov-emoji{font-size:48px;line-height:1;}

.overlay-box h2{
  font-size:28px;
  font-weight:800;
  background:linear-gradient(135deg,#f1f5f9,#6366f1);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.overlay-box p{
  color:var(--text2);
  font-size:14px;
  line-height:1.6;
}

.controls-hint{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
  font-size:12px;
  color:var(--text2);
  margin-top:4px;
}

kbd{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:4px;
  padding:2px 6px;
  font-size:11px;
  color:var(--text);
}

.play-btn{
  background:var(--accent);
  color:#fff;
  border:none;
  border-radius:10px;
  padding:12px 36px;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  font-family:'Inter',sans-serif;
  margin-top:8px;
  transition:all 0.2s;
}
.play-btn:hover{background:#4f46e5;transform:translateY(-2px);}
.play-btn:active{transform:translateY(0);}

/* GAME OVER SCORES */
#killed-by{color:#ef4444;font-size:13px;font-weight:600;}

.scores{
  display:flex;
  flex-direction:column;
  gap:6px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:10px;
  padding:14px 32px;
  width:100%;
  max-width:260px;
}
.score-row{
  display:flex;
  justify-content:space-between;
  font-size:14px;
  color:var(--text2);
}
.score-row span:last-child{
  font-weight:700;
  color:var(--text);
}
.score-row.best span:last-child{color:#f59e0b;}

/* HUD */
.hud{
  display:flex;
  gap:24px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px 24px;
  width:100%;
  max-width:860px;
}

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

.hud-label{
  font-size:10px;
  font-weight:700;
  color:var(--text2);
  letter-spacing:0.1em;
}

.hud-val{
  font-size:18px;
  font-weight:800;
  color:var(--text);
  font-variant-numeric:tabular-nums;
}

/* SUBJECT TICKER */
.subject-ticker{
  font-size:11px;
  color:var(--text2);
  text-align:center;
  height:18px;
  font-weight:500;
  transition:all 0.3s;
}

/* TOUCH CONTROLS — hidden by default, shown via JS on touch devices */
.touch-controls{
  display:none;
  width:100%;
  max-width:860px;
  justify-content:space-between;
  gap:16px;
  padding:0 4px;
}

.touch-btn{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  background:var(--card);
  border:2px solid var(--border);
  border-radius:20px;
  padding:22px 12px;
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  touch-action:manipulation;
  transition:background 0.1s, border-color 0.1s, transform 0.1s;
  -webkit-tap-highlight-color:transparent;
  /* Larger minimum tap target for Android */
  min-height:80px;
}

.touch-btn:active{
  transform:scale(0.93);
}

.touch-duck{border-color:#f59e0b55;}
.touch-duck:active{background:#f59e0b22;border-color:#f59e0b;}
.touch-jump{border-color:#6366f155;}
.touch-jump:active{background:#6366f122;border-color:#6366f1;}

.touch-icon{font-size:32px;line-height:1;}
.touch-label{font-size:12px;font-weight:800;letter-spacing:0.1em;color:var(--text2);}

/* RESPONSIVE */
@media(max-width:600px){
  .wrapper{padding:12px;gap:10px;}
  .brand-s,.brand-h{font-size:18px;}
  .hud{gap:12px;padding:8px 16px;}
  .hud-val{font-size:15px;}
  .overlay-box h2{font-size:22px;}
  .controls-hint{font-size:11px;}
}

/* touch-controls visibility is controlled by JS (navigator.maxTouchPoints) */