* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #0c0a16;
  color: #f2eefc;
  font-family: 'VT323', monospace;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* This is a game, not a page — no text selection, no drag-to-select,
     no long-press callout on mobile. Keeps right-click/copy from breaking
     the illusion (paired with the contextmenu block in game.js). */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  /* Blocks pinch-zoom, double-tap-zoom and pull-to-refresh gestures — this
     is a full-screen game, not a document, so the page itself should never
     pan or scale under a player's fingers. Paired with the
     maximum-scale/user-scalable viewport meta tag, which alone isn't
     enough on every mobile browser. */
  touch-action: none;
}

canvas, img {
  -webkit-user-drag: none;
  user-drag: none;
}

#wrap {
  position: relative;
  overflow: hidden;
  /* #wrap always spans the full viewport (capped at 960px wide so it
     doesn't balloon on desktop) so the full-bleed menu screens — which are
     absolutely positioned to fill #wrap — cover the whole phone screen
     instead of floating in a tiny box surrounded by bare page background.
     Sizing the actual game view (HUD + canvas) to fit inside that box is
     handled below by flex + object-fit, not by locking #wrap itself to
     16:9 — a phone's screen is usually wider than 16:9 in landscape, and
     that lock used to letterbox the whole app (menus and HUD included),
     not just the canvas. Only #canvasFrame below needs the 16:9 lock,
     since that's the box whose contents (the game canvas) actually has a
     fixed-ratio world to fit. */
  width: min(100vw, calc(100vh * 16 / 9));
  width: min(100vw, calc(100dvh * 16 / 9 * 1.15));
  height: min(100vh, calc(100vw * 9 / 16));
  height: min(100dvh, calc(100vw * 9 / 16));
  display: flex;
  flex-direction: column;
}

#canvasArea {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* The actual game "box": sized to the largest 16:9 rect that fits inside
   whatever room #canvasArea has left (flex may give it far more height
   than a 16:9 shape needs, e.g. a tall portrait phone), so canvas and its
   overlays (touch controls, level-intro text) share one shrink-to-fit
   frame and always land exactly on the visible game view — never
   floating off in the empty space around it. */
#canvasFrame {
  position: relative;
  /* Give the visible game rectangle 15% more horizontal room while keeping
     its height constrained by the viewport. The canvas scales to this box. */
  width: min(100%, calc(100vh * 16 / 9 * 1.15));
  width: min(100%, calc(100dvh * 16 / 9 * 1.15));
  height: min(100%, calc(100vw * 9 / 16));
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 960 / 540;
}

/* Rotate-device gate — this is a landscape-only game, so a touch device
   held in portrait gets told to turn it rather than being handed a
   squeezed, letterboxed layout. Fixed (not tied to #wrap) so it always
   covers the whole screen, above everything including the splash screen.
   Pure CSS via the orientation media query below: no JS needed, and it
   reacts instantly to the OS-level orientation change. */
#rotateHint {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 24px;
  text-align: center;
  background: #0c0a16;
}

#rotatePhone {
  width: 42px;
  height: 74px;
  border: 4px solid #f2eefc;
  border-radius: 8px;
  position: relative;
  animation: rotatePhoneHint 1.8s ease-in-out infinite;
}
#rotatePhone::after {
  content: "";
  position: absolute;
  bottom: 7px;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f2eefc;
  transform: translateX(-50%);
}
@keyframes rotatePhoneHint {
  0%, 15%   { transform: rotate(0deg); }
  45%, 60%  { transform: rotate(-90deg); }
  90%, 100% { transform: rotate(0deg); }
}

#rotateHint p {
  margin: 0;
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(11px, 4vw, 15px);
  color: #ffd166;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.8), 0 0 16px rgba(255,209,102,0.55);
  max-width: 260px;
  line-height: 1.6;
}

@media (orientation: portrait) and (pointer: coarse) {
  #rotateHint { display: flex; }
  /* Nothing beneath needs its own hiding logic — #rotateHint is opaque,
     fixed and top of the stack, so it fully blocks view and touch input
     on the menus/game underneath until the phone is turned. */
}

