/* ============================================================
   BONK Hater — cartoon football mini-game
   Palette: sky #8EC9FF→#D9F0FF, grass #7ED957/#6BC94C,
            sun #FFD93D, hater shirt #E63946, football #C17A4B
   ============================================================ */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  touch-action: manipulation;
  font-family: -apple-system, "Segoe UI", Arial, sans-serif;
  background: #8EC9FF;
  user-select: none;
}

/* Reusable "comic pop" text style: bold, outlined, punchy */
.comic-text {
  font-weight: 900;
  letter-spacing: 0.5px;
  color: #fff;
  -webkit-text-stroke: 2px #2B2B2B;
  text-shadow: 2px 3px 0 #2B2B2B;
}

/* ---------------- HUD ---------------- */
#hud {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  gap: 10px;
}

#score-wrap {
  display: flex;
  align-items: baseline;
  gap: 8px;
  background: rgba(255,255,255,0.55);
  border: 3px solid #2B2B2B;
  border-radius: 16px;
  padding: 6px 14px;
  backdrop-filter: blur(2px);
}

#score-label {
  font-size: 12px;
  font-weight: 800;
  color: #2B2B2B;
  letter-spacing: 1px;
}

#score {
  font-size: 26px;
  font-weight: 900;
  color: #E63946;
  -webkit-text-stroke: 1px #2B2B2B;
}

#combo {
  font-size: 14px;
  font-weight: 800;
  color: #FF6B35;
  background: #fff8e0;
  border: 2px solid #2B2B2B;
  border-radius: 10px;
  padding: 2px 8px;
  transition: opacity 0.2s;
}

#hearts {
  display: flex;
  gap: 4px;
  font-size: 26px;
  filter: drop-shadow(1px 2px 0 rgba(0,0,0,0.35));
}

.heart { transition: transform 0.25s ease; }
.heart.lost {
  animation: heartPop 0.4s ease forwards;
}
@keyframes heartPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.5) rotate(-10deg); }
  100% { transform: scale(0); opacity: 0; }
}

#sound-toggle {
  border: 3px solid #2B2B2B;
  background: #fff;
  border-radius: 50%;
  width: 46px;
  height: 46px;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
#sound-toggle:active { transform: scale(0.9); }

#best-score {
  position: fixed;
  top: 62px;
  left: 14px;
  z-index: 29;
  font-size: 13px;
  font-weight: 800;
  color: #2B2B2B;
  background: rgba(255,255,255,0.5);
  border: 2px solid #2B2B2B;
  border-radius: 10px;
  padding: 2px 10px;
}

/* ---------------- Game area ---------------- */
#game-area {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(to bottom, #8EC9FF 0%, #C9E9FF 55%, #D9F0FF 75%);
  cursor: crosshair;
}

#sun {
  position: absolute;
  top: 6%;
  right: 8%;
  width: 70px;
  height: 70px;
  background: #FFD93D;
  border: 4px solid #2B2B2B;
  border-radius: 50%;
  box-shadow: 0 0 0 8px rgba(255, 217, 61, 0.35);
  animation: sunPulse 3s ease-in-out infinite;
}
@keyframes sunPulse {
  0%, 100% { box-shadow: 0 0 0 8px rgba(255, 217, 61, 0.35); }
  50% { box-shadow: 0 0 0 14px rgba(255, 217, 61, 0.2); }
}

.cloud {
  position: absolute;
  width: 90px;
  height: 34px;
  background: #fff;
  border: 3px solid #2B2B2B;
  border-radius: 50px;
  opacity: 0.9;
}
.cloud::before, .cloud::after {
  content: "";
  position: absolute;
  background: #fff;
  border: 3px solid #2B2B2B;
  border-radius: 50%;
}
.cloud::before { width: 40px; height: 40px; top: -20px; left: 10px; }
.cloud::after { width: 50px; height: 50px; top: -26px; left: 40px; }
.cloud1 { top: 14%; left: 10%; animation: drift 22s linear infinite; }
.cloud2 { top: 24%; left: 60%; animation: drift 30s linear infinite reverse; transform: scale(0.7); }
@keyframes drift {
  0% { transform: translateX(0); }
  50% { transform: translateX(40px); }
  100% { transform: translateX(0); }
}

#ground {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 22%;
  background: repeating-linear-gradient(
    90deg,
    #7ED957 0px, #7ED957 40px,
    #6BC94C 40px, #6BC94C 80px
  );
  border-top: 4px solid #2B2B2B;
}

/* ---------------- Thrower (bottom center hand) ---------------- */
#thrower {
  position: absolute;
  bottom: 4%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 42px;
  z-index: 5;
  filter: drop-shadow(2px 3px 0 rgba(0,0,0,0.3));
  pointer-events: none;
}

