/* TAP THE MAPLE — Btown Games */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --maple: #7a2f18;
  --maple-deep: #4a1c0e;
  --amber: #e8a33a;
  --amber-bright: #ffc95e;
  --cream: #fff3e0;
  --snow: #eef4f9;
  --dusk: #2b1a26;
}

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--dusk);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  overscroll-behavior: none;
}

#app {
  position: fixed;
  inset: 0;
  touch-action: none;
}

#game {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

.hidden { display: none !important; }

/* ---------------- HUD ---------------- */

#hud {
  position: absolute;
  top: env(safe-area-inset-top, 0);
  left: 0; right: 0;
  padding: 14px 16px 0;
  pointer-events: none;
  color: var(--cream);
  text-align: center;
}
#score {
  font-size: 52px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 3px 0 rgba(0,0,0,0.35);
}
#score-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 4px;
  opacity: 0.75;
}
#level-chip {
  position: absolute;
  top: 18px; left: 16px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 1.5px;
  background: rgba(0,0,0,0.35);
  border: 2px solid rgba(255,201,94,0.5);
  color: var(--amber-bright);
  padding: 6px 12px;
  border-radius: 999px;
}
#level-chip.boss {
  color: #fff;
  background: rgba(122,47,24,0.8);
  border-color: var(--amber-bright);
  animation: bossPulse 1s ease-in-out infinite;
}
@keyframes bossPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,201,94,0.5); }
  50% { box-shadow: 0 0 0 6px rgba(255,201,94,0); }
}
#sap-wrap {
  position: absolute;
  top: 18px; right: 16px;
  font-size: 15px;
  font-weight: 900;
  background: rgba(0,0,0,0.35);
  border: 2px solid rgba(255,201,94,0.5);
  color: var(--amber-bright);
  padding: 6px 12px;
  border-radius: 999px;
}
#sap-count { margin-left: 5px; }
#banner {
  position: absolute;
  top: 120px; left: 0; right: 0;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 3px;
  color: var(--amber-bright);
  text-shadow: 0 3px 0 rgba(0,0,0,0.45);
  animation: bannerIn 0.35s ease-out;
}
@keyframes bannerIn {
  from { transform: scale(0.6); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

#mute {
  position: absolute;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  right: 14px;
  z-index: 30;
  font-size: 20px;
  background: rgba(0,0,0,0.35);
  border: 2px solid rgba(255,243,224,0.25);
  border-radius: 50%;
  width: 46px; height: 46px;
  cursor: pointer;
}

/* ---------------- Screens ---------------- */

.screen {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 30%, rgba(74,28,14,0.88), rgba(43,26,38,0.94));
  overflow-y: auto;
  touch-action: pan-y;
}
.menu-inner {
  width: min(420px, 92vw);
  text-align: center;
  color: var(--cream);
  padding: calc(24px + env(safe-area-inset-top, 0px)) 0 calc(24px + env(safe-area-inset-bottom, 0px));
}

/* Title */
#logo-leaf {
  font-size: 64px;
  filter: drop-shadow(0 4px 0 rgba(0,0,0,0.4));
  animation: leafSway 3s ease-in-out infinite;
}
@keyframes leafSway {
  0%, 100% { transform: rotate(-7deg); }
  50% { transform: rotate(7deg); }
}
#logo-title {
  font-size: clamp(52px, 15vw, 76px);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: 2px;
  color: var(--amber-bright);
  text-shadow: 0 4px 0 var(--maple-deep), 0 8px 24px rgba(0,0,0,0.5);
  margin: 8px 0 10px;
}
#tagline {
  font-size: 14px;
  font-weight: 700;
  color: var(--cream);
  opacity: 0.85;
  font-style: italic;
}
#howto {
  margin: 26px auto 0;
  max-width: 320px;
  font-size: 14px;
  line-height: 1.75;
  color: var(--snow);
  opacity: 0.9;
}
#howto strong { color: var(--amber-bright); }

.cta {
  display: block;
  margin: 26px auto 0;
  font: inherit;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--maple-deep);
  background: linear-gradient(180deg, var(--amber-bright), var(--amber));
  border: none;
  border-radius: 16px;
  padding: 16px 38px;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--maple-deep), 0 10px 24px rgba(0,0,0,0.45);
}
.cta:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--maple-deep); }

#best-line { margin-top: 16px; font-size: 14px; font-weight: 700; color: var(--amber-bright); opacity: 0.9; }

#credit, #go-credit {
  margin-top: 28px;
  font-size: 12px;
  color: var(--snow);
  opacity: 0.65;
}
#credit a { color: var(--amber-bright); font-weight: 700; text-decoration: none; }
#credit a:active, #credit a:hover { text-decoration: underline; }