/* Studio splash — shown once on load, above absolutely everything else
   (including the main menu), then fades out on its own or on skip. */
#splashScreen {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0c0a16;
  cursor: pointer;
  transition: opacity 0.6s ease;
}
#splashScreen.fadeOut {
  opacity: 0;
  pointer-events: none;
}
#splashScreen[hidden] { display: none; }

#splashLogoWrap {
  position: relative;
  width: min(300px, 50%);
  animation: splashIn 0.5s ease;
  filter: drop-shadow(0 0 24px rgba(178, 102, 255, 0.45));
}

#splashLogo {
  display: block;
  width: 100%;
  height: auto;
}

/* Glass-shine sweep — a diagonal light band masked to the logo's own alpha
   shape, so it glides only across the visible mark/text, not a plain box. */
#splashShine {
  position: absolute;
  inset: 0;
  -webkit-mask-image: url('recursos/EMPRESA.png');
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-image: url('recursos/EMPRESA.png');
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0.9) 50%,
    rgba(200, 170, 255, 0.5) 56%,
    rgba(255, 255, 255, 0) 68%
  );
  background-size: 300% 300%;
  background-position: 120% -20%;
  animation: shineSweep 3.2s ease-in-out infinite;
  animation-delay: 0.7s;
  pointer-events: none;
}
@keyframes shineSweep {
  0%   { background-position: 120% -20%; }
  40%  { background-position: -60% 100%; }
  100% { background-position: -60% 100%; }
}

@keyframes splashIn {
  0%   { opacity: 0; transform: scale(0.92); }
  100% { opacity: 1; transform: scale(1); }
}

/* The game view itself (blocks, character, background) stays exactly as it
   was — only the surrounding menu chrome gets the indie treatment. */
canvas {
  display: block;
  width: 100%;
  height: 100%;
  background: #222;
  image-rendering: pixelated;
  border: 3px solid #444;
  border-radius: 6px;
}

#hud #checkpointBtn {
  position: absolute;
  top: calc(100% + 20px);
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 48px;
  min-height: 40px;
  flex-shrink: 0;
  touch-action: manipulation;
}
#checkpointBtn svg { flex-shrink: 0; }
#checkpointBtn:disabled { opacity: 0.45; cursor: default; }

#hud {
  position: absolute;
  top: 8px;
  left: 14px;
  right: 14px;
  z-index: 8;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px 14px;
  padding: 0;
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(9px, 2.2vw, 11px);
  letter-spacing: 0.5px;
  pointer-events: none;
}

#levelLabel { font-size: 1.1em; color: #ffd166; }
#deathLabel { color: #ff6b6b; }
#coinLabel { color: #ffd166; }

#restartBtn {
  margin-left: 0;
  font-family: 'Press Start 2P', monospace;
}

#progressTrack {
  position: absolute;
  top: 46px;
  left: 14px;
  right: 14px;
  z-index: 8;
  height: 8px;
  border-radius: 0;
  background: #1a1626;
  border: 2px solid #000;
  overflow: hidden;
  margin: 0;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.6);
  pointer-events: none;
}

#progressFill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ffd166, #ff9f43);
  transition: width 0.15s ease-out;
}

#overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  text-align: center;
  text-shadow: 0 2px 6px rgba(0,0,0,0.8);
}

#overlayTitle {
  font-family: 'Press Start 2P', monospace;
  font-size: 28px;
  opacity: 0;
  color: #fff;
  text-shadow: 3px 3px 0 #6b4fd6, 0 2px 10px rgba(0,0,0,0.8);
}

#overlaySub {
  font-family: 'VT323', monospace;
  font-size: 24px;
  opacity: 0;
  margin-top: 10px;
  color: #ffd166;
}

#overlayTitle.show, #overlaySub.show {
  animation: fadeInOut 1.4s ease forwards;
}

@keyframes fadeInOut {
  0%   { opacity: 0; transform: translateY(10px); }
  15%  { opacity: 1; transform: translateY(0); }
  75%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Touch controls — overlaid on the bottom of the canvas itself; hidden
   entirely on non-touch (mouse/keyboard) devices */
#touchControls {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 14px 14px;
  pointer-events: none;
}