/* ---------------- The Hater character ---------------- */
#hater {
  position: absolute;
  width: 96px;
  height: 130px;
  top: 40%;
  left: 40%;
  z-index: 6;
  transition: left 0.05s linear; /* smoothed by JS updates each frame */
  pointer-events: none;
}

#hater-body {
  position: relative;
  width: 100%;
  height: 100%;
  animation: haterWalk 0.6s ease-in-out infinite;
}
@keyframes haterWalk {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-6px) rotate(1.5deg); }
}

#hater.hit #hater-body {
  animation: haterShake 0.5s ease;
}
@keyframes haterShake {
  0% { transform: translate(0,0) rotate(0); }
  20% { transform: translate(-8px, -4px) rotate(-8deg); }
  40% { transform: translate(8px, 2px) rotate(8deg); }
  60% { transform: translate(-6px, -2px) rotate(-6deg); }
  80% { transform: translate(4px, 0) rotate(4deg); }
  100% { transform: translate(0,0) rotate(0); }
}

#hater.spawn-in {
  animation: haterSpawn 0.35s ease;
}
@keyframes haterSpawn {
  0% { transform: scale(0.2); opacity: 0; }
  70% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Face */
.hater-hair {
  position: absolute;
  top: -6px; left: 18px;
  width: 60px; height: 26px;
  background: #3d2b1f;
  border: 3px solid #2B2B2B;
  border-radius: 30px 30px 0 0;
}
.hater-face {
  position: absolute;
  top: 6px; left: 18px;
  width: 60px; height: 54px;
  background: #FFCB8E;
  border: 3px solid #2B2B2B;
  border-radius: 46% 46% 50% 50%;
}
.hater-eye {
  position: absolute;
  top: 22px;
  width: 8px; height: 10px;
  background: #2B2B2B;
  border-radius: 50%;
}
.hater-eye.left { left: 14px; }
.hater-eye.right { left: 38px; }
.hater-brow {
  position: absolute;
  top: 14px;
  width: 16px; height: 4px;
  background: #2B2B2B;
  border-radius: 2px;
}
.hater-brow.left { left: 8px; transform: rotate(20deg); }
.hater-brow.right { left: 34px; transform: rotate(-20deg); }
.hater-mouth {
  position: absolute;
  bottom: 8px; left: 20px;
  width: 20px; height: 8px;
  border-bottom: 3px solid #2B2B2B;
  border-radius: 0 0 50% 50%;
  transform: rotate(180deg); /* frowny by default */
}
.hater-blush {
  position: absolute;
  top: 30px;
  width: 10px; height: 6px;
  background: #FF8A65;
  border-radius: 50%;
  opacity: 0.8;
}
.hater-blush.left { left: 4px; }
.hater-blush.right { left: 46px; }

/* Shirt with slashed "10" — comic signature element */
.hater-shirt {
  position: absolute;
  top: 58px; left: 12px;
  width: 72px; height: 46px;
  background: #E63946;
  border: 3px solid #2B2B2B;
  border-radius: 10px 10px 16px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hater-shirt-text {
  font-size: 15px;
  font-weight: 900;
  color: #fff;
  -webkit-text-stroke: 1px #2B2B2B;
}
/* .hater-shirt-slash {
  position: absolute;
  width: 78px;
  height: 5px;
  background: #fff;
  border: 2px solid #2B2B2B;
  border-radius: 4px;
  transform: rotate(-32deg);
} */

.hater-arm {
  position: absolute;
  top: 64px;
  width: 10px; height: 30px;
  background: #FFCB8E;
  border: 3px solid #2B2B2B;
  border-radius: 8px;
}
.hater-arm.left { left: 2px; transform: rotate(18deg); }
.hater-arm.right { left: 84px; transform: rotate(-18deg); }

.hater-leg {
  position: absolute;
  bottom: 0;
  width: 12px; height: 26px;
  background: #3d3d3d;
  border: 3px solid #2B2B2B;
  border-radius: 6px;
}
.hater-leg.left { left: 26px; }
.hater-leg.right { left: 58px; }
@media (max-width: 768px) {
  .hater-leg {
    top: 104px;
  }
}
/* Speech bubble */
#hater-bubble {
  position: absolute;
  top: -46px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border: 3px solid #2B2B2B;
  border-radius: 12px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  color: #2B2B2B;
  animation: bubblePop 0.25s ease;
}
#hater-bubble::after {
  content: "";
  position: absolute;
  bottom: -9px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 8px 6px 0 6px;
  border-style: solid;
  border-color: #2B2B2B transparent transparent transparent;
}
@keyframes bubblePop {
  0% { transform: translateX(-50%) scale(0.5); opacity: 0; }
  100% { transform: translateX(-50%) scale(1); opacity: 1; }
}

