:root{
  --panel:#0c2b1f;
  --panel-light:#12402c;
  --accent:#ffd23f;
  --accent2:#5ee85e;
  --danger:#ff5a5a;
  --text:#eafff0;
}
*{box-sizing:border-box;}
html,body{
  margin:0;padding:0;height:100%;
  background:radial-gradient(circle at 50% 0%, #143d2a 0%, #081812 60%, #04100b 100%);
  font-family:'Trebuchet MS','Segoe UI',Verdana,sans-serif;
  color:var(--text);
  overflow-x:hidden;
}
#app{
  display:flex;
  flex-direction:column;
  align-items:center;
  min-height:100%;
  padding:14px 10px 30px;
}
h1{
  margin:2px 0 10px;
  font-size:2.1em;
  letter-spacing:3px;
  color:var(--accent2);
  text-shadow:0 0 10px rgba(94,232,94,.6), 3px 3px 0 #04180d;
  font-weight:900;
}
#hud{
  width:100%;
  max-width:462px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:var(--panel);
  border:3px solid #04180d;
  border-radius:10px;
  padding:8px 12px;
  font-size:.95em;
  box-shadow: inset 0 0 12px rgba(0,0,0,.5);
  height:55px;box-sizing:border-box;
}
#hud .stat{display:flex;flex-direction:column;align-items:center;min-width:56px;}
#hud .stat span.label{font-size:.65em;letter-spacing:1px;opacity:.7;text-transform:uppercase;}
#hud .stat span.value{font-size:1.25em;font-weight:bold;color:var(--accent);}
#lives{display:flex;gap:3px;align-items:center;min-height:20px;}
#lives img{width:20px;height:20px;filter:drop-shadow(0 0 2px #000);}
#timerWrap{
  width:100%;max-width:462px;height:10px;background:#04180d;
  border-radius:6px;overflow:hidden;margin-bottom:10px;border:2px solid #04180d;
}
#timerBar{height:100%;width:100%;background:linear-gradient(90deg,#5ee85e,#ffd23f,#ff5a5a);
  transition:width .12s linear;}
#boardWrap{
  position:relative;
  width:100%;
  max-width:462px;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 0 0 4px #04180d, 0 0 0 8px #143d2a, 0 10px 30px rgba(0,0,0,.6);
}
canvas{display:block;width:100%;height:auto;background:#000;image-rendering:auto;}
#overlay{
  position:absolute;inset:0;
  background:rgba(4,16,11,.88);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:16px;gap:10px;
}
#overlay.hidden{display:none;}
#overlay h2{margin:0 0 4px;color:var(--accent2);font-size:1.7em;text-shadow:0 0 8px rgba(94,232,94,.6);}
#overlay p{margin:2px 0;max-width:340px;line-height:1.4;font-size:.92em;opacity:.9;}
.btn{
  background:linear-gradient(180deg,#5ee85e,#2fae3a);
  border:none;border-radius:8px;
  color:#04180d;font-weight:800;letter-spacing:1px;
  padding:12px 26px;font-size:1.05em;cursor:pointer;
  box-shadow:0 4px 0 #1c6e24, 0 6px 12px rgba(0,0,0,.4);
  transition:transform .08s ease;
  text-transform:uppercase;
}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #1c6e24;}
.btn.secondary{
  background:linear-gradient(180deg,#ffd23f,#e0a600);
  box-shadow:0 4px 0 #8a6300,0 6px 12px rgba(0,0,0,.4);
}
#controls{
  display:flex;flex-direction:row;justify-content:space-between;align-items:center;
  width:100%;max-width:462px;
  margin-top:14px;
  user-select:none;
}
#controls .padGroup{display:flex;gap:6px;}
.pad{
  width:52px;height:52px;border-radius:12px;
  background:linear-gradient(180deg,#1a5236,#0d2e1e);
  border:2px solid #04180d;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 3px 0 #04180d;
  touch-action:manipulation;
  cursor:pointer;
}
.pad:active{transform:translateY(2px);box-shadow:none;}
.pad::before{
  content:'';
  width:0;height:0;
  border-style:solid;
}
#padUp::before{
  border-width:0 9px 14px 9px;
  border-color:transparent transparent var(--accent2) transparent;
}
#padDown::before{
  border-width:14px 9px 0 9px;
  border-color:var(--accent2) transparent transparent transparent;
}
#padLeft::before{
  border-width:9px 14px 9px 0;
  border-color:transparent var(--accent2) transparent transparent;
}
#padRight::before{
  border-width:9px 0 9px 14px;
  border-color:transparent transparent transparent var(--accent2);
}
#topRow{
  width:100%;max-width:462px;
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:8px;
  height:55px;
}
#muteBtn{
  background:var(--panel);border:2px solid #04180d;color:var(--text);
  border-radius:8px;padding:0 12px;cursor:pointer;font-size:1.1em;
  display:flex;align-items:center;justify-content:center;
  height:55px;box-sizing:border-box;line-height:1;
}
#hint{font-size:.72em;opacity:.6;text-align:center;flex:1;margin:0 8px;line-height:1.3;}
#levelBanner{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
#levelBanner span{
  background:rgba(4,16,11,.85);color:var(--accent);
  padding:10px 22px;border-radius:10px;font-size:1.4em;font-weight:800;
  letter-spacing:2px;text-shadow:0 0 8px rgba(255,210,63,.7);
  opacity:0;transition:opacity .3s ease;
}
#levelBanner span.show{opacity:1;}