/* TESLON — Feed Frenzy arcade */

.game-body {
  background:
    radial-gradient(110% 80% at 50% 0%, rgba(232, 16, 42, .18), transparent 58%),
    linear-gradient(180deg, #0a0a0d, #08080a 60%);
  min-height: 100vh;
}

.game {
  width: min(100% - var(--pad) * 2, 1000px);
  margin: clamp(18px, 3vw, 36px) auto clamp(40px, 6vw, 70px);
}

.game__frame { position: relative; border-radius: 6px; background: #07070a; }
.game__frame canvas {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 2;
  border-radius: 2px; touch-action: none; background: #0b0b10;
}
.game__note { color: #6d7480; font-size: 13px; letter-spacing: .06em; text-align: center; margin-top: 14px; }

/* ---------- HUD ---------- */
.hud {
  position: absolute; left: 4%; right: 4%; top: 5%;
  display: flex; gap: 10px; align-items: center; pointer-events: none;
}
.hud__cell {
  display: flex; align-items: baseline; gap: 8px; padding: 7px 13px; border-radius: 3px;
  background: rgba(8, 8, 10, .62); box-shadow: inset 0 0 0 1px var(--line);
}
.hud__lbl { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.hud__val { font-family: var(--display); font-size: 20px; }
.hud__lives { margin-left: auto; gap: 6px; background: none; box-shadow: none; }
.hud__lives i {
  width: 15px; height: 15px; display: block; border-radius: 50%;
  background: var(--red); box-shadow: 0 0 12px rgba(232, 16, 42, .7);
}
.hud__lives i.is-gone { background: #2a2a31; box-shadow: none; }

/* ---------- overlay ---------- */
.overlay {
  position: absolute; inset: 0; display: none; place-items: center;
  background: radial-gradient(80% 70% at 50% 45%, rgba(10, 6, 8, .82), rgba(6, 6, 8, .95));
  border-radius: 2px; padding: 20px; text-align: center;
}
.overlay.is-on { display: grid; }
.overlay__box { max-width: 460px; }
.overlay h1 { font-size: clamp(30px, 6vw, 62px); text-transform: uppercase; margin-bottom: 12px; }
.overlay h1 span { color: var(--red); }
.overlay p { color: #c3c9d3; margin: 0 0 20px; font-size: 15.5px; }
.overlay .btn { margin: 4px; }
.overlay__stats {
  display: flex; gap: 10px; justify-content: center; margin: 0 0 20px; flex-wrap: wrap;
}
.overlay__stat {
  padding: 10px 16px; border-radius: 3px; background: rgba(16, 16, 20, .8);
  box-shadow: inset 0 0 0 1px var(--line);
}
.overlay__stat b { display: block; font-family: var(--display); font-size: 24px; }
.overlay__stat span { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }