:root {
  --purple: #6a1fb0;
  --purple-deep: #3d0f6e;
  --purple-soft: #8e5bc4;
  --yellow: #ffd23f;
  --yellow-light: #fff0a0;
  --yellow-deep: #e39a00;
  --cream: #fffaf0;
  --ink: #2e0c52;
  --edge: #140826;
  --display: 'Chewy', 'Baloo 2', system-ui, sans-serif;
  --body: 'Baloo 2', 'Trebuchet MS', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: radial-gradient(ellipse at center, #2a1450 0%, var(--edge) 75%);
  color: var(--ink);
  font-family: var(--body);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

button { touch-action: manipulation; }

[hidden] { display: none !important; }

/* The stage keeps a 16:10 playfield and is sized in script to fit the window. */
#stage {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1280px;
  height: 800px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
  --u: 1px; /* one logical HUD pixel; rescaled with the stage */
}

#field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

#field.aiming { cursor: none; }

/* Chunky outlined lettering, like the original's HUD numbers. */
.outlined {
  font-family: var(--display);
  color: #fff;
  -webkit-text-stroke: calc(5 * var(--u)) var(--purple-deep);
  paint-order: stroke fill;
  text-shadow: 0 calc(3 * var(--u)) 0 rgba(40, 10, 70, 0.35);
  letter-spacing: calc(0.5 * var(--u));
}

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

#hud {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(16 * var(--u));
  padding: calc(14 * var(--u)) calc(18 * var(--u));
  pointer-events: none;
}

#hud button, #hud .doses { pointer-events: auto; }

.hud-left, .hud-right {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--u));
  flex: 1 1 0;
}

.hud-right { justify-content: flex-end; }

.hud-title { font-size: calc(32 * var(--u)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(340 * var(--u)); }
.counter, .hud-sub { white-space: nowrap; }
.hud-center { flex: 0 0 auto; }
.doses.count { font: 400 calc(30 * var(--u)) var(--display); color: var(--yellow); -webkit-text-stroke: calc(5 * var(--u)) var(--purple-deep); paint-order: stroke fill; }

.hud-center { display: flex; flex-direction: column; align-items: center; line-height: 1; }

.counter {
  font-size: calc(64 * var(--u));
  color: #8fd8ff;
  -webkit-text-stroke-width: calc(7 * var(--u));
  transition: color 0.3s ease, transform 0.15s ease;
}

.counter.met { color: var(--yellow); }
.counter.bump { transform: scale(1.12); }

.hud-sub { font-size: calc(20 * var(--u)); -webkit-text-stroke-width: calc(4 * var(--u)); margin-top: calc(2 * var(--u)); }

.doses { display: flex; gap: calc(5 * var(--u)); }

.dose {
  position: relative;
  width: calc(20 * var(--u));
  height: calc(30 * var(--u));
  border-radius: calc(8 * var(--u)) calc(8 * var(--u)) calc(6 * var(--u)) calc(6 * var(--u));
  background: linear-gradient(90deg, #ffe680, var(--yellow) 50%, var(--yellow-deep));
  border: calc(3 * var(--u)) solid var(--purple-deep);
  box-shadow: 0 calc(2 * var(--u)) 0 rgba(40, 10, 70, 0.4);
}

.dose::before {
  content: '';
  position: absolute;
  left: 50%;
  top: calc(-11 * var(--u));
  width: calc(14 * var(--u));
  height: calc(9 * var(--u));
  transform: translateX(-50%);
  border-radius: calc(4 * var(--u));
  background: #fff;
  border: calc(3 * var(--u)) solid var(--purple-deep);
}

.dose.used { opacity: 0.3; filter: grayscale(1); }

.score { font-size: calc(30 * var(--u)); min-width: calc(50 * var(--u)); text-align: right; font-variant-numeric: tabular-nums; }

.round-btn {
  width: calc(50 * var(--u));
  height: calc(50 * var(--u));
  border: calc(4 * var(--u)) solid var(--purple-deep);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--yellow-light), var(--yellow) 55%, var(--yellow-deep));
  color: var(--purple-deep);
  font: 700 calc(22 * var(--u)) / 1 var(--body);
  cursor: pointer;
  box-shadow: 0 calc(4 * var(--u)) 0 var(--purple-deep);
  display: grid;
  place-items: center;
  padding: 0;
  transition: transform 0.08s ease;
}

