@font-face {
  font-family: "Rubik Puddles";
  src: url("fonts/rubik-puddles.woff2") format("woff2");
  font-display: block;
}
@font-face {
  font-family: "Rubik";
  src: url("fonts/rubik-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Rubik";
  src: url("fonts/rubik-600.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}

:root {
  --ink: #ffffff;
  --shade: rgba(28, 72, 120, 0.55);
  --shade-soft: rgba(28, 72, 120, 0.35);
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #9cc9ec;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
body { position: fixed; inset: 0; }

canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#trail { pointer-events: none; }

#hud {
  position: absolute; inset: 0;
  pointer-events: none;
  color: var(--ink);
  font-family: "Rubik", system-ui, sans-serif;
  text-align: center;
}

#logo {
  position: absolute; left: 0; right: 0;
  top: calc(env(safe-area-inset-top, 0px) + 9vh);
  margin: 0;
  font-family: "Rubik Puddles", "Rubik", sans-serif;
  font-weight: 400;
  font-size: min(17vw, 9vh);
  letter-spacing: 0.02em;
  text-shadow: 0 0.03em 0 rgba(30, 80, 130, 0.6);
  transition: opacity 1.6s ease, transform 1.6s ease;
}
#logo.away { opacity: 0; transform: translateY(-3vh); }

#count {
  position: absolute; left: 0; right: 0;
  top: calc(env(safe-area-inset-top, 0px) + 13vh);
  display: flex; flex-direction: column; align-items: center;
  transition: opacity 1.2s ease;
}
#count.fade { opacity: 0; }
#count-num {
  font-family: "Rubik Puddles", "Rubik", sans-serif;
  font-size: min(30vw, 16vh);
  line-height: 1;
  text-shadow: 0 0.03em 0 rgba(30, 80, 130, 0.6);
  display: inline-block;
}
#count-num.pop { animation: pop 0.45s cubic-bezier(.2,.9,.3,1.3); }
@keyframes pop {
  0% { transform: scale(1.35) translateY(-6%); }
  100% { transform: scale(1) translateY(0); }
}
#count-label {
  margin-top: 0.6vh;
  font-weight: 600;
  font-size: min(4.6vw, 2.4vh);
  letter-spacing: 0.08em;
  text-shadow: 0 1px 0 var(--shade), 0 2px 8px var(--shade-soft);
  opacity: 0;
  transition: opacity 0.8s ease;
}
#count-label.show { opacity: 1; }

#best {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 2.2vh);
  right: 5vw;
  font-weight: 600;
  font-size: min(3.8vw, 2vh);
  letter-spacing: 0.06em;
  text-shadow: 0 1px 0 var(--shade), 0 2px 6px var(--shade-soft);
  opacity: 0.9;
}

#hint {
  position: absolute; left: 8vw; right: 8vw;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 7vh);
  font-weight: 600;
  font-size: min(4.4vw, 2.3vh);
  letter-spacing: 0.04em;
  text-shadow: 0 1px 0 var(--shade), 0 2px 10px var(--shade);
  transition: opacity 1s ease;
  animation: breathe 3.2s ease-in-out infinite;
}
#hint.away { opacity: 0; animation: none; }
@keyframes breathe { 50% { transform: translateY(-0.8vh); } }

#debug {
  position: absolute; left: 3vw; bottom: calc(env(safe-area-inset-bottom, 0px) + 1vh);
  margin: 0; text-align: left;
  font: 11px/1.35 ui-monospace, Menlo, monospace;
  color: #fff; background: rgba(0, 30, 60, 0.45);
  padding: 6px 8px; border-radius: 6px;
  white-space: pre;
}
#debug:empty { display: none; }

#nogl {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: "Rubik", system-ui, sans-serif; color: #fff; padding: 2rem; text-align: center;
}
#nogl[hidden] { display: none; }