#touchControls .pad {
  display: flex;
  gap: 14px;
  pointer-events: none;
}

.touchBtn {
  /* scales with the canvas's own rendered width, so it shrinks in step with
     it on narrow screens instead of eating further into the raised ground.
     vw (not %) because the immediate parent, .pad, has no width of its own
     to resolve a percentage against. */
  width: clamp(64px, 17.5vw, 168px);
  aspect-ratio: 3 / 1;
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
  padding: 0;
  pointer-events: auto;
  transform: translateY(-8%);
}

#btnJump {
  width: clamp(77px, 21vw, 202px);
}

/* Arrow-shaped buttons via clip-path — flat back edge, single point at the
   tip (pennant/tag shape), matching the reference plank's tapered ends.
   Shape only, no texture/image. */
#btnLeft {
  clip-path: polygon(100% 0%, 100% 100%, 22% 100%, 0% 50%, 22% 0%);
}

#btnRight {
  clip-path: polygon(0% 0%, 0% 100%, 78% 100%, 100% 50%, 78% 0%);
}

#btnJump {
  clip-path: polygon(0% 100%, 100% 100%, 100% 40%, 50% 0%, 0% 40%);
}

.touchBtn.active {
  background: rgba(255, 255, 255, 0.4);
}

/* Show touch controls whenever the device reports a coarse (touch) pointer,
   OR the screen is narrow enough to likely be a phone/tablet — some
   tablets/emulators only resize the viewport without flagging themselves
   as touch, so pointer-type alone isn't a reliable enough signal. */
@media (pointer: coarse), (max-width: 1024px) {
  #touchControls { display: flex; }
}

/* ---------- Indie pixel-button base, shared by HUD buttons and menu
   buttons. Hard offset shadow that collapses on press reads as a physical
   button, not a web control. (Level map nodes get their own look below —
   they're round portals on a map, not rectangular buttons.) ---------- */
.menuBtn,
#restartBtn {
  font-family: 'Press Start 2P', monospace;
  background: #2b2246;
  color: #f2eefc;
  border: 2px solid #000;
  border-radius: 0;
  box-shadow: 4px 4px 0 #000;
  cursor: pointer;
  transition: transform 0.05s ease-out, box-shadow 0.05s ease-out, background 0.1s ease;
}
.menuBtn:hover:not(:disabled),
#restartBtn:hover {
  background: #3a2e5e;
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 #000;
}
.menuBtn:active:not(:disabled),
#restartBtn:active {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 #000;
}
.menuBtn:disabled { opacity: 0.5; cursor: not-allowed; }

#restartBtn {
  padding: 8px 14px;
  font-size: 10px;
}

/* Full-screen menu overlays (main menu, level map, options) — sit on top of
   the entire #wrap (HUD included) so they fully block the game underneath. */
.screenOverlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  /* Safety net: on a short landscape phone the shrunk sizes below (and the
     media query further down) should always make the content fit, but if
     something still doesn't — a big text-zoom setting, an unusually tiny
     window — scrolling beats silently clipping buttons off-screen. Needs
     its own touch-action (the page-wide touch-action:none that blocks
     pinch-zoom would otherwise block this swipe-scroll too). */
  overflow-y: auto;
  touch-action: pan-y;
  background: radial-gradient(ellipse at center, #241d3d 0%, #120f1f 100%);
  border: 3px solid #000;
  box-shadow: inset 0 0 0 3px #4a3a70;
  border-radius: 0;
  text-align: center;
}

.screenOverlay[hidden] { display: none; }

.videoScreen {
  padding: 0;
  gap: 0;
  background: #000;
}

.videoScreen video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
  z-index: 0;
}

#finalVideoSkipBtn {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 2;
}

/* Faint scanline texture — only over the menu chrome, never over the
   actual gameplay canvas. */
.screenOverlay::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.035) 0px,
    rgba(255, 255, 255, 0.035) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: overlay;
}

.screenOverlay > * {
  position: relative;
  z-index: 1;
}

