/* CREEMEE DROP — Btown Games */

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

:root {
  --cream: #fff6e8;
  --maple: #c98a3d;
  --maple-dark: #8a5a24;
  --razz: #8d4fa8;
  --sky: #2b1a3a;
  --panel: rgba(43, 22, 58, 0.82);
  --gold: #ffd23f;
}

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--sky);
  font-family: "Avenir Next", Avenir, Futura, "Trebuchet MS", -apple-system, "Segoe UI", sans-serif;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

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

canvas#game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.hidden { display: none !important; }

/* ------------------------------------------------ HUD */
#hud { position: absolute; inset: 0; pointer-events: none; }

#score-wrap {
  position: absolute; top: calc(10px + env(safe-area-inset-top)); left: 14px;
  color: var(--cream); text-shadow: 0 2px 0 rgba(0,0,0,0.35);
}
#score { font-size: 40px; font-weight: 900; line-height: 1; }
#score-label { font-size: 11px; font-weight: 800; letter-spacing: 3px; opacity: 0.85; }
#stack-hud { margin-top: 6px; font-size: 14px; font-weight: 800; color: var(--gold); }

#napkins {
  position: absolute; top: calc(14px + env(safe-area-inset-top)); right: 60px;
  display: flex; gap: 5px;
}
.napkin {
  width: 22px; height: 22px; border-radius: 4px;
  background: linear-gradient(135deg, #fffdf7 0%, #f0e4cd 100%);
  box-shadow: 0 2px 3px rgba(0,0,0,0.35);
  transform: rotate(-6deg);
}
.napkin.used { opacity: 0.18; transform: rotate(12deg) scale(0.8); }

#streak-chip {
  position: absolute; top: calc(66px + env(safe-area-inset-top)); right: 60px;
  background: var(--razz); color: #fff; font-weight: 900; font-size: 16px;
  padding: 3px 12px; border-radius: 999px; box-shadow: 0 2px 0 rgba(0,0,0,0.3);
}
#frenzy-chip {
  position: absolute; top: calc(10px + env(safe-area-inset-top)); left: 50%;
  transform: translateX(-50%);
  background: var(--gold); color: #5a3a00; font-weight: 900; font-size: 13px;
  padding: 6px 14px; border-radius: 999px; letter-spacing: 1px;
  animation: pulse 0.5s infinite alternate;
  white-space: nowrap;
}
@keyframes pulse { from { transform: translateX(-50%) scale(1); } to { transform: translateX(-50%) scale(1.08); } }

#toast {
  position: absolute; top: 34%; left: 50%; transform: translate(-50%, -50%);
  font-size: 22px; font-weight: 900; color: var(--cream);
  text-shadow: 0 2px 0 rgba(0,0,0,0.45); opacity: 0; transition: opacity 0.25s;
  text-align: center; pointer-events: none; white-space: nowrap;
}
#toast.show { opacity: 1; }

#mute {
  position: absolute; top: calc(10px + env(safe-area-inset-top)); right: 12px;
  width: 38px; height: 38px; border-radius: 50%; border: none;
  background: rgba(0,0,0,0.3); font-size: 17px; cursor: pointer; z-index: 30;
}

/* ------------------------------------------------ Screens */
.screen {
  position: absolute; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  background: rgba(24, 10, 36, 0.55);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  overflow-y: auto;
}
.menu-inner {
  display: flex; flex-direction: column; align-items: center;
  padding: calc(16px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom));
  max-width: 420px; width: 100%; text-align: center;
  margin: auto 0;
}

#logo { display: flex; flex-direction: column; align-items: center; }
#logo-cone { width: 75px; height: 110px; filter: drop-shadow(0 6px 8px rgba(0,0,0,0.4)); }
#logo-words { line-height: 0.92; margin-top: 6px; }
#logo-words span {
  display: block; font-weight: 900; color: var(--cream);
  font-size: 52px; letter-spacing: 2px;
  text-shadow: 0 3px 0 var(--maple-dark), 0 6px 12px rgba(0,0,0,0.5);
}
#logo-words span:last-child { color: var(--gold); font-size: 44px; }
#tagline { margin-top: 10px; color: #ffd9b0; font-size: 14px; font-weight: 700; line-height: 1.45; }

