*{margin:0;padding:0;box-sizing:border-box}
html,body{
  width:100%;height:100%;
  overflow:hidden;
  background:#243d32;
  font-family:Georgia,"Times New Roman",serif;
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;
  touch-action:none;
  overscroll-behavior:none;
  position:fixed;inset:0;
}
#app{
  position:fixed;inset:0;
  width:100%;height:100%;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
#c{
  position:absolute;inset:0;
  width:100%;height:100%;
  display:block;
  touch-action:none;
}
#hud{
  position:absolute;left:0;right:0;top:0;
  padding:calc(10px + env(safe-area-inset-top)) 16px 0;
  pointer-events:none;
  z-index:2;
  color:#efe6c9;
}
#hud-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.stat{display:flex;flex-direction:column;min-width:64px}
.stat.center{align-items:center}
.stat.right{align-items:flex-end}
.label{
  font-family:ui-rounded,"SF Pro Rounded","Avenir Next Rounded",Georgia,serif;
  font-size:11px;letter-spacing:.12em;text-transform:lowercase;
  opacity:.65;line-height:1.2;
}
.stat span:last-child{
  font-size:26px;font-weight:700;line-height:1.1;
  font-variant-numeric:tabular-nums;
  text-shadow:0 1px 0 rgba(0,0,0,.25);
}
#hunger-wrap{
  margin-top:10px;height:8px;border-radius:99px;
  background:rgba(15,28,22,.45);
  border:1.5px solid rgba(239,230,201,.35);
  overflow:hidden;
}
#hunger{
  height:100%;width:100%;
  background:#c9a66b;
  border-radius:99px;
  transform-origin:left center;
  transition:width .15s ease-out;
}
#overlay{
  position:absolute;inset:0;z-index:5;
  display:flex;align-items:center;justify-content:center;
  background:rgba(24,42,34,.72);
  opacity:0;pointer-events:none;
  transition:opacity .25s ease;
  padding:env(safe-area-inset-top) 20px env(safe-area-inset-bottom);
}
#overlay.show{opacity:1;pointer-events:auto}
#panel{
  width:min(340px,100%);
  text-align:center;
  color:#efe6c9;
  background:#2f4a3d;
  border:2.5px solid #efe6c9;
  border-radius:18px;
  padding:22px 22px 18px;
  box-shadow:0 10px 0 #1a2c24, 0 14px 28px rgba(0,0,0,.35);
  transform:rotate(-0.4deg);
}
#logo-c{width:100%;height:auto;display:block;margin:0 auto 6px}
#tagline{
  font-size:15px;line-height:1.45;
  opacity:.88;margin:4px 0 18px;
}
#over-stats{margin:4px 0 14px}
.big-score{
  font-size:56px;font-weight:700;line-height:1;
  letter-spacing:-.02em;
}
#new-best{
  display:inline-block;margin-top:6px;
  font-size:13px;letter-spacing:.14em;
  text-transform:lowercase;
  color:#c9a66b;
  border:1.5px solid #c9a66b;
  border-radius:999px;
  padding:3px 10px;
}
#btn{
  appearance:none;border:none;cursor:pointer;
  font-family:inherit;font-weight:700;font-size:20px;
  letter-spacing:.04em;text-transform:lowercase;
  color:#243d32;background:#efe6c9;
  border-radius:999px;
  padding:14px 36px;
  box-shadow:0 4px 0 #c9a66b;
  transition:transform .08s ease, box-shadow .08s ease;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  min-width:160px;
}
#btn:active{transform:translateY(3px);box-shadow:0 1px 0 #c9a66b}
#hint{
  margin-top:14px;font-size:12px;opacity:.55;line-height:1.35;
}