#mainMenu, #optionsMenu {
  background-image:
    linear-gradient(rgba(10,8,20,0.55), rgba(14,10,26,0.8)),
    url('recursos/FONDO_MENU_OPCIONES.png');
  background-size: cover;
  background-position: center;
}

#mainMenuTagline {
  /* Part of the normal flex flow now (not an absolute overlay pinned to a
     % of the menu's height) so it can never drift into overlapping the
     title below it once either line wraps or shrinks on a narrow screen. */
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(20px, 6vw, 42px);
  letter-spacing: clamp(1px, 0.8vw, 4px);
  color: #ff5757;
  text-shadow: 5px 5px 0 rgba(0,0,0,0.6), 0 0 24px rgba(255, 87, 87, 0.6);
  white-space: nowrap;
  margin: 0;
}

.screenOverlay h1 {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(16px, 5vw, 30px);
  line-height: 1.5;
  margin: 0 0 14px;
  color: #fff;
  text-shadow: 3px 3px 0 #6b4fd6, 6px 6px 0 rgba(0,0,0,0.6);
  letter-spacing: 1px;
}

.screenOverlay h2 {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(12px, 4vw, 16px);
  line-height: 1.6;
  margin: 0 0 10px;
  color: #ffd166;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.8), 0 0 16px rgba(255,209,102,0.55);
}

.menuBtn {
  padding: 12px 22px;
  font-size: 13px;
  min-width: 190px;
}

/* Deliberately the runt of the main menu so it doesn't compete for
   attention — Info isn't a page we want people visiting often. */
#infoMenuBtn {
  padding: 8px 14px;
  font-size: 8.5px;
  min-width: 124px;
  border-width: 1px;
  box-shadow: 2px 2px 0 #000;
}
#infoMenuBtn:hover:not(:disabled) {
  box-shadow: 2.5px 2.5px 0 #000;
}
#infoMenuBtn:active:not(:disabled) {
  box-shadow: 0.5px 0.5px 0 #000;
}

.backBtn { margin-top: 12px; }

/* A phone held sideways is wide but short (often well under 500px tall
   once the browser chrome takes its cut) — the main menu's tagline + title
   + 5 buttons at their normal size don't fit that height and get clipped
   by #wrap's overflow. Shrink the menu chrome so it comfortably fits a
   landscape phone screen instead of relying only on the overflow-y
   safety net above. */
@media (max-height: 480px) {
  .screenOverlay {
    gap: 8px;
    padding: 10px 24px;
  }
  #mainMenuTagline {
    font-size: clamp(14px, 5vh, 24px);
  }
  .screenOverlay h1 {
    font-size: clamp(12px, 4vh, 20px);
    margin: 0 0 4px;
    line-height: 1.3;
  }
  .screenOverlay h2 {
    margin: 0 0 4px;
  }
  .menuBtn {
    padding: 7px 18px;
    font-size: 11px;
    min-width: 150px;
  }
  #infoMenuBtn {
    padding: 5px 10px;
    font-size: 7.5px;
    min-width: 96px;
  }
  .backBtn { margin-top: 4px; }
}

/* ---------- Profile screen: login / register form ---------- */
#authTabs {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}
#authTabs[hidden] {
  display: none;
}
.authTab {
  min-width: 0;
  padding: 8px 14px;
  font-size: 10px;
  opacity: 0.6;
}
.authTab.active {
  opacity: 1;
  background: #3a2e5e;
  box-shadow: inset 0 0 0 2px #ffd166, 4px 4px 0 #000;
}

#authForm {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(320px, 80vw);
}
#authForm[hidden] {
  display: none;
}

.formRow {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}
.formRow label {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: #ffd166;
}
.formRow input {
  font-family: 'VT323', monospace;
  font-size: 20px;
  padding: 8px 10px;
  background: #17132a;
  color: #f2eefc;
  border: 2px solid #000;
  box-shadow: inset 0 0 0 2px #4a3a70;
  border-radius: 0;
}
.formRow input:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px #ffd166;
}

