/* ── Akimi Islands — the on-screen game layer ─────────────────────────────
   Counters, the thumb stick, toasts and the level-up burst.
   Everything sits above the 3D canvas and lets taps fall through unless
   it is something you are meant to press.
   ───────────────────────────────────────────────────────────────────────── */

#hud {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  /* Keeps the HUD clear of the iPhone notch and the home bar */
  padding: max(14px, env(safe-area-inset-top))
           max(14px, env(safe-area-inset-right))
           max(14px, env(safe-area-inset-bottom))
           max(14px, env(safe-area-inset-left));
  display: grid;
  grid-template-rows: auto 1fr auto;
}

/* ── Top row: counters left, buttons right ────────────────────────────── */

/* Every band names its own row. Left to place themselves automatically, a
   new item with an explicit `grid-row: 2` shunts the bottom band up into the
   middle of the screen. */
.hud-top {
  grid-row: 1;
  grid-column: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.counters { display: flex; gap: 10px; flex-wrap: wrap; }

.counter {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px 9px 12px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .93);
  box-shadow: var(--shadow-sm);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  transition: transform .3s var(--ease);
}
.counter .pip { font-size: 24px; line-height: 1; }
.counter.pop  { transform: scale(1.22); }

.counter--coins .num { color: var(--gold-deep); }
.counter--stars .num { color: var(--coral-deep); }

/* Level badge with a filling ring for experience */
.level-badge {
  pointer-events: auto;
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px 8px 8px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .93);
  box-shadow: var(--shadow-sm);
}
.level-ring {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 16px; font-weight: 700; color: var(--ink);
  /* --xp is set from JavaScript, 0 to 100 */
  background: conic-gradient(var(--mint) calc(var(--xp, 0) * 1%), rgba(27,42,56,.12) 0);
}
.level-ring::after {
  content: '';
  position: absolute;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #fff;
}
.level-ring span { position: relative; z-index: 1; }
.level-word { font-size: 15px; font-weight: 600; color: var(--ink-soft); }

/* Four round buttons. On a narrow phone they fold into two rows of two
   rather than shrinking — 52px is the smallest a small finger can hit. */
.hud-buttons {
  display: flex;
  gap: 10px;
  pointer-events: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ── Toast messages ("+1 star!") ──────────────────────────────────────── */

.toast-rail {
  grid-row: 2;
  grid-column: 1;
  align-self: start;
  justify-self: center;
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* The tracker sits at the right of this same band. A centred toast that grew
   wide enough would slide underneath it, so when the tracker is on screen the
   toasts move down below it instead of fighting for the space. */
#hud:has(.tracker:not([hidden])) .toast-rail { margin-top: 124px; }

.toast {
  max-width: min(88vw, 460px);
  padding: 11px 24px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .96);
  box-shadow: var(--shadow-md);
  font-size: 19px;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 9px;
  text-align: center;
  animation: toast-in .45s var(--ease) both;
}
.toast.out { animation: toast-out .35s ease forwards; }

@keyframes toast-in  { from { opacity: 0; transform: translateY(-18px) scale(.85); } }
@keyframes toast-out { to   { opacity: 0; transform: translateY(-14px) scale(.95); } }

/* ── Bottom row: thumb stick and hints ────────────────────────────────── */

/* The hint gets its own row above the thumb stick. Sharing a row with it
   squeezed the text into a one-word-per-line column on a phone. */
.hud-bottom {
  grid-row: 3;
  grid-column: 1;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-content: end;
  gap: 12px;
}

.hint {
  max-width: min(92%, 460px);
  padding: 10px 22px;
  border-radius: var(--r-pill);
  background: rgba(27, 42, 56, .55);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  transition: opacity .5s ease;
}
.hint.gone { opacity: 0; }

/* The thumb stick. Only shown on touch screens — see input.js */
#stick {
  pointer-events: auto;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .28);
  border: 3px solid rgba(255, 255, 255, .6);
  backdrop-filter: blur(6px);
  position: relative;
  display: none;
  touch-action: none;
  flex: none;
}
#stick.on { display: block; }
/* Sits under the child's left thumb, not in the middle of the screen. */
#stick { justify-self: start; }

#stick .knob {
  position: absolute;
  top: 50%; left: 50%;
  width: 62px; height: 62px;
  margin: -31px 0 0 -31px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .95);
  box-shadow: var(--shadow-sm);
  transition: transform .08s linear;
}
#stick .knob::after {
  content: '';
  position: absolute; inset: 16px;
  border-radius: 50%;
  background: var(--mint);
  opacity: .8;
}

/* ── Level-up celebration ─────────────────────────────────────────────── */

#celebrate {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: none;
  place-content: center;
  justify-items: center;
  gap: 10px;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(255,255,255,.35), transparent 62%);
}
#celebrate.on { display: grid; }
.celebrate-mark { font-size: 92px; animation: pop-in .7s var(--ease) both; }
.celebrate-text {
  font-size: 40px; font-weight: 700; color: #fff;
  text-shadow: 0 4px 0 rgba(27,42,56,.35), 0 10px 30px rgba(27,42,56,.45);
  animation: pop-in .7s var(--ease) .1s both;
}
.celebrate-sub {
  font-size: 21px; font-weight: 600; color: #fff;
  text-shadow: 0 2px 0 rgba(27,42,56,.35);
  animation: pop-in .7s var(--ease) .2s both;
}
@keyframes pop-in { from { opacity: 0; transform: scale(.4) rotate(-8deg); } }

/* ── Small screens ────────────────────────────────────────────────────── */

@media (max-width: 560px) {
  /* Two rows of two, so the buttons never squash the counters off screen. */
  .hud-buttons { max-width: 124px; }
  .counter    { font-size: 18px; padding: 7px 14px 7px 10px; }
  .level-word { display: none; }
  .hint       { font-size: 14px; padding: 8px 16px; }
  #stick      { width: 118px; height: 118px; }
}

/* Short and wide — phone held sideways. Give the 3D world more room. */
@media (max-height: 460px) {
  .toast-rail { margin-top: 6px; }
  #hud:has(.tracker:not([hidden])) .toast-rail { margin-top: 92px; }
  .toast      { font-size: 17px; padding: 9px 18px; }
  #stick      { width: 108px; height: 108px; }
  .counter    { font-size: 17px; }
}