/* ---------------- Football projectile ---------------- */
.football {
  position: absolute;
  width: 32px;
  height: 32px;
  background: #fff;
  border: 2px solid #222;
  border-radius: 50%;
  z-index: 10;
  pointer-events: none;
  transform: translate(-50%, -50%);
  overflow: hidden;
}

/* Center pentagon */
.football::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: #111;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  clip-path: polygon(
    50% 0%,
    100% 38%,
    82% 100%,
    18% 100%,
    0% 38%
  );
}

/* Surrounding patches */
.football::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 8%, #111 0 3px, transparent 3.5px),
    radial-gradient(circle at 84% 32%, #111 0 3px, transparent 3.5px),
    radial-gradient(circle at 74% 78%, #111 0 3px, transparent 3.5px),
    radial-gradient(circle at 26% 78%, #111 0 3px, transparent 3.5px),
    radial-gradient(circle at 16% 32%, #111 0 3px, transparent 3.5px);
}
/* ---------------- FX layer: particles + floating text ---------------- */
#fx-layer {
  position: absolute;
  inset: 0;
  z-index: 15;
  pointer-events: none;
  overflow: hidden;
}

.particle {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  animation: particleBurst 0.5s ease-out forwards;
}
@keyframes particleBurst {
  0% { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0.2); opacity: 0; }
}

.float-text {
  position: absolute;
  font-size: 22px;
  animation: floatUp 0.9s ease-out forwards;
  white-space: nowrap;
}
@keyframes floatUp {
  0% { transform: translate(-50%, 0) scale(0.6); opacity: 0; }
  20% { transform: translate(-50%, -10px) scale(1.2); opacity: 1; }
  100% { transform: translate(-50%, -70px) scale(1); opacity: 0; }
}

.miss-mark {
  position: absolute;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
  animation: missFade 0.6s ease-out forwards;
  pointer-events: none;
}
.miss-mark::before, .miss-mark::after {
  content: "";
  position: absolute;
  top: 50%; left: 0;
  width: 100%; height: 5px;
  background: #2B2B2B;
  border-radius: 3px;
}
.miss-mark::before { transform: rotate(45deg); }
.miss-mark::after { transform: rotate(-45deg); }
@keyframes missFade {
  0% { opacity: 1; transform: translate(-50%,-50%) scale(0.5) rotate(0deg); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.4) rotate(20deg); }
}

/* Screen shake on hit */
body.shake { animation: screenShake 0.3s ease; }
@keyframes screenShake {
  0%, 100% { transform: translate(0,0); }
  20% { transform: translate(-6px, 3px); }
  40% { transform: translate(6px, -3px); }
  60% { transform: translate(-4px, 2px); }
  80% { transform: translate(4px, -2px); }
}

/* ---------------- Overlays ---------------- */
#game-over, #intro {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(20, 30, 40, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.hidden { display: none !important; }

#game-over-card, #intro-card {
  background: #FFF8E0;
  border: 5px solid #2B2B2B;
  border-radius: 24px;
  padding: 30px 26px;
  text-align: center;
  max-width: 340px;
  width: 100%;
  box-shadow: 0 10px 0 rgba(0,0,0,0.25);
  animation: cardPop 0.35s ease;
}
@keyframes cardPop {
  0% { transform: scale(0.7); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

#game-over-card h1, #intro-card h1 {
  margin: 0 0 8px;
  font-size: 30px;
  color: #E63946;
  -webkit-text-stroke: 1.5px #2B2B2B;
  text-shadow: 2px 3px 0 #2B2B2B;
}

#game-over-card p, #intro-card p {
  margin: 6px 0;
  font-size: 15px;
  font-weight: 600;
  color: #2B2B2B;
}

.go-score, .go-best {
  font-size: 18px;
  font-weight: 800;
  color: #2B2B2B;
  margin-top: 10px;
}
.go-score span, .go-best span { color: #E63946; }

#play-again, #start-btn {
  margin-top: 20px;
  width: 100%;
  padding: 16px;
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  background: #4CAF50;
  border: 4px solid #2B2B2B;
  border-radius: 16px;
  cursor: pointer;
  box-shadow: 0 6px 0 #2E7D32;
  transition: transform 0.1s, box-shadow 0.1s;
  min-height: 56px; /* large touch target */
}
#play-again:active, #start-btn:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #2E7D32;
}

/* ---------------- Responsive tweaks ---------------- */
@media (max-width: 480px) {
  #score { font-size: 20px; }
  #hearts { font-size: 22px; }
  #sound-toggle { width: 40px; height: 40px; font-size: 17px; }
  #hater { width: 78px; height: 106px; }
  #game-over-card h1, #intro-card h1 { font-size: 24px; }
  #thrower { font-size: 34px; }
}

@media (min-width: 900px) {
  #hater { width: 110px; height: 150px; }
}