.passwordField {
  position: relative;
}
.passwordField input {
  width: 100%;
  padding-right: 42px;
}
.passwordToggle {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  min-width: 0;
  background: none;
  border: none;
  box-shadow: none;
  padding: 6px 8px;
  font-size: 17px;
  line-height: 1;
  color: #8f7fc4;
  cursor: pointer;
}
.passwordToggle:hover,
.passwordToggle:focus-visible {
  color: #ffd166;
}
.passwordToggle.showing {
  color: #ffd166;
}

#authForm .menuBtn {
  align-self: center;
  margin-top: 4px;
}

.authError {
  font-family: 'VT323', monospace;
  font-size: 18px;
  color: #ff6b6b;
  text-align: left;
}

.authSuccess {
  font-family: 'VT323', monospace;
  font-size: 18px;
  color: #7ee787;
  text-align: left;
}

.linkBtn {
  align-self: center;
  background: none;
  border: none;
  box-shadow: none;
  padding: 4px;
  font-family: 'VT323', monospace;
  font-size: 16px;
  color: #8f7fc4;
  text-decoration: underline;
  cursor: pointer;
  min-width: 0;
}
.linkBtn:hover,
.linkBtn:focus-visible {
  color: #ffd166;
}

#forgotForm,
#codeForm {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(320px, 80vw);
}
#forgotForm[hidden],
#codeForm[hidden] {
  display: none;
}
#codeSentNotice:empty {
  display: none;
}

#profileLoggedIn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
#profileLoggedIn[hidden] {
  display: none;
}
#profileWelcome {
  font-family: 'Press Start 2P', monospace;
  font-size: 13px;
  color: #ffd166;
  margin: 0;
}
.profileHint {
  font-size: 18px;
  color: #cabde8;
  margin: 0;
  max-width: min(360px, 80vw);
}

#infoContent {
  max-width: min(480px, 80vw);
  text-align: left;
  line-height: 1.4;
}
#infoContent p { margin: 0 0 14px; }
#infoContent strong { color: #ffd166; }

#infoCopyright {
  margin: 4px 0 0;
  font-size: 14px;
  color: #8a80a8;
}

/* ---------- Level map: a winding path across a little painted world,
   not a grid of buttons — nodes are portals scattered along a trail. ---------- */
#mapCanvas {
  position: relative;
  width: min(640px, 86vw);
  height: min(420px, 58vh);
  background:
    radial-gradient(ellipse at 50% 16%, rgba(255, 209, 102, 0.12), transparent 22%),
    linear-gradient(180deg, #11142d 0%, #1e1835 48%, #33254e 100%);
  border: 3px solid #000;
  box-shadow:
    inset 0 0 0 3px #5e4b8a,
    inset 0 0 34px rgba(0, 0, 0, 0.58),
    0 0 22px rgba(106, 77, 188, 0.34),
    7px 7px 0 rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

#mapCanvas::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(255, 209, 102, 0.16);
  box-shadow: inset 0 0 18px rgba(255, 209, 102, 0.08);
  pointer-events: none;
  z-index: 6;
}

#mapCanvas::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity: 0.08;
  pointer-events: none;
  z-index: 5;
}

.mapStars {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 14% 20%, rgba(255,255,255,0.9) 0 1px, transparent 1.5px),
    radial-gradient(circle at 32% 10%, rgba(255,255,255,0.5) 0 1px, transparent 1.5px),
    radial-gradient(circle at 49% 24%, rgba(255,255,255,0.6) 0 1px, transparent 1.5px),
    radial-gradient(circle at 69% 15%, rgba(255,255,255,0.8) 0 1px, transparent 1.5px),
    radial-gradient(circle at 88% 29%, rgba(255,255,255,0.45) 0 1px, transparent 1.5px);
  opacity: 0.72;
  animation: mapTwinkle 3.4s ease-in-out infinite;
}

.mapMist {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 16%;
  height: 30%;
  background:
    linear-gradient(90deg, transparent, rgba(178,102,255,0.12), transparent),
    linear-gradient(180deg, transparent, rgba(255,255,255,0.06), transparent);
  filter: blur(8px);
  opacity: 0.78;
  animation: mapMistDrift 8s ease-in-out infinite alternate;
}

