*{box-sizing:border-box;margin:0;padding:0}
body{
  background:#0d1117;
  color:#e6edf3;
  font-family:'Segoe UI',Arial,sans-serif;
  display:flex;
  flex-direction:column;
  align-items:center;
  min-height:100vh;
  padding:16px 8px 32px;
}
h1{
  font-size:clamp(20px,5vw,28px);
  font-weight:700;
  letter-spacing:-0.5px;
  margin-bottom:2px;
}
#tagline{font-size:12px;color:#8b949e;margin-bottom:14px;}
 
#hud{display:flex;gap:20px;margin-bottom:10px;font-size:13px;color:#8b949e;}
#hud span{color:#e6edf3;font-weight:600}
 
#mode-wrap{margin-bottom:8px;min-height:28px;display:flex;align-items:center;gap:8px;}
#mode-badge{
  display:inline-block;
  padding:3px 12px;
  border-radius:20px;
  font-size:11px;
  font-weight:700;
  letter-spacing:0.5px;
  text-transform:uppercase;
  border:1.5px solid;
}
 
#timer-wrap{
  width:100%;max-width:500px;
  height:3px;background:#21262d;
  border-radius:2px;margin-bottom:6px;overflow:hidden;
}
#timer-bar{height:100%;width:100%;background:#22c55e;border-radius:2px;}
 
#canvas-outer{position:relative;line-height:0;}
canvas{
  display:block;background:#0f172a;
  border:2px solid #22c55e;border-radius:4px;max-width:100%;
}
 
#overlay{
  position:absolute;inset:0;
  background:rgba(0,0,0,0.75);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:10px;border-radius:4px;
}
#overlay h2{font-size:22px;font-weight:700;}
#overlay p{font-size:13px;color:#8b949e;text-align:center;max-width:260px;line-height:1.6;}
.big-score{font-size:40px;font-weight:700;color:#22c55e;}
.play-btn{
  margin-top:4px;padding:9px 28px;
  background:#22c55e;color:#0d1117;
  border:none;border-radius:6px;
  font-size:14px;font-weight:700;cursor:pointer;
}
.play-btn:hover{background:#16a34a;}
 
/* canvas remap flash */
#canvas-flash{
  position:absolute;
  top:0;left:0;right:0;
  padding:10px;
  text-align:center;
  font-size:14px;font-weight:700;
  pointer-events:none;
  opacity:0;
  transition:opacity 0.25s;
  border-radius:4px 4px 0 0;
  background:rgba(0,0,0,0.55);
}
#canvas-flash.show{opacity:1;}
 
#flash{
  height:20px;margin-top:8px;
  font-size:12px;font-weight:600;
  color:#facc15;text-align:center;
  opacity:0;transition:opacity 0.3s;
}
#flash.show{opacity:1;}
 
/* D-pad */
#dpad{
  display:none;margin-top:14px;
  flex-direction:column;align-items:center;gap:4px;
}
#dpad .drow{display:flex;gap:4px;}
.dpad-btn{
  width:60px;height:60px;
  background:#161b22;
  border:1.5px solid #30363d;
  border-radius:8px;color:#e6edf3;
  font-size:22px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  transition:background 0.15s, border-color 0.15s;
  flex-direction:column;
  gap:1px;
}
.dpad-btn .btn-label{font-size:9px;color:#484f58;line-height:1;}
.dpad-btn:active{background:#21262d;}
.dpad-btn.remapped{border-color:#facc15;background:#1a1a0a;}
@media(pointer:coarse),(max-width:540px){#dpad{display:flex;}}
 
#dpad-label{
  margin-top:6px;font-size:10px;color:#484f58;text-align:center;line-height:1.7;
}
 
#legend{margin-top:10px;font-size:11px;color:#484f58;text-align:center;line-height:1.8;}