/* Baloo 2: self-hosted so the game works offline (SIL Open Font License). */
@font-face {
  font-family: 'Baloo 2';
  font-weight: 400 800;
  font-display: swap;
  src: url(../fonts/baloo2.woff2) format('woff2');
}

:root { font-family: 'Baloo 2', 'Comic Sans MS', system-ui, sans-serif; }
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: #1b3a2a; color: #fff;
  touch-action: none; user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

#mute {
  position: fixed; top: 12px; right: 12px; width: 48px; height: 48px;
  border: 0; border-radius: 50%; font-size: 22px; cursor: pointer;
  background: rgba(0, 0, 0, 0.35); color: #fff;
}
#mute:hover { background: rgba(0, 0, 0, 0.5); }

.panel {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(92vw, 560px); padding: 28px 32px 24px; text-align: center;
  background: rgba(14, 30, 20, 0.62); border-radius: 28px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
  pointer-events: none;
  animation: pop 0.35s cubic-bezier(.2, 1.6, .4, 1);
}
@keyframes pop { from { transform: translate(-50%, -50%) scale(0.7); opacity: 0; } }
.panel h1 {
  margin: 0; font-size: clamp(3rem, 12vw, 5.5rem); font-weight: 800; line-height: 0.95;
  color: #ffd75e; letter-spacing: -0.02em;
  text-shadow: 0 4px 0 #8a4b12, 0 8px 18px rgba(0, 0, 0, 0.4);
}
.panel h2 { margin: 0; font-size: 3rem; font-weight: 800; color: #ffd75e; text-shadow: 0 3px 0 #8a4b12; }
.how { margin: 14px 0 0; font-size: 1.6rem; font-weight: 600; line-height: 1.2; }
.how b { color: #ffd75e; }
.how.small { font-size: 1.05rem; font-weight: 500; opacity: 0.85; margin-top: 8px; }
.big { margin: 0; font-size: 5.5rem; font-weight: 800; line-height: 1; }
.sub { margin: 0; font-size: 1.3rem; opacity: 0.9; }
.best { margin: 10px 0 0; font-size: 1.15rem; color: #ffd75e; min-height: 1.4em; }
.go { margin: 16px 0 0; font-size: 1.25rem; font-weight: 700; animation: blink 1.2s ease-in-out infinite; }
@keyframes blink { 50% { opacity: 0.45; } }

body[data-phase="play"] #title,
body[data-phase="dead"] #title { display: none; }