@keyframes mapTwinkle {
  0%, 100% { opacity: 0.52; }
  50% { opacity: 0.9; }
}

@keyframes mapMistDrift {
  0% { transform: translateX(-2%); }
  100% { transform: translateX(2%); }
}

.mapMountains {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
}
.mapMountainsFar {
  height: 42%;
  background: linear-gradient(180deg, #251d43, #1a1430);
  clip-path: polygon(0% 100%, 0% 58%, 9% 70%, 21% 39%, 33% 66%, 46% 32%, 58% 64%, 70% 28%, 82% 60%, 94% 36%, 100% 58%, 100% 100%);
  opacity: 0.95;
}
.mapMountainsNear {
  height: 26%;
  background: linear-gradient(180deg, #3a2b62, #2b214c);
  clip-path: polygon(0% 100%, 0% 62%, 14% 80%, 29% 49%, 42% 74%, 56% 44%, 70% 72%, 84% 47%, 100% 69%, 100% 100%);
}

#mapScroll {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
}
#mapScroll::-webkit-scrollbar { display: none; }
#mapScroll.dragging { cursor: grabbing; }

#mapInner {
  position: relative;
  width: 100%;
}

#mapPath {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.mapPathFull, .mapPathGlow, .mapPathTraveled { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mapPathGlow { stroke: rgba(178,102,255,0.24); stroke-width: 5; filter: blur(2px); }
.mapPathFull { stroke: rgba(255,255,255,0.22); stroke-width: 1.2; stroke-dasharray: 2 2; }
.mapPathTraveled {
  stroke: #ffd166;
  stroke-width: 1.8;
  stroke-dasharray: 1.2 2.1;
  filter: drop-shadow(0 0 3px rgba(255,209,102,0.85));
  animation: trailGlow 1.8s ease-in-out infinite;
}

@keyframes trailGlow {
  0%, 100% { opacity: 0.82; }
  50% { opacity: 1; }
}

#levelGrid {
  position: absolute;
  inset: 0;
  z-index: 3;
}

.levelNode {
  position: absolute;
  transform: translate(-50%, -50%);
  width: clamp(46px, 12vw, 62px);
  height: clamp(46px, 12vw, 62px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: 'Press Start 2P', monospace;
  font-size: 13px;
  color: #1a0f2e;
  border: none;
  cursor: pointer;
  background:
    radial-gradient(circle at 32% 28%, #fff9ff 0 10%, #d7b5ff 11% 22%, transparent 23%),
    radial-gradient(circle at 50% 54%, #c789ff 0 36%, #7e45dc 58%, #2b164f 100%);
  box-shadow:
    0 0 0 3px #000,
    inset 0 0 0 3px rgba(255,255,255,0.12),
    inset 0 -8px 0 rgba(0,0,0,0.14),
    0 0 15px 2px rgba(178,102,255,0.72),
    3px 3px 0 rgba(0,0,0,0.55);
  text-shadow: 1px 1px 0 rgba(255,255,255,0.45);
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out, filter 0.15s ease-out;
  z-index: 2;
}
.levelNode:hover:not(:disabled) {
  transform: translate(-50%, -50%) scale(1.12);
  filter: saturate(1.18) brightness(1.08);
  box-shadow:
    0 0 0 3px #000,
    inset 0 0 0 3px rgba(255,255,255,0.18),
    inset 0 -8px 0 rgba(0,0,0,0.12),
    0 0 26px 7px rgba(255,209,102,0.54),
    3px 3px 0 rgba(0,0,0,0.55);
}
.levelNode:active:not(:disabled) {
  transform: translate(-50%, -50%) scale(0.92);
}
.levelNode.locked {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.07) 0 4px, transparent 4px 9px),
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.18) 0 10%, transparent 11%),
    radial-gradient(circle at 50% 54%, #40395e 0 38%, #262139 68%, #171323 100%);
  color: #665f7a;
  font-size: 15px;
  box-shadow:
    0 0 0 3px #000,
    inset 0 0 0 3px rgba(255,255,255,0.05),
    inset 0 -8px 0 rgba(0,0,0,0.18),
    3px 3px 0 rgba(0,0,0,0.55);
  cursor: not-allowed;
  filter: grayscale(0.35);
}
.levelNode.locked::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 2px dashed rgba(174,159,221,0.35);
  box-shadow: inset 0 0 10px rgba(0,0,0,0.32);
  pointer-events: none;
}
.levelNode.locked[data-badge]::before {
  content: attr(data-badge);
  position: absolute;
  left: 50%;
  bottom: -18px;
  transform: translateX(-50%);
  min-width: 38px;
  padding: 4px 5px 3px;
  background: #151123;
  color: #8f84b5;
  border: 2px solid #000;
  box-shadow: 2px 2px 0 #000;
  font-size: 7px;
  line-height: 1;
}
.levelNode.current {
  animation: nodePulse 1.4s ease-in-out infinite;
}
.levelNode.current::after {
  content: "";
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 8px solid #ffd166;
  animation: markerBob 1s ease-in-out infinite;
}
@keyframes nodePulse {
  0%, 100% { box-shadow: 0 0 0 3px #000, 0 0 10px 2px rgba(255,209,102,0.6), 3px 3px 0 rgba(0,0,0,0.5); }
  50%      { box-shadow: 0 0 0 3px #000, 0 0 20px 7px rgba(255,209,102,0.9), 3px 3px 0 rgba(0,0,0,0.5); }
}
@keyframes markerBob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(4px); }
}

