:root{
  --field-dark:#1c6b3a;
  --field-light:#2b8a4a;
  --line:#f4f4f0;
  --sky-top:#8fd3ff;
  --sky-bottom:#c9ecff;
  --accent:#ff6b35;
  --accent-dark:#e2501a;
  --ink:#0f2417;
  --gold:#ffd23f;
}
*{box-sizing:border-box;}
html,body{
  margin:0;
  height:100%;
  font-family:'Arial Black','Arial Rounded MT Bold',Arial,sans-serif;
  overflow:hidden;
  background:linear-gradient(var(--sky-top),var(--sky-bottom));
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
#wrap{
  position:relative;
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:10px 0 0 0;
}
#hud{
  width:100%;
  max-width:520px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 16px;
  color:var(--ink);
  z-index:5;
}
.hud-box{
  background:rgba(255,255,255,0.85);
  border:2px solid var(--ink);
  border-radius:10px;
  padding:6px 12px;
  font-size:14px;
  letter-spacing:0.5px;
  text-align:center;
  line-height:1.1;
}
.hud-box b{
  display:block;
  font-size:20px;
  color:var(--accent-dark);
}
#title{
  font-size:22px;
  color:var(--ink);
  text-shadow:1px 1px 0 #fff;
  letter-spacing:1px;
  margin:2px 0 6px 0;
}
canvas{
  display:block;
  touch-action:none;
  max-width:100%;
  max-height:70vh;
}
#hint{
  color:var(--ink);
  font-size:13px;
  margin-top:6px;
  opacity:0.75;
  font-family:Arial,sans-serif;
  font-weight:normal;
}
#overlay{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(15,36,23,0.72);
  z-index:20;
}
#panel{
  background:var(--line);
  border-radius:18px;
  padding:28px 26px;
  text-align:center;
  max-width:340px;
  width:88%;
  border:4px solid var(--ink);
  box-shadow:0 12px 0 rgba(0,0,0,0.25);
}
#panel h2{
  margin:0 0 8px 0;
  font-size:26px;
  color:var(--ink);
}
#panel p{
  font-family:Arial,sans-serif;
  font-weight:normal;
  font-size:15px;
  color:#333;
  margin:8px 0 18px 0;
  line-height:1.4;
}
.prize{
  background:var(--gold);
  border:3px solid var(--ink);
  border-radius:12px;
  padding:10px 12px;
  font-family:Arial,sans-serif;
  font-weight:bold;
  font-size:15px;
  color:var(--ink);
  margin-bottom:16px;
}
button{
  font-family:inherit;
  background:var(--accent);
  color:#fff;
  border:3px solid var(--ink);
  border-radius:12px;
  padding:12px 22px;
  font-size:16px;
  cursor:pointer;
  box-shadow:0 5px 0 var(--accent-dark);
}
button:active{
  transform:translateY(3px);
  box-shadow:0 2px 0 var(--accent-dark);
}