/* ─── Reset ──────────────────────────────────────────────────────────────────*/

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

/* ─── Base ───────────────────────────────────────────────────────────────────*/

html,
body{
  width:100%;
  height:100%;
  overflow:hidden;
  background:black;
  font-family:Arial,sans-serif;
}

/* ─── Game container ─────────────────────────────────────────────────────────
   Full-screen on mobile. Becomes a framed iPhone shell on desktop (see media
   query at the bottom). All child elements are positioned relative to this.   */

.game{
  position:fixed;
  inset:0;
  width:100vw;
  height:100dvh;
  overflow:hidden;
  touch-action:none;
  background-image:url("images/tree1.png");
  background-size:cover;
  background-position:center;
}

/* ─── HUD ────────────────────────────────────────────────────────────────────
   Score and timer bar pinned to the top of the game container.               */

.hud{
  position:absolute;
  top:14px;
  left:14px;
  right:14px;
  z-index:50;
  display:flex;
  justify-content:space-between;
  gap:10px;
}

.hud-item{
  background:rgba(0,0,0,0.45);
  color:white;
  padding:12px 14px;
  border-radius:18px;
  font-size:24px;
  font-weight:bold;
  min-width:120px;
  text-align:center;
  backdrop-filter:blur(4px);
  box-shadow:0 0 12px rgba(0,0,0,0.4);
}

/* ─── Start / Go / Done button ───────────────────────────────────────────────
   Shared by all game-flow states; label text is swapped in JS.               */

.start{
  position:absolute;
  left:50%;
  bottom:calc(30px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  z-index:70;
  border:none;
  border-radius:24px;
  padding:18px 34px;
  font-size:32px;
  font-weight:bold;
  background:gold;
  color:black;
  box-shadow:0 4px 14px rgba(0,0,0,0.4);
}

/* ─── Panel ──────────────────────────────────────────────────────────────────
   Shared style for title, level intros, and end-game summary.
   Hidden by default via opacity/scale/visibility — no display toggling,
   so CSS transitions work without reflow tricks.                              */

.panel{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) scale(0.25);
  z-index:65;
  color:white;
  background:rgba(0,0,0,0.65);
  padding:24px 32px;
  border-radius:24px;
  font-size:34px;
  font-weight:bold;
  text-align:center;
  backdrop-filter:blur(4px);
  max-width:min(70%,420px);
  opacity:0;
  visibility:hidden;
  filter:blur(8px);
  transition:
    opacity     0.45s ease,
    transform   0.45s ease,
    filter      0.45s ease,
    visibility  0s   linear 0.45s;
  pointer-events:none;
}

.panel.visible{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,-50%) scale(1);
  filter:blur(0);
  transition:
    opacity     0.8s ease,
    transform   0.8s ease,
    filter      0.8s ease,
    visibility  0s   linear 0s;
  pointer-events:auto;
}

.panel hr{
  border:none;
  border-top:2px solid white;
  margin:12px auto;
  width:80%;
}

/* ─── Grid ───────────────────────────────────────────────────────────────────
   3×3 layout that fills the game container, leaving room for the HUD and
   button. Each cell is a .hole.                                               */

.grid{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(3,1fr);
  gap:30px;
  padding:120px 40px;
}

/* ─── Hole ───────────────────────────────────────────────────────────────────
   Each hole centres its children (.ring and .bug) and serves as the
   positioning context for the floating star feedback element.                 */

.hole{
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
}

/* ─── Ring ───────────────────────────────────────────────────────────────────
   Glowing circle shown at each hole while a level is playing.
   Staggered in/out via JS-added .show / .hide classes.                       */

.ring{
  position:absolute;
  width:100px;
  height:100px;
  border-radius:50%;
  border:8px solid rgba(255,255,255,0.92);
  opacity:0;
  transform:scale(0.2);
  box-shadow:
    0 0 22px rgba(255,255,255,0.95),
    inset 0 0 14px rgba(255,255,255,0.8);
  z-index:2;
}

.ring.show{
  animation:ringAppear 1.0s ease forwards;
}

.ring.hide{
  animation:ringDisappear 1.0s ease forwards;
}

@keyframes ringAppear{
  to{
    opacity:1;
    transform:scale(1);
  }
}

@keyframes ringDisappear{
  from{
    opacity:1;
    transform:scale(1);
  }
  to{
    opacity:0;
    transform:scale(0.2);
  }
}

/* ─── Bug ────────────────────────────────────────────────────────────────────
   Hidden by default. JS adds .up to make it tappable and visible.
   Transform and flip are set inline by JS for per-pop randomisation.         */

.bug{
  position:absolute;
  width:143px;
  height:143px;
  object-fit:contain;
  opacity:0;
  transform:scaleX(-1) scale(0.2);
  transition:
    transform 0.10s ease,
    opacity   0.10s ease;
  pointer-events:none;
  z-index:5;
}

.bug.up{
  opacity:1;
  pointer-events:auto;
}

/* ─── Hit feedback ───────────────────────────────────────────────────────────
   ⭐ or ❌ floats upward and fades out after a tap.                           */

.star{
  position:absolute;
  z-index:20;
  font-size:90px;
  pointer-events:none;
  animation:floatStar 0.5s ease-out forwards;
}

@keyframes floatStar{
  0%{
    opacity:1.0;
    transform:translateY(0) scale(0.5);
  }
  25%{
    opacity:1.0;
    transform:translateY(-10px) scale(1.0);
  }
  100%{
    opacity:0.0;
    transform:translateY(-100px) scale(2.0);
  }
}

/* ─── Desktop shell ──────────────────────────────────────────────────────────
   On wider screens the game is presented inside an iPhone-shaped frame so it
   looks intentional rather than just stretched. The ::before pseudo-element
   adds a decorative notch at the top.                                         */

@media (min-width:700px){

  body{
    display:flex;
    justify-content:center;
    align-items:center;
    background:radial-gradient(circle at center,
      #333 0%,
      #111 45%,
      #000 100%);
  }

  .game{
    position:relative;
    inset:auto;
    width:min(430px,94vw);
    height:min(932px,94dvh);
    border:12px solid #111;
    border-radius:46px;
    box-shadow:
      0 0 0 2px #333,
      0 24px 70px rgba(0,0,0,0.75);
  }

  .game::before{
    content:"";
    position:absolute;
    left:50%;
    top:10px;
    transform:translateX(-50%);
    width:120px;
    height:28px;
    border-radius:0 0 18px 18px;
    background:#111;
    z-index:100;
    pointer-events:none;
  }
}