.optionRow {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
}

/* ---------- Shop: tabbed screen over its own scenic background ---------- */
.shopScreen {
  background-image:
    linear-gradient(rgba(10,8,20,0.3), rgba(14,10,26,0.45)),
    url('recursos/FONDO_TIENDA.PNG.png');
  background-size: cover;
  background-position: center;
  justify-content: flex-start;
  padding-top: 28px;
}

.shopHeader {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 620px;
  position: relative;
}
.shopHeader h2 {
  margin: 0;
  font-size: clamp(20px, 6vw, 34px);
}

.shopCoinBadge {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Press Start 2P', monospace;
  font-size: 13px;
  color: #ffd166;
  background: #17132a;
  border: 2px solid #000;
  box-shadow: inset 0 0 0 2px #4a3a70;
  padding: 6px 12px;
  white-space: nowrap;
}

.shopTabs {
  display: flex;
  gap: 8px;
  margin: 4px 0 6px;
}
.shopTabs .authTab { min-width: 96px; }

.shopPanel {
  display: flex;
  justify-content: center;
  width: 100%;
}
.shopPanel[hidden] { display: none; }

.shopCardGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 200px));
  gap: 14px;
  width: 100%;
  max-width: 460px;
  justify-content: center;
}

.shopCard {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: rgba(23, 19, 42, 0.85);
  border: 2px solid #000;
  box-shadow: inset 0 0 0 2px #4a3a70, 4px 4px 0 rgba(0,0,0,0.5);
  padding: 14px 10px;
}

/* Twinkling sparkles flanking the character, like the stars already
   scattered across the shop background. */
.shopCard::before,
.shopCard::after {
  content: "";
  position: absolute;
  top: 20px;
  width: 10px;
  height: 10px;
  background: #e8dcff;
  clip-path: polygon(50% 0%, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0% 50%, 38% 38%);
  filter: drop-shadow(0 0 4px rgba(232,220,255,0.9));
  animation: sparkleTwinkle 1.8s ease-in-out infinite;
  pointer-events: none;
}
.shopCard::before { left: 16px; }
.shopCard::after { right: 16px; top: 34px; width: 7px; height: 7px; animation-delay: 0.6s; }
@keyframes sparkleTwinkle {
  0%, 100% { opacity: 0.35; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.15); }
}
.shopCard .menuBtn { min-width: 0; width: 100%; padding: 10px 8px; font-size: 11px; }
.shopCardName {
  font-family: 'Press Start 2P', monospace;
  font-size: 11px;
  text-align: center;
}

