:root {
  --ink: #f5f0ff;
  --muted: #b9a8e8;
  --cyan: #5ef6ff;
  --pink: #ff5fd2;
  --violet: #8b5bff;
  --deep: #0a0418;
  --panel: rgba(18, 9, 42, .88);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--deep);
  color: var(--ink);
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

body { position: fixed; inset: 0; }

#game {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: crosshair;
  outline: none;
}

#hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  padding: calc(12px + var(--safe-top)) calc(14px + var(--safe-right)) calc(12px + var(--safe-bottom)) calc(14px + var(--safe-left));
}

.hud-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.power-card {
  width: min(310px, 54vw);
  padding: 9px 12px 11px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(30, 14, 64, .9), rgba(12, 6, 28, .82));
  border: 1px solid rgba(94, 246, 255, .35);
  box-shadow: 0 0 22px rgba(94, 246, 255, .18), inset 0 0 18px rgba(139, 91, 255, .18);
  backdrop-filter: blur(6px);
}

.world-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 5px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
}

#world-name { overflow: hidden; text-overflow: ellipsis; }

.world-row i {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 10px currentColor;
}

.power-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--cyan);
  text-shadow: 0 0 10px rgba(94, 246, 255, .8);
}

.power-label b { font-size: 16px; color: #fff; text-shadow: none; }

.power-track {
  margin-top: 6px;
  height: 12px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .1);
  overflow: hidden;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, .6);
}

#power-fill {
  height: 100%;
  width: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #34b9ff, var(--cyan) 55%, #b7fffd);
  box-shadow: 0 0 14px rgba(94, 246, 255, .9);
  transform-origin: left center;
  transition: transform .12s linear, background .25s;
}

.power-card.low #power-fill {
  background: linear-gradient(90deg, #ff9d3d, #ff5fd2);
  box-shadow: 0 0 14px rgba(255, 95, 210, .9);
}

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

.hud-btn {
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  padding: 10px 13px;
  border-radius: 12px;
  border: 1px solid rgba(139, 91, 255, .6);
  background: rgba(20, 10, 44, .78);
  backdrop-filter: blur(6px);
  cursor: pointer;
}

.hud-btn:active { transform: translateY(1px); }

.hint {
  position: absolute;
  left: 50%;
  bottom: calc(18px + var(--safe-bottom));
  transform: translateX(-50%);
  margin: 0;
  max-width: min(540px, 88vw);
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  text-shadow: 0 2px 6px #000;
  transition: opacity .4s;
  pointer-events: none;
}

.hint.faded { opacity: 0; }

#toast {
  position: absolute;
  left: 50%;
  top: calc(82px + var(--safe-top));
  transform: translate(-50%, -8px);
  padding: 8px 16px;
  border-radius: 99px;
  background: rgba(12, 5, 28, .84);
  border: 1px solid rgba(94, 246, 255, .4);
  color: var(--cyan);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .04em;
  opacity: 0;
  transition: opacity .2s, transform .2s;
  pointer-events: none;
  white-space: nowrap;
}

#toast.show { opacity: 1; transform: translate(-50%, 0); }

#bump-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 60%, transparent 35%, rgba(255, 95, 210, .55) 100%);
  opacity: 0;
  transition: opacity .18s;
}

#bump-flash.show { opacity: 1; transition: none; }

#warp-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, #ffffff, rgba(94, 246, 255, .8) 30%, rgba(139, 91, 255, .15) 70%, transparent 100%);
  opacity: 0;
  transition: opacity .5s ease-out;
}

#warp-flash.show { opacity: 1; transition: opacity .12s; }

.hop-prompt {
  position: absolute;
  left: 50%;
  top: calc(128px + var(--safe-top));
  transform: translateX(-50%);
  padding: 10px 20px;
  border-radius: 999px;
  background: rgba(14, 6, 32, .88);
  border: 1px solid rgba(255, 95, 210, .7);
  color: #ffe9ff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .06em;
  white-space: nowrap;
  box-shadow: 0 0 28px rgba(255, 95, 210, .45);
  animation: promptPulse 1.1s ease-in-out infinite;
}

.hop-prompt[hidden] { display: none; }

@keyframes promptPulse {
  0%, 100% { transform: translateX(-50%) scale(1); box-shadow: 0 0 22px rgba(255, 95, 210, .35); }
  50% { transform: translateX(-50%) scale(1.05); box-shadow: 0 0 34px rgba(255, 95, 210, .65); }
}

#touch-controls { position: absolute; inset: 0; pointer-events: none; }

#stick-zone {
  position: absolute;
  left: calc(22px + var(--safe-left));
  bottom: calc(26px + var(--safe-bottom));
  width: 148px;
  height: 148px;
  pointer-events: auto;
  touch-action: none;
}

#stick-base {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(94, 246, 255, .4);
  background: radial-gradient(circle, rgba(94, 246, 255, .12), rgba(18, 8, 42, .55) 70%);
  box-shadow: 0 0 24px rgba(94, 246, 255, .2), inset 0 0 22px rgba(139, 91, 255, .24);
}

