:root {
  --ink: #1b1030;
  --deep: #120a22;
  --orange: #ff7a1a;
  --mint: #4ee6b8;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: radial-gradient(circle at 50% 0%, #2a1a4a 0%, var(--deep) 60%, #08040f 100%);
  color: #f3ecff;
  font-family: "Nunito", system-ui, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  overflow: hidden;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

#frame {
  position: relative;
  width: min(96vw, calc((100vh - 70px) * 960 / 560));
  aspect-ratio: 960 / 560;
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    0 0 0 3px #2d1b52,
    0 0 0 6px #1a0f33,
    0 30px 70px -20px rgba(0, 0, 0, 0.9),
    0 0 90px -30px var(--orange);
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: auto;
  background: #140c26;
}

#hint {
  margin: 0;
  font-size: clamp(10px, 1.35vw, 13px);
  letter-spacing: 0.02em;
  color: #9c8cc4;
  text-align: center;
  padding: 0 10px;
}

/* ---- touch controls (shown on coarse pointers) ---- */
#touch {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 14px calc(12px + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}
#touch.hidden { display: none; }
.pad { display: flex; gap: 10px; align-items: flex-end; pointer-events: auto; }
.pad.right { flex-wrap: wrap; justify-content: flex-end; max-width: 48%; }

.tbtn {
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  color: #fff;
  min-width: 62px;
  height: 62px;
  padding: 0 10px;
  font-size: 22px;
  border: 2px solid rgba(255, 255, 255, 0.34);
  border-radius: 50%;
  background: rgba(40, 24, 72, 0.5);
  backdrop-filter: blur(5px);
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.tbtn.act {
  border-radius: 16px;
  font-size: 13px;
  letter-spacing: 0.06em;
  min-width: 74px;
  height: 52px;
}
.tbtn.jump {
  border-radius: 50%;
  width: 86px;
  height: 86px;
  font-size: 15px;
  background: rgba(255, 122, 26, 0.55);
  border-color: rgba(255, 190, 130, 0.5);
}
.tbtn.down { background: rgba(72, 56, 110, 0.5); }
.tbtn:active { transform: scale(0.93); background: rgba(78, 230, 184, 0.5); }

#pauseBtn {
  position: absolute;
  top: calc(52px + env(safe-area-inset-top, 0px));   /* clear of the HUD bar */
  right: 10px;
  width: 40px; height: 40px;
  border-radius: 12px;
  border: 2px solid rgba(255,255,255,0.28);
  background: rgba(40, 24, 72, 0.5);
  color: #fff;
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  letter-spacing: 2px;
  -webkit-tap-highlight-color: transparent;
}
#pauseBtn.hidden { display: none; }

/* ---- portrait: ask for landscape, the play area is 16:9 ---- */
#rotate {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: #140a24;
  color: #f3ecff;
  text-align: center;
}
#rotate[hidden] { display: none; }
.rot-inner p {
  font-family: "Baloo 2", sans-serif;
  font-size: 20px;
  margin: 22px 0 0;
}
.phone {
  width: 66px; height: 112px;
  margin: 0 auto;
  border: 4px solid #ff7a1a;
  border-radius: 12px;
  animation: tip 1.8s ease-in-out infinite;
}
@keyframes tip {
  0%, 40% { transform: rotate(0deg); }
  60%, 100% { transform: rotate(-90deg); }
}
@media (prefers-reduced-motion: reduce) { .phone { animation: none; transform: rotate(-90deg); } }

@media (max-width: 720px) {
  #hint { display: none; }
}

/* on a phone the game should fill the screen, not float in a card */
@media (pointer: coarse) {
  body { gap: 0; }
  #frame {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    box-shadow: none;
    aspect-ratio: auto;
  }
  canvas { object-fit: contain; }
}