* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 0%, #3d8eb8 0%, #14283a 72%);
  color: #1c2a24;
  font-family: "Trebuchet MS", "Segoe UI", "Gill Sans", sans-serif;
  user-select: none;
  -webkit-user-select: none;
}

button, canvas { font-family: inherit; }

#app {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

#stage {
  position: relative;
  width: min(1280px, calc(100vw - 24px), calc((100vh - 24px) * 16 / 9));
  aspect-ratio: 16 / 9;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 22px 50px rgba(0, 0, 0, 0.35);
  background: #8fd3ff;
  touch-action: none;
}

canvas {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

#stage.playing { cursor: pointer; }

#stage.at-home { cursor: grab; }

#stage.at-home.slime-dragging { cursor: grabbing; }

#menu.overlay {
  pointer-events: none;
}

#menu.overlay .panel {
  pointer-events: auto;
}

.overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 4vh 18px 18px;
  overflow: auto;
}

.hidden { display: none !important; }

.panel {
  width: min(920px, 100%);
  background: rgba(255, 252, 245, 0.94);
  border-radius: 28px;
  padding: 28px 28px 22px;
  box-shadow: 0 16px 40px rgba(30, 20, 50, 0.22);
  text-align: center;
}

.menu-panel { width: min(460px, 100%); margin-top: 4vh; }

h1 {
  margin: 0;
  font-size: 76px;
  line-height: 0.9;
  color: #3cba4a;
  letter-spacing: -1px;
  text-shadow: 0 4px 0 #1d7a32;
}

.subtitle {
  margin: 12px 0 6px;
  font-size: 18px;
  font-weight: 700;
  color: #355244;
}

.progress {
  margin: 0 0 8px;
  color: #5d7468;
  font-weight: 700;
}

.coin-balance {
  margin: 0 0 16px;
  color: #8a6010;
  font-weight: 800;
  font-size: 17px;
}

.select-coins { text-align: left; margin-bottom: 12px; }

.shop-panel { text-align: left; max-width: 520px; }

.shop-panel h2 { text-align: center; }

.shop-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.shop-item {
  background: #fff;
  border-radius: 16px;
  padding: 14px 16px;
  border: 3px solid #e8d090;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.shop-item h3 {
  margin: 0;
  font-size: 17px;
  color: #3a3020;
}

.shop-item p {
  margin: 0;
  font-size: 14px;
  color: #5d7468;
  font-weight: 600;
}

.shop-item .shop-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.shop-item .shop-cost {
  font-weight: 800;
  color: #a87010;
  white-space: nowrap;
}

.shop-item button {
  font-size: 15px;
  min-height: 42px;
  padding: 8px 14px;
}

.world-extra {
  background: #fff8e8;
  border-color: #e8c060;
  flex: 1 1 100%;
}