/* Game over */
#go-stamp {
  display: inline-block;
  transform: rotate(-4deg);
  border: 4px solid var(--amber-bright);
  border-radius: 10px;
  padding: 8px 20px;
  animation: stampIn 0.3s cubic-bezier(0.2, 2.2, 0.4, 1);
}
@keyframes stampIn {
  from { transform: rotate(-4deg) scale(2.2); opacity: 0; }
  to { transform: rotate(-4deg) scale(1); opacity: 1; }
}
#go-verdict {
  font-size: clamp(26px, 8vw, 36px);
  font-weight: 900;
  letter-spacing: 3px;
  color: var(--amber-bright);
}
#go-reason { margin-top: 12px; font-size: 15px; font-weight: 700; color: var(--snow); opacity: 0.9; }
#go-score { margin-top: 14px; font-size: 64px; font-weight: 900; line-height: 1; color: var(--cream); text-shadow: 0 4px 0 rgba(0,0,0,0.4); }
#go-score-label { font-size: 11px; font-weight: 800; letter-spacing: 4px; opacity: 0.7; margin-top: 4px; }
#go-detail { margin-top: 10px; font-size: 15px; font-weight: 700; color: var(--amber-bright); }
#go-best { margin-top: 6px; font-size: 14px; font-weight: 700; color: var(--snow); opacity: 0.85; }
#go-best.new-best { color: var(--amber-bright); opacity: 1; animation: bossPulse 1s infinite; border-radius: 8px; }

#retry {
  display: block;
  margin: 22px auto 0;
  font: inherit;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--maple-deep);
  background: linear-gradient(180deg, var(--amber-bright), var(--amber));
  border: none;
  border-radius: 16px;
  padding: 14px 32px;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--maple-deep), 0 10px 24px rgba(0,0,0,0.45);
}
#retry .sub { display: block; font-size: 11px; font-weight: 700; letter-spacing: 1px; opacity: 0.7; margin-top: 3px; }
#retry:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--maple-deep); }

#go-brief {
  display: inline-block;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 800;
  color: var(--amber-bright);
  text-decoration: none;
  background: rgba(232,163,58,0.14);
  border: 2px solid rgba(232,163,58,0.55);
  border-radius: 999px;
  padding: 10px 18px;
}
#go-brief:active, #go-brief:hover { background: rgba(232,163,58,0.28); }

/* ---------------- Leaderboard ---------------- */

.lb {
  margin: 18px auto 0;
  width: min(340px, 88vw);
  background: rgba(0,0,0,0.35);
  border: 2px solid rgba(232,163,58,0.35);
  border-radius: 16px;
  padding: 12px 16px 14px;
}
.lb-tabs { display: flex; gap: 6px; justify-content: center; }
.lb-chip {
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--cream);
  background: rgba(0,0,0,0.3);
  border: 2px solid rgba(255,243,224,0.3);
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
}
.lb-chip.sel { background: var(--maple); border-color: var(--amber-bright); color: #fff; }
.lb ol { list-style: none; margin: 10px 0 4px; max-height: 27vh; overflow-y: auto; }
.lb li {
  display: flex; gap: 8px; align-items: baseline;
  font-size: 14px; font-weight: 600; color: var(--snow);
  padding: 3px 6px; border-radius: 8px;
}
.lb li .rank { width: 22px; text-align: right; opacity: 0.7; font-size: 12px; }
.lb li .nm { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb li .sc { font-weight: 800; color: var(--amber-bright); }
.lb li.me { background: rgba(122,47,24,0.6); color: #fff; }
.lb .lb-status { font-size: 12px; color: var(--amber-bright); opacity: 0.85; margin: 8px 0 2px; }
.lb-form { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }
.lb-form input {
  font: inherit; font-size: 14px; font-weight: 600; width: 160px;
  padding: 8px 12px; border-radius: 999px;
  border: 2px solid rgba(232,163,58,0.45);
  background: rgba(0,0,0,0.35); color: var(--cream); outline: none;
  -webkit-user-select: text; user-select: text;
}
.lb-form input::placeholder { color: rgba(238,244,249,0.5); }
.lb-rename { margin-top: 8px; font-size: 11px; padding: 4px 10px; opacity: 0.85; }
.lb-form.hidden, .lb-rename.hidden { display: none; }

@media (max-height: 620px) {
  #logo-leaf { font-size: 44px; }
  #howto { margin-top: 14px; font-size: 13px; }
  #go-score { font-size: 48px; }
  .lb ol { max-height: 20vh; }
}