:root{
  --bg-primary:#ffffff;
  --bg-secondary:#f7f8fa;
  --bg-tertiary:#eef1f6;
  --text-primary:#1a1a1a;
  --text-secondary:#4a4a4a;
  --text-tertiary:#8a8a8a;
  --accent:#1e88e5;
  --accent-hover:#1565c0;
  --accent-light:#e3f2fd;
  --border:#e8e8e8;
  --radius:16px;
  --radius-sm:12px;
  --shadow:0 1px 3px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  --font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --puzzle-scale: 0.8; /* 1 = tamaño original (95vw/95vh); se ajusta con el control de zoom */
}

body {
  font-family: var(--font-sans);
  background: radial-gradient(1200px 600px at 50% -10%, #d7f6f5 0%, #eafcfb 55%);
  margin: 0;
  padding: 0;
  border-width: 0;
  cursor: pointer;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* ===== Marco del rompecabezas (misma posición/tamaño que el original) ===== */
#forPuzzle {
  position: absolute;
  width: calc(95vw * var(--puzzle-scale));
  height: calc(95vh * var(--puzzle-scale));
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--bg-primary);
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: width .25s ease, height .25s ease;
}

.polypiece {
  display: block;
  overflow: hidden;
  position: absolute;
}

.moving {
  transition-property: top, left;
  transition-duration: 1s;
  transition-timing-function: linear;
}

.gameCanvas {
  display: none;
  overflow: hidden;
  position: absolute;
}

/* ===== Insignia decorativa (esquina superior derecha) ===== */
.brand-corner {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 999;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-weight: 700;
  font-family: var(--font-sans);
  font-size: .9rem;
  color: var(--text-primary);
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: .4rem .95rem .4rem .4rem;
  box-shadow: var(--shadow);
  pointer-events: none;
  user-select: none;
}
.brand-corner .dot {
  width: 30px; height: 30px;
  border-radius: 10px;
  background: var(--accent-light);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
}

/* ===== Menú flotante minimalista ===== */
#menu {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 1000;
  list-style-type: none;
  margin: 0;
  padding: 8px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  width: max-content;
  max-width: 240px;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-family: var(--font-sans);
  font-size: 1rem;
}

#menu li {
  margin: 0;
  border-radius: var(--radius-sm);
  transition: background .18s, color .18s, border-color .18s, transform .18s;
}

/* botón hamburguesa: siempre visible */
.menu-toggle {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  cursor: pointer;
}
.menu-toggle:hover { background: var(--accent-light); color: var(--accent); }

/* opciones del menú desplegado */
.menu-item {
  padding: .6rem .9rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-align: left;
}
.menu-item:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-light);
}

.menu-pieces { text-align: center; }

.menu-shape {
  display: flex;
  align-items: center;
  gap: .5rem;
  cursor: default;
}
.menu-shape:hover {
  color: var(--text-secondary);
  border-color: transparent;
  background: var(--bg-secondary);
}

#shape {
  font-family: var(--font-sans);
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-primary);
  height: auto;
  width: auto;
  padding: .3rem .55rem;
  border: 1px solid var(--border);
  border-radius: 100px;
  background: var(--bg-primary);
  cursor: pointer;
}
#shape option { font-size: 14px; }

/* ===== Control de zoom (independiente del #menu, no interfiere con script.js) ===== */
.zoom-control {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: 100px;
  box-shadow: var(--shadow);
  padding: 6px 8px;
  font-family: var(--font-sans);
}
.zoom-control button {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s, color .18s;
}
.zoom-control button:hover { background: var(--accent-light); color: var(--accent); }
.zoom-control button:disabled { opacity: .4; cursor: default; background: var(--bg-secondary); color: var(--text-secondary); }
#zoomLabel {
  min-width: 40px;
  text-align: center;
  font-size: .82rem;
  font-weight: 700;
  color: var(--text-secondary);
}

@media (max-width: 560px) {
  #menu { top: 10px; left: 10px; max-width: 200px; }
  .brand-corner { top: 10px; right: 10px; padding: .35rem .8rem .35rem .35rem; font-size: .82rem; }
  .brand-corner .dot { width: 26px; height: 26px; font-size: .9rem; }
  .menu-item { font-size: .8rem; padding: .5rem .8rem; }
}