/* Catch the Insects — layout, HUD and menu chrome.
   The stage keeps a fixed 8:5 ratio and is sized by script (a growing flex/grid
   item has two definite axes, so `aspect-ratio` alone cannot do it). Everything
   drawn on top of the canvas is sized in container units so the HUD keeps its
   proportions whatever shape the viewport is. */

:root {
  --ink: #1d2b23;
  --paper: #f7f4e9;
  --leaf: #3f7d4e;
  --leaf-dark: #2c5c39;
  --sun: #ffcc4d;
  --danger: #d9433f;
  --shadow: 0 0.6rem 1.6rem rgba(16, 38, 24, .28);
  color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  background: #16241c radial-gradient(120% 90% at 50% 0%, #2c4736 0%, #16241c 70%);
  color: var(--paper);
  font: 400 16px/1.5 "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
  overscroll-behavior: none;
}

#stageWrap {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: clamp(4px, 1.5vmin, 18px);
}

/* Width and height come from script; `container-type: size` needs both. */
#stage {
  position: relative;
  container-type: size;
  width: 100%;
  aspect-ratio: 8 / 5;
  border-radius: clamp(6px, 1.6cqw, 18px);
  overflow: hidden;
  box-shadow: var(--shadow);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#game {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: none;
}

#stage.keyboard #game { cursor: default; }

.overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ----------------------------------------------------- in-stage layers --- */

/* Score pops, the level banner and the sting flash are HTML rather than
   drawings, so they stay crisp at any stage size and cost the renderer
   nothing. Their positions come from projecting a world point each frame. */

.hurt {
  background: radial-gradient(ellipse at center,
    rgba(190, 40, 30, 0) 38%, rgba(190, 40, 30, .72) 100%);
  opacity: 0;
  transition: opacity .12s linear;
}

.floater {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 800;
  white-space: nowrap;
  transform-origin: 50% 50%;
  text-shadow: 0 .12em .28em rgba(14, 34, 20, .8);
  will-change: transform, opacity;
}

.banner {
  display: grid;
  place-content: center;
  gap: .25em;
  text-align: center;
  text-shadow: 0 .1em .35em rgba(14, 34, 20, .75);
}

.banner[hidden] { display: none; }

.banner strong {
  font-size: clamp(24px, 11cqh, 62px);
  font-weight: 800;
  color: #fff3c9;
  line-height: 1;
}

.banner span {
  font-size: clamp(11px, 4cqh, 23px);
  font-weight: 600;
  color: #fff;
}

/* ---------------------------------------------------------------- HUD --- */

.hud {
  display: flex;
  align-items: flex-start;
  gap: clamp(10px, 3.4cqw, 30px);
  padding: 2.4cqh 2.4cqw;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0.2cqh 0.5cqh rgba(10, 30, 18, .55);
  transition: opacity .25s ease;
}

.hud[data-idle="true"] { opacity: 0; }

.hud-cell { display: flex; flex-direction: column; line-height: 1.1; }

.hud-label {
  font-size: clamp(8px, 2.4cqh, 13px);
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .75;
}

.hud-value {
  font-size: clamp(15px, 5.4cqh, 30px);
  font-weight: 700;
}

