@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500;600;700&display=swap');

:root {
  --ink-deep: #0c0a1f;
  --ink-mid: #1b1640;
  --glow-teal: #5be7d8;
  --glow-magenta: #ff6fd8;
  --glow-amber: #ffd27a;
  --panel-bg: rgba(14, 10, 34, 0.72);
  --panel-border: rgba(91, 231, 216, 0.35);
  --text-soft: #eae6ff;
  --text-muted: #a89fd6;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: radial-gradient(ellipse at 50% 20%, #1a1440 0%, #08061a 70%);
  font-family: 'Quicksand', 'Segoe UI', sans-serif;
  color: var(--text-soft);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

#game-wrap {
  position: relative;
  width: 960px;
  height: 540px;
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 0 0 2px var(--panel-border), 0 0 60px rgba(91, 231, 216, 0.15), 0 25px 80px rgba(0,0,0,0.6);
}

canvas#game {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #0c0a1f;
  image-rendering: optimizeSpeed;
}

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

#hud {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
  font-weight: 600;
  letter-spacing: 0.02em;
}

#score-panel {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  backdrop-filter: blur(4px);
  box-shadow: 0 0 18px rgba(91, 231, 216, 0.2);
}

#score-panel.penalty {
  animation: penaltyFlash 0.5s ease;
}

@keyframes penaltyFlash {
  0%   { box-shadow: 0 0 18px rgba(91, 231, 216, 0.2); border-color: var(--panel-border); }
  25%  { box-shadow: 0 0 24px rgba(255, 90, 90, 0.7); border-color: rgba(255, 90, 90, 0.8); }
  100% { box-shadow: 0 0 18px rgba(91, 231, 216, 0.2); border-color: var(--panel-border); }
}

.glow-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--glow-amber);
  box-shadow: 0 0 10px 3px var(--glow-amber);
  display: inline-block;
}

#record-inline {
  font-size: 13px;
  color: var(--glow-magenta);
  font-weight: 600;
}

#hint-panel {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  color: #c9c3f0;
}

.hidden {
  display: none !important;
}

.level-banner {
  position: absolute;
  top: 66px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  padding: 10px 26px;
  font-size: 15px;
  font-weight: 700;
  color: var(--glow-amber);
  text-shadow: 0 0 12px rgba(255, 210, 122, 0.5);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
  z-index: 12;
}

.level-banner.show {
  opacity: 1;
}

#boss-health-panel {
  position: absolute;
  top: 118px;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  max-width: 70%;
  text-align: center;
  z-index: 11;
  pointer-events: none;
}

#boss-name {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ff9db8;
  text-shadow: 0 0 10px rgba(255, 111, 216, 0.6);
  margin-bottom: 4px;
}

#boss-health-bar {
  height: 12px;
  border-radius: 999px;
  background: rgba(14, 10, 34, 0.75);
  border: 1px solid rgba(255, 111, 216, 0.4);
  overflow: hidden;
  box-shadow: 0 0 14px rgba(255, 111, 216, 0.25);
}

#boss-health-fill {
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff6fd8, #ffb35c);
  transition: width 0.3s ease;
}

.icon-btn {
  pointer-events: auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  color: var(--glow-teal);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 14px rgba(91, 231, 216, 0.2);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.icon-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 0 20px rgba(91, 231, 216, 0.35);
}

.icon-btn.muted {
  color: #8b84b5;
}

.hud-icons {
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

/* Keyboard players already have the R shortcut — this button only earns
   its place on touch devices, where there's no keyboard to fall back on. */
#restart-btn {
  display: none;
  touch-action: none;
}

@media (pointer: coarse) {
  #restart-btn {
    display: flex;
  }
}

.key {
  display: inline-block;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 5px;
  padding: 1px 7px;
  margin: 0 3px;
  font-size: 12px;
  font-weight: 700;
  color: var(--glow-teal);
}

/* ---------- Overlay screens ---------- */

.overlay-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: radial-gradient(ellipse at 50% 40%, rgba(27, 22, 64, 0.92), rgba(6, 5, 20, 0.97));
  transition: opacity 0.4s ease;
  z-index: 20;
  padding: 20px;
}

.overlay-screen.hidden {
  opacity: 0;
  pointer-events: none;
}

.overlay-screen h1 {
  font-size: 34px;
  margin: 0 0 12px;
  color: var(--glow-amber);
  text-shadow: 0 0 18px rgba(255, 210, 122, 0.6);
}

.overlay-screen p {
  margin: 4px 0;
  font-size: 15px;
  color: #d6d1f5;
  max-width: 480px;
  line-height: 1.5;
}