.round-btn:hover { transform: translateY(-2px) scale(1.05); }
.round-btn:active { transform: translateY(2px); box-shadow: 0 calc(1 * var(--u)) 0 var(--purple-deep); }
.round-btn.off { filter: grayscale(1); opacity: 0.6; }

/* ---------- Banner ---------- */

.banner {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
  white-space: nowrap;
}

.banner h3 { margin: 0; font-size: calc(96 * var(--u)); line-height: 1; font-weight: 400; color: var(--yellow); -webkit-text-stroke-width: calc(9 * var(--u)); }
.banner p { margin: calc(10 * var(--u)) auto 0; max-width: calc(900 * var(--u)); white-space: normal; font-size: calc(36 * var(--u)); -webkit-text-stroke-width: calc(6 * var(--u)); }
.banner.fade { opacity: 0; transform: translate(-50%, -60%); }

/* ---------- Screens ---------- */

.screen {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(30, 10, 60, 0.35);
}

.screen.clear { background: linear-gradient(rgba(30, 10, 60, 0.05), rgba(30, 10, 60, 0.3)); }

.card {
  background: linear-gradient(var(--cream), #fff3d6);
  border: calc(6 * var(--u)) solid var(--purple-deep);
  border-radius: calc(40 * var(--u));
  box-shadow: 0 calc(10 * var(--u)) 0 var(--purple-deep), 0 calc(24 * var(--u)) calc(60 * var(--u)) rgba(20, 5, 40, 0.45);
  padding: calc(30 * var(--u)) calc(44 * var(--u));
  text-align: center;
}

/* Title */

.title-wrap { display: flex; flex-direction: column; align-items: center; width: calc(780 * var(--u)); }

.logo {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: calc(190 * var(--u));
  line-height: 0.95;
  color: var(--purple);
  -webkit-text-stroke: calc(16 * var(--u)) var(--yellow);
  paint-order: stroke fill;
  filter: drop-shadow(0 0 0 var(--purple-deep)) drop-shadow(calc(0 * var(--u)) calc(8 * var(--u)) 0 var(--purple-deep)) drop-shadow(0 calc(14 * var(--u)) calc(18 * var(--u)) rgba(30, 5, 60, 0.4));
  transform: rotate(-3deg);
  animation: bob 3.2s ease-in-out infinite;
}

@keyframes bob {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50% { transform: rotate(-1deg) translateY(calc(-8 * var(--u))); }
}

.tagline { margin: calc(8 * var(--u)) 0 calc(22 * var(--u)); font-size: calc(30 * var(--u)); -webkit-text-stroke-width: calc(5 * var(--u)); }

.menu { display: grid; gap: calc(14 * var(--u)); width: calc(560 * var(--u)); }

.pill-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: calc(14 * var(--u));
  width: 100%;
  padding: calc(10 * var(--u)) calc(24 * var(--u)) calc(12 * var(--u));
  border: calc(5 * var(--u)) solid var(--purple-deep);
  border-radius: 999px;
  background: linear-gradient(var(--yellow-light), var(--yellow) 45%, #ffbf1f);
  color: var(--purple);
  font: 400 calc(42 * var(--u)) / 1.1 var(--display);
  letter-spacing: calc(0.5 * var(--u));
  cursor: pointer;
  box-shadow: inset 0 calc(-5 * var(--u)) 0 rgba(200, 110, 0, 0.35), 0 calc(6 * var(--u)) 0 var(--purple-deep);
  text-align: left;
  transition: transform 0.08s ease, filter 0.15s ease;
}

.pill-btn small { font: 600 calc(19 * var(--u)) var(--body); color: var(--purple-soft); margin-left: auto; letter-spacing: 0; }
.pill-btn:hover, .pill-btn:focus-visible { transform: translateY(-3px) scale(1.02); filter: brightness(1.06); outline: none; }
.pill-btn:active { transform: translateY(3px); box-shadow: inset 0 calc(-3 * var(--u)) 0 rgba(200, 110, 0, 0.35), 0 calc(2 * var(--u)) 0 var(--purple-deep); }
.pill-btn.primary { background: linear-gradient(#c58cff, var(--purple) 60%, #561894); color: #fff; box-shadow: inset 0 calc(-5 * var(--u)) 0 rgba(30, 0, 60, 0.35), 0 calc(6 * var(--u)) 0 var(--purple-deep); }
.pill-btn.small { width: auto; font-size: calc(30 * var(--u)); padding: calc(8 * var(--u)) calc(22 * var(--u)) calc(10 * var(--u)); }

.key {
  display: inline-grid;
  place-items: center;
  min-width: calc(36 * var(--u));
  height: calc(36 * var(--u));
  padding: 0 calc(6 * var(--u));
  border: calc(3 * var(--u)) solid currentColor;
  border-radius: calc(12 * var(--u));
  font: 700 calc(17 * var(--u)) / 1 var(--body);
  opacity: 0.55;
}

.howto {
  margin-top: calc(26 * var(--u));
  padding: calc(12 * var(--u)) calc(26 * var(--u));
  border-radius: calc(24 * var(--u));
  background: rgba(255, 250, 240, 0.86);
  border: calc(3 * var(--u)) solid rgba(61, 15, 110, 0.35);
  text-align: center;
  color: var(--ink);
}

.howto p { margin: 0; font-size: calc(19 * var(--u)); line-height: 1.35; font-weight: 600; }
.howto .keys-hint { margin-top: calc(6 * var(--u)); font-size: calc(15 * var(--u)); color: var(--purple-soft); }

kbd {
  display: inline-block;
  padding: 0 calc(6 * var(--u));
  border: calc(2 * var(--u)) solid currentColor;
  border-radius: calc(6 * var(--u));
  font: 700 0.9em var(--body);
  line-height: 1.3;
}

/* Level select */

.levels-card { width: calc(1100 * var(--u)); padding: calc(22 * var(--u)) calc(32 * var(--u)) calc(28 * var(--u)); }

.levels-head { display: flex; align-items: center; gap: calc(16 * var(--u)); margin-bottom: calc(14 * var(--u)); }
.levels-head h2 { margin: 0; flex: 1; text-align: left; font: 400 calc(56 * var(--u)) / 1 var(--display); color: var(--purple); }
.star-total { font: 400 calc(34 * var(--u)) var(--display); color: var(--yellow-deep); }

.level-grid { display: grid; gap: calc(12 * var(--u)); }

.world-row {
  display: grid;
  grid-template-columns: calc(150 * var(--u)) repeat(9, 1fr);
  gap: calc(10 * var(--u));
  align-items: center;
}

.world-row.challenge { grid-template-columns: repeat(5, 1fr); }

.world-name {
  position: relative;
  height: calc(86 * var(--u));
  border-radius: calc(18 * var(--u));
  background-size: cover;
  background-position: center;
  border: calc(4 * var(--u)) solid var(--purple-deep);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: calc(4 * var(--u));
  overflow: hidden;
}

.world-name span { font-size: calc(24 * var(--u)); -webkit-text-stroke-width: calc(5 * var(--u)); }

.lvl {
  position: relative;
  aspect-ratio: 1;
  border: calc(4 * var(--u)) solid var(--purple-deep);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--yellow-light), var(--yellow) 55%, #f5b000);
  color: var(--purple);
  font: 400 calc(34 * var(--u)) / 1 var(--display);
  cursor: pointer;
  box-shadow: 0 calc(5 * var(--u)) 0 var(--purple-deep);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: transform 0.08s ease;
}

.world-row.challenge .lvl { aspect-ratio: 2; border-radius: 999px; }

.lvl:hover:not(:disabled), .lvl:focus-visible { transform: translateY(-3px) scale(1.06); outline: none; }
.lvl:disabled { cursor: not-allowed; background: radial-gradient(circle at 35% 30%, #f3eefa, #d9d0e6); color: #a597b8; box-shadow: 0 calc(3 * var(--u)) 0 rgba(61, 15, 110, 0.4); border-color: rgba(61, 15, 110, 0.45); }
.lvl .lvl-stars { font-size: calc(15 * var(--u)); letter-spacing: calc(1 * var(--u)); color: var(--purple); margin-top: calc(1 * var(--u)); }
.lvl .lvl-stars .no { color: rgba(106, 31, 176, 0.25); }
.lvl .lock { font-size: calc(16 * var(--u)); opacity: 0.6; }
.lvl.next { animation: pulse 1.4s ease-in-out infinite; }

@keyframes pulse {
  0%, 100% { box-shadow: 0 calc(5 * var(--u)) 0 var(--purple-deep), 0 0 0 0 rgba(255, 210, 63, 0.8); }
  50% { box-shadow: 0 calc(5 * var(--u)) 0 var(--purple-deep), 0 0 0 calc(8 * var(--u)) rgba(255, 210, 63, 0); }
}

/* Result */

.result-card { min-width: calc(560 * var(--u)); }
.result-card h2 { margin: 0; font: 400 calc(64 * var(--u)) / 1.05 var(--display); color: var(--purple); }

.stars { margin: calc(10 * var(--u)) 0 calc(4 * var(--u)); font-size: calc(76 * var(--u)); line-height: 1; letter-spacing: calc(8 * var(--u)); }
.stars .on { color: var(--yellow); -webkit-text-stroke: calc(4 * var(--u)) var(--purple-deep); paint-order: stroke fill; display: inline-block; animation: pop-in 0.45s cubic-bezier(.2, 1.6, .5, 1) both; }
.stars .off { color: #ece3d2; -webkit-text-stroke: calc(4 * var(--u)) #c8b9d8; paint-order: stroke fill; }
.stars .on:nth-child(2) { animation-delay: 0.15s; }
.stars .on:nth-child(3) { animation-delay: 0.3s; }

.result-line { margin: calc(8 * var(--u)) 0 0; font: 400 calc(34 * var(--u)) var(--display); color: var(--ink); }
.result-sub { margin: calc(4 * var(--u)) 0 0; font-size: calc(20 * var(--u)); font-weight: 600; color: var(--purple-soft); }
.result-actions { display: flex; gap: calc(12 * var(--u)); justify-content: center; margin-top: calc(24 * var(--u)); }

@keyframes pop-in {
  from { transform: scale(0.2) rotate(-30deg); opacity: 0; }
  to { transform: scale(1) rotate(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .stars .on, .logo, .lvl.next { animation: none; }
}

/* ---------- Touch screens and small stages ---------- */

body:not(.touch) .only-touch, body.touch .only-mouse { display: none !important; }
body.touch .key { display: none; }
body.touch .round-btn:hover, body.touch .pill-btn:hover, body.touch .lvl:hover:not(:disabled) { transform: none; filter: none; }

/* On a phone the stage is a few hundred pixels tall, so the HUD and every
   button get a floor instead of shrinking with the field. */
body.compact #hud { padding: max(calc(14 * var(--u)), 6px) max(calc(18 * var(--u)), 8px); gap: 8px; }
body.compact .hud-left, body.compact .hud-right { gap: max(calc(12 * var(--u)), 6px); }
body.compact .round-btn { width: max(calc(50 * var(--u)), 40px); height: max(calc(50 * var(--u)), 40px); font-size: max(calc(22 * var(--u)), 18px); border-width: max(calc(4 * var(--u)), 2.5px); box-shadow: 0 2px 0 var(--purple-deep); }
body.compact .hud-title { font-size: max(calc(32 * var(--u)), 16px); }
body.compact .counter { font-size: max(calc(64 * var(--u)), 32px); -webkit-text-stroke-width: max(calc(7 * var(--u)), 4px); }
body.compact .hud-sub { font-size: max(calc(20 * var(--u)), 12px); -webkit-text-stroke-width: max(calc(4 * var(--u)), 3px); }
body.compact .score { font-size: max(calc(30 * var(--u)), 16px); }
body.compact .doses.count { font-size: max(calc(30 * var(--u)), 16px); }
body.compact .dose { width: max(calc(20 * var(--u)), 11px); height: max(calc(30 * var(--u)), 16px); border-width: 2px; }
body.compact .dose::before { width: max(calc(14 * var(--u)), 8px); height: max(calc(9 * var(--u)), 5px); top: max(calc(-11 * var(--u)), -7px); border-width: 2px; }
body.compact .outlined { -webkit-text-stroke-width: max(calc(5 * var(--u)), 3px); }
body.compact .banner p { font-size: max(calc(36 * var(--u)), 16px); max-width: 92%; }

body.compact .logo { font-size: calc(160 * var(--u)); }
body.compact .tagline { margin-bottom: calc(14 * var(--u)); font-size: max(calc(30 * var(--u)), 14px); }
body.compact .menu { gap: max(calc(14 * var(--u)), 8px); width: max(calc(560 * var(--u)), 300px); }
body.compact .pill-btn { min-height: 44px; font-size: max(calc(42 * var(--u)), 22px); padding-top: 4px; padding-bottom: 6px; }
body.compact .pill-btn small { font-size: max(calc(19 * var(--u)), 12px); }
body.compact .pill-btn.small { min-height: 42px; font-size: max(calc(30 * var(--u)), 19px); padding: 4px 18px 6px; }
body.compact .title-wrap { width: min(calc(780 * var(--u)), 94%); }
body.compact .howto { margin-top: max(calc(26 * var(--u)), 10px); padding: 6px 14px; }
body.compact .howto p { font-size: max(calc(19 * var(--u)), 12px); line-height: 1.3; }

body.compact .levels-card { width: 96%; max-height: 96%; overflow-y: auto; padding: 8px 12px 12px; }
body.compact .levels-head { margin-bottom: 6px; }
body.compact .levels-head h2 { font-size: max(calc(56 * var(--u)), 26px); }
body.compact .star-total { font-size: max(calc(34 * var(--u)), 18px); }
body.compact .level-grid { gap: 6px; }
body.compact .world-row { gap: 5px; grid-template-columns: max(calc(150 * var(--u)), 64px) repeat(9, 1fr); }
body.compact .world-row.challenge { grid-template-columns: repeat(5, 1fr); }
body.compact .world-name { height: max(calc(86 * var(--u)), 40px); border-width: 2.5px; border-radius: 10px; }
body.compact .world-name span { font-size: max(calc(24 * var(--u)), 12px); -webkit-text-stroke-width: 3px; }
body.compact .lvl { font-size: max(calc(34 * var(--u)), 16px); border-width: 2.5px; box-shadow: 0 2px 0 var(--purple-deep); }
body.compact .lvl .lvl-stars { font-size: max(calc(15 * var(--u)), 8px); }

body.compact .card { border-width: max(calc(6 * var(--u)), 3px); padding: max(calc(30 * var(--u)), 10px) max(calc(44 * var(--u)), 16px); }
body.compact .result-card { min-width: min(calc(560 * var(--u)), 90%); }
body.compact .result-card h2 { font-size: max(calc(64 * var(--u)), 28px); }
body.compact .stars { font-size: max(calc(76 * var(--u)), 34px); }
body.compact .result-line { font-size: max(calc(34 * var(--u)), 17px); }
body.compact .result-sub { font-size: max(calc(20 * var(--u)), 13px); }
body.compact .result-actions { margin-top: max(calc(24 * var(--u)), 12px); gap: 8px; }