#stick-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 62px;
  height: 62px;
  margin: -31px 0 0 -31px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #c9fbff, #38c6ff 45%, #6a3cff);
  box-shadow: 0 0 22px rgba(94, 246, 255, .8);
  pointer-events: none;
}

.touch-buttons {
  position: absolute;
  right: calc(20px + var(--safe-right));
  bottom: calc(26px + var(--safe-bottom));
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  pointer-events: auto;
}

.round-btn {
  font: inherit;
  font-weight: 800;
  letter-spacing: .06em;
  color: #fff;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35);
  touch-action: none;
  cursor: pointer;
}

.round-btn.fire {
  width: 108px;
  height: 108px;
  font-size: 16px;
  background: radial-gradient(circle at 35% 30%, #ffb3f0, #ff3fc5 45%, #8b1cff);
  box-shadow: 0 0 26px rgba(255, 63, 197, .6), inset 0 -6px 16px rgba(80, 0, 80, .35);
}

.round-btn.jump {
  width: 82px;
  height: 82px;
  font-size: 14px;
  margin-right: 8px;
  background: radial-gradient(circle at 35% 30%, #b6fff9, #38d9ff 45%, #1f7bff);
  box-shadow: 0 0 24px rgba(56, 217, 255, .55), inset 0 -6px 16px rgba(0, 40, 90, .35);
}

.round-btn.active { transform: scale(.94); filter: brightness(1.2); }

.overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: calc(18px + var(--safe-top)) calc(16px + var(--safe-right)) calc(18px + var(--safe-bottom)) calc(16px + var(--safe-left));
  background: radial-gradient(circle at 50% 20%, rgba(60, 20, 120, .55), rgba(5, 2, 14, .82) 70%);
  backdrop-filter: blur(4px);
  z-index: 10;
  overflow-y: auto;
}

.overlay[hidden] { display: none; }

.menu-overlay { background: radial-gradient(circle at 50% 18%, rgba(70, 24, 140, .5), rgba(5, 2, 14, .9) 72%); }

.menu-panel, .dialog {
  width: min(620px, 100%);
  padding: clamp(20px, 4vw, 38px);
  border-radius: 26px;
  background: var(--panel);
  border: 1px solid rgba(139, 91, 255, .45);
  box-shadow: 0 0 60px rgba(94, 246, 255, .12), 0 24px 60px rgba(0, 0, 0, .55);
  text-align: center;
}

.eyebrow {
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--pink);
}

h1 {
  margin: 0;
  font-size: clamp(40px, 12vw, 82px);
  line-height: .94;
  letter-spacing: -.02em;
  background: linear-gradient(180deg, #ffffff, var(--cyan) 45%, #a06bff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px rgba(94, 246, 255, .55));
}

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

.tagline { margin: 12px auto 0; max-width: 44ch; color: var(--muted); font-size: clamp(14px, 2.4vw, 17px); }

.menu-crab {
  display: block;
  width: 132px;
  height: 132px;
  margin: 18px auto 2px;
  border-radius: 24px;
  box-shadow: 0 0 38px rgba(94, 246, 255, .28);
  animation: bob 2.8s ease-in-out infinite;
}

@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-7px) rotate(1deg); }
}

.how-to {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 22px 0 0;
  text-align: left;
}

.how-to > div {
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(94, 246, 255, .06);
  border: 1px solid rgba(94, 246, 255, .16);
}

.how-to h2 { font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); }
.how-to p { margin: 4px 0; font-size: 14px; color: var(--muted); }
.how-to b { color: #fff; }

.menu-tip { margin: 16px auto 0; color: var(--muted); font-size: 14px; max-width: 46ch; }

.menu-actions, .dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 22px;
}

button.primary {
  font: inherit;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: .04em;
  color: #170628;
  padding: 15px 30px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #c8ffff, var(--cyan) 45%, #4ecbff);
  box-shadow: 0 0 30px rgba(94, 246, 255, .55), inset 0 -4px 10px rgba(0, 90, 120, .3);
  cursor: pointer;
}

button.primary:active { transform: translateY(2px) scale(.99); }

.dialog-actions button:not(.primary) {
  font: inherit;
  font-weight: 700;
  color: var(--ink);
  padding: 14px 22px;
  border-radius: 999px;
  border: 1px solid rgba(139, 91, 255, .6);
  background: rgba(30, 14, 64, .9);
  cursor: pointer;
}

.text-btn {
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  padding: 10px 8px;
  border: 0;
  background: none;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.dialog p { color: var(--muted); margin: 8px 0; }

@media (max-width: 560px) {
  .power-card { width: 52vw; padding: 7px 10px 9px; }
  .hud-btn { font-size: 11px; padding: 8px 10px; }
  .how-to { grid-template-columns: 1fr; }
  .menu-crab { margin-top: 14px; }
  .hint { display: none; }
}

@media (max-height: 520px) {
  .menu-panel { padding: 16px 22px; }
  .menu-crab { display: none; }
  .how-to { margin-top: 12px; }
  h1 { font-size: clamp(34px, 9vw, 54px); }
  .menu-tip { display: none; }
}

body:not(.touch) #touch-controls { display: none !important; }
body.touch { cursor: default; }
body.touch #game { cursor: default; }