.small-hint {
  margin-top: 16px !important;
  font-size: 12px !important;
  color: #9c94c9 !important;
}

.glow-btn {
  margin-top: 18px;
  padding: 12px 32px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  color: #0c0a1f;
  background: linear-gradient(135deg, var(--glow-teal), var(--glow-magenta));
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 0 24px rgba(91, 231, 216, 0.5);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.glow-btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 0 32px rgba(255, 111, 216, 0.6);
}

.glow-btn:active {
  transform: translateY(0) scale(0.98);
}

.menu-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}

.menu-actions .glow-btn,
.menu-actions .glow-btn-secondary {
  margin-top: 0;
}

.glow-btn-secondary {
  padding: 10px 28px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-soft);
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.glow-btn-secondary:hover {
  border-color: var(--glow-teal);
  transform: translateY(-2px);
}

/* ---------- Level select ---------- */

.level-select-screen {
  justify-content: flex-start;
  align-items: stretch;
  overflow-y: auto;
  padding: 26px 20px;
}

.level-select-header {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  margin-bottom: 16px;
}

.level-select-header h2 {
  margin: 0;
  font-size: 22px;
  color: var(--glow-amber);
  text-shadow: 0 0 16px rgba(255, 210, 122, 0.5);
}

.level-select-header .icon-btn {
  position: absolute;
  right: 0;
  pointer-events: auto;
}

.level-select-body {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

.world-section {
  margin-bottom: 20px;
}

.world-section h3 {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--glow-magenta);
  text-shadow: 0 0 10px rgba(255, 111, 216, 0.4);
  text-align: left;
}

.level-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
  gap: 8px;
}

.level-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 54px;
  padding: 6px 4px;
  font-family: inherit;
  border-radius: 12px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  color: var(--text-soft);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.level-btn:not(.locked):hover {
  transform: translateY(-2px);
  box-shadow: 0 0 14px rgba(91, 231, 216, 0.3);
}

.level-btn .level-num {
  font-size: 16px;
  font-weight: 700;
  color: var(--glow-teal);
}

.level-btn .level-name {
  font-size: 9px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.15;
}

.level-btn.boss:not(.locked) {
  border-color: rgba(255, 111, 216, 0.6);
}

.level-btn.locked {
  opacity: 0.4;
  cursor: default;
}

.level-btn.locked .level-num {
  color: #6b6591;
  font-size: 18px;
}

/* ---------- Touch controls ---------- */

#touch-controls {
  position: absolute;
  bottom: 18px;
  left: 0;
  right: 0;
  display: none;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 18px;
  /* keep the buttons clear of the iPhone home-indicator / gesture bar */
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 15;
}

/* Buttons that belong together (movement, or actions) stay close so a
   single thumb can reach between them without hunting across the screen. */
.touch-group {
  display: flex;
  align-items: center;
  gap: 14px;
}

.touch-btn {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: var(--glow-teal);
  box-shadow: 0 0 16px rgba(91, 231, 216, 0.25);
  touch-action: none;
  flex-shrink: 0;
}

.touch-btn:active {
  background: rgba(91, 231, 216, 0.25);
}

#touch-jump {
  color: var(--glow-amber);
}

/* Show touch controls only on touch-capable devices without a fine pointer (no mouse) */
@media (pointer: coarse) {
  #touch-controls {
    display: flex;
  }
}

/* Keyed on touch capability, not screen width — a landscape phone can
   easily exceed 1000px of CSS width, and that used to fall through to the
   fixed desktop size below, leaving the game boxed in the middle of the
   screen instead of filling it. */
@media (pointer: coarse) {
  #game-wrap {
    /* Fill the screen edge to edge. Almost no phone is natively 16:9, so
       matching the aspect ratio exactly (as before) always left bars on
       one axis; canvas#game's object-fit: cover instead scales the game
       to cover the full box and crops a sliver off the taller axis,
       rather than showing bars around a smaller image. */
    width: 100vw;
    height: 100vh;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 0;
  }
}

/* This is a wide, horizontal-scrolling platformer — it needs landscape to
   be readable and playable on a phone. Block portrait on touch devices
   with a rotate prompt instead of squeezing everything into a tall strip. */
#rotate-prompt {
  display: none;
}

@media (pointer: coarse) and (orientation: portrait) {
  #rotate-prompt {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 999;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
    padding: 32px;
    background: var(--ink-deep);
    color: var(--text-soft);
  }

  #rotate-prompt .rotate-icon {
    font-size: 48px;
    animation: rotateHint 1.8s ease-in-out infinite;
  }

  #game-wrap {
    display: none;
  }
}

@keyframes rotateHint {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(90deg); }
}