/* ===== Responsive variables ===== */
:root{
    /* Board scales between 270px and 540px, using the smaller viewport side */
    --board-size: clamp(270px, 90vmin, 540px);
    --tile-size: calc(var(--board-size) / 3);
    --overlay-font: clamp(22px, 8vmin, 48px);
    --countdown-font: clamp(28px, 11vmin, 72px);
    --score-font: clamp(16px, 3.5vmin, 20px);
    --heart-size: clamp(16px, 3.8vmin, 22px);
    --icon-size: clamp(18px, 5vmin, 30px);
    --explosion-size: clamp(60px, 20vmin, 150px);
    --title-width: clamp(180px, 32vmin, 250px);
  }
  
  /* Improve touch feel */
  html, body { height: 100%; }
  body {
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    background: url("./chungus-bg.png");
    background-size: cover;
    margin: 0;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation; /* faster taps */
    cursor: url("./hammers.png") 0 0, auto;
  }
  body.click-hit { cursor: url("./hammers2.png") 0 0, auto; }
  @media (pointer: coarse) {
    /* On touch devices, cursors are pointless, so use default */
    body, body.click-hit { cursor: auto; }
  }
  
  /* ===== HEADER ===== */
  #game-header {
    position: relative;
    display: flex; align-items: center; justify-content: center;
    gap: 12px;
    width: 100%;
    margin: 12px 0 10px;
    padding: 0 12px;
    box-sizing: border-box;
  }
  #game-title { width: var(--title-width); height: auto; }
  
  #top-left, #top-right {
    position: absolute; top: 6px; display: flex; align-items: center; gap: 10px;
  }
  #top-left {
    left: 12px;
    background: rgba(0,0,0,0.35);
    padding: 4px 8px; border-radius: 8px;
  }
  #best-score-label, #best-score {
    font-size: var(--score-font);
    color: #ffd700; font-weight: bold;
  }
  
  #top-right { right: 12px; flex-wrap: wrap; justify-content: flex-end; }
  #score-box { display: flex; align-items: center; gap: 6px; }
  #score-icon { width: var(--icon-size); height: var(--icon-size); }
  #score { font-size: var(--score-font); color: #fff; font-weight: bold; margin: 0; }
  
  /* Lives */
  #lives { display: flex; align-items: center; gap: 6px; }
  #lives .life { font-size: var(--heart-size); line-height: 1; color: #ff3b3b; filter: drop-shadow(0 1px 1px rgba(0,0,0,.4)); }
  #lives .life.lost { opacity: .35; }
  
  #restartBtn, #pauseBtn {
    touch-action: manipulation;
  }
  #restartBtn {
    padding: 6px 10px;
    border: 2px solid #fff; border-radius: 10px;
    background: rgba(0,0,0,0.35); color: #fff; font-weight: 700; cursor: pointer;
    transition: transform 0.1s ease, background 0.2s ease;
    font-size: clamp(12px, 2.8vmin, 14px);
  }
  #restartBtn:hover { transform: scale(1.05); background: rgba(0,0,0,0.5); }
  #pauseBtn { width: clamp(32px, 7.5vmin, 40px); height: clamp(32px, 7.5vmin, 40px); cursor: pointer; transition: transform .1s ease; }
  #pauseBtn:hover { transform: scale(1.08); }
  
  /* Stack header on narrow screens */
  @media (max-width: 480px){
    #game-header { flex-direction: column; gap: 8px; }
    #top-left, #top-right { position: static; }
  }
  
  /* ===== BOARD ===== */
  #board {
    position: relative;
    width: var(--board-size);
    height: var(--board-size);
    margin: 8px auto 24px;
    display: flex; flex-wrap: wrap;
    background: url("./soil.png"); background-size: cover;
    border: 3px solid white; border-radius: 25px;
    touch-action: manipulation;
  }
  #board > div:not(#gameover-overlay):not(#countdown-overlay) {
    width: var(--tile-size);
    height: var(--tile-size);
    background-image: url("./hole4.png");
    background-size: cover;
    position: relative; /* so in-tile effects anchor correctly */
  }
  #board div img {
    display: block;
    margin: 0 auto;
    height: 65%;         /* scale with tile height */
    width: auto;         /* keep aspect */
    user-select: none; -moz-user-select: none; -webkit-user-drag: none;
    -webkit-user-select: none; -ms-user-select: none;
  }
  
  /* Golden carrot bigger & glow */
  #board div img[data-type="golden"] {
    height: 70%;
    filter: drop-shadow(0 0 8px gold);
  }
  
  /* ===== GAME OVER overlay ===== */
  #gameover-overlay {
    position: absolute; inset: 0; display: none;
    align-items: center; justify-content: center;
    font: 700 var(--overlay-font)/1 Arial, sans-serif; color: white;
    text-shadow: 0 3px 8px rgba(0,0,0,.8);
    background: rgba(0,0,0,0.4); border-radius: 25px; z-index: 20;
    opacity: 0; transform: scale(.96); transition: opacity .18s ease-out, transform .18s ease-out;
  }
  #board.game-over #gameover-overlay { display: flex; opacity: 1; transform: scale(1); }
  
  /* ===== PAUSE overlay ===== */
  #board.paused { filter: grayscale(1) brightness(0.85); }
  #board.paused::after {
    content: "PAUSED"; position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font: 700 calc(var(--overlay-font) * 0.9)/1 Arial, sans-serif; color: white;
    text-shadow: 0 2px 6px rgba(0,0,0,.6);
    background: rgba(0,0,0,0.25); border-radius: 25px; z-index: 10;
  }
  
  /* ===== Explosion (now centered inside tile) ===== */
  .explosion {
    position: absolute;
    width: var(--explosion-size);
    height: var(--explosion-size);
    left: 50%; top: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    pointer-events: none;
    animation: explode 0.5s ease-out forwards;
    z-index: 6;
  }
  @keyframes explode {
    from { transform: translate(-50%, -50%) scale(0.5); opacity: 1; }
    to   { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
  }
  
  /* ===== COUNTDOWN overlay ===== */
  #countdown-overlay {
    position: absolute; inset: 0; display: none;
    align-items: center; justify-content: center;
    background: rgba(0,0,0,0.35); border-radius: 25px; z-index: 25;
  }
  #countdown-overlay #countdown-number {
    font: 800 var(--countdown-font)/1 Arial, sans-serif; color: #fff; text-shadow: 0 3px 8px rgba(0,0,0,.8);
    transform: scale(1); opacity: 1; transition: transform .25s ease-out, opacity .25s ease-out;
  }
  #countdown-overlay.tick #countdown-number { transform: scale(1.12); opacity: 0.9; }
  
  /* ===== Floating points inside tile ===== */
  .tile-points {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    font: 800 clamp(14px, 4.5vmin, 24px)/1 Arial, sans-serif;
    pointer-events: none; color: #fff;
    text-shadow: 0 2px 6px rgba(0,0,0,.6);
    opacity: 0; z-index: 7;
    animation: tileRise 800ms ease-out forwards;
  }
  @keyframes tileRise {
    0%   { transform: translate(-50%, -20%); opacity: 0; }
    15%  { transform: translate(-50%, -40%); opacity: 1; }
    100% { transform: translate(-50%, -120%); opacity: 0; }
  }