.world-extra .level-btn { box-shadow: 0 3px 0 #e8d090; }

.world-extra .level-btn .lvl-num { background: #e8a820; }

.actions, .win-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

button {
  border: 0;
  border-radius: 14px;
  background: #3cba4a;
  color: white;
  font-weight: 800;
  font-size: 18px;
  padding: 12px 18px;
  min-height: 48px;
  cursor: pointer;
  box-shadow: 0 4px 0 #1d7a32;
}

button:hover { filter: brightness(1.05); }
button:active { transform: translateY(2px); box-shadow: 0 2px 0 #1d7a32; }
button:disabled {
  background: #c5d0c8;
  color: #6d7b74;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

button.secondary {
  background: #ff8a5b;
  box-shadow: 0 4px 0 #c85a32;
}

button.ghost {
  background: #2c4a62;
  box-shadow: 0 4px 0 #183246;
}

.skip-remaining {
  display: inline-block;
  min-width: 1.1em;
  margin-left: 5px;
  padding: 0 5px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.18);
  font-weight: 800;
}

button.danger {
  background: #e85a5a;
  box-shadow: 0 4px 0 #b03030;
  font-size: 15px;
}

button.danger:active { box-shadow: 0 2px 0 #b03030; }

.credit {
  margin: 16px 0 0;
  color: #7d9186;
  font-size: 14px;
  font-weight: 700;
}

h2 {
  margin: 0 0 12px;
  font-size: 22px;
}

.worlds {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  text-align: left;
}

.world {
  flex: 1 1 240px;
  min-width: 220px;
  background: #f3fff0;
  border-radius: 18px;
  padding: 14px;
  border: 3px solid #8ed67a;
}

.world-2 {
  background: #fff0f8;
  border-color: #e58ad4;
}

.world-3 {
  background: #fff8ec;
  border-color: #f0b45a;
}

.world-4 {
  background: #fff0eb;
  border-color: #e87050;
}

.world-5 {
  background: #e8f8ff;
  border-color: #48b8e8;
}

.world-5 .level-btn { box-shadow: 0 3px 0 #a8d8f0; }

.world-5 .level-btn .lvl-num { background: #28a8d8; }

.world-6 {
  background: #e8fff0;
  border-color: #48a858;
}

.world-6 .level-btn { box-shadow: 0 3px 0 #a8d8b0; }

.world-6 .level-btn .lvl-num { background: #38a848; }

.world-7 {
  background: #eef2f8;
  border-color: #8898b8;
}

.world-7 .level-btn { box-shadow: 0 3px 0 #b8c0d0; }

.world-7 .level-btn .lvl-num { background: #5868a0; }

.world-8 {
  background: #e8e8ff;
  border-color: #6868a8;
}

.world-8 .level-btn { box-shadow: 0 3px 0 #b8b8e8; }

.world-8 .level-btn .lvl-num { background: #4848a0; }

.world h2 { font-size: 18px; }

.level-list { display: flex; flex-direction: column; gap: 8px; }

.level-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  background: white;
  color: #234033;
  box-shadow: 0 3px 0 #c9ddd0;
}

.world-2 .level-btn { box-shadow: 0 3px 0 #efc3e2; }

.world-3 .level-btn { box-shadow: 0 3px 0 #f5d4a8; }

.world-3 .level-btn .lvl-num { background: #f0a030; }

.world-4 .level-btn { box-shadow: 0 3px 0 #f0b0a0; }

.world-4 .level-btn .lvl-num { background: #e04a28; }

.level-btn .lvl-num {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #3cba4a;
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.world-2 .level-btn .lvl-num { background: #c45cff; }

.level-btn .lvl-name { flex: 1; }

.level-btn .lvl-mark {
  font-size: 13px;
  color: #d39a12;
}

.level-btn:disabled .lvl-num { background: #aeb8b2; }
.level-btn:disabled .lvl-mark { color: #7b8882; }

#btn-back { margin-top: 16px; }

#hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px 16px 18px;
}

#hud.hidden { display: none; }

.hud-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  pointer-events: none;
}

.hud-top button {
  pointer-events: auto;
  min-height: 42px;
  padding: 8px 14px;
  font-size: 16px;
}

.hud-actions {
  display: flex;
  gap: 8px;
  pointer-events: auto;
}

.level-title {
  color: white;
  font-weight: 800;
  font-size: 20px;
  text-align: center;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
  background: rgba(12, 24, 36, 0.4);
  border-radius: 999px;
  padding: 8px 14px;
}

.charge-wrap {
  align-self: center;
  width: min(420px, 70%);
}

.charge-label {
  color: white;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-align: center;
  margin-bottom: 4px;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}

.charge {
  position: relative;
  height: 22px;
  border-radius: 999px;
  background: rgba(12, 24, 36, 0.45);
  border: 3px solid white;
  overflow: hidden;
}

.charge-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #7cff6b, #ffe14a 72%, #ff6d6d);
}

.charge.full .charge-fill {
  filter: brightness(1.15);
}

.charge::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    90deg,
    transparent 24.5%,
    rgba(255, 255, 255, 0.75) 24.5%,
    rgba(255, 255, 255, 0.75) 25.5%,
    transparent 25.5%,
    transparent 49.5%,
    rgba(255, 255, 255, 0.75) 49.5%,
    rgba(255, 255, 255, 0.75) 50.5%,
    transparent 50.5%,
    transparent 74.5%,
    rgba(255, 255, 255, 0.75) 74.5%,
    rgba(255, 255, 255, 0.75) 75.5%,
    transparent 75.5%
  );
  pointer-events: none;
}

#win { align-items: center; background: rgba(120, 190, 230, 0.22); }

.win-panel {
  width: min(420px, 100%);
  background: rgba(210, 238, 255, 0.98);
  border: 3px solid #9fd4f5;
  box-shadow: 0 16px 40px rgba(50, 120, 170, 0.28);
}

.win-panel h2 {
  margin: 0;
  font-size: 42px;
  color: #1e8fd4;
  text-shadow: 0 2px 0 #7ec8f0;
}

#win-msg { font-weight: 700; color: #2a6080; }

@media (max-width: 800px) {
  h1 { font-size: 56px; }
  .worlds { flex-direction: column; }
  .panel { padding: 18px; }
  .level-title { font-size: 15px; }
}