.hud-time { margin-left: auto; text-align: right; }
.hud-time .hud-value { color: #fff3c9; }
.hud-time.low .hud-value { color: #ffb0a6; animation: pulse .7s ease-in-out infinite; }

.hud-combo .hud-value { color: #ffe6a1; transition: transform .12s ease, color .2s ease; }
.hud-combo.hot .hud-value { color: #ffd166; }
.hud-combo.bump .hud-value { transform: scale(1.22); }

@keyframes pulse { 50% { opacity: .45; } }

@media (prefers-reduced-motion: reduce) {
  .hud-time.low .hud-value { animation: none; }
  .hud-combo .hud-value { transition: none; }
}

.hud-buttons { display: flex; gap: 1.2cqw; margin-left: 1.5cqw; pointer-events: auto; }

.icon-btn {
  width: clamp(24px, 7cqh, 40px);
  height: clamp(24px, 7cqh, 40px);
  display: grid;
  place-items: center;
  font-size: clamp(10px, 3cqh, 16px);
  color: var(--paper);
  background: rgba(18, 40, 26, .42);
  border: 1px solid rgba(247, 244, 233, .35);
  border-radius: 50%;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}

.icon-btn:hover { background: rgba(18, 40, 26, .68); }
.icon-btn:active { transform: scale(.92); }
.icon-btn[aria-pressed="false"] { opacity: .45; }

.time-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(3px, 1.1cqh, 7px);
  background: rgba(11, 27, 18, .35);
}

.time-bar span {
  display: block;
  height: 100%;
  width: 100%;
  transform-origin: left center;
  background: linear-gradient(90deg, #8fd694, #ffd166);
}

.time-bar span.low { background: linear-gradient(90deg, #ff9c7a, var(--danger)); }

/* ------------------------------------------------------------- panels --- */

.panel {
  display: grid;
  place-items: center;
  padding: 3cqh 3cqw;
  background: rgba(12, 28, 19, .58);
  backdrop-filter: blur(3px);
  pointer-events: auto;
}

.panel[hidden] { display: none; }

.card {
  width: min(92cqw, 60ch);
  max-height: 94cqh;
  overflow: auto;
  padding: clamp(12px, 4.5cqh, 34px) clamp(14px, 4cqw, 38px);
  text-align: center;
  color: var(--ink);
  background: var(--paper);
  border-radius: clamp(8px, 2cqw, 20px);
  box-shadow: var(--shadow);
}

.card h1, .card h2 {
  margin: 0 0 .35em;
  font-size: clamp(19px, 7.5cqh, 40px);
  line-height: 1.1;
  color: var(--leaf-dark);
}

.tagline { margin: 0 0 1em; font-size: clamp(11px, 3.4cqh, 17px); opacity: .8; }

.legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15ch, 1fr));
  gap: .3em 1.2em;
  margin: 0 0 1em;
  padding: 0;
  list-style: none;
  font-size: clamp(10px, 3cqh, 15px);
  text-align: left;
}

.legend li { display: flex; align-items: center; gap: .5em; }
.legend i { margin-left: auto; font-style: normal; font-weight: 700; color: var(--leaf); }
.legend i.bad { color: var(--danger); }
.legend em { flex-basis: 100%; font-size: .82em; opacity: .6; }

.sw { width: 1em; height: 1em; border-radius: 50%; flex: none; }
.sw-butterfly { background: linear-gradient(135deg, #ff9ecd, #ff5fa2); }
.sw-beetle    { background: linear-gradient(135deg, #6f5a3d, #37301f); }
.sw-bee       { background: linear-gradient(135deg, #ffd75e, #2a2318); }
.sw-firefly   { background: linear-gradient(135deg, #f2ff9a, #8ec63f); }
.sw-dragonfly { background: linear-gradient(135deg, #74e0ff, #2f8fd6); }
.sw-wasp      { background: linear-gradient(135deg, #ff7a5c, #3a1410); }

.controls { margin: 0 0 1.2em; font-size: clamp(10px, 2.9cqh, 14px); opacity: .75; }
.kbd-line { display: block; }

/* A letterboxed stage on a portrait phone is short, not narrow, so the card
   sheds its optional lines rather than scrolling. */
@container (max-height: 290px) {
  .card { padding: 10px 14px; }
  .tagline, .legend em, .kbd-line { display: none; }
  .legend { gap: .1em .9em; margin-bottom: .7em; }
  .controls { margin-bottom: .8em; }
  .best { margin-top: .5em; }
  .stats { margin-bottom: .7em; }
}

button {
  font: inherit;
  border: 0;
  background: none;
}

.primary, .ghost {
  display: inline-block;
  margin: .2em .3em;
  padding: .55em 1.5em;
  font-size: clamp(12px, 3.8cqh, 19px);
  font-weight: 700;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.primary { color: var(--paper); background: var(--leaf); box-shadow: 0 .25em 0 var(--leaf-dark); }
.primary:hover { background: #488c58; }
.primary:active { transform: translateY(.22em); box-shadow: 0 .03em 0 var(--leaf-dark); }

.ghost { color: var(--leaf-dark); border: 2px solid rgba(63, 125, 78, .45); }
.ghost:hover { background: rgba(63, 125, 78, .1); }

:focus-visible { outline: 3px solid #ffd166; outline-offset: 2px; }

.final {
  margin: .1em 0 .5em;
  font-size: clamp(30px, 12cqh, 66px);
  font-weight: 800;
  line-height: 1;
  color: var(--leaf);
}

.final small {
  display: block;
  font-size: clamp(9px, 2.6cqh, 13px);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: .5;
}

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .4em;
  margin: 0 0 1em;
}

.stats div { display: flex; flex-direction: column; gap: .1em; }
.stats dt { font-size: clamp(8px, 2.3cqh, 12px); text-transform: uppercase; letter-spacing: .08em; opacity: .55; }
.stats dd { margin: 0; font-size: clamp(12px, 4cqh, 21px); font-weight: 700; color: var(--leaf-dark); }

.best { margin: .8em 0 0; font-size: clamp(10px, 3cqh, 14px); opacity: .7; }
.best b { color: var(--leaf); }

/* ------------------------------------------------------------- credit --- */

#rotate {
  display: none;
  flex: none;
  margin: 0;
  padding: .2em 1em;
  text-align: center;
  font-size: 13px;
  color: #ffd166;
}

@media (orientation: portrait) and (pointer: coarse) {
  #rotate { display: block; }
}

#credit {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: .4em 1.2em;
  justify-content: center;
  padding: .5em 1em max(.5em, env(safe-area-inset-bottom));
  font-size: 12px;
  opacity: .55;
}

#credit a { color: inherit; }

@media (max-height: 460px) {
  #rotate, #credit { display: none; }
}