*{box-sizing:border-box}
body{
 margin:0;
 background:linear-gradient(#174e32,#082d21);
 font-family:Arial,sans-serif;
 color:#fff;
 text-align:center;
}
.game-wrap{
 max-width:850px;
 margin:auto;
 padding:12px;
}
h1{
 background:linear-gradient(#9c622f,#623616);
 border:5px solid #4c2b13;
 border-radius:15px;
 padding:13px;
 color:#ffe8a1;
 text-shadow:2px 3px #40220c;
 font-size:clamp(25px,5vw,43px);
 margin:10px 0;
}
.instructions{
 background:#183e28;
 border:2px solid #9fbd65;
 border-radius:12px;
 padding:12px;
 line-height:1.5;
}
#score{
 font-size:25px;
 font-weight:bold;
 color:#ffdf69;
 margin:12px;
}
canvas{
 width:100%;
 height:auto;
 display:block;
 background:#88b84b;
 border:7px solid #70421e;
 border-radius:15px;
 touch-action:none;
}
.controls{
 display:flex;
 justify-content:center;
 align-items:center;
 gap:25px;
 margin:18px auto;
}
.dpad{
 display:grid;
 grid-template-columns:repeat(3,55px);
 grid-template-rows:repeat(3,55px);
 gap:4px;
}
.control{
 background:linear-gradient(#71984a,#315d2c);
 border:3px solid #a9c476;
 color:white;
 border-radius:13px;
 font-size:25px;
 font-weight:bold;
 cursor:pointer;
 touch-action:none;
 user-select:none;
}
.control:active,.control.pressed{
 background:#d1a24d;
}
.up{grid-column:2;grid-row:1}
.left{grid-column:1;grid-row:2}
.right{grid-column:3;grid-row:2}
.down{grid-column:2;grid-row:3}
.balm{
 background:linear-gradient(#e8b95c,#b77726);
 color:#43250c;
 border:4px solid #ffe19a;
 border-radius:50%;
 width:110px;
 height:110px;
 font-size:19px;
 font-weight:bold;
 cursor:pointer;
}
#message{
 min-height:28px;
 color:#ffe69b;
 font-weight:bold;
}
@media(max-width:450px){
 .dpad{
  grid-template-columns:repeat(3,49px);
  grid-template-rows:repeat(3,49px);
 }
 .controls{gap:12px}
 .balm{width:95px;height:95px}
}