/* ===== START overlay ===== */
/* ===== START overlay (mobile-safe, centered, no overflow) ===== */
#start-overlay {
  position: fixed;
  inset: 0;
  display: flex;                 /* rock-solid centering */
  align-items: center;
  justify-content: center;
  padding: 16px;                 /* breathing room on tiny screens */
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
  z-index: 9999;

  /* Use dynamic viewport height so iOS/Android URL bars don’t break centering */
  min-height: 100dvh;
  box-sizing: border-box;

  /* If the card is still too tall on ultra-short screens, allow scrolling */
  overflow: auto;
}

/* Hidden state */
#start-overlay.hidden { display: none; }

/* The card never exceeds the visible viewport and will shrink gracefully */
.start-card {
  display: grid;
  gap: clamp(10px, 3vmin, 18px);
  place-items: center;

  /* Responsive width with a safe max for desktop */
  width: min(92vw, 520px);

  /* Prevent vertical overflow on small phones */
  max-height: 90dvh;
  padding: clamp(14px, 4vmin, 28px) clamp(16px, 5vmin, 36px);
  box-sizing: border-box;
  overflow: hidden;              /* keep inner bits contained */

  border-radius: 20px;
  background: rgba(20,20,20,0.65);
  border: 2px solid rgba(255,255,255,0.25);
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

/* Ensure the logo can’t push the card off-screen */
.start-logo {
  width: clamp(200px, 65vw, 420px);
  height: auto;
  max-height: 28dvh;             /* key line that stops overflow on short phones */
  object-fit: contain;
}

/* Keep text/buttons readable but compact on phones */
.start-title {
  margin: 0;
  font: 800 clamp(20px, 6.2vmin, 36px)/1.1 Arial, sans-serif;
  color: #fff;
  text-align: center;
  text-shadow: 0 3px 10px rgba(0,0,0,.7);
}

.start-btn {
  padding: clamp(10px, 3vmin, 14px) clamp(20px, 7vmin, 32px);
  font: 800 clamp(14px, 3.8vmin, 18px)/1 Arial, sans-serif;
  color: #111;
  background: #ffd84d;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .08s ease, filter .12s ease;
}
.start-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.start-btn:active { transform: translateY(1px) scale(0.98); }

.start-hint {
  margin: 0;
  font: 600 clamp(12px, 3.2vmin, 14px)/1.2 Arial, sans-serif;
  color: rgba(255,255,255,0.85);
  text-align: center;
}

/* Bonus: slightly bigger presence on wide screens without breaking mobile */
@media (min-width: 1024px) {
  .start-card { width: min(60vw, 720px); }
  .start-logo { max-height: 40dvh; }
}


/* Embed mode: ensure no scrollbars before starting */
html.embed, html.embed body { overflow: hidden; }

/* ===== EMBED CONTROLS (fullscreen + minimize) ===== */
html.embed #embed-controls {
  position: fixed;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 8px;
  z-index: 10000;
}
.embed-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.4);
  background: rgba(0,0,0,.45);
  color: #fff;
  font: 700 14px/1 Arial, sans-serif;
  cursor: pointer;
  backdrop-filter: blur(2px);
  transition: transform .08s ease, background .12s ease;
}
.embed-btn:hover { transform: translateY(-1px); background: rgba(0,0,0,.6); }
.embed-btn:active { transform: translateY(1px) scale(.98); }

/* Restore pill (shows when minimized) */
#embed-restore-btn {
  position: fixed;
  bottom: 12px;
  right: 12px;
  display: none;
  gap: 8px;
  z-index: 10000;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.4);
  background: rgba(0,0,0,.55);
  color: #fff;
  font: 700 14px/1 Arial, sans-serif;
  cursor: pointer;
  backdrop-filter: blur(2px);
}
html.embed.minimized #embed-restore-btn { display: inline-flex; }

/* When minimized, hide the game UI and the control bar */
html.embed.minimized #game-header,
html.embed.minimized #board,
html.embed.minimized #start-overlay,
html.embed.minimized #embed-controls {
  display: none !important;
}

/* Optional: let the parent page visually reclaim space if the iframe auto-sizes */
html.embed.minimized body { min-height: 0; }