#flavor-card {
  margin-top: 16px; background: var(--panel); border-radius: 16px;
  padding: 12px 18px; color: var(--cream); font-size: 13px; font-weight: 700;
  border: 2px solid rgba(255, 210, 63, 0.25);
}
.fc-row { padding: 3px 0; }
.fc-row em { font-style: normal; opacity: 0.75; font-size: 12px; }
.fc-row.gold { color: var(--gold); letter-spacing: 0.5px; }
.fc-row.warn { margin-top: 5px; font-size: 12px; opacity: 0.9; }
.dot {
  display: inline-block; width: 12px; height: 12px; border-radius: 50%;
  margin-right: 4px; vertical-align: -1px; box-shadow: inset -2px -2px 2px rgba(0,0,0,0.25);
}
.dot.maple { background: #c98a3d; }
.dot.vanilla { background: #f6ecd7; }
.dot.choc { background: #6b4226; }
.dot.twist { background: linear-gradient(90deg, #f6ecd7 50%, #6b4226 50%); }
.dot.razz { background: #8d4fa8; }
.dot.golden { background: var(--gold); box-shadow: 0 0 8px var(--gold); }

.cta {
  margin-top: 18px; border: none; cursor: pointer;
  background: linear-gradient(180deg, #e2aa5e, #c98a3d);
  color: #3c2405; font-weight: 900; font-size: 22px; letter-spacing: 1px;
  padding: 14px 36px; border-radius: 999px;
  box-shadow: 0 5px 0 var(--maple-dark), 0 10px 20px rgba(0,0,0,0.45);
  font-family: inherit;
}
.cta:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--maple-dark); }
.cta .sub { display: block; font-size: 11px; font-weight: 700; opacity: 0.7; letter-spacing: 0; }

#howto { margin-top: 12px; color: #ffd9b0; font-size: 13px; font-weight: 700; opacity: 0.85; }
#best-line { margin-top: 6px; color: var(--gold); font-size: 14px; font-weight: 800; min-height: 18px; }

#footer-link, #footer-link-go {
  margin-top: 16px; color: #d9b8ff; font-size: 12px; font-weight: 700;
  text-decoration: none; opacity: 0.85;
}
#footer-link:hover, #footer-link-go:hover { opacity: 1; text-decoration: underline; }

/* ------------------------------------------------ Game over */
#go-stamp {
  border: 4px solid var(--razz); color: #e8b3ff; border-radius: 10px;
  padding: 6px 22px; transform: rotate(-4deg);
  font-weight: 900; font-size: 30px; letter-spacing: 3px;
  background: rgba(141, 79, 168, 0.18);
  text-shadow: 0 2px 0 rgba(0,0,0,0.4);
}
#go-score-wrap { margin-top: 14px; color: var(--cream); }
#go-score { font-size: 56px; font-weight: 900; line-height: 1; text-shadow: 0 3px 0 rgba(0,0,0,0.4); }
#go-score-label { font-size: 11px; font-weight: 800; letter-spacing: 3px; opacity: 0.85; }
#go-stack { margin-top: 6px; font-size: 15px; font-weight: 800; color: var(--gold); }
#go-quip { margin-top: 8px; font-size: 14px; font-weight: 700; color: #ffd9b0; line-height: 1.4; max-width: 320px; }
#go-best { margin-top: 4px; font-size: 13px; font-weight: 800; color: var(--gold); }
#go-best.new-best { animation: pulse2 0.6s infinite alternate; }
@keyframes pulse2 { from { transform: scale(1); } to { transform: scale(1.12); } }

#retry { margin-top: 14px; }
#brief-cta {
  margin-top: 14px; display: inline-block; text-decoration: none;
  background: rgba(255, 210, 63, 0.14); border: 2px solid rgba(255, 210, 63, 0.5);
  color: var(--gold); font-weight: 800; font-size: 14px;
  padding: 9px 18px; border-radius: 999px;
}
#brief-cta:active { transform: translateY(2px); }

/* ------------------------------------------------ Leaderboard */
.lb {
  margin-top: 14px; width: min(330px, 88vw);
  background: var(--panel); border-radius: 16px; padding: 12px 16px;
  border: 2px solid rgba(255, 210, 63, 0.22);
}
.lb-tabs { display: flex; gap: 6px; justify-content: center; }
.lb-chip {
  border: 2px solid rgba(255, 232, 201, 0.35); background: rgba(0,0,0,0.3);
  color: var(--cream); font-family: inherit; font-size: 12px; font-weight: 800;
  padding: 5px 12px; border-radius: 999px; cursor: pointer; letter-spacing: 0.5px;
}
.lb-chip.sel { background: var(--razz); border-color: #e8b3ff; }
.lb ol { list-style: none; margin: 10px 0 4px; max-height: 25vh; overflow-y: auto; }
.lb li {
  display: flex; gap: 8px; align-items: baseline;
  font-size: 14px; font-weight: 700; color: var(--cream);
  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: 900; color: var(--gold); }
.lb li.me { background: rgba(141, 79, 168, 0.5); }
.lb .lb-status { font-size: 12px; color: #ffd9b0; opacity: 0.85; margin: 8px 0 2px; }
.lb-form { display: flex; gap: 8px; justify-content: center; margin-top: 10px; }
.lb-form input {
  font-family: inherit; font-size: 14px; font-weight: 700; width: 150px;
  padding: 8px 12px; border-radius: 999px; border: 2px solid rgba(255,232,201,0.35);
  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(255,217,176,0.55); }
.lb-rename { font-size: 11px; padding: 4px 10px; margin-top: 6px; opacity: 0.85; }
.lb-form.hidden, .lb-rename.hidden { display: none; }

@media (max-height: 700px) {
  #logo-cone { width: 55px; height: 81px; }
  #logo-words span { font-size: 40px; }
  #logo-words span:last-child { font-size: 34px; }
  .lb ol { max-height: 18vh; }
  #go-score { font-size: 42px; }
}