.shopCardWide {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 460px;
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
}
.shopCardWide .menuBtn { width: auto; }
.shopCardWideLabel {
  display: flex;
  align-items: center;
  gap: 12px;
}
.shopCardWideLabel .flagIcon {
  width: 22px;
  height: 40px;
  margin-bottom: 0;
}
.shopCardWideLabel .flagPole { height: 36px; }

/* Same silhouette drawPlayer() draws on canvas (rounded body, two little
   feet, one eye facing right) — not hand-illustrated art, just the actual
   in-game character shape scaled up for the shop card. Swap in an <img>
   per skin instead if hand-drawn sprite art shows up later. */
.playerGlow {
  position: absolute;
  top: 50px;
  left: 50%;
  width: 110px;
  height: 110px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(168,132,255,0.55) 0%, rgba(168,132,255,0.2) 45%, transparent 72%);
  pointer-events: none;
}

.playerShape {
  position: relative;
  width: 52px;
  height: 72px;
  background: var(--player-color, #f2eefc);
  border-radius: 16px 16px 12px 12px;
  filter: drop-shadow(3px 3px 0 rgba(0,0,0,0.5));
  flex-shrink: 0;
  margin-bottom: 6px;
}
.playerFoot {
  position: absolute;
  bottom: -8px;
  width: 13px;
  height: 12px;
  background: var(--player-color, #f2eefc);
}
.playerFoot:nth-child(1) { left: 5px; }
.playerFoot:nth-child(2) { right: 5px; }
.playerEye {
  position: absolute;
  top: 18px;
  right: 9px;
  width: 8px;
  height: 8px;
  background: var(--eye-color, #fff);
}

/* Same checkpoint flag drawCheckpoint() plants in the level — pole, base
   and a two-tier pennant in the same gold used across the UI. */
.flagIcon {
  position: relative;
  width: 40px;
  height: 72px;
  flex-shrink: 0;
  filter: drop-shadow(2px 2px 0 rgba(0,0,0,0.5));
  margin-bottom: 6px;
}
.flagPole {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 4px;
  height: 64px;
  background: #eee7ff;
}
.flagBase {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 22px;
  height: 5px;
  background: #eee7ff;
}
.flagCloth {
  position: absolute;
  left: 50%;
  background: #ffd166;
}
.flagCloth:nth-child(2) { top: 4px; width: 30px; height: 11px; }
.flagCloth:nth-child(3) { top: 15px; width: 24px; height: 11px; }

.shopPremiumBanner {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 560px;
  background: linear-gradient(rgba(58,46,10,0.7), rgba(23,19,42,0.85));
  border: 2px solid #000;
  box-shadow: inset 0 0 0 2px #ffd166, 4px 4px 0 rgba(0,0,0,0.5);
  padding: 16px;
}
.shopPremiumIcon { font-size: 34px; flex-shrink: 0; }
.shopPremiumInfo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  flex: 1 1 auto;
  min-width: 0;
}
.shopPremiumTitle {
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  color: #ffd166;
}
.shopPremiumBenefits {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 18px;
}
.shopPremiumBenefits li::before { content: "✦ "; color: #ffd166; }
.shopPremiumBtn {
  background: #ffd166 !important;
  color: #241d3d !important;
  flex-shrink: 0;
  min-width: 110px !important;
}
.shopPremiumBtn:hover:not(:disabled) { background: #ffdd85 !important; }

.shopIconBtn {
  position: absolute;
  right: 2%;
  bottom: 4%;
  /* Scale with the actual game menu, including height-limited windows. */
  width: 18%;
  height: auto;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  transition: transform 0.15s ease;
  z-index: 2;
}
.shopIconBtn img { width: 100%; height: auto; display: block; }
.shopIconBtn:hover, .shopIconBtn:focus-visible { transform: scale(1.05); }

#hud .menuBtn {
  min-width: 0;
  padding: 8px 12px;
  font-size: clamp(8px, 2vw, 10px);
  pointer-events: auto;
}
#mapBtn { margin-left: auto; }

#hud #restartBtn {
